Zum Inhalt

src/player/ControlsOverlay.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
// src/player/ControlsOverlay.ts
import type { ControlsMode } from './types';

export interface ControlsHandlers {
  onPlayPause: () => void;
  onPrev: () => void;
  onNext: () => void;
  onFullscreen: () => void;
}

/** Plain-DOM control bar for the player. Lives inside the element's shadow
 *  root; styling is provided by the host's shadow stylesheet. */
export class ControlsOverlay {
  readonly root: HTMLDivElement;
  private readonly playBtn: HTMLButtonElement;
  private readonly prevBtn: HTMLButtonElement;
  private readonly nextBtn: HTMLButtonElement;

  constructor(doc: Document, mode: ControlsMode, hasPlaylist: boolean, h: ControlsHandlers) {
    const root = doc.createElement('div');
    root.className = `phys-controls phys-controls--${mode}`;

    this.prevBtn = this.button(doc, '‹', 'Previous preset', h.onPrev);
    this.playBtn = this.button(doc, '⏸', 'Play / pause', h.onPlayPause);
    this.nextBtn = this.button(doc, '›', 'Next preset', h.onNext);
    const fsBtn = this.button(doc, '⛶', 'Fullscreen', h.onFullscreen);
    // Only offer fullscreen where it's actually available. Inside an <iframe> embed this is false
    // unless the host page granted `allow="fullscreen"`, so the button self-hides instead of being a
    // dead control whose requestFullscreen() is silently rejected.
    fsBtn.hidden = !doc.fullscreenEnabled;

    this.prevBtn.hidden = !hasPlaylist;
    this.nextBtn.hidden = !hasPlaylist;

    root.append(this.prevBtn, this.playBtn, this.nextBtn, fsBtn);
    this.root = root;
  }

  private button(
    doc: Document,
    label: string,
    aria: string,
    onClick: () => void,
  ): HTMLButtonElement {
    const b = doc.createElement('button');
    b.type = 'button';
    b.textContent = label;
    b.setAttribute('aria-label', aria);
    b.addEventListener('click', (e) => {
      e.stopPropagation();
      onClick();
    });
    return b;
  }

  setPaused(paused: boolean): void {
    this.playBtn.textContent = paused ? '▶' : '⏸';
  }
}