@scarlett-player/embed 1.2.0 → 1.4.0

package/dist/embed.js

@@ -148,6 +148,7 @@ class StateManager {
   constructor(initialState) {
     this.signals = /* @__PURE__ */ new Map();
     this.changeSubscribers = /* @__PURE__ */ new Set();
+    this.definedDefaults = /* @__PURE__ */ new Map();
     this.initializeSignals(initialState);
   }
   /**
@@ -157,13 +158,51 @@ class StateManager {
   initializeSignals(overrides) {
     const initialState = { ...DEFAULT_STATE, ...overrides };
     for (const [key, value] of Object.entries(initialState)) {
-      const stateKey = key;
-      const stateSignal = signal(value);
-      stateSignal.subscribe(() => {
-        this.notifyChangeSubscribers(stateKey);
-      });
-      this.signals.set(stateKey, stateSignal);
+      this.createSignal(key, value);
+    }
+  }
+  /**
+   * Create and register a signal, wired to the global change subscribers.
+   *
+   * Shared by initializeSignals() and define() so a plugin-defined key behaves
+   * exactly like a built-in one and the two paths cannot drift apart.
+   *
+   * @private
+   */
+  createSignal(key, value) {
+    const stateSignal = signal(value);
+    stateSignal.subscribe(() => {
+      this.notifyChangeSubscribers(key);
+    });
+    this.signals.set(key, stateSignal);
+  }
+  /**
+   * Register a state key at runtime, for state a plugin owns.
+   *
+   * Core cannot know every plugin's keys, and {@link get} deliberately throws
+   * for unregistered ones — that throw is a useful typo-catcher and is worth
+   * keeping — so a plugin declares its keys before first use.
+   *
+   * Idempotent by design: re-defining an existing key leaves the current value
+   * untouched. Plugins commonly re-run setup after a source change, and that
+   * must not reset state that is already live.
+   *
+   * Namespace plugin keys with the plugin's own name to avoid collisions.
+   *
+   * @param key - State property key
+   * @param initialValue - Value used only when the key is new
+   *
+   * @example
+   * ```ts
+   * state.define('highlightSelection', null);
+   * ```
+   */
+  define(key, initialValue) {
+    if (this.signals.has(key)) {
+      return;
     }
+    this.definedDefaults.set(key, initialValue);
+    this.createSignal(key, initialValue);
   }
   /**
    * Get the signal for a state property.
@@ -307,7 +346,10 @@ class StateManager {
    * ```
    */
   reset() {
-    this.update(DEFAULT_STATE);
+    this.update({
+      ...DEFAULT_STATE,
+      ...Object.fromEntries(this.definedDefaults)
+    });
   }
   /**
    * Reset a specific state property to its default value.
@@ -320,7 +362,7 @@ class StateManager {
    * ```
    */
   resetKey(key) {
-    const defaultValue = DEFAULT_STATE[key];
+    const defaultValue = key in DEFAULT_STATE ? DEFAULT_STATE[key] : this.definedDefaults.get(key);
     this.set(key, defaultValue);
   }
   /**
@@ -1214,6 +1256,18 @@ class PluginAPI {
   setState(key, value) {
     this.stateManager.set(key, value);
   }
+  /**
+   * Register a state key this plugin owns, before first use.
+   *
+   * Idempotent — re-defining an existing key keeps its current value.
+   * See {@link IPluginAPI.defineState}.
+   *
+   * @param key - State property key
+   * @param initialValue - Value used only when the key is new
+   */
+  defineState(key, initialValue) {
+    this.stateManager.define(key, initialValue);
+  }
   /**
    * Subscribe to an event.
    *
@@ -5968,6 +6022,17 @@ var BandwidthIndicator = class {
     this.el.remove();
   }
 };
+var registry = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Set();
+function getControlFactory(id) {
+  return registry.get(id) ?? null;
+}
+function onControlRegistered(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
 var DEFAULT_LAYOUT = [
   "play",
   "skip-backward",
@@ -5996,6 +6061,7 @@ function uiPlugin(config = {}) {
   let controls = [];
   let hideTimeout = null;
   let stateUnsubscribe = null;
+  let controlRegistryUnsubscribe = null;
   let errorUnsubscribe = null;
   let reconnectingUnsubscribe = null;
   let recoveredUnsubscribe = null;
@@ -6037,10 +6103,43 @@ function uiPlugin(config = {}) {
         return new FullscreenButton(api);
       case "spacer":
         return new Spacer();
-      default:
+      default: {
+        const factory = getControlFactory(slot);
+        if (factory) {
+          try {
+            return factory(api);
+          } catch (error) {
+            api.logger.error(`Control factory for "${slot}" threw`, { error });
+            return null;
+          }
+        }
+        api.logger.warn(`Unknown control slot: ${slot}`);
         return null;
+      }
     }
   };
+  const populateControlBar = () => {
+    if (!controlBar) {
+      return;
+    }
+    for (const slot of layout) {
+      const control = createControl(slot);
+      if (control) {
+        controls.push(control);
+        controlBar.appendChild(control.render());
+      }
+    }
+  };
+  const rebuildControlBar = () => {
+    if (!controlBar) {
+      return;
+    }
+    controls.forEach((c) => c.destroy());
+    controls = [];
+    controlBar.replaceChildren();
+    populateControlBar();
+    updateControls();
+  };
   const updateControls = () => {
     controls.forEach((c) => c.update());
     progressBar?.update();
@@ -6213,14 +6312,15 @@ function uiPlugin(config = {}) {
       controlBar.className = isPlaying ? "sp-controls sp-controls--hidden" : "sp-controls sp-controls--visible";
       controlBar.setAttribute("role", "toolbar");
       controlBar.setAttribute("aria-label", "Video controls");
-      for (const slot of layout) {
-        const control = createControl(slot);
-        if (control) {
-          controls.push(control);
-          controlBar.appendChild(control.render());
-        }
-      }
+      populateControlBar();
       container.appendChild(controlBar);
+      controlRegistryUnsubscribe = onControlRegistered((id) => {
+        if (!layout.includes(id)) {
+          return;
+        }
+        api.logger.debug(`Control "${id}" registered after init, rebuilding control bar`);
+        rebuildControlBar();
+      });
       container.addEventListener("mousemove", handleInteraction);
       container.addEventListener("mouseenter", handleInteraction);
       container.addEventListener("mouseleave", handleMouseLeave);
@@ -6266,6 +6366,8 @@ function uiPlugin(config = {}) {
       }
       document.removeEventListener("keydown", handleKeyDown);
       document.removeEventListener("fullscreenchange", scheduleUpdate);
+      controlRegistryUnsubscribe?.();
+      controlRegistryUnsubscribe = null;
       controls.forEach((c) => c.destroy());
       controls = [];
       progressBar?.destroy();
@@ -8464,10 +8566,18 @@ function createWatermarkPlugin(config = {}) {
     }
   };
 }
+var HLS_SUBTITLE_TRACKS_UPDATED = "hlsSubtitleTracksUpdated";
+var HLS_INSTANCE_RETRY_MS = 500;
 function createCaptionsPlugin(config = {}) {
   let api = null;
   let video = null;
   let addedTrackElements = [];
+  let hlsTrackElements = [];
+  let hlsSubtitleHandler = null;
+  let observedTextTracks = null;
+  let hlsRetryTimer = null;
+  let hlsRetryUsed = false;
+  let hasAutoSelected = false;
   const extractFromHLS = config.extractFromHLS !== false;
   const autoSelect = config.autoSelect ?? false;
   const defaultLanguage = config.defaultLanguage ?? "en";
@@ -8481,10 +8591,18 @@ function createCaptionsPlugin(config = {}) {
       trackEl.parentNode?.removeChild(trackEl);
     }
     addedTrackElements = [];
+    hlsTrackElements = [];
     api?.setState("textTracks", []);
     api?.setState("currentTextTrack", null);
   };
-  const addTrackElement = (source) => {
+  const removeHlsTrackElements = () => {
+    for (const trackEl of hlsTrackElements) {
+      trackEl.parentNode?.removeChild(trackEl);
+      addedTrackElements = addedTrackElements.filter((el) => el !== trackEl);
+    }
+    hlsTrackElements = [];
+  };
+  const addTrackElement = (source, origin = "config") => {
     const videoEl = getVideo2();
     if (!videoEl) throw new Error("No video element");
     const trackEl = document.createElement("track");
@@ -8495,6 +8613,9 @@ function createCaptionsPlugin(config = {}) {
     trackEl.default = false;
     videoEl.appendChild(trackEl);
     addedTrackElements.push(trackEl);
+    if (origin === "hls") {
+      hlsTrackElements.push(trackEl);
+    }
     if (trackEl.track) {
       trackEl.track.mode = "disabled";
     }
@@ -8526,6 +8647,7 @@ function createCaptionsPlugin(config = {}) {
   const selectTrack = (trackId) => {
     const videoEl = getVideo2();
     if (!videoEl) return;
+    hasAutoSelected = true;
     for (let i = 0; i < videoEl.textTracks.length; i++) {
       const track = videoEl.textTracks[i];
       if (track.kind !== "subtitles" && track.kind !== "captions") continue;
@@ -8538,6 +8660,43 @@ function createCaptionsPlugin(config = {}) {
     }
     syncTracksToState();
   };
+  const maybeAutoSelect = () => {
+    if (!autoSelect || hasAutoSelected) return;
+    if (api?.getState("currentTextTrack")) {
+      hasAutoSelected = true;
+      return;
+    }
+    const tracks = api?.getState("textTracks") || [];
+    const match = tracks.find((t) => t.language === defaultLanguage);
+    if (!match) return;
+    selectTrack(match.id);
+    api?.logger.debug("Auto-selected caption track", { language: defaultLanguage, id: match.id });
+  };
+  const handleTextTracksChanged = () => {
+    syncTracksToState();
+    maybeAutoSelect();
+  };
+  const observeTextTracks = () => {
+    const videoEl = getVideo2();
+    if (!videoEl || observedTextTracks === videoEl.textTracks) return;
+    unobserveTextTracks();
+    const list = videoEl.textTracks;
+    if (typeof list?.addEventListener !== "function") return;
+    observedTextTracks = list;
+    observedTextTracks.addEventListener("addtrack", handleTextTracksChanged);
+    observedTextTracks.addEventListener("removetrack", handleTextTracksChanged);
+    observedTextTracks.addEventListener("change", handleTextTracksChanged);
+  };
+  const unobserveTextTracks = () => {
+    if (typeof observedTextTracks?.removeEventListener !== "function") {
+      observedTextTracks = null;
+      return;
+    }
+    observedTextTracks.removeEventListener("addtrack", handleTextTracksChanged);
+    observedTextTracks.removeEventListener("removetrack", handleTextTracksChanged);
+    observedTextTracks.removeEventListener("change", handleTextTracksChanged);
+    observedTextTracks = null;
+  };
   const extractHlsSubtitles = () => {
     if (!extractFromHLS || !api) return;
     const hlsPlugin = api.getPlugin("hls-provider");
@@ -8547,35 +8706,55 @@ function createCaptionsPlugin(config = {}) {
     api.logger.debug("Extracting HLS subtitle tracks", {
       count: hlsInstance.subtitleTracks.length
     });
+    removeHlsTrackElements();
     for (const hlsTrack of hlsInstance.subtitleTracks) {
-      addTrackElement({
-        language: hlsTrack.lang || "unknown",
-        label: hlsTrack.name || `Subtitle ${hlsTrack.id}`,
-        src: hlsTrack.url,
-        kind: "subtitles"
-      });
+      addTrackElement(
+        {
+          language: hlsTrack.lang || "unknown",
+          label: hlsTrack.name || `Subtitle ${hlsTrack.id}`,
+          src: hlsTrack.url,
+          kind: "subtitles"
+        },
+        "hls"
+      );
     }
     syncTracksToState();
-    if (autoSelect) {
-      autoSelectTrack();
-    }
+    maybeAutoSelect();
   };
-  const autoSelectTrack = () => {
-    const tracks = api?.getState("textTracks") || [];
-    const match = tracks.find((t) => t.language === defaultLanguage);
-    if (match) {
-      selectTrack(match.id);
-      api?.logger.debug("Auto-selected caption track", { language: defaultLanguage, id: match.id });
+  const unsubscribeFromHls = () => {
+    if (hlsRetryTimer) {
+      clearTimeout(hlsRetryTimer);
+      hlsRetryTimer = null;
+    }
+    if (!hlsSubtitleHandler) return;
+    const hlsInstance = api?.getPlugin("hls-provider")?.getHlsInstance();
+    hlsInstance?.off(HLS_SUBTITLE_TRACKS_UPDATED, hlsSubtitleHandler);
+    hlsSubtitleHandler = null;
+  };
+  const syncFromHls = () => {
+    if (!extractFromHLS || !api) return;
+    const hlsPlugin = api.getPlugin("hls-provider");
+    if (!hlsPlugin || hlsPlugin.isNativeHLS()) return;
+    const hlsInstance = hlsPlugin.getHlsInstance();
+    if (!hlsInstance) {
+      if (!hlsRetryUsed) {
+        hlsRetryUsed = true;
+        hlsRetryTimer = setTimeout(() => {
+          hlsRetryTimer = null;
+          syncFromHls();
+        }, HLS_INSTANCE_RETRY_MS);
+      }
+      return;
     }
+    unsubscribeFromHls();
+    hlsSubtitleHandler = () => extractHlsSubtitles();
+    hlsInstance.on(HLS_SUBTITLE_TRACKS_UPDATED, hlsSubtitleHandler);
+    extractHlsSubtitles();
   };
   const initSources = () => {
     if (!config.sources?.length) return;
     for (const source of config.sources) {
-      addTrackElement(source);
-    }
-    syncTracksToState();
-    if (autoSelect) {
-      autoSelectTrack();
+      addTrackElement(source, "config");
     }
   };
   return {
@@ -8594,25 +8773,36 @@ function createCaptionsPlugin(config = {}) {
       });
       const unsubLoaded = api.on("media:loaded", () => {
         video = null;
+        hasAutoSelected = false;
+        hlsRetryUsed = false;
         cleanupTracks();
         initSources();
-        if (extractFromHLS) {
-          setTimeout(extractHlsSubtitles, 500);
-        }
+        observeTextTracks();
+        syncTracksToState();
+        maybeAutoSelect();
+        syncFromHls();
       });
       const unsubLoadRequest = api.on("media:load-request", () => {
         video = null;
+        hasAutoSelected = false;
+        hlsRetryUsed = false;
+        unsubscribeFromHls();
+        unobserveTextTracks();
         cleanupTracks();
       });
       api.onDestroy(() => {
         unsubTrackText();
         unsubLoaded();
         unsubLoadRequest();
+        unsubscribeFromHls();
+        unobserveTextTracks();
         cleanupTracks();
       });
     },
     destroy() {
       api?.logger.debug("Captions plugin destroyed");
+      unsubscribeFromHls();
+      unobserveTextTracks();
       cleanupTracks();
       video = null;
       api = null;