@scarlett-player/ui 1.8.0 → 1.9.0

package/README.md

@@ -108,6 +108,24 @@ that, the Speed sub-panel is 253px tall against a 211px portrait phone player
 and loses its Back header and its first three speeds to the host's
 `overflow: hidden`.
 
+## Layout
+
+`controls` is the order of slots in the bar. The default is:
+
+```typescript
+uiPlugin({
+  controls: [
+    'play', 'skip-backward', 'skip-forward', 'volume', 'time',
+    'live-indicator', 'bandwidth-indicator', 'spacer', 'settings',
+    'captions', 'chromecast', 'airplay', 'pip', 'fullscreen',
+  ],
+});
+```
+
+Any id a plugin registers through the control registry (`share`, `chapters`,
+`playlist-previous`, `playlist-next`, ...) can be placed in the same list. A
+control whose plugin is not loaded is skipped.
+
 ## Keyboard Shortcuts
 
 | Key | Action |

package/dist/index.cjs

@@ -33,7 +33,8 @@ __export(index_exports, {
   resolveFitItems: () => resolveFitItems,
   styles: () => styles,
   uiPlugin: () => uiPlugin,
-  unregisterControl: () => unregisterControl
+  unregisterControl: () => unregisterControl,
+  unregisterControlsFor: () => unregisterControlsFor
 });
 module.exports = __toCommonJS(index_exports);
 var import_core2 = require("@scarlett-player/core");
@@ -123,6 +124,10 @@ var styles = `
    ============================================ */
 .sp-container {
   position: relative;
+  /* Own stacking context: the control bar, menus and overlays all carry
+     z-index, and without this they compete with the host page's own layers
+     instead of staying inside the player. */
+  isolation: isolate;
   width: 100%;
   height: 100%;
   background: #000;
@@ -244,11 +249,13 @@ var styles = `
   cursor: pointer;
   z-index: 10;
   opacity: 0;
+  pointer-events: none;
   transition: opacity 0.25s ease;
 }
 
 .sp-progress-wrapper--visible {
   opacity: 1;
+  pointer-events: auto;
 }
 
 /* Touch: a 20px wrapper is not a 20px target. The control bar is a later
@@ -1371,7 +1378,7 @@ var BigPlayButton = class {
    *   must not sit on top of it, and `error` state alone does not say (a
    *   dismissed overlay leaves the error behind)
    */
-  constructor(api, isOverlayVisible = () => false) {
+  constructor(api, isOverlayVisible) {
     /**
      * Latched on the first `playing`.
      *
@@ -1385,7 +1392,8 @@ var BigPlayButton = class {
       this.start();
     };
     this.api = api;
-    this.isOverlayVisible = isOverlayVisible;
+    this.hasOverlayProbe = typeof isOverlayVisible === "function";
+    this.isOverlayVisible = isOverlayVisible ?? (() => false);
     const btn = document.createElement("button");
     btn.className = "sp-big-play";
     btn.setAttribute("type", "button");
@@ -1414,7 +1422,7 @@ var BigPlayButton = class {
       this.hasStarted = true;
     }
     let visible;
-    if (error || this.isOverlayVisible()) {
+    if (this.hasOverlayProbe ? this.isOverlayVisible() : Boolean(error)) {
       visible = false;
     } else if (playbackState === "loading") {
       visible = false;
@@ -1840,15 +1848,17 @@ var ProgressBar = class {
     const seekableRange = this.api.getState("seekableRange");
     if (live && seekableRange) {
       const rangeLength = seekableRange.end - seekableRange.start;
-      return seekableRange.start + percent * rangeLength;
+      const time2 = seekableRange.start + percent * rangeLength;
+      return Number.isFinite(time2) ? time2 : null;
     }
     const duration = this.api.getState("duration") || 0;
-    return percent * duration;
+    const time = percent * duration;
+    return Number.isFinite(time) ? time : null;
   }
   updateTooltip(clientX) {
     const rect = this.el.getBoundingClientRect();
     const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
-    const time = this.getTimeFromPosition(clientX);
+    const time = this.getTimeFromPosition(clientX) ?? 0;
     const live = this.api.getState("live");
     const seekableRange = this.api.getState("seekableRange");
     if (live && seekableRange) {
@@ -1883,7 +1893,9 @@ var ProgressBar = class {
     }
     this.lastSeekTime = now;
     const time = this.getTimeFromPosition(clientX);
-    video.currentTime = time;
+    if (time !== null && Number.isFinite(time)) {
+      video.currentTime = time;
+    }
   }
   destroy() {
     this.wrapper.removeEventListener("mousedown", this.onMouseDown);
@@ -2114,11 +2126,9 @@ var LiveIndicator = class {
     }
   }
   seekToLive() {
-    const video = getVideo(this.api.container);
-    if (!video) return;
     const seekableRange = this.api.getState("seekableRange");
     if (seekableRange) {
-      video.currentTime = seekableRange.end;
+      this.api.emit("playback:seeking", { time: seekableRange.end });
     }
   }
   destroy() {
@@ -2164,6 +2174,9 @@ var QualityMenu = class {
     const qualities = this.api.getState("qualities") || [];
     const currentQuality = this.api.getState("currentQuality");
     this.el.style.display = qualities.length > 0 ? "" : "none";
+    if (qualities.length === 0 && this.isOpen) {
+      this.close();
+    }
     this.btnLabel.textContent = currentQuality?.label || "Auto";
     const qualitiesJson = JSON.stringify(qualities.map((q) => q.id));
     const currentId = currentQuality?.id || "auto";
@@ -2228,6 +2241,16 @@ var QualityMenu = class {
     this.menu.classList.remove("sp-quality-menu--open");
     this.btn.setAttribute("aria-expanded", "false");
   }
+  /**
+   * Whether the dropdown is open.
+   *
+   * Read by the UI plugin so the control bar's auto-hide waits for it.
+   *
+   * @returns True while the menu is showing
+   */
+  isMenuOpen() {
+    return this.isOpen;
+  }
   destroy() {
     document.removeEventListener("click", this.closeHandler);
     this.el.remove();
@@ -2652,7 +2675,7 @@ var SettingsMenu = class {
     this.el.appendChild(this.panel);
     this.closeHandler = (e) => {
       if (!this.el.contains(e.target)) {
-        this.close();
+        this.close(false);
       }
     };
     document.addEventListener("click", this.closeHandler);
@@ -2665,7 +2688,6 @@ var SettingsMenu = class {
           this.showPanel("main");
         } else {
           this.close();
-          this.btn.focus();
         }
         return;
       }
@@ -2702,6 +2724,8 @@ var SettingsMenu = class {
         this.updateSpeedActiveStates();
       } else if (this.currentPanel === "captions") {
         this.updateCaptionsActiveStates();
+      } else if (this.currentPanel === "audio") {
+        this.updateAudioActiveStates();
       }
     }
   }
@@ -2716,11 +2740,25 @@ var SettingsMenu = class {
     this.btn.setAttribute("aria-expanded", "true");
     this.focusFirstItem();
   }
-  close() {
+  /**
+   * Close the panel.
+   *
+   * Choosing an item tears down the row that had focus, which drops focus to
+   * `<body>` and strands keyboard viewers outside the player entirely. Hand it
+   * back to the button that opened the menu instead.
+   *
+   * @param restoreFocus - Return focus to the gear button. The outside-click
+   *   handler passes false, so a click elsewhere is not pulled back into the bar.
+   */
+  close(restoreFocus = true) {
+    const wasOpen = this.isOpen;
     this.isOpen = false;
     this.currentPanel = "main";
     this.panel.classList.remove("sp-settings-panel--open");
     this.btn.setAttribute("aria-expanded", "false");
+    if (wasOpen && restoreFocus) {
+      this.btn.focus();
+    }
   }
   showPanel(panel) {
     this.currentPanel = panel;
@@ -2737,6 +2775,9 @@ var SettingsMenu = class {
       case "captions":
         this.renderCaptionsPanel();
         break;
+      case "audio":
+        this.renderAudioPanel();
+        break;
     }
     this.focusFirstItem();
   }
@@ -2765,6 +2806,16 @@ var SettingsMenu = class {
       );
       this.panel.appendChild(captionsRow);
     }
+    const audioTracks = this.api.getState("audioTracks") || [];
+    if (audioTracks.length > 1) {
+      const currentAudioTrack = this.api.getState("currentAudioTrack");
+      const audioRow = this.createMainRow(
+        "Audio",
+        currentAudioTrack?.label || "Default",
+        () => this.showPanel("audio")
+      );
+      this.panel.appendChild(audioRow);
+    }
     const speedLabel = playbackRate === 1 ? "Normal" : `${playbackRate}x`;
     const speedRow = this.createMainRow(
       "Speed",
@@ -2865,6 +2916,36 @@ var SettingsMenu = class {
       this.panel.appendChild(item);
     }
   }
+  renderAudioPanel() {
+    this.panel.innerHTML = "";
+    this.panel.className = "sp-settings-panel sp-settings-panel--open sp-settings-panel--sub";
+    const header = this.createSubHeader("Audio");
+    this.panel.appendChild(header);
+    const audioTracks = this.api.getState("audioTracks") || [];
+    const currentAudioTrack = this.api.getState("currentAudioTrack");
+    const activeId = currentAudioTrack?.id ?? null;
+    for (const track of audioTracks) {
+      const item = this.createMenuItem(track.label, track.id, track.id === activeId);
+      item.addEventListener("click", (e) => {
+        e.preventDefault();
+        this.selectAudioTrack(track.id);
+      });
+      this.panel.appendChild(item);
+    }
+  }
+  selectAudioTrack(trackId) {
+    this.api.emit("track:audio", { trackId });
+    this.close();
+  }
+  updateAudioActiveStates() {
+    const currentAudioTrack = this.api.getState("currentAudioTrack");
+    const activeId = currentAudioTrack?.id ?? null;
+    const items = this.panel.querySelectorAll(".sp-settings-panel__item");
+    items.forEach((item) => {
+      const id = item.getAttribute("data-id");
+      item.classList.toggle("sp-settings-panel__item--active", id === activeId);
+    });
+  }
   selectCaption(trackId) {
     this.api.emit("track:text", { trackId });
     this.close();
@@ -3254,6 +3335,17 @@ var OverflowTray = class {
     this.panel.classList.remove("sp-overflow-tray--open");
     this.btn.setAttribute("aria-expanded", "false");
   }
+  /**
+   * Whether the strip is open.
+   *
+   * Read by the UI plugin so the control bar's auto-hide waits for it: hiding
+   * the bar would take the open tray with it, mid-use.
+   *
+   * @returns True while the strip is showing
+   */
+  isMenuOpen() {
+    return this.isOpen;
+  }
   /**
    * Show the button only while the tray holds something the viewer can see.
    *
@@ -3293,19 +3385,53 @@ var OverflowTray = class {
 };
 
 // src/control-registry.ts
-var registry = /* @__PURE__ */ new Map();
+var globalRegistry = /* @__PURE__ */ new Map();
+var scopedRegistries = /* @__PURE__ */ new Map();
 var listeners = /* @__PURE__ */ new Set();
-function registerControl(id, factory) {
-  registry.set(id, factory);
+function registerControl(id, factory, options = {}) {
+  const { owner } = options;
+  if (owner) {
+    let scoped = scopedRegistries.get(owner);
+    if (!scoped) {
+      scoped = /* @__PURE__ */ new Map();
+      scopedRegistries.set(owner, scoped);
+    }
+    scoped.set(id, factory);
+  } else {
+    globalRegistry.set(id, factory);
+  }
   for (const listener of listeners) {
-    listener(id);
+    listener(id, owner);
   }
 }
-function unregisterControl(id) {
-  return registry.delete(id);
+function unregisterControl(id, options = {}) {
+  const { owner } = options;
+  if (!owner) {
+    return globalRegistry.delete(id);
+  }
+  const scoped = scopedRegistries.get(owner);
+  if (!scoped) {
+    return false;
+  }
+  const removed = scoped.delete(id);
+  if (scoped.size === 0) {
+    scopedRegistries.delete(owner);
+  }
+  return removed;
+}
+function unregisterControlsFor(owner) {
+  const removed = scopedRegistries.get(owner)?.size ?? 0;
+  scopedRegistries.delete(owner);
+  return removed;
 }
-function getControlFactory(id) {
-  return registry.get(id) ?? null;
+function getControlFactory(id, owner) {
+  if (owner) {
+    const scoped = scopedRegistries.get(owner)?.get(id);
+    if (scoped) {
+      return scoped;
+    }
+  }
+  return globalRegistry.get(id) ?? null;
 }
 function onControlRegistered(listener) {
   listeners.add(listener);
@@ -3314,12 +3440,13 @@ function onControlRegistered(listener) {
   };
 }
 function resetControlRegistry() {
-  registry.clear();
+  globalRegistry.clear();
+  scopedRegistries.clear();
   listeners.clear();
 }
 
 // src/version.ts
-var PKG_VERSION = true ? "1.7.1" : "0.0.0-dev";
+var PKG_VERSION = true ? "1.9.0" : "0.0.0-dev";
 
 // src/index.ts
 var DEFAULT_LAYOUT = [
@@ -3338,7 +3465,19 @@ var DEFAULT_LAYOUT = [
   "pip",
   "fullscreen"
 ];
+var STYLE_ID = "sp-ui-styles";
 var DEFAULT_HIDE_DELAY = 3e3;
+var ACTIVATION_KEYS = /* @__PURE__ */ new Set([" ", "Enter"]);
+var SLIDER_KEYS = /* @__PURE__ */ new Set([
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "ArrowDown",
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown"
+]);
 var UNMEASURED_CONTROL_WIDTH = 48;
 var FALLBACK_VOLUME_SLIDER_WIDTH = 64;
 var OVERFLOW_BUTTON_WIDTH = 44;
@@ -3355,7 +3494,7 @@ function uiPlugin(config = {}) {
   let bufferingIndicator = null;
   let errorOverlay = null;
   let bigPlayButton = null;
-  let styleEl = null;
+  let releaseStyles = null;
   let controls = [];
   let hideTimeout = null;
   let stateUnsubscribe = null;
@@ -3363,6 +3502,7 @@ function uiPlugin(config = {}) {
   let errorUnsubscribe = null;
   let reconnectingUnsubscribe = null;
   let recoveredUnsubscribe = null;
+  let loadedUnsubscribe = null;
   let controlsVisible = true;
   let rafHandle = null;
   let tray = null;
@@ -3374,6 +3514,7 @@ function uiPlugin(config = {}) {
   let volumeSliderWidth = FALLBACK_VOLUME_SLIDER_WIDTH;
   let lastFitSignature = null;
   let fitPending = true;
+  let addedContainerClass = false;
   const layout = config.controls || DEFAULT_LAYOUT;
   const hideDelay = config.hideDelay ?? DEFAULT_HIDE_DELAY;
   const showBigPlayButton = config.bigPlayButton !== false;
@@ -3416,7 +3557,7 @@ function uiPlugin(config = {}) {
       case "spacer":
         return new Spacer();
       default: {
-        const factory = getControlFactory(slot);
+        const factory = getControlFactory(slot, api.container);
         if (factory) {
           try {
             return factory(api);
@@ -3643,6 +3784,10 @@ function uiPlugin(config = {}) {
       updateControls();
     });
   };
+  const hasOpenMenu = () => controls.some((control) => {
+    const menu = control;
+    return typeof menu.isMenuOpen === "function" && menu.isMenuOpen();
+  });
   const showControls = () => {
     if (controlsVisible) {
       resetHideTimer();
@@ -3659,6 +3804,10 @@ function uiPlugin(config = {}) {
   const hideControls = () => {
     const paused = api?.getState("paused");
     if (paused) return;
+    if (hasOpenMenu()) {
+      resetHideTimer();
+      return;
+    }
     controlsVisible = false;
     controlBar?.classList.remove("sp-controls--visible");
     controlBar?.classList.add("sp-controls--hidden");
@@ -3676,22 +3825,33 @@ function uiPlugin(config = {}) {
   const handlePointerActivity = (event) => {
     last_pointer_type = event.pointerType;
   };
-  const handleInteraction = () => {
-    if (last_pointer_type === "touch") {
+  const handleInteraction = (event) => {
+    if (last_pointer_type === "touch" && !isOnControls(event)) {
       const gestures = api?.getPlugin("gestures");
       if (gestures?.ownsTapInteraction()) return;
     }
     showControls();
   };
+  const isOnControls = (event) => {
+    const target = event?.target;
+    if (!(target instanceof Node)) return false;
+    return Boolean(controlBar?.contains(target)) || Boolean(progressBar?.render().contains(target));
+  };
   const handleMouseLeave = () => {
     hideControls();
   };
   const handleKeyDown = (e) => {
     if (!api.container.contains(document.activeElement)) return;
+    if (e.defaultPrevented) return;
+    if (e.metaKey || e.ctrlKey || e.altKey) return;
     const activeEl = document.activeElement;
     if (activeEl instanceof HTMLInputElement || activeEl instanceof HTMLTextAreaElement || activeEl instanceof HTMLSelectElement || activeEl?.isContentEditable) {
       return;
     }
+    const role = activeEl?.getAttribute("role");
+    const isActivatable = activeEl instanceof HTMLButtonElement || role === "button" || role === "menuitem";
+    if (isActivatable && ACTIVATION_KEYS.has(e.key)) return;
+    if (role === "slider" && SLIDER_KEYS.has(e.key)) return;
     const video = api.container.querySelector("video");
     if (!video) return;
     const live = api.getState("live");
@@ -3758,9 +3918,7 @@ function uiPlugin(config = {}) {
     version: PKG_VERSION,
     async init(pluginApi) {
       api = pluginApi;
-      styleEl = document.createElement("style");
-      styleEl.textContent = styles;
-      document.head.appendChild(styleEl);
+      releaseStyles = (0, import_core2.injectSharedStyles)(STYLE_ID, styles);
       if (config.theme) {
         this.setTheme(config.theme);
       }
@@ -3773,6 +3931,10 @@ function uiPlugin(config = {}) {
       if (containerStyle.position === "static") {
         container.style.position = "relative";
       }
+      if (!container.classList.contains("sp-container")) {
+        container.classList.add("sp-container");
+        addedContainerClass = true;
+      }
       const isPlaying = api.getState("playing");
       gradient = document.createElement("div");
       gradient.className = isPlaying ? "sp-gradient" : "sp-gradient sp-gradient--visible";
@@ -3788,13 +3950,20 @@ function uiPlugin(config = {}) {
         if (payload?.fatal) {
           const error = api.getState("error") || payload;
           errorOverlay?.show(error);
+          scheduleUpdate();
         }
       });
       reconnectingUnsubscribe = api.on("error:reconnecting", () => {
         errorOverlay?.showReconnecting();
+        scheduleUpdate();
       });
       recoveredUnsubscribe = api.on("error:recovered", () => {
         errorOverlay?.hide();
+        scheduleUpdate();
+      });
+      loadedUnsubscribe = api.on("media:loaded", () => {
+        errorOverlay?.hide();
+        scheduleUpdate();
       });
       if (showBigPlayButton) {
         bigPlayButton = new BigPlayButton(api, () => errorOverlay?.isVisible() ?? false);
@@ -3819,10 +3988,13 @@ function uiPlugin(config = {}) {
         });
         resizeObserver.observe(container);
       }
-      controlRegistryUnsubscribe = onControlRegistered((id) => {
+      controlRegistryUnsubscribe = onControlRegistered((id, owner) => {
         if (!layout.includes(id)) {
           return;
         }
+        if (owner && owner !== api.container) {
+          return;
+        }
         api.logger.debug(`Control "${id}" registered after init, rebuilding control bar`);
         rebuildControlBar();
       });
@@ -3866,6 +4038,8 @@ function uiPlugin(config = {}) {
       reconnectingUnsubscribe = null;
       recoveredUnsubscribe?.();
       recoveredUnsubscribe = null;
+      loadedUnsubscribe?.();
+      loadedUnsubscribe = null;
       if (api?.container) {
         api.container.removeEventListener("pointerdown", handlePointerActivity);
         api.container.removeEventListener("pointermove", handlePointerActivity);
@@ -3895,8 +4069,12 @@ function uiPlugin(config = {}) {
       gradient = null;
       bufferingIndicator?.remove();
       bufferingIndicator = null;
-      styleEl?.remove();
-      styleEl = null;
+      releaseStyles?.();
+      releaseStyles = null;
+      if (addedContainerClass) {
+        api?.container?.classList.remove("sp-container");
+        addedContainerClass = false;
+      }
       api?.logger.debug("UI controls plugin destroyed");
     },
     // Public API
@@ -3949,5 +4127,6 @@ var index_default = uiPlugin;
   resolveFitItems,
   styles,
   uiPlugin,
-  unregisterControl
+  unregisterControl,
+  unregisterControlsFor
 });