@scarlett-player/embed 1.5.1 → 1.7.0

package/dist/embed.video.js

@@ -149,6 +149,7 @@ class StateManager {
     this.signals = /* @__PURE__ */ new Map();
     this.changeSubscribers = /* @__PURE__ */ new Set();
     this.definedDefaults = /* @__PURE__ */ new Map();
+    this.destroyed = false;
     this.initializeSignals(initialState);
   }
   /**
@@ -209,6 +210,7 @@ class StateManager {
    *
    * @param key - State property key
    * @returns Signal for the property
+   * @throws If the manager has been destroyed, or the key was never registered
    *
    * @example
    * ```ts
@@ -218,6 +220,9 @@ class StateManager {
    * ```
    */
   get(key) {
+    if (this.destroyed) {
+      throw new Error(`[StateManager] Manager is destroyed (reading '${key}')`);
+    }
     const stateSignal = this.signals.get(key);
     if (!stateSignal) {
       throw new Error(`[StateManager] Unknown state key: ${key}`);
@@ -229,6 +234,7 @@ class StateManager {
    *
    * @param key - State property key
    * @returns Current value
+   * @throws If the manager has been destroyed, or the key was never registered
    *
    * @example
    * ```ts
@@ -396,6 +402,11 @@ class StateManager {
   /**
    * Destroy the state manager and cleanup all signals.
    *
+   * After this, every read or write ({@link get}, {@link getValue},
+   * {@link set}) throws a destroyed-specific error. Returning last-known
+   * values instead was considered and rejected: it silently masks the
+   * lifecycle bugs this throw exposes.
+   *
    * @example
    * ```ts
    * state.destroy();
@@ -405,6 +416,7 @@ class StateManager {
     this.signals.forEach((stateSignal) => stateSignal.destroy());
     this.signals.clear();
     this.changeSubscribers.clear();
+    this.destroyed = true;
   }
 }
 const DEFAULT_OPTIONS = {
@@ -1629,6 +1641,7 @@ class ScarlettPlayer {
     this.eventBus.on("media:load-request", async ({ src, autoplay }) => {
       if (this.stateManager.getValue("chromecastActive")) return;
       await this.load(src);
+      if (this.destroyed) return;
       if (autoplay !== false) {
         await this.play();
       }
@@ -1637,12 +1650,14 @@ class ScarlettPlayer {
       const was_live = this.stateManager.getValue("live");
       const resume_at = this.stateManager.getValue("currentTime");
       await this.load(src);
+      if (this.destroyed) return;
       if (this.stateManager.getValue("error")) return;
       if (was_live) {
         this.seekToLive();
       } else if (resume_at > 0) {
         this.seek(resume_at);
       }
+      if (this.destroyed) return;
       await this.play();
     });
     if (this.initialSrc) {
@@ -2140,6 +2155,7 @@ class ScarlettPlayer {
       return;
     }
     this.logger.info("Destroying player");
+    this.loadGeneration++;
     if (this.seekResumeTimeout !== null) {
       clearTimeout(this.seekResumeTimeout);
       this.seekResumeTimeout = null;
@@ -2287,6 +2303,15 @@ var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
+function sanitizeUrl(url) {
+  if (!url) return void 0;
+  try {
+    const parsed = new URL(url);
+    return `${parsed.origin}${parsed.pathname}`;
+  } catch {
+    return void 0;
+  }
+}
 function formatLevel(level) {
   if (level.name) {
     return level.name;
@@ -2708,6 +2733,8 @@ function createHLSPluginWith(loader, variant, config) {
   let reconnectWindowStart = 0;
   let reconnectResumePosition = 0;
   let onlineListener = null;
+  let reconnectTriggerError = null;
+  let reconnectExhausted = false;
   const getOrCreateVideo = () => {
     if (video) return video;
     const existing = api?.container.querySelector("video");
@@ -2816,6 +2843,22 @@ function createHLSPluginWith(loader, variant, config) {
         return ErrorCode.PLAYBACK_FAILED;
     }
   };
+  const buildErrorDetail = (error, retriesExhausted) => {
+    const attempts = error.type === "network" ? networkRetryCount : error.type === "media" ? mediaRetryCount : 0;
+    const detail = {
+      type: error.type,
+      retriesExhausted,
+      attempts
+    };
+    if (typeof error.response?.code === "number" && error.response.code > 0) {
+      detail.httpStatus = error.response.code;
+    }
+    const url = sanitizeUrl(error.url);
+    if (url) {
+      detail.url = url;
+    }
+    return detail;
+  };
   const emitFatalError = (error, retriesExhausted) => {
     const message = retriesExhausted ? `HLS error: ${error.details} (max retries exceeded)` : `HLS error: ${error.details}`;
     api?.logger.error(message, { type: error.type, details: error.details });
@@ -2825,7 +2868,8 @@ function createHLSPluginWith(loader, variant, config) {
       code: mapFatalErrorCode(error),
       message,
       fatal: true,
-      timestamp: Date.now()
+      timestamp: Date.now(),
+      detail: buildErrorDetail(error, retriesExhausted)
     });
     maybeScheduleReconnect(error);
   };
@@ -2902,6 +2946,62 @@ function createHLSPluginWith(loader, variant, config) {
     }
     return false;
   };
+  const handleNativeFatalError = (error, resumePosition) => {
+    const is_network = error.type === "network";
+    const max_retries = is_network ? mergedConfig.maxNetworkRetries ?? 3 : mergedConfig.maxMediaRetries ?? 2;
+    const used = is_network ? networkRetryCount : mediaRetryCount;
+    if (!currentSrc || used >= max_retries) {
+      emitFatalError(error, used >= max_retries);
+      return;
+    }
+    const resume_position = resumePosition ?? video?.currentTime ?? 0;
+    if (is_network) {
+      networkRetryCount++;
+    } else {
+      mediaRetryCount++;
+    }
+    const attempt = used + 1;
+    const delay = getRetryDelay(attempt - 1);
+    api?.logger.info(
+      `Attempting native ${error.type} error recovery (attempt ${attempt}/${max_retries}) in ${delay}ms`
+    );
+    api?.emit(is_network ? "error:network" : "error:media", {
+      error: new Error(error.details)
+    });
+    if (retryTimeout) {
+      clearTimeout(retryTimeout);
+    }
+    const retry_session = loadSession;
+    retryTimeout = setTimeout(() => {
+      if (retry_session !== loadSession) return;
+      void recoverNative(error, resume_position);
+    }, delay);
+  };
+  const recoverNative = async (error, resumePosition) => {
+    if (!currentSrc) return;
+    const session = ++loadSession;
+    const saved_src = currentSrc;
+    const was_live = api?.getState("live") ?? false;
+    try {
+      teardownPipeline(new Error("HLS load cancelled: native error recovery"));
+      api?.setState("playbackState", "loading");
+      await loadNative(saved_src);
+      if (session !== loadSession) return;
+      if (!was_live && video && resumePosition > 0) {
+        video.currentTime = resumePosition;
+      }
+      api?.setState("playbackState", "ready");
+      api?.setState("buffering", false);
+      try {
+        await video?.play();
+      } catch {
+      }
+    } catch {
+      if (session !== loadSession) return;
+      api?.logger.warn("Native error recovery attempt failed");
+      handleNativeFatalError(error, resumePosition);
+    }
+  };
   const loadNative = async (src) => {
     const session = loadSession;
     const videoEl = getOrCreateVideo();
@@ -2943,12 +3043,24 @@ function createHLSPluginWith(loader, variant, config) {
           const media_error = videoEl.error;
           const hls_error = {
             type: media_error?.code === MediaError.MEDIA_ERR_NETWORK ? "network" : "media",
-            details: media_error?.message || "Native HLS playback error"
+            details: media_error?.message || "Native HLS playback error",
+            fatal: true
           };
-          emitFatalError(hls_error, false);
+          handleNativeFatalError(hls_error);
         };
         videoEl.addEventListener("error", onFatalVideoError);
-        const removeFatalListener = () => videoEl.removeEventListener("error", onFatalVideoError);
+        const onPlayingResetBudget = () => {
+          if (networkRetryCount > 0 || mediaRetryCount > 0) {
+            api?.logger.debug("Native playback recovered, resetting retry budgets");
+            networkRetryCount = 0;
+            mediaRetryCount = 0;
+          }
+        };
+        videoEl.addEventListener("playing", onPlayingResetBudget);
+        const removeFatalListener = () => {
+          videoEl.removeEventListener("error", onFatalVideoError);
+          videoEl.removeEventListener("playing", onPlayingResetBudget);
+        };
         const previous_cleanup = cleanupVideoEvents;
         cleanupVideoEvents = () => {
           removeFatalListener();
@@ -3073,12 +3185,38 @@ function createHLSPluginWith(loader, variant, config) {
     reconnectAttempts = 0;
     reconnectWindowStart = 0;
     reconnectResumePosition = 0;
+    reconnectTriggerError = null;
+    reconnectExhausted = false;
+  };
+  const emitReconnectExhausted = (elapsedMs, windowMs) => {
+    if (reconnectExhausted) return;
+    reconnectExhausted = true;
+    const attempts = reconnectAttempts;
+    const trigger = reconnectTriggerError;
+    api?.emit("error:reconnect-exhausted", { attempts, elapsedMs, windowMs });
+    api?.setState("playbackState", "error");
+    api?.setState("buffering", false);
+    api?.emit("error", {
+      code: trigger ? mapFatalErrorCode(trigger) : ErrorCode.PLAYBACK_FAILED,
+      message: `HLS auto-reconnect gave up after ${attempts} attempts over ${Math.round(elapsedMs / 1e3)}s`,
+      fatal: true,
+      timestamp: Date.now(),
+      detail: {
+        type: trigger?.type ?? "other",
+        retriesExhausted: true,
+        attempts,
+        reconnectExhausted: true
+      }
+    });
   };
   const scheduleReconnectAttempt = () => {
+    if (reconnectExhausted) return;
     if (reconnectTimer) return;
     const window_ms = mergedConfig.reconnectWindowMs ?? 3e5;
-    if (Date.now() - reconnectWindowStart > window_ms) {
+    const elapsed_ms = Date.now() - reconnectWindowStart;
+    if (elapsed_ms > window_ms) {
       api?.logger.warn(`Auto-reconnect window exhausted after ${reconnectAttempts} attempts`);
+      emitReconnectExhausted(elapsed_ms, window_ms);
       return;
     }
     const base_delay = mergedConfig.reconnectBaseDelayMs ?? 2e3;
@@ -3086,7 +3224,12 @@ function createHLSPluginWith(loader, variant, config) {
     const backoff = Math.min(base_delay * Math.pow(2, reconnectAttempts), max_delay);
     const delay = Math.round(backoff * (0.7 + Math.random() * 0.3));
     api?.logger.info(`Scheduling auto-reconnect attempt ${reconnectAttempts + 1} in ${delay}ms`);
-    api?.emit("error:reconnecting", { attempt: reconnectAttempts + 1, delayMs: delay });
+    api?.emit("error:reconnecting", {
+      attempt: reconnectAttempts + 1,
+      delayMs: delay,
+      elapsedMs: elapsed_ms,
+      windowMs: window_ms
+    });
     reconnectTimer = setTimeout(() => {
       reconnectTimer = null;
       void attemptReconnect();
@@ -3099,6 +3242,7 @@ function createHLSPluginWith(loader, variant, config) {
     if (reconnectWindowStart === 0) {
       reconnectWindowStart = Date.now();
       reconnectResumePosition = video?.currentTime ?? 0;
+      reconnectTriggerError = error;
     }
     scheduleReconnectAttempt();
   };
@@ -3130,7 +3274,10 @@ function createHLSPluginWith(loader, variant, config) {
       }
       api.setState("playbackState", "ready");
       api.setState("buffering", false);
-      api.emit("error:recovered", void 0);
+      api.emit("error:recovered", {
+        attempt: reconnectAttempts,
+        elapsedMs: Date.now() - reconnectWindowStart
+      });
       api.logger.info("Auto-reconnect succeeded");
       cancelReconnect();
       try {
@@ -3635,6 +3782,25 @@ var styles = `
   border-radius: inherit;
 }
 
+/* Chapter markers */
+.sp-progress__markers {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.sp-progress__marker {
+  position: absolute;
+  top: 0;
+  width: 2px;
+  height: 100%;
+  margin-left: -1px;
+  background: rgba(0, 0, 0, 0.65);
+}
+
 .sp-progress__handle {
   position: absolute;
   top: 50%;
@@ -3694,6 +3860,16 @@ var styles = `
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
+.sp-progress__tooltip-chapter {
+  display: block;
+  max-width: 220px;
+  overflow: hidden;
+  color: rgba(255, 255, 255, 0.75);
+  font-weight: 400;
+  font-variant-numeric: normal;
+  text-overflow: ellipsis;
+}
+
 @media (hover: hover) {
   .sp-progress-wrapper:hover .sp-progress__tooltip {
     opacity: 1;
@@ -4531,6 +4707,8 @@ var ProgressBar = class {
     this.lastSeekTime = 0;
     this.seekThrottleMs = 100;
     this.wasPlayingBeforeDrag = false;
+    this.renderedChapters = null;
+    this.renderedDuration = 0;
     this.onMouseDown = (e) => {
       e.preventDefault();
       const video = getVideo(this.api.container);
@@ -4665,12 +4843,14 @@ var ProgressBar = class {
     const track = createElement("div", { className: "sp-progress__track" });
     this.buffered = createElement("div", { className: "sp-progress__buffered" });
     this.filled = createElement("div", { className: "sp-progress__filled" });
+    this.markers = createElement("div", { className: "sp-progress__markers" });
     this.handle = createElement("div", { className: "sp-progress__handle" });
     this.tooltip = createElement("div", { className: "sp-progress__tooltip" });
     this.tooltip.textContent = "0:00";
     this.thumbnailPreview = new ThumbnailPreview();
     track.appendChild(this.buffered);
     track.appendChild(this.filled);
+    track.appendChild(this.markers);
     track.appendChild(this.handle);
     this.el.appendChild(track);
     this.el.appendChild(this.thumbnailPreview.getElement());
@@ -4720,6 +4900,7 @@ var ProgressBar = class {
       this.thumbnailPreview.setConfig(thumbnails);
     }
     this.el.classList.toggle("sp-progress--live", !!live);
+    this.updateMarkers(duration, live, seekableRange);
     if (live && seekableRange) {
       const rangeLength = seekableRange.end - seekableRange.start;
       if (rangeLength > 0) {
@@ -4752,6 +4933,70 @@ var ProgressBar = class {
       this.el.setAttribute("aria-valuetext", formatTime(currentTime));
     }
   }
+  /**
+   * Label of the chapter containing a point on the timeline.
+   *
+   * Mirrors the chapters plugin's own lookup: a start time belongs to its
+   * chapter, an end time belongs to the next one, and a point in a gap between
+   * sparse chapters belongs to neither.
+   *
+   * @param time - Position in seconds
+   * @returns The chapter label, or null when the point is outside every chapter
+   */
+  chapterLabelAt(time) {
+    const chapters = this.api.getState("chapters") ?? [];
+    for (let i = chapters.length - 1; i >= 0; i--) {
+      const chapter = chapters[i];
+      if (time < chapter.time) continue;
+      const next = chapters[i + 1];
+      const end = chapter.endTime ?? (next ? next.time : Infinity);
+      return time < end ? chapter.label : null;
+    }
+    return null;
+  }
+  /**
+   * Paint chapter dividers along the track.
+   *
+   * Reads the `chapters` state that core owns, so this works whether the list
+   * came from the chapters plugin or the host set it directly, and renders
+   * nothing at all when there are none.
+   *
+   * Rebuilds only when the list or the duration actually changed. `update()`
+   * runs on every time update, and rebuilding a dozen nodes 4 times a second
+   * would churn the DOM for no reason.
+   *
+   * @param duration - Media duration in seconds
+   * @param live - Whether the media is live
+   * @param seekableRange - DVR window, when the media is live
+   */
+  updateMarkers(duration, live, seekableRange) {
+    const chapters = this.api.getState("chapters") ?? [];
+    const range = live ? seekableRange ? seekableRange.end - seekableRange.start : 0 : duration;
+    if (chapters.length === 0 || range <= 0) {
+      if (this.renderedChapters !== null) {
+        this.markers.textContent = "";
+        this.renderedChapters = null;
+        this.renderedDuration = 0;
+      }
+      return;
+    }
+    if (chapters === this.renderedChapters && range === this.renderedDuration) {
+      return;
+    }
+    const origin = live && seekableRange ? seekableRange.start : 0;
+    this.markers.textContent = "";
+    for (const chapter of chapters) {
+      if (chapter.time <= origin) continue;
+      const percent = (chapter.time - origin) / range * 100;
+      if (percent <= 0 || percent >= 100) continue;
+      const marker = createElement("div", { className: "sp-progress__marker" });
+      marker.style.left = `${percent}%`;
+      marker.title = chapter.label;
+      this.markers.appendChild(marker);
+    }
+    this.renderedChapters = chapters;
+    this.renderedDuration = range;
+  }
   getTimeFromPosition(clientX) {
     const rect = this.el.getBoundingClientRect();
     const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
@@ -4776,6 +5021,12 @@ var ProgressBar = class {
     } else {
       this.tooltip.textContent = formatTime(time);
     }
+    const chapterLabel = this.chapterLabelAt(time);
+    if (chapterLabel) {
+      const label = createElement("span", { className: "sp-progress__tooltip-chapter" });
+      label.textContent = chapterLabel;
+      this.tooltip.appendChild(label);
+    }
     this.tooltip.style.left = `${percent * 100}%`;
     if (this.thumbnailPreview.isConfigured()) {
       this.thumbnailPreview.show(time, percent);
@@ -6187,7 +6438,15 @@ function uiPlugin(config = {}) {
     }
     hideTimeout = setTimeout(hideControls, hideDelay);
   };
+  let last_pointer_type = null;
+  const handlePointerActivity = (event) => {
+    last_pointer_type = event.pointerType;
+  };
   const handleInteraction = () => {
+    if (last_pointer_type === "touch") {
+      const gestures = api?.getPlugin("gestures");
+      if (gestures?.ownsTapInteraction()) return;
+    }
     showControls();
   };
   const handleMouseLeave = () => {
@@ -6321,6 +6580,8 @@ function uiPlugin(config = {}) {
         api.logger.debug(`Control "${id}" registered after init, rebuilding control bar`);
         rebuildControlBar();
       });
+      container.addEventListener("pointerdown", handlePointerActivity, { passive: true });
+      container.addEventListener("pointermove", handlePointerActivity, { passive: true });
       container.addEventListener("mousemove", handleInteraction);
       container.addEventListener("mouseenter", handleInteraction);
       container.addEventListener("mouseleave", handleMouseLeave);
@@ -6358,6 +6619,8 @@ function uiPlugin(config = {}) {
       recoveredUnsubscribe?.();
       recoveredUnsubscribe = null;
       if (api?.container) {
+        api.container.removeEventListener("pointerdown", handlePointerActivity);
+        api.container.removeEventListener("pointermove", handlePointerActivity);
         api.container.removeEventListener("mousemove", handleInteraction);
         api.container.removeEventListener("mouseenter", handleInteraction);
         api.container.removeEventListener("mouseleave", handleMouseLeave);