Function createControls

packages/player/src/controls.ts:49–403

(
  parent: ShadowRoot | HTMLElement,
  callbacks: ControlsCallbacks,
  options: ControlsOptions = {},
)

}

export function createControls(
  parent: ShadowRoot | HTMLElement,
  callbacks: ControlsCallbacks,
  options: ControlsOptions = {},
): {
  updateTime: (current: number, duration: number) => void;
  updatePlaying: (playing: boolean) => void;
  updateSpeed: (speed: number) => void;
  updateMuted: (muted: boolean) => void;
  updateVolume: (volume: number) => void;
  setVolumeControlsHidden: (hidden: boolean) => void;
  show: () => void;
  hide: () => void;
  destroy: () => void;
} {
  const presets = options.speedPresets ?? SPEED_PRESETS;

  const controls = document.createElement("div");
  controls.className = "hfp-controls";
  // Keep overlay interactions from falling through to the host-level click toggle.
  controls.addEventListener("click", (e) => {
    e.stopPropagation();
  });

  const playBtn = document.createElement("button");
  playBtn.className = "hfp-play-btn";
  playBtn.type = "button";
  // Both glyphs stay in the DOM, stacked; toggling `hfp-playing` crossfade-morphs
  // between them (see styles.ts) instead of swapping innerHTML, which would kill
  // the transition.
  playBtn.innerHTML = `<span class="hfp-ico hfp-ico-play">${PLAY_ICON}</span><span class="hfp-ico hfp-ico-pause">${PAUSE_ICON}</span>`;
  playBtn.setAttribute("aria-label", "Play");

  const scrubber = document.createElement("div");
  scrubber.className = "hfp-scrubber";
  const progress = document.createElement("div");
  progress.className = "hfp-progress";
  progress.style.width = "0%";
  scrubber.appendChild(progress);

  const time = document.createElement("span");
  time.className = "hfp-time";
  time.textContent = "0:00 / 0:00";

  const speedWrap = document.createElement("div");
  speedWrap.className = "hfp-speed-wrap";

  const speedBtn = document.createElement("button");
  speedBtn.className = "hfp-speed-btn";
  speedBtn.type = "button";
  speedBtn.textContent = "1x";
  speedBtn.setAttribute("aria-label", "Playback speed");

  const speedMenu = document.createElement("div");
  speedMenu.className = "hfp-speed-menu";
  speedMenu.setAttribute("role", "menu");
  for (const preset of presets) {
    const item = document.createElement("button");