@scarlett-player/embed 0.5.2 → 1.0.0

package/dist/embed.video.js

@@ -43,6 +43,18 @@ function mapLevels(levels, _currentLevel) {
     codec: level.codecSet
   }));
 }
+function getInitialBandwidthEstimate(overrideBps) {
+  const HLS_DEFAULT_ESTIMATE = 5e5;
+  if (overrideBps !== void 0 && overrideBps > 0) {
+    return overrideBps;
+  }
+  const connection = navigator.connection;
+  if (connection?.downlink && connection.downlink > 0) {
+    const bps = connection.downlink * 1e6;
+    return Math.round(bps * 0.85);
+  }
+  return HLS_DEFAULT_ESTIMATE;
+}
 var HLS_ERROR_TYPES = {
   NETWORK_ERROR: "networkError",
   MEDIA_ERROR: "mediaError",
@@ -113,6 +125,14 @@ function setupHlsEventHandlers(hls, api, callbacks) {
     });
     callbacks.onLevelSwitched?.(data.level);
   });
+  let lastBandwidthUpdate = 0;
+  addHandler("hlsFragLoaded", () => {
+    const now = Date.now();
+    if (now - lastBandwidthUpdate >= 2e3 && hls.bandwidthEstimate) {
+      lastBandwidthUpdate = now;
+      api.setState("bandwidth", Math.round(hls.bandwidthEstimate));
+    }
+  });
   addHandler("hlsFragBuffered", () => {
     api.setState("buffering", false);
     callbacks.onBufferUpdate?.();
@@ -123,12 +143,44 @@ function setupHlsEventHandlers(hls, api, callbacks) {
   addHandler("hlsLevelLoaded", (_event, data) => {
     if (data.details?.live !== void 0) {
       api.setState("live", data.details.live);
+      if (data.details.live) {
+        const video = hls.media;
+        if (video && video.seekable && video.seekable.length > 0) {
+          const start = video.seekable.start(0);
+          const end = video.seekable.end(video.seekable.length - 1);
+          api.setState("seekableRange", { start, end });
+          const threshold = (data.details.targetduration ?? 3) * 3;
+          const isAtLiveEdge = end - video.currentTime < threshold;
+          api.setState("liveEdge", isAtLiveEdge);
+          const latency = end - video.currentTime;
+          api.setState("liveLatency", Math.max(0, latency));
+        }
+      }
       callbacks.onLiveUpdate?.();
     }
   });
   addHandler("hlsError", (_event, data) => {
     const error = parseHlsError(data);
-    api.logger.warn("HLS error", { error });
+    const isBufferHoleSeek = !error.fatal && (error.details?.includes("bufferStalledError") || data.reason?.includes("buffer holes"));
+    if (isBufferHoleSeek) {
+      api.logger.debug(`HLS buffer recovery: ${error.reason || error.details}`, {
+        details: error.details,
+        reason: error.reason
+      });
+    } else if (error.fatal) {
+      api.logger.error(`HLS fatal error: ${error.details} (type=${error.type})`, {
+        type: error.type,
+        details: error.details,
+        url: error.url
+      });
+    } else {
+      api.logger.warn(`HLS error: ${error.details} (type=${error.type}, fatal=${error.fatal})`, {
+        type: error.type,
+        details: error.details,
+        fatal: error.fatal,
+        url: error.url
+      });
+    }
     callbacks.onError?.(error);
   });
   return () => {
@@ -150,6 +202,8 @@ function setupVideoEventHandlers(video, api) {
   addHandler("playing", () => {
     api.setState("playing", true);
     api.setState("paused", false);
+    api.setState("waiting", false);
+    api.setState("buffering", false);
     api.setState("playbackState", "playing");
   });
   addHandler("pause", () => {
@@ -166,6 +220,15 @@ function setupVideoEventHandlers(video, api) {
   addHandler("timeupdate", () => {
     api.setState("currentTime", video.currentTime);
     api.emit("playback:timeupdate", { currentTime: video.currentTime });
+    const isLive = api.getState("live");
+    if (isLive && video.seekable && video.seekable.length > 0) {
+      const start = video.seekable.start(0);
+      const end = video.seekable.end(video.seekable.length - 1);
+      api.setState("seekableRange", { start, end });
+      const isAtLiveEdge = end - video.currentTime < 10;
+      api.setState("liveEdge", isAtLiveEdge);
+      api.setState("liveLatency", Math.max(0, end - video.currentTime));
+    }
   });
   addHandler("durationchange", () => {
     api.setState("duration", video.duration || 0);
@@ -312,6 +375,7 @@ var DEFAULT_CONFIG = {
   maxMaxBufferLength: 600,
   backBufferLength: 30,
   enableWorker: true,
+  capLevelToPlayerSize: true,
   // Error recovery settings
   maxNetworkRetries: 3,
   maxMediaRetries: 2,
@@ -381,11 +445,13 @@ function createHLSPlugin(config) {
     startPosition: mergedConfig.startPosition,
     startLevel: -1,
     // Auto quality selection (ABR)
+    abrEwmaDefaultEstimate: getInitialBandwidthEstimate(mergedConfig.initialBandwidthEstimate),
     lowLatencyMode: mergedConfig.lowLatencyMode,
     maxBufferLength: mergedConfig.maxBufferLength,
     maxMaxBufferLength: mergedConfig.maxMaxBufferLength,
     backBufferLength: mergedConfig.backBufferLength,
     enableWorker: mergedConfig.enableWorker,
+    capLevelToPlayerSize: mergedConfig.capLevelToPlayerSize,
     // Minimize hls.js internal retries - we handle retries ourselves
     fragLoadingMaxRetry: 1,
     manifestLoadingMaxRetry: 1,
@@ -656,7 +722,10 @@ function createHLSPlugin(config) {
       currentSrc = src;
       api.setState("playbackState", "loading");
       api.setState("buffering", true);
-      if (isHlsJsSupported()) {
+      if (api.getState("airplayActive") && supportsNativeHLS()) {
+        api.logger.info("Using native HLS (AirPlay active)");
+        await loadNative(src);
+      } else if (isHlsJsSupported()) {
         api.logger.info("Using hls.js for HLS playback");
         await loadWithHlsJs(src);
       } else if (supportsNativeHLS()) {
@@ -3198,6 +3267,37 @@ var CaptionsButton = class {
     this.el.remove();
   }
 };
+var ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.55a11 11 0 0 1 14.08 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line x1="12" y1="20" x2="12.01" y2="20"/><line x1="2" y1="2" x2="22" y2="22" stroke="currentColor" stroke-width="2"/></svg>`;
+var BandwidthIndicator = class {
+  constructor(api) {
+    this.api = api;
+    this.el = createElement("div", { className: "sp-bandwidth-indicator" });
+    this.el.innerHTML = ICON_SVG;
+    this.el.setAttribute("aria-label", "Bandwidth is limiting video quality");
+    this.el.setAttribute("title", "Bandwidth is limiting video quality");
+    this.el.style.display = "none";
+  }
+  render() {
+    return this.el;
+  }
+  update() {
+    const bandwidth = this.api.getState("bandwidth");
+    const qualities = this.api.getState("qualities");
+    if (!bandwidth || !qualities || qualities.length === 0) {
+      this.el.style.display = "none";
+      return;
+    }
+    const highestBitrate = Math.max(...qualities.map((q) => q.bitrate));
+    if (highestBitrate > 0 && bandwidth < highestBitrate) {
+      this.el.style.display = "";
+    } else {
+      this.el.style.display = "none";
+    }
+  }
+  destroy() {
+    this.el.remove();
+  }
+};
 var DEFAULT_LAYOUT = [
   "play",
   "skip-backward",
@@ -3205,6 +3305,7 @@ var DEFAULT_LAYOUT = [
   "volume",
   "time",
   "live-indicator",
+  "bandwidth-indicator",
   "spacer",
   "settings",
   "captions",
@@ -3245,6 +3346,8 @@ function uiPlugin(config = {}) {
         return new TimeDisplay(api);
       case "live-indicator":
         return new LiveIndicator(api);
+      case "bandwidth-indicator":
+        return new BandwidthIndicator(api);
       case "quality":
         return new QualityMenu(api);
       case "settings":
@@ -3513,6 +3616,336 @@ function uiPlugin(config = {}) {
     }
   };
 }
+var POSITIONS = ["top-left", "top-right", "bottom-left", "bottom-right", "center"];
+var POSITION_STYLES = {
+  "top-left": "top:10px;left:10px;",
+  "top-right": "top:10px;right:10px;",
+  "bottom-left": "bottom:40px;left:10px;",
+  "bottom-right": "bottom:40px;right:10px;",
+  "center": "top:50%;left:50%;transform:translate(-50%,-50%);"
+};
+function createWatermarkPlugin(config = {}) {
+  let api = null;
+  let element = null;
+  let dynamicTimer = null;
+  let showDelayTimer = null;
+  let currentPosition = config.position || "bottom-right";
+  const opacity = config.opacity ?? 0.5;
+  const fontSize = config.fontSize ?? 14;
+  const dynamic = config.dynamic ?? false;
+  const dynamicInterval = config.dynamicInterval ?? 1e4;
+  const showDelay = config.showDelay ?? 0;
+  const createElement2 = () => {
+    const el = document.createElement("div");
+    el.className = "sp-watermark sp-watermark--hidden";
+    el.style.cssText = `position:absolute;z-index:10;pointer-events:none;opacity:${opacity};font-size:${fontSize}px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.6);font-family:sans-serif;transition:all 0.5s ease;${POSITION_STYLES[currentPosition]}`;
+    el.setAttribute("data-position", currentPosition);
+    updateContent(el);
+    return el;
+  };
+  const updateContent = (el, imageUrl, text) => {
+    const img = imageUrl || config.imageUrl;
+    const txt = text || config.text;
+    el.innerHTML = "";
+    if (img) {
+      const imgEl = document.createElement("img");
+      imgEl.src = img;
+      imgEl.style.cssText = `max-height:${fontSize * 2}px;opacity:inherit;display:block;`;
+      imgEl.alt = "";
+      el.appendChild(imgEl);
+    } else if (txt) {
+      el.textContent = txt;
+    }
+  };
+  const setPosition = (position) => {
+    if (!element) return;
+    currentPosition = position;
+    element.style.top = "";
+    element.style.right = "";
+    element.style.bottom = "";
+    element.style.left = "";
+    element.style.transform = "";
+    const styles2 = POSITION_STYLES[position];
+    styles2.split(";").filter(Boolean).forEach((rule) => {
+      const colonIdx = rule.indexOf(":");
+      if (colonIdx === -1) return;
+      const prop = rule.slice(0, colonIdx).trim();
+      const val = rule.slice(colonIdx + 1).trim();
+      if (prop && val) {
+        element.style.setProperty(prop, val);
+      }
+    });
+    element.setAttribute("data-position", position);
+    const isVisible = element.classList.contains("sp-watermark--visible");
+    const visClass = isVisible ? " sp-watermark--visible" : " sp-watermark--hidden";
+    element.className = `sp-watermark sp-watermark--${position}${visClass}${dynamic ? " sp-watermark--dynamic" : ""}`;
+  };
+  const randomizePosition = () => {
+    const available = POSITIONS.filter((p) => p !== currentPosition);
+    const next = available[Math.floor(Math.random() * available.length)];
+    setPosition(next);
+  };
+  const show = () => {
+    if (!element) return;
+    element.classList.remove("sp-watermark--hidden");
+    element.classList.add("sp-watermark--visible");
+  };
+  const hide = () => {
+    if (!element) return;
+    element.classList.remove("sp-watermark--visible");
+    element.classList.add("sp-watermark--hidden");
+  };
+  const startDynamic = () => {
+    if (!dynamic || dynamicTimer) return;
+    dynamicTimer = setInterval(randomizePosition, dynamicInterval);
+  };
+  const stopDynamic = () => {
+    if (dynamicTimer) {
+      clearInterval(dynamicTimer);
+      dynamicTimer = null;
+    }
+  };
+  const cleanup = () => {
+    stopDynamic();
+    if (showDelayTimer) {
+      clearTimeout(showDelayTimer);
+      showDelayTimer = null;
+    }
+    if (element?.parentNode) {
+      element.parentNode.removeChild(element);
+    }
+    element = null;
+  };
+  return {
+    id: "watermark",
+    name: "Watermark",
+    version: "1.0.0",
+    type: "feature",
+    description: "Anti-piracy watermark overlay with text/image support and dynamic repositioning",
+    init(pluginApi) {
+      api = pluginApi;
+      api.logger.debug("Watermark plugin initialized");
+      element = createElement2();
+      api.container.appendChild(element);
+      const unsubPlay = api.on("playback:play", () => {
+        if (showDelay > 0) {
+          showDelayTimer = setTimeout(() => {
+            show();
+            startDynamic();
+          }, showDelay);
+        } else {
+          show();
+          startDynamic();
+        }
+      });
+      const unsubPause = api.on("playback:pause", () => {
+        hide();
+        stopDynamic();
+        if (showDelayTimer) {
+          clearTimeout(showDelayTimer);
+          showDelayTimer = null;
+        }
+      });
+      const unsubEnded = api.on("playback:ended", () => {
+        hide();
+        stopDynamic();
+      });
+      const unsubChange = api.on("playlist:change", ({ track }) => {
+        if (!element || !track) return;
+        const metadata = track.metadata;
+        if (metadata) {
+          const watermarkUrl = metadata.watermarkUrl;
+          const watermarkText = metadata.watermarkText;
+          if (watermarkUrl || watermarkText) {
+            updateContent(element, watermarkUrl, watermarkText);
+          }
+        }
+      });
+      api.onDestroy(() => {
+        unsubPlay();
+        unsubPause();
+        unsubEnded();
+        unsubChange();
+        cleanup();
+      });
+    },
+    destroy() {
+      api?.logger.debug("Watermark plugin destroyed");
+      cleanup();
+      api = null;
+    },
+    setText(text) {
+      if (element) updateContent(element, void 0, text);
+    },
+    setImage(imageUrl) {
+      if (element) updateContent(element, imageUrl);
+    },
+    setPosition,
+    setOpacity(value) {
+      if (element) element.style.opacity = String(Math.max(0, Math.min(1, value)));
+    },
+    show,
+    hide,
+    getConfig() {
+      return { ...config, position: currentPosition, opacity: element ? parseFloat(element.style.opacity) || opacity : opacity };
+    }
+  };
+}
+function createCaptionsPlugin(config = {}) {
+  let api = null;
+  let video = null;
+  let addedTrackElements = [];
+  const extractFromHLS = config.extractFromHLS !== false;
+  const autoSelect = config.autoSelect ?? false;
+  const defaultLanguage = config.defaultLanguage ?? "en";
+  const getVideo2 = () => {
+    if (video) return video;
+    video = api?.container.querySelector("video") ?? null;
+    return video;
+  };
+  const cleanupTracks = () => {
+    for (const trackEl of addedTrackElements) {
+      trackEl.parentNode?.removeChild(trackEl);
+    }
+    addedTrackElements = [];
+    api?.setState("textTracks", []);
+    api?.setState("currentTextTrack", null);
+  };
+  const addTrackElement = (source) => {
+    const videoEl = getVideo2();
+    if (!videoEl) throw new Error("No video element");
+    const trackEl = document.createElement("track");
+    trackEl.kind = source.kind || "subtitles";
+    trackEl.label = source.label;
+    trackEl.srclang = source.language;
+    trackEl.src = source.src;
+    trackEl.default = false;
+    videoEl.appendChild(trackEl);
+    addedTrackElements.push(trackEl);
+    if (trackEl.track) {
+      trackEl.track.mode = "disabled";
+    }
+    return trackEl;
+  };
+  const syncTracksToState = () => {
+    const videoEl = getVideo2();
+    if (!videoEl) return;
+    const tracks = [];
+    let currentTrack = null;
+    for (let i = 0; i < videoEl.textTracks.length; i++) {
+      const track = videoEl.textTracks[i];
+      if (track.kind !== "subtitles" && track.kind !== "captions") continue;
+      const scarlettTrack = {
+        id: `track-${i}`,
+        label: track.label || `Track ${i + 1}`,
+        language: track.language || "",
+        kind: track.kind,
+        active: track.mode === "showing"
+      };
+      tracks.push(scarlettTrack);
+      if (track.mode === "showing") {
+        currentTrack = scarlettTrack;
+      }
+    }
+    api?.setState("textTracks", tracks);
+    api?.setState("currentTextTrack", currentTrack);
+  };
+  const selectTrack = (trackId) => {
+    const videoEl = getVideo2();
+    if (!videoEl) return;
+    for (let i = 0; i < videoEl.textTracks.length; i++) {
+      const track = videoEl.textTracks[i];
+      if (track.kind !== "subtitles" && track.kind !== "captions") continue;
+      const id = `track-${i}`;
+      if (trackId && id === trackId) {
+        track.mode = "showing";
+      } else {
+        track.mode = "disabled";
+      }
+    }
+    syncTracksToState();
+  };
+  const extractHlsSubtitles = () => {
+    if (!extractFromHLS || !api) return;
+    const hlsPlugin = api.getPlugin("hls-provider");
+    if (!hlsPlugin || hlsPlugin.isNativeHLS()) return;
+    const hlsInstance = hlsPlugin.getHlsInstance();
+    if (!hlsInstance?.subtitleTracks?.length) return;
+    api.logger.debug("Extracting HLS subtitle tracks", {
+      count: hlsInstance.subtitleTracks.length
+    });
+    for (const hlsTrack of hlsInstance.subtitleTracks) {
+      addTrackElement({
+        language: hlsTrack.lang || "unknown",
+        label: hlsTrack.name || `Subtitle ${hlsTrack.id}`,
+        src: hlsTrack.url,
+        kind: "subtitles"
+      });
+    }
+    syncTracksToState();
+    if (autoSelect) {
+      autoSelectTrack();
+    }
+  };
+  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 initSources = () => {
+    if (!config.sources?.length) return;
+    for (const source of config.sources) {
+      addTrackElement(source);
+    }
+    syncTracksToState();
+    if (autoSelect) {
+      autoSelectTrack();
+    }
+  };
+  return {
+    id: "captions",
+    name: "Captions",
+    version: "1.0.0",
+    type: "feature",
+    description: "WebVTT subtitles and closed captions with HLS extraction",
+    init(pluginApi) {
+      api = pluginApi;
+      api.logger.debug("Captions plugin initialized");
+      api.setState("textTracks", []);
+      api.setState("currentTextTrack", null);
+      const unsubTrackText = api.on("track:text", ({ trackId }) => {
+        selectTrack(trackId);
+      });
+      const unsubLoaded = api.on("media:loaded", () => {
+        video = null;
+        cleanupTracks();
+        initSources();
+        if (extractFromHLS) {
+          setTimeout(extractHlsSubtitles, 500);
+        }
+      });
+      const unsubLoadRequest = api.on("media:load-request", () => {
+        video = null;
+        cleanupTracks();
+      });
+      api.onDestroy(() => {
+        unsubTrackText();
+        unsubLoaded();
+        unsubLoadRequest();
+        cleanupTracks();
+      });
+    },
+    destroy() {
+      api?.logger.debug("Captions plugin destroyed");
+      cleanupTracks();
+      video = null;
+      api = null;
+    }
+  };
+}
 class Signal {
   constructor(initialValue) {
     this.subscribers = /* @__PURE__ */ new Set();
@@ -5052,6 +5485,13 @@ class ScarlettPlayer {
         await this.pluginManager.initPlugin(id);
       }
     }
+    this.eventBus.on("media:load-request", async ({ src, autoplay }) => {
+      if (this.stateManager.getValue("chromecastActive")) return;
+      await this.load(src);
+      if (autoplay !== false) {
+        await this.play();
+      }
+    });
     if (this.initialSrc) {
       await this.load(this.initialSrc);
     }
@@ -5259,8 +5699,9 @@ class ScarlettPlayer {
    */
   setPlaybackRate(rate) {
     this.checkDestroyed();
-    this.stateManager.set("playbackRate", rate);
-    this.eventBus.emit("playback:ratechange", { rate });
+    const clampedRate = Math.max(0.0625, Math.min(16, rate));
+    this.stateManager.set("playbackRate", clampedRate);
+    this.eventBus.emit("playback:ratechange", { rate: clampedRate });
   }
   /**
    * Set autoplay state.
@@ -5389,6 +5830,13 @@ class ScarlettPlayer {
     }
     const provider = this._currentProvider;
     if (typeof provider.setLevel === "function") {
+      if (index !== -1) {
+        const levels = this.getQualities();
+        if (levels.length > 0 && (index < 0 || index >= levels.length)) {
+          this.logger.warn(`Invalid quality index: ${index} (available: ${levels.length})`);
+          return;
+        }
+      }
       provider.setLevel(index);
       this.eventBus.emit("quality:change", {
         quality: index === -1 ? "auto" : `level-${index}`,
@@ -5629,18 +6077,40 @@ class ScarlettPlayer {
    * @private
    */
   detectMimeType(source) {
-    const ext = source.split(".").pop()?.toLowerCase();
+    let path = source;
+    try {
+      path = new URL(source).pathname;
+    } catch {
+      const noQuery = source.split("?")[0] ?? source;
+      path = noQuery.split("#")[0] ?? noQuery;
+    }
+    const ext = path.split(".").pop()?.toLowerCase() ?? "";
     switch (ext) {
       case "m3u8":
         return "application/x-mpegURL";
       case "mpd":
         return "application/dash+xml";
       case "mp4":
+      case "m4v":
         return "video/mp4";
       case "webm":
         return "video/webm";
       case "ogg":
+      case "ogv":
         return "video/ogg";
+      case "mov":
+        return "video/quicktime";
+      case "mkv":
+        return "video/x-matroska";
+      case "mp3":
+        return "audio/mpeg";
+      case "wav":
+        return "audio/wav";
+      case "flac":
+        return "audio/flac";
+      case "aac":
+      case "m4a":
+        return "audio/mp4";
       default:
         return "video/mp4";
     }
@@ -5849,6 +6319,12 @@ async function createEmbedPlayer(container, config, pluginCreators2, availableTy
         artwork: config.artwork || config.poster || config.playlist?.[0]?.artwork
       }));
     }
+    if (pluginCreators2.watermark && config.watermark) {
+      plugins.push(pluginCreators2.watermark(config.watermark));
+    }
+    if (pluginCreators2.captions) {
+      plugins.push(pluginCreators2.captions(config.captions || {}));
+    }
     if (pluginCreators2.analytics && config.analytics?.beaconUrl) {
       plugins.push(pluginCreators2.analytics({
         beaconUrl: config.analytics.beaconUrl,
@@ -5966,11 +6442,13 @@ function setupAutoInit(pluginCreators2, availableTypes) {
     }
   }
 }
-const VERSION = "0.3.0-video";
+const VERSION = "0.5.3-video";
 const AVAILABLE_TYPES = ["video"];
 const pluginCreators = {
   hls: createHLSPlugin,
-  videoUI: uiPlugin
+  videoUI: uiPlugin,
+  watermark: createWatermarkPlugin,
+  captions: createCaptionsPlugin
   // Audio UI not available in this build
   // Analytics not available in this build
   // Playlist not available in this build