@scarlett-player/embed 1.7.0 → 1.8.0

package/dist/embed.js

@@ -1564,6 +1564,49 @@ class PluginManager {
     }
   }
 }
+function videoIn(container) {
+  return container.querySelector("video");
+}
+function isFullscreen(container) {
+  const doc = document;
+  const active = doc.fullscreenElement ?? doc.webkitFullscreenElement ?? null;
+  if (active && container.contains(active)) {
+    return true;
+  }
+  return !!videoIn(container)?.webkitDisplayingFullscreen;
+}
+async function enterFullscreen(container) {
+  const el = container;
+  if (el.requestFullscreen) {
+    await el.requestFullscreen();
+    return;
+  }
+  if (el.webkitRequestFullscreen) {
+    await el.webkitRequestFullscreen();
+    return;
+  }
+  const video = videoIn(container);
+  if (video?.webkitEnterFullscreen) {
+    video.webkitEnterFullscreen();
+    return;
+  }
+  throw new Error("Fullscreen is not supported");
+}
+async function exitFullscreen(container) {
+  const video = videoIn(container);
+  if (video?.webkitDisplayingFullscreen) {
+    video.webkitExitFullscreen?.();
+    return;
+  }
+  const doc = document;
+  if (doc.exitFullscreen) {
+    await doc.exitFullscreen();
+    return;
+  }
+  if (doc.webkitExitFullscreen) {
+    await doc.webkitExitFullscreen();
+  }
+}
 class ScarlettPlayer {
   /**
    * Create a new ScarlettPlayer.
@@ -1576,6 +1619,11 @@ class ScarlettPlayer {
     this.seekingWhilePlaying = false;
     this.seekResumeTimeout = null;
     this.loadGeneration = 0;
+    this.listenersWired = false;
+    this.readyEmitted = false;
+    this.fullscreenAnnounced = false;
+    this.unwireFullscreen = null;
+    this.initializing = null;
     if (typeof options.container === "string") {
       const el = document.querySelector(options.container);
       if (!el || !(el instanceof HTMLElement)) {
@@ -1616,28 +1664,75 @@ class ScarlettPlayer {
     this.eventBus.on("media:error", ({ error }) => {
       this.errorHandler.record(error, { channel: "media:error" });
     });
+    this.wireFullscreenListeners();
     if (options.plugins) {
       for (const plugin of options.plugins) {
         this.pluginManager.register(plugin);
       }
     }
-    this.logger.info("ScarlettPlayer initialized", {
+    this.logger.info("ScarlettPlayer constructed", {
       autoplay: options.autoplay,
       plugins: options.plugins?.length ?? 0
     });
-    this.eventBus.emit("player:ready", void 0);
   }
   /**
-   * Initialize the player asynchronously.
-   * Initializes non-provider plugins and loads initial source if provided.
+   * Initialise every registered non-provider plugin and wire the player's
+   * own lifecycle listeners. Idempotent, and safe to call re-entrantly.
+   *
+   * This exists because `new ScarlettPlayer(...)` followed by `load()` used
+   * to leave the player with a provider and nothing else: the READMEs and 12
+   * plugin `@example` blocks show exactly that shape, and every one of them
+   * produced a dead UI (no controls, no overlay, no playlist). `load()` now
+   * calls this first, so the trap cannot be reached.
+   *
+   * The `media:load-request` and `error:retry` listeners live here rather
+   * than in the constructor because they are part of initialisation, not
+   * construction: without them the playlist plugin cannot load a track and
+   * the error overlay's "Try Again" button does nothing.
+   *
+   * Provider plugins are excluded: they are initialised lazily, per source,
+   * by `load()` once `selectProvider()` has picked one.
+   *
+   * @returns Promise resolving when the pass (or the in-flight one) completes
    */
-  async init() {
-    this.checkDestroyed();
-    for (const [id, record] of this.pluginManager.plugins) {
-      if (record.plugin.type !== "provider" && record.state === "registered") {
-        await this.pluginManager.initPlugin(id);
-      }
+  ensureInitialized() {
+    if (this.initializing) return this.initializing;
+    this.initializing = this.runInitialization().finally(() => {
+      this.initializing = null;
+    });
+    return this.initializing;
+  }
+  /**
+   * One initialisation pass. Never call directly; go through
+   * `ensureInitialized()`, which owns the re-entrancy guard.
+   *
+   * @returns Promise resolving when the pass completes
+   */
+  async runInitialization() {
+    for (const id of this.pluginManager.getPluginIds()) {
+      if (this.destroyed) return;
+      const plugin = this.pluginManager.getPlugin(id);
+      if (!plugin || plugin.type === "provider") continue;
+      if (this.pluginManager.getPluginState(id) !== "registered") continue;
+      await this.pluginManager.initPlugin(id);
     }
+    if (this.destroyed) return;
+    this.wireLifecycleListeners();
+    if (!this.readyEmitted) {
+      this.readyEmitted = true;
+      this.eventBus.emit("player:ready", void 0);
+    }
+  }
+  /**
+   * Wire the two listeners the player owns, exactly once.
+   *
+   * Guarded by a flag rather than by "init() runs once" because
+   * `ensureInitialized()` runs on every `load()`: wiring them twice would
+   * load and play each requested source twice.
+   */
+  wireLifecycleListeners() {
+    if (this.listenersWired) return;
+    this.listenersWired = true;
     this.eventBus.on("media:load-request", async ({ src, autoplay }) => {
       if (this.stateManager.getValue("chromecastActive")) return;
       await this.load(src);
@@ -1660,15 +1755,40 @@ class ScarlettPlayer {
       if (this.destroyed) return;
       await this.play();
     });
+  }
+  /**
+   * Initialize the player asynchronously.
+   *
+   * Initialises non-provider plugins, wires the lifecycle listeners and loads
+   * `initialSrc` when one was given. Idempotent: calling it twice, or calling
+   * it after a `load()` has already initialised the player, wires nothing a
+   * second time and re-emits nothing.
+   *
+   * @returns Promise resolving when initialisation (and any initial load) is done
+   */
+  async init() {
+    this.checkDestroyed();
+    await this.ensureInitialized();
     if (this.initialSrc) {
       await this.load(this.initialSrc);
     }
-    return Promise.resolve();
   }
   /**
    * Load a media source.
    *
-   * Selects appropriate provider plugin and loads the source.
+   * Initialises the player if that has not happened yet (see
+   * `ensureInitialized()`), then selects the provider plugin for the source
+   * and loads it. The auto-initialisation is what makes the widely copied
+   * `new ScarlettPlayer(...)` plus `load()` shape work: before it, that shape
+   * produced a player with a provider and no UI, no error overlay and no
+   * working playlist.
+   *
+   * Resets playback state, and deliberately does NOT touch `poster`. The
+   * poster is metadata owned by whoever set it (the consumer through
+   * `PlayerOptions.poster` or `setPoster()`, or the playlist plugin on a track
+   * change), not playback state, and it is written BEFORE the load that goes
+   * with it: clearing it here would blank the image over exactly the gap it
+   * exists to cover, while the next source loads.
    *
    * @param source - Media source URL
    * @returns Promise that resolves when source is loaded
@@ -1700,6 +1820,7 @@ class ScarlettPlayer {
         await this.pluginManager.destroyPlugin(previousProviderId);
         this._currentProvider = null;
       }
+      await this.ensureInitialized();
       if (generation !== this.loadGeneration) {
         this.logger.info("Load superseded by newer load call", { source });
         return;
@@ -1897,6 +2018,31 @@ class ScarlettPlayer {
     this.stateManager.set("autoplay", autoplay);
     this.logger.debug("Autoplay set", { autoplay });
   }
+  /**
+   * Set the poster image shown until the first frame renders.
+   *
+   * Writes the `poster` state key; the provider plugins subscribe to it and
+   * mirror it onto the media element, so this takes effect on a player that
+   * is already running. Before this method existed the poster could only be
+   * chosen at construction, which left a playlist showing the previous
+   * track's art (and a Vue `poster` prop change doing nothing at all).
+   *
+   * An empty string clears the poster, which is how a consumer takes the
+   * image away rather than replacing it.
+   *
+   * @param url - Poster image URL, or '' to clear it
+   *
+   * @example
+   * ```ts
+   * player.setPoster('https://example.com/art.jpg');
+   * player.setPoster(''); // back to the bare video surface
+   * ```
+   */
+  setPoster(url) {
+    this.checkDestroyed();
+    this.stateManager.set("poster", url);
+    this.logger.debug("Poster set", { poster: url });
+  }
   /**
    * Subscribe to an event.
    *
@@ -1927,9 +2073,13 @@ class ScarlettPlayer {
    *
    * @example
    * ```ts
+   * // player:ready fires once, at the end of the first initialisation, so a
+   * // one-shot listener has to be attached before init() or load() runs.
+   * const player = new ScarlettPlayer({ container });
    * player.once('player:ready', () => {
    *   console.log('Player ready!');
    * });
+   * await player.init();
    * ```
    */
   once(event, handler) {
@@ -2033,36 +2183,83 @@ class ScarlettPlayer {
     return -1;
   }
   // ===== Fullscreen Methods =====
+  /**
+   * Listen for fullscreen changes the player did not initiate.
+   *
+   * Nothing used to: the `fullscreen` state key was written only by this
+   * class's own `requestFullscreen()` and `exitFullscreen()`. Everything else
+   * left it lying. Entering fullscreen through the UI button or the `f`
+   * shortcut never flipped the icon to "Exit fullscreen", `player.fullscreen`
+   * stayed false and `fullscreen:change` never fired; and after a programmatic
+   * `requestFullscreen()` an Escape exit left the state stuck at true.
+   *
+   * `webkitbeginfullscreen` and `webkitendfullscreen` are the iPhone's native
+   * player announcing itself. They are dispatched on the video element, they do
+   * not bubble, and the element does not exist yet when this runs (a provider
+   * plugin creates it, per source), so they are bound to the container in the
+   * CAPTURE phase, which is the one phase that sees a non-bubbling event on a
+   * descendant.
+   */
+  wireFullscreenListeners() {
+    const onChange = () => {
+      this.fullscreenAnnounced = true;
+      this.setFullscreenState(isFullscreen(this.container));
+    };
+    document.addEventListener("fullscreenchange", onChange);
+    document.addEventListener("webkitfullscreenchange", onChange);
+    this.container.addEventListener("webkitbeginfullscreen", onChange, true);
+    this.container.addEventListener("webkitendfullscreen", onChange, true);
+    this.unwireFullscreen = () => {
+      document.removeEventListener("fullscreenchange", onChange);
+      document.removeEventListener("webkitfullscreenchange", onChange);
+      this.container.removeEventListener("webkitbeginfullscreen", onChange, true);
+      this.container.removeEventListener("webkitendfullscreen", onChange, true);
+    };
+  }
+  /**
+   * Record a fullscreen transition, once.
+   *
+   * @param next - The state the browser is now in
+   */
+  setFullscreenState(next) {
+    if (this.stateManager.getValue("fullscreen") === next) {
+      return;
+    }
+    this.stateManager.set("fullscreen", next);
+    this.eventBus.emit("fullscreen:change", { fullscreen: next });
+  }
   /**
    * Request fullscreen mode.
+   *
+   * @returns Promise resolving once the browser has accepted or refused
    */
   async requestFullscreen() {
     this.checkDestroyed();
+    this.fullscreenAnnounced = false;
     try {
-      if (this.container.requestFullscreen) {
-        await this.container.requestFullscreen();
-      } else if (this.container.webkitRequestFullscreen) {
-        await this.container.webkitRequestFullscreen();
+      await enterFullscreen(this.container);
+      if (!this.fullscreenAnnounced) {
+        this.stateManager.set("fullscreen", true);
+        this.eventBus.emit("fullscreen:change", { fullscreen: true });
       }
-      this.stateManager.set("fullscreen", true);
-      this.eventBus.emit("fullscreen:change", { fullscreen: true });
     } catch (error) {
       this.logger.error("Fullscreen request failed", { error });
     }
   }
   /**
    * Exit fullscreen mode.
+   *
+   * @returns Promise resolving once the browser has accepted or refused
    */
   async exitFullscreen() {
     this.checkDestroyed();
+    this.fullscreenAnnounced = false;
     try {
-      if (document.exitFullscreen) {
-        await document.exitFullscreen();
-      } else if (document.webkitExitFullscreen) {
-        await document.webkitExitFullscreen();
+      await exitFullscreen(this.container);
+      if (!this.fullscreenAnnounced) {
+        this.stateManager.set("fullscreen", false);
+        this.eventBus.emit("fullscreen:change", { fullscreen: false });
       }
-      this.stateManager.set("fullscreen", false);
-      this.eventBus.emit("fullscreen:change", { fullscreen: false });
     } catch (error) {
       this.logger.error("Exit fullscreen failed", { error });
     }
@@ -2160,6 +2357,8 @@ class ScarlettPlayer {
       clearTimeout(this.seekResumeTimeout);
       this.seekResumeTimeout = null;
     }
+    this.unwireFullscreen?.();
+    this.unwireFullscreen = null;
     this.eventBus.emit("player:destroy", void 0);
     this.pluginManager.destroyAll();
     this.eventBus.destroy();
@@ -2240,6 +2439,16 @@ class ScarlettPlayer {
   get autoplay() {
     return this.stateManager.getValue("autoplay");
   }
+  /**
+   * Get the current poster URL ('' when there is none).
+   *
+   * Reads state rather than the media element: the element only exists once a
+   * provider has been initialised, and for an audio source it never carries
+   * the attribute at all.
+   */
+  get poster() {
+    return this.stateManager.getValue("poster");
+  }
   /**
    * Check if player is destroyed.
    * @private
@@ -2511,8 +2720,14 @@ function setupVideoEventHandlers(video, api) {
     video.addEventListener(event, handler);
     handlers.push({ event, handler });
   };
+  const syncEndedFromElement = () => {
+    if (video.ended || !api.getState("ended")) return;
+    api.setState("ended", false);
+    api.setState("playbackState", video.paused ? "paused" : "playing");
+  };
   addHandler("play", () => {
     api.setState("paused", false);
+    syncEndedFromElement();
   });
   addHandler("playing", () => {
     api.setState("playing", true);
@@ -2520,6 +2735,7 @@ function setupVideoEventHandlers(video, api) {
     api.setState("waiting", false);
     api.setState("buffering", false);
     api.setState("playbackState", "playing");
+    syncEndedFromElement();
   });
   addHandler("pause", () => {
     api.setState("playing", false);
@@ -2574,6 +2790,7 @@ function setupVideoEventHandlers(video, api) {
   });
   addHandler("seeking", () => {
     api.setState("seeking", true);
+    syncEndedFromElement();
   });
   addHandler("seeked", () => {
     api.setState("seeking", false);
@@ -2678,6 +2895,7 @@ function createValidatingPlaylistLoader(Hls) {
     }
   };
 }
+var PKG_VERSION$a = "1.7.1";
 var DEFAULT_CONFIG$4 = {
   debug: false,
   autoStartLoad: true,
@@ -2735,6 +2953,10 @@ function createHLSPluginWith(loader, variant, config) {
   let onlineListener = null;
   let reconnectTriggerError = null;
   let reconnectExhausted = false;
+  const applyPoster = () => {
+    if (!video) return;
+    video.poster = api?.getState("poster") || "";
+  };
   const getOrCreateVideo = () => {
     if (video) return video;
     const existing = api?.container.querySelector("video");
@@ -2747,10 +2969,7 @@ function createHLSPluginWith(loader, variant, config) {
     video.preload = "metadata";
     video.controls = false;
     video.playsInline = true;
-    const poster = api?.getState("poster");
-    if (poster) {
-      video.poster = poster;
-    }
+    applyPoster();
     api?.container.appendChild(video);
     return video;
   };
@@ -3293,7 +3512,7 @@ function createHLSPluginWith(loader, variant, config) {
   const plugin = {
     id: "hls-provider",
     name: variant.name,
-    version: "1.0.0",
+    version: PKG_VERSION$a,
     type: "provider",
     description: variant.description,
     canPlay(src) {
@@ -3384,6 +3603,9 @@ function createHLSPluginWith(loader, variant, config) {
         };
         window.addEventListener("online", onlineListener);
       }
+      const unsubPoster = api.subscribeToState((event) => {
+        if (event.key === "poster") applyPoster();
+      });
       api.onDestroy(() => {
         unsubPlay();
         unsubPause();
@@ -3392,6 +3614,7 @@ function createHLSPluginWith(loader, variant, config) {
         unsubMute();
         unsubRate();
         unsubQuality();
+        unsubPoster();
       });
     },
     async destroy() {
@@ -3417,6 +3640,7 @@ function createHLSPluginWith(loader, variant, config) {
       hasPlayedContent = false;
       cleanup(new Error("HLS load cancelled: superseded by a new load"));
       currentSrc = src;
+      applyPoster();
       api.setState("playbackState", "loading");
       api.setState("buffering", true);
       if (api.getState("airplayActive") && loader.supportsNativeHLS()) {
@@ -3635,7 +3859,462 @@ function createHLSPlugin(config) {
     config
   );
 }
-var styles$1 = `
+var PKG_VERSION$9 = "1.7.1";
+var VIDEO_EXTENSIONS = ["mp4", "webm", "mov", "mkv", "ogv", "m4v"];
+var AUDIO_EXTENSIONS = ["mp3", "wav", "ogg", "flac", "aac", "m4a", "opus", "weba"];
+var SUPPORTED_EXTENSIONS = [...VIDEO_EXTENSIONS, ...AUDIO_EXTENSIONS];
+var MIME_TYPES = {
+  // Video
+  mp4: "video/mp4",
+  m4v: "video/mp4",
+  webm: "video/webm",
+  mov: "video/quicktime",
+  mkv: "video/x-matroska",
+  ogv: "video/ogg",
+  // Audio
+  mp3: "audio/mpeg",
+  wav: "audio/wav",
+  ogg: "audio/ogg",
+  flac: "audio/flac",
+  aac: "audio/aac",
+  m4a: "audio/mp4",
+  opus: "audio/opus",
+  weba: "audio/webm"
+};
+function createNativePlugin(config) {
+  const preload = config?.preload ?? "metadata";
+  const load_timeout_ms = config?.loadTimeoutMs ?? 3e4;
+  let api = null;
+  let video = null;
+  let cleanupEvents = null;
+  let derived_title = null;
+  let is_audio_source = false;
+  const getExtension = (src) => {
+    try {
+      const url = new URL(src, window.location.href);
+      const pathname = url.pathname;
+      const ext = pathname.split(".").pop()?.toLowerCase() ?? "";
+      return ext;
+    } catch {
+      const rawExt = src.split(".").pop()?.toLowerCase() ?? "";
+      return rawExt.split("?")[0] ?? "";
+    }
+  };
+  const getMimeType = (ext) => {
+    return MIME_TYPES[ext] || "video/mp4";
+  };
+  const isAudioExtension = (ext) => {
+    return AUDIO_EXTENSIONS.includes(ext);
+  };
+  const canBrowserPlay = (mimeType) => {
+    const isAudio = mimeType.startsWith("audio/");
+    const testElement = isAudio ? document.createElement("audio") : document.createElement("video");
+    const canPlay = testElement.canPlayType(mimeType);
+    return canPlay === "probably" || canPlay === "maybe";
+  };
+  const applyPoster = () => {
+    if (!video) return;
+    if (is_audio_source) {
+      video.poster = "";
+      return;
+    }
+    video.poster = api?.getState("poster") || "";
+  };
+  const getOrCreateVideo = () => {
+    if (video) return video;
+    const existing = api?.container.querySelector("video");
+    if (existing) {
+      video = existing;
+      return video;
+    }
+    video = document.createElement("video");
+    video.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%;display:block;object-fit:contain;background:#000";
+    video.preload = preload;
+    video.controls = false;
+    video.playsInline = true;
+    applyPoster();
+    api?.container.appendChild(video);
+    return video;
+  };
+  const setupEventListeners = (videoEl) => {
+    const handlers = [];
+    const on = (event, handler) => {
+      videoEl.addEventListener(event, handler);
+      handlers.push([event, handler]);
+    };
+    const syncEndedFromElement = () => {
+      if (videoEl.ended || !api?.getState("ended")) return;
+      api?.setState("ended", false);
+      api?.setState("playbackState", videoEl.paused ? "paused" : "playing");
+    };
+    on("play", () => {
+      api?.setState("paused", false);
+      syncEndedFromElement();
+    });
+    on("playing", () => {
+      api?.setState("playing", true);
+      api?.setState("paused", false);
+      api?.setState("playbackState", "playing");
+      api?.emit("playback:play", void 0);
+      syncEndedFromElement();
+    });
+    on("pause", () => {
+      api?.setState("playing", false);
+      api?.setState("paused", true);
+      api?.setState("playbackState", "paused");
+      api?.emit("playback:pause", void 0);
+    });
+    on("ended", () => {
+      api?.setState("playing", false);
+      api?.setState("ended", true);
+      api?.setState("playbackState", "ended");
+      api?.emit("playback:ended", void 0);
+    });
+    on("timeupdate", () => {
+      api?.setState("currentTime", videoEl.currentTime);
+      api?.emit("playback:timeupdate", { currentTime: videoEl.currentTime });
+    });
+    on("durationchange", () => {
+      api?.setState("duration", videoEl.duration || 0);
+    });
+    on("loadedmetadata", () => {
+      api?.setState("duration", videoEl.duration || 0);
+      api?.emit("media:loadedmetadata", { duration: videoEl.duration || 0 });
+    });
+    on("canplay", () => {
+      api?.setState("buffering", false);
+      api?.emit("media:canplay", void 0);
+    });
+    on("canplaythrough", () => {
+      api?.emit("media:canplaythrough", void 0);
+    });
+    on("waiting", () => {
+      api?.setState("buffering", true);
+      api?.emit("media:waiting", void 0);
+    });
+    on("progress", () => {
+      if (videoEl.buffered.length > 0) {
+        const bufferedEnd = videoEl.buffered.end(videoEl.buffered.length - 1);
+        const duration = videoEl.duration || 0;
+        const buffered = duration > 0 ? bufferedEnd / duration : 0;
+        api?.setState("bufferedAmount", buffered);
+        api?.emit("media:progress", { buffered });
+      }
+    });
+    on("seeking", () => {
+      api?.setState("seeking", true);
+      syncEndedFromElement();
+    });
+    on("seeked", () => {
+      api?.setState("seeking", false);
+      api?.emit("playback:seeked", { time: videoEl.currentTime });
+    });
+    on("volumechange", () => {
+      api?.setState("volume", videoEl.volume);
+      api?.setState("muted", videoEl.muted);
+      api?.emit("volume:change", { volume: videoEl.volume, muted: videoEl.muted });
+    });
+    on("ratechange", () => {
+      api?.setState("playbackRate", videoEl.playbackRate);
+      api?.emit("playback:ratechange", { rate: videoEl.playbackRate });
+    });
+    on("stalled", () => {
+      api?.setState("buffering", true);
+      api?.emit("media:stalled", void 0);
+      api?.logger.warn("Media stalled - network may be slow");
+    });
+    on("suspend", () => {
+      api?.emit("media:suspend", void 0);
+    });
+    on("abort", () => {
+      api?.emit("media:abort", void 0);
+    });
+    on("error", () => {
+      const error = videoEl.error;
+      let message = "Unknown video error";
+      if (error) {
+        switch (error.code) {
+          case MediaError.MEDIA_ERR_ABORTED:
+            message = "Playback aborted";
+            break;
+          case MediaError.MEDIA_ERR_NETWORK:
+            message = "Network error";
+            break;
+          case MediaError.MEDIA_ERR_DECODE:
+            message = "Decode error - format may not be supported";
+            break;
+          case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
+            message = "Format not supported";
+            break;
+        }
+      }
+      api?.logger.error("Video error", { code: error?.code, message });
+      api?.emit("error", {
+        code: ErrorCode.PLAYBACK_FAILED,
+        message,
+        fatal: true,
+        timestamp: Date.now()
+      });
+    });
+    on("enterpictureinpicture", () => {
+      api?.setState("pip", true);
+      api?.logger.debug("PiP: entered (standard)");
+    });
+    on("leavepictureinpicture", () => {
+      api?.setState("pip", false);
+      api?.logger.debug("PiP: exited (standard)");
+      if (!videoEl.paused || api?.getState("playing")) {
+        videoEl.play().catch(() => {
+        });
+      }
+    });
+    const webkitVideo = videoEl;
+    if ("webkitPresentationMode" in videoEl) {
+      on("webkitpresentationmodechanged", () => {
+        const mode = webkitVideo.webkitPresentationMode;
+        api?.setState("pip", mode === "picture-in-picture");
+        api?.logger.debug(`PiP: mode changed to ${mode} (webkit)`);
+        if (mode === "inline" && videoEl.paused) {
+          videoEl.play().catch(() => {
+          });
+        }
+      });
+    }
+    return () => {
+      handlers.forEach(([event, handler]) => {
+        videoEl.removeEventListener(event, handler);
+      });
+    };
+  };
+  const cleanup = () => {
+    cleanupEvents?.();
+    cleanupEvents = null;
+    if (video) {
+      video.pause();
+      video.removeAttribute("src");
+      video.load();
+    }
+  };
+  const plugin = {
+    id: "native-provider",
+    name: "Native Media Provider",
+    version: PKG_VERSION$9,
+    type: "provider",
+    description: "Native HTML5 playback for video (MP4, WebM, MOV) and audio (MP3, WAV, FLAC, AAC)",
+    canPlay(src) {
+      const ext = getExtension(src);
+      if (!SUPPORTED_EXTENSIONS.includes(ext)) {
+        return false;
+      }
+      const mimeType = getMimeType(ext);
+      return canBrowserPlay(mimeType);
+    },
+    async init(pluginApi) {
+      api = pluginApi;
+      api.logger.info("Native video plugin initialized");
+      const unsubPlay = api.on("playback:play", async () => {
+        if (!video) return;
+        try {
+          await video.play();
+        } catch (e) {
+          api?.logger.error("Play failed", e);
+        }
+      });
+      const unsubPause = api.on("playback:pause", () => {
+        video?.pause();
+      });
+      const unsubSeek = api.on("playback:seeking", ({ time }) => {
+        if (!video) return;
+        const clampedTime = Math.max(0, Math.min(time, video.duration || 0));
+        video.currentTime = clampedTime;
+      });
+      const unsubVolume = api.on("volume:change", ({ volume, muted }) => {
+        if (video) {
+          video.volume = volume;
+          video.muted = muted;
+        }
+      });
+      const unsubMute = api.on("volume:mute", ({ muted }) => {
+        if (video) video.muted = muted;
+      });
+      const unsubRate = api.on("playback:ratechange", ({ rate }) => {
+        if (video) video.playbackRate = rate;
+      });
+      const unsubPoster = api.subscribeToState((event) => {
+        if (event.key === "poster") applyPoster();
+      });
+      api.onDestroy(() => {
+        unsubPlay();
+        unsubPause();
+        unsubSeek();
+        unsubVolume();
+        unsubMute();
+        unsubRate();
+        unsubPoster();
+      });
+    },
+    async destroy() {
+      api?.logger.info("Native video plugin destroying");
+      cleanup();
+      if (video?.parentNode) {
+        video.parentNode.removeChild(video);
+      }
+      video = null;
+      api = null;
+      derived_title = null;
+      is_audio_source = false;
+    },
+    async loadSource(src) {
+      if (!api) throw new Error("Plugin not initialized");
+      const ext = getExtension(src);
+      const mimeType = getMimeType(ext);
+      const isAudio = isAudioExtension(ext);
+      is_audio_source = isAudio;
+      api.logger.info("Loading native media source", { src, mimeType, isAudio });
+      cleanup();
+      api.setState("playbackState", "loading");
+      api.setState("buffering", true);
+      api.setState("mediaType", isAudio ? "audio" : "video");
+      if (isAudio) {
+        const current_title = api.getState("title");
+        if (!current_title || current_title === derived_title) {
+          try {
+            const url = new URL(src, window.location.href);
+            const filename = url.pathname.split("/").pop() || "Audio";
+            const title = decodeURIComponent(filename.replace(/\.[^.]+$/, "").replace(/[-_]/g, " "));
+            derived_title = title;
+            api.setState("title", title);
+          } catch {
+            derived_title = "Audio";
+            api.setState("title", "Audio");
+          }
+        }
+      }
+      api.setState("qualities", []);
+      api.setState("currentQuality", null);
+      const videoEl = getOrCreateVideo();
+      videoEl.style.display = isAudio ? "none" : "block";
+      applyPoster();
+      cleanupEvents = setupEventListeners(videoEl);
+      return new Promise((resolve, reject) => {
+        let watchdog = null;
+        const settle = () => {
+          videoEl.removeEventListener("loadedmetadata", onLoaded);
+          videoEl.removeEventListener("error", onError);
+          if (watchdog !== null) {
+            clearTimeout(watchdog);
+            watchdog = null;
+          }
+        };
+        const onLoaded = () => {
+          settle();
+          const muted = api?.getState("muted");
+          const volume = api?.getState("volume");
+          if (muted !== void 0) videoEl.muted = muted;
+          if (volume !== void 0) videoEl.volume = volume;
+          api?.setState("source", { src, type: mimeType });
+          api?.setState("playbackState", "ready");
+          api?.setState("buffering", false);
+          api?.emit("media:loaded", { src, type: mimeType });
+          resolve();
+        };
+        const onError = () => {
+          settle();
+          const error = videoEl.error;
+          reject(new Error(error?.message || "Failed to load video source"));
+        };
+        if (load_timeout_ms > 0) {
+          watchdog = setTimeout(() => {
+            settle();
+            reject(new Error("Video took too long to load (network timeout)"));
+          }, load_timeout_ms);
+        }
+        videoEl.addEventListener("loadedmetadata", onLoaded);
+        videoEl.addEventListener("error", onError);
+        videoEl.src = src;
+        videoEl.load();
+      });
+    }
+  };
+  return plugin;
+}
+var UNKNOWN_RANK = 3;
+var DEFAULT_PRIORITY = {
+  "bandwidth-indicator": { rank: 0, exit: "hide" },
+  "skip-backward": { rank: 1, exit: "overflow" },
+  "skip-forward": { rank: 1, exit: "overflow" },
+  pip: { rank: 2, exit: "overflow" },
+  chromecast: { rank: 4, exit: "overflow" },
+  airplay: { rank: 4, exit: "overflow" },
+  volume: { rank: 5, exit: "overflow" },
+  captions: { rank: 6, exit: "overflow" },
+  quality: { rank: 6, exit: "hide" },
+  time: { rank: 7, exit: "hide" },
+  play: { rank: "never", exit: "overflow" },
+  "live-indicator": { rank: "never", exit: "overflow" },
+  settings: { rank: "never", exit: "overflow" },
+  fullscreen: { rank: "never", exit: "overflow" },
+  spacer: { rank: "never", exit: "overflow" }
+};
+function resolveFitItems(layout, priority) {
+  return layout.map((id) => {
+    const rule = DEFAULT_PRIORITY[id];
+    const rank = priority?.[id] ?? rule?.rank ?? UNKNOWN_RANK;
+    return { id, rank, exit: rule?.exit ?? "overflow" };
+  });
+}
+function assertFitLayout(layout, priority) {
+  if (!layout.includes("quality") || layout.includes("settings")) {
+    return;
+  }
+  const [quality] = resolveFitItems(["quality"], priority);
+  if (quality.rank === "never") {
+    return;
+  }
+  throw new Error(
+    `uiPlugin: a layout with "quality" needs "settings" as well. The quality control hides when the bar does not fit, and the settings menu is where its Quality row lives. Add "settings" to controls, pin quality with priority: { quality: 'never' }, or set responsive: false.`
+  );
+}
+function needed(widths, gap, overflowButtonWidth, trayUsed) {
+  const content = widths.reduce((sum, width) => sum + width, 0);
+  const gaps = gap * Math.max(0, widths.length - 1);
+  const tray = trayUsed ? overflowButtonWidth + gap : 0;
+  return content + gaps + tray;
+}
+function planFit(items, available, gap, overflowButtonWidth) {
+  const ids = items.map((item) => item.id);
+  if (available <= 0) {
+    return { inBar: ids, overflow: [], hidden: [] };
+  }
+  const counted = items.filter((item) => item.visible && item.width > 0);
+  const remaining = [...counted];
+  const overflow = /* @__PURE__ */ new Set();
+  const hidden = /* @__PURE__ */ new Set();
+  while (needed(
+    remaining.map((item) => item.width),
+    gap,
+    overflowButtonWidth,
+    overflow.size > 0
+  ) > available) {
+    let victim = -1;
+    for (let i = 0; i < remaining.length; i++) {
+      const candidate = remaining[i];
+      if (candidate.rank === "never") continue;
+      if (victim === -1 || candidate.rank <= remaining[victim].rank) {
+        victim = i;
+      }
+    }
+    if (victim === -1) break;
+    const [removed] = remaining.splice(victim, 1);
+    (removed.exit === "hide" ? hidden : overflow).add(removed.id);
+  }
+  return {
+    inBar: ids.filter((id) => !overflow.has(id) && !hidden.has(id)),
+    overflow: ids.filter((id) => overflow.has(id)),
+    hidden: ids.filter((id) => hidden.has(id))
+  };
+}
+var styles$2 = `
 /* ============================================
    Container & Base
    ============================================ */
@@ -3695,7 +4374,17 @@ var styles$1 = `
   display: flex;
   align-items: center;
   padding: 0 12px 12px;
+  /* Composed through a variable so the fullscreen rule below can add the
+     device's own inset without restating the 12px. */
+  padding-bottom: calc(12px + var(--sp-inset-bottom, 0px));
   gap: 4px;
+  /* Declared on the bar because the fit needs the same number the volume rules
+     below use: the slider expands mid-interaction and the plugin reserves the
+     room in advance (see interactionReserve() in index.ts, which reads this
+     property off this element at init). One declaration, so the stylesheet and
+     the arithmetic cannot drift. Both the bar and the overflow tray are inside
+     .sp-controls, so a volume control inherits it wherever the fit put it. */
+  --sp-volume-slider-width: 64px;
   opacity: 0;
   transform: translateY(4px);
   transition: opacity 0.25s ease, transform 0.25s ease;
@@ -3713,12 +4402,37 @@ var styles$1 = `
   pointer-events: none;
 }
 
+/* ============================================
+   Safe Area (fullscreen only)
+
+   Scoped to :fullscreen on purpose. Applied unconditionally, the inset would
+   push an inline player's controls up on any page whose viewport meta says
+   viewport-fit=cover, where there is no notch or home indicator over the
+   player at all. Both the bar and the progress wrapper are direct children of
+   the container, which is the element that goes fullscreen.
+
+   The :-webkit-full-screen twin is a separate rule because an unknown
+   pseudo-class anywhere in a selector list invalidates the whole rule.
+
+   Nothing is needed in packages/embed/iframe.html: viewport-fit has no effect
+   inside an iframe.
+   ============================================ */
+:fullscreen > .sp-controls,
+:fullscreen > .sp-progress-wrapper {
+  --sp-inset-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+:-webkit-full-screen > .sp-controls,
+:-webkit-full-screen > .sp-progress-wrapper {
+  --sp-inset-bottom: env(safe-area-inset-bottom, 0px);
+}
+
 /* ============================================
    Progress Bar (Above Controls)
    ============================================ */
 .sp-progress-wrapper {
   position: absolute;
-  bottom: 48px;
+  bottom: calc(48px + var(--sp-inset-bottom, 0px));
   left: 12px;
   right: 12px;
   height: 20px;
@@ -3734,6 +4448,31 @@ var styles$1 = `
   opacity: 1;
 }
 
+/* Touch: a 20px wrapper is not a 20px target. The control bar is a later
+   sibling at the same z-index and spans 0..56px from the bottom, so it wins
+   hit-testing in the 48..56 overlap and the exclusive region for scrubbing is
+   12px. The wrapper grows UPWARD to 44px (48..92) because growing downward
+   would be swallowed by the bar; the 3px bar itself stays exactly where it was
+   (centred 8.5px above the wrapper's bottom edge, which is what
+   align-items: center gave it inside 20px). The handle and tooltip
+   enlargements are gated behind (hover: hover) and never match a finger, but
+   .sp-progress--dragging is not, so the handle still appears mid-drag.
+
+   any-pointer, not pointer: (pointer: coarse) describes the PRIMARY pointer
+   only, so a hybrid laptop with a mouse and a touchscreen reports fine and kept
+   the 12px exclusive region under a finger. (any-pointer: coarse) is true
+   whenever a coarse pointer is available at all, which is the population that
+   needs the target. The cost on such a machine is 24px of extra hit area for
+   the mouse, over the player's own bottom edge. */
+@media (any-pointer: coarse) {
+  .sp-progress-wrapper {
+    height: 44px;
+    align-items: flex-end;
+    padding-bottom: 8.5px;
+    box-sizing: border-box;
+  }
+}
+
 .sp-progress {
   position: relative;
   width: 100%;
@@ -3941,6 +4680,61 @@ var styles$1 = `
   min-width: 0;
 }
 
+/* ============================================
+   Overflow Tray
+
+   The wrapper is deliberately unpositioned: the strip is absolutely
+   positioned against .sp-controls (the nearest positioned ancestor), so it
+   spans the bar's width and sits directly above it instead of hanging off a
+   44px button.
+
+   The strip wraps horizontally and keeps overflow visible. A vertical menu of
+   44px rows would be taller than a portrait phone player (211px at 375px wide,
+   measured 2026-09-05) and a scrolling one would clip the popovers registered
+   controls own.
+   ============================================ */
+.sp-overflow {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.sp-overflow-tray {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 4px;
+  padding: 8px 12px;
+  background: rgba(20, 20, 20, 0.95);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-radius: 8px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+  overflow: visible;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(8px);
+  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
+  z-index: 20;
+}
+
+.sp-overflow-tray--open {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+/* Beats a control's own inline style.display = '' on its next update(), so a
+   control the fit took off screen stays off screen until the fit says
+   otherwise. */
+.sp-control--collapsed {
+  display: none !important;
+}
+
 /* ============================================
    Time Display
    ============================================ */
@@ -3968,14 +4762,18 @@ var styles$1 = `
   transition: width 0.2s ease;
 }
 
+/* Both widths come from --sp-volume-slider-width on .sp-controls, which is also
+   what the fit reserves for this control. focus-within is deliberately not
+   gated on hover: a tap on the mute button focuses it, which is how the slider
+   opens on a phone. */
 @media (hover: hover) {
   .sp-volume:hover .sp-volume__slider-wrap {
-    width: 64px;
+    width: var(--sp-volume-slider-width);
   }
 }
 
 .sp-volume:focus-within .sp-volume__slider-wrap {
-  width: 64px;
+  width: var(--sp-volume-slider-width);
 }
 
 .sp-volume__slider {
@@ -4076,6 +4874,14 @@ var styles$1 = `
   position: absolute;
   bottom: calc(100% + 8px);
   right: 0;
+  /* Bounded to the player, see .sp-settings-panel. border-box because the
+     bound is a content-box height by default and this menu adds 8px of padding
+     top and bottom: at the 139px bound a 211px player gives, it rendered 155px
+     and the host clipped the last 16px of it. */
+  box-sizing: border-box;
+  max-height: var(--sp-menu-max-height, none);
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
   background: rgba(20, 20, 20, 0.95);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
@@ -4144,6 +4950,29 @@ var styles$1 = `
   position: absolute;
   bottom: calc(100% + 8px);
   right: 0;
+  /* Bounded to the room above the control bar, written by the UI plugin's
+     ResizeObserver as max(120px, container height - the bar's measured height
+     - 16px). The bar is measured rather than assumed because its
+     padding-bottom carries the safe-area inset in fullscreen, which moves the
+     anchor these menus hang from. The Speed sub-panel is 253px (a
+     37px header plus six 36px rows) against a 211px portrait phone player, so
+     without this the host's overflow: hidden cuts off the Back header and the
+     first three speeds and playback speed is unreachable (measured at 375x211
+     on 2026-09-05). With the variable unset the panel behaves exactly as it
+     did before.
+
+     Not applied to .sp-overflow-tray: that one has to keep overflow visible so
+     the popovers its adopted controls own are not clipped.
+
+     border-box because max-height bounds the content box: .sp-settings-panel--main
+     is this same element with 4px of padding top and bottom, so wherever the
+     bound binds the main menu, it rendered 8px past it and the host clipped the
+     difference. The --sub views set padding: 0 and were already exact, which is
+     why the browser harness's speed-panel check could not see this. */
+  box-sizing: border-box;
+  max-height: var(--sp-menu-max-height, none);
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
   background: rgba(20, 20, 20, 0.95);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
@@ -4155,7 +4984,6 @@ var styles$1 = `
   transform: translateY(8px);
   transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
   z-index: 20;
-  overflow: hidden;
 }
 
 .sp-settings-panel--open {
@@ -4302,6 +5130,70 @@ var styles$1 = `
   opacity: 0.4;
 }
 
+/* ============================================
+   Big Play Button
+
+   z-index 12 puts it above the gradient (5) and above the gestures plugin's
+   tap surface (6), so a tap lands on the button and starts playback instead
+   of being read as a tap-to-toggle-controls gesture - exactly how the control
+   bar's play button (10) already behaves. It stays below the spinner (15) and
+   the error overlay (25), both of which own the middle of the picture when
+   they are up.
+
+   Hidden with visibility, not opacity alone, so it takes no pointer events
+   while it is away.
+   ============================================ */
+.sp-big-play {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 12;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* Comfortably past the 44px minimum touch target the control bar uses. */
+  width: 72px;
+  height: 72px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--sp-accent, #e50914);
+  color: #fff;
+  cursor: pointer;
+  opacity: 0;
+  visibility: hidden;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+  transition: opacity 0.2s ease, visibility 0.2s, transform 0.15s ease,
+    background 0.15s ease;
+}
+
+.sp-big-play--visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.sp-big-play svg {
+  width: 36px;
+  height: 36px;
+  fill: currentColor;
+  /* Optical centring: the play triangle's mass sits left of the glyph box. */
+  margin-left: 3px;
+}
+
+.sp-big-play:hover {
+  transform: translate(-50%, -50%) scale(1.06);
+}
+
+.sp-big-play:active {
+  transform: translate(-50%, -50%) scale(0.96);
+}
+
+.sp-big-play:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 3px;
+}
+
 /* ============================================
    Error Overlay
    ============================================ */
@@ -4476,17 +5368,24 @@ var styles$1 = `
   .sp-control,
   .sp-volume__slider-wrap,
   .sp-quality-menu,
+  .sp-overflow-tray,
   .sp-settings-panel,
   .sp-settings-panel__row,
   .sp-settings-panel__item,
   .sp-settings-panel__header,
   .sp-buffering,
+  .sp-big-play,
   .sp-error-overlay,
   .sp-error-overlay__retry,
   .sp-error-overlay__dismiss {
     transition: none;
   }
 
+  .sp-big-play:hover,
+  .sp-big-play:active {
+    transform: translate(-50%, -50%);
+  }
+
   .sp-live__dot,
   .sp-spin {
     animation: none;
@@ -4523,6 +5422,8 @@ var icons = {
   captionsOff: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.5 5.5v13h-15v-13h15zM19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2z"/></svg>`,
   checkmark: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>`,
   chevronUp: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></svg>`,
+  /** Vertical ellipsis for the overflow tray button. */
+  more: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>`,
   chevronDown: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>`,
   spinner: `<svg viewBox="0 0 24 24" fill="currentColor" class="sp-spin"><path d="M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8z"/></svg>`,
   forward10: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 13c0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6v4l5-5-5-5v4c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8h-2z"/><path d="M10.9 16V11.73l-.72.36-.48-.86 1.48-.73h.85V16h-1.13zm2.77-2.14c0-.66.13-1.2.38-1.6.26-.41.66-.62 1.2-.62.55 0 .95.21 1.21.62.25.4.38.94.38 1.6 0 .67-.13 1.2-.38 1.61-.26.41-.66.61-1.21.61-.54 0-.94-.2-1.2-.61-.25-.41-.38-.94-.38-1.61zm1.12 0c0 .45.05.79.15 1.03.1.23.26.35.48.35s.38-.12.49-.35c.1-.24.15-.58.15-1.03s-.05-.78-.15-1.02c-.11-.23-.27-.35-.49-.35s-.38.12-.48.35c-.1.24-.15.57-.15 1.02z"/></svg>`,
@@ -4639,6 +5540,102 @@ var PlayButton = class {
     this.el.remove();
   }
 };
+var BigPlayButton = class {
+  /**
+   * @param api - Plugin API for state and container access
+   * @param isOverlayVisible - Whether the error overlay is showing; the button
+   *   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) {
+    this.hasStarted = false;
+    this.clickHandler = () => {
+      this.start();
+    };
+    this.api = api;
+    this.isOverlayVisible = isOverlayVisible;
+    const btn = document.createElement("button");
+    btn.className = "sp-big-play";
+    btn.setAttribute("type", "button");
+    btn.setAttribute("aria-label", "Play");
+    setHTML(btn, icons.play);
+    btn.addEventListener("click", this.clickHandler);
+    this.el = btn;
+  }
+  render() {
+    return this.el;
+  }
+  /**
+   * Show or hide the button, and swap in the replay glyph after `ended`.
+   *
+   * Driven by the same `scheduleUpdate()` pass as every other control, so the
+   * button cannot disagree with the control bar about what state playback is
+   * in.
+   */
+  update() {
+    const playing = this.api.getState("playing");
+    const ended = this.hasEnded();
+    const currentTime = this.api.getState("currentTime");
+    const playbackState = this.api.getState("playbackState");
+    const error = this.api.getState("error");
+    if (playing) {
+      this.hasStarted = true;
+    }
+    let visible;
+    if (error || this.isOverlayVisible()) {
+      visible = false;
+    } else if (playbackState === "loading") {
+      visible = false;
+    } else if (playing) {
+      visible = false;
+    } else if (ended) {
+      visible = true;
+    } else if (this.hasStarted || currentTime !== 0) {
+      visible = false;
+    } else {
+      visible = playbackState === "idle" || playbackState === "ready";
+    }
+    setHTML(this.el, ended ? icons.replay : icons.play);
+    setAttr(this.el, "aria-label", ended ? "Replay" : "Play");
+    this.el.classList.toggle("sp-big-play--visible", visible);
+  }
+  /**
+   * Whether playback has actually ended, asked of the media element.
+   *
+   * NOT the `ended` state key. Measured in Chrome on 2026-09-02: neither
+   * provider clears that key on a replay (only `load()` does), so after a
+   * viewer replays a video it stays true for the rest of the session, while
+   * `video.ended` correctly goes false the moment the position leaves the
+   * end. Trusting the key would leave this button sitting over playing video,
+   * and would make a later pause bring it back as Replay. The key is the
+   * fallback for the window before a provider has created an element.
+   */
+  hasEnded() {
+    const video = getVideo(this.api.container);
+    return video ? video.ended : Boolean(this.api.getState("ended"));
+  }
+  /**
+   * Start (or restart) playback.
+   *
+   * The same two branches as the control bar's play button: restart from zero
+   * after the video ended, otherwise just play. There is no pause branch,
+   * because this button is never on screen while playback is running. It reads
+   * `video.ended` for the same reason `hasEnded()` does.
+   */
+  start() {
+    const video = getVideo(this.api.container);
+    if (!video) return;
+    if (video.ended) {
+      video.currentTime = 0;
+    }
+    video.play().catch(() => {
+    });
+  }
+  destroy() {
+    this.el.removeEventListener("click", this.clickHandler);
+    this.el.remove();
+  }
+};
 var ThumbnailPreview = class {
   constructor() {
     this.config = null;
@@ -5569,16 +6566,22 @@ var FullscreenButton = class {
       setAttr(this.el, "aria-label", "Fullscreen");
     }
   }
+  /**
+   * Enter or leave fullscreen.
+   *
+   * The direction comes from the browser rather than from the `fullscreen`
+   * state key: state is a report of what happened, and a stale one would invert
+   * the button. Rejections are swallowed because the browser refuses these
+   * routinely (no user gesture, denied by permission policy) and an unhandled
+   * rejection helps nobody.
+   */
   async toggle() {
     const container = this.api.container;
-    const video = getVideo(container);
     try {
-      if (document.fullscreenElement) {
-        await document.exitFullscreen();
-      } else if (container.requestFullscreen) {
-        await container.requestFullscreen();
-      } else if (video?.webkitEnterFullscreen) {
-        video.webkitEnterFullscreen();
+      if (isFullscreen(container)) {
+        await exitFullscreen(container);
+      } else {
+        await enterFullscreen(container);
       }
     } catch {
     }
@@ -6256,21 +7259,168 @@ var BandwidthIndicator = class {
     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 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 OverflowTray = class {
+  /**
+   * @param api - Plugin API, kept for parity with the other controls and for
+   *   logging; the tray itself reads no state
+   */
+  constructor(api) {
+    this.api = api;
+    this.isOpen = false;
+    this.toggleHandler = () => {
+      this.isOpen ? this.close() : this.open();
+    };
+    this.el = createElement("div", { className: "sp-overflow" });
+    this.btn = createButton("sp-overflow__btn", "More controls", icons.more);
+    this.btn.setAttribute("aria-haspopup", "true");
+    this.btn.setAttribute("aria-expanded", "false");
+    this.btn.addEventListener("click", this.toggleHandler);
+    this.panel = createElement("div", {
+      className: "sp-overflow-tray",
+      role: "group",
+      "aria-label": "More controls"
+    });
+    this.el.appendChild(this.btn);
+    this.el.appendChild(this.panel);
+    this.el.style.display = "none";
+    this.closeHandler = (e) => {
+      if (!this.el.contains(e.target)) {
+        this.close();
+      }
+    };
+    document.addEventListener("click", this.closeHandler);
+    this.keyHandler = (e) => {
+      if (!this.isOpen || e.key !== "Escape") return;
+      e.preventDefault();
+      e.stopPropagation();
+      this.close();
+      this.btn.focus();
+    };
+    document.addEventListener("keydown", this.keyHandler);
+  }
+  /**
+   * The bar item to place in the control bar.
+   *
+   * @returns The wrapper holding the button and the strip
+   */
+  render() {
+    return this.el;
+  }
+  /**
+   * No state of its own: the fit loop owns what is inside it.
+   */
+  update() {
+  }
+  /**
+   * Move a control's element into the tray.
+   *
+   * The element is moved as-is, so its class, icon, aria-label, event handlers
+   * and `update()` all keep working.
+   *
+   * @param el - The control element leaving the bar
+   */
+  adopt(el) {
+    this.panel.appendChild(el);
+    this.syncVisibility();
+  }
+  /**
+   * Take a control's element back out of the tray.
+   *
+   * The caller decides where in the bar it goes; this only detaches it and
+   * updates the button's visibility.
+   *
+   * @param el - The control element returning to the bar
+   * @returns The same element, detached
+   */
+  release(el) {
+    if (el.parentNode === this.panel) {
+      this.panel.removeChild(el);
     }
-    const highestBitrate = Math.max(...qualities.map((q) => q.bitrate));
-    if (highestBitrate > 0 && bandwidth < highestBitrate) {
-      this.el.style.display = "";
-    } else {
-      this.el.style.display = "none";
+    this.syncVisibility();
+    return el;
+  }
+  /**
+   * Whether an element is currently held by the tray.
+   *
+   * @param el - Element to test
+   * @returns True when the tray is its parent
+   */
+  holds(el) {
+    return el.parentNode === this.panel;
+  }
+  /**
+   * Open the strip.
+   */
+  open() {
+    if (this.isOpen) return;
+    this.isOpen = true;
+    this.panel.classList.add("sp-overflow-tray--open");
+    this.btn.setAttribute("aria-expanded", "true");
+  }
+  /**
+   * Close the strip.
+   *
+   * Deliberately not called after a control inside it is used: skip, PiP and
+   * cast are things a viewer taps more than once in a row.
+   */
+  close() {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+    this.panel.classList.remove("sp-overflow-tray--open");
+    this.btn.setAttribute("aria-expanded", "false");
+  }
+  /**
+   * Show the button only while the tray holds something the viewer can see.
+   *
+   * A control that hid itself (no cast device on the network, no text tracks)
+   * can be sitting in the tray with `display: none`, and a button that opens an
+   * empty strip is worse than no button at all.
+   */
+  syncVisibility() {
+    const usable = Array.from(this.panel.children).some(
+      (child) => child.style.display !== "none"
+    );
+    this.el.style.display = usable ? "" : "none";
+    if (!usable && this.isOpen) {
+      this.close();
     }
   }
+  /**
+   * Re-check the button's visibility after the controls have updated
+   * themselves.
+   */
+  refresh() {
+    this.syncVisibility();
+  }
+  /**
+   * Remove the document listeners and the tray itself.
+   *
+   * Adopted elements are left where they are: they belong to their own
+   * controls, which are destroyed by the plugin alongside this one.
+   */
   destroy() {
+    document.removeEventListener("click", this.closeHandler);
+    document.removeEventListener("keydown", this.keyHandler);
+    this.btn.removeEventListener("click", this.toggleHandler);
     this.el.remove();
+    this.api.logger.debug("Overflow tray destroyed");
   }
 };
 var registry = /* @__PURE__ */ new Map();
@@ -6290,6 +7440,7 @@ function onControlRegistered(listener) {
     listeners.delete(listener);
   };
 }
+var PKG_VERSION$8 = "1.7.1";
 var DEFAULT_LAYOUT = [
   "play",
   "skip-backward",
@@ -6307,6 +7458,14 @@ var DEFAULT_LAYOUT = [
   "fullscreen"
 ];
 var DEFAULT_HIDE_DELAY = 3e3;
+var UNMEASURED_CONTROL_WIDTH = 48;
+var FALLBACK_VOLUME_SLIDER_WIDTH = 64;
+var OVERFLOW_BUTTON_WIDTH = 44;
+var FALLBACK_BAR_PADDING_X = 24;
+var FALLBACK_BAR_GAP = 4;
+var MENU_HEIGHT_RESERVE = 16;
+var FALLBACK_BAR_HEIGHT = 56;
+var MIN_MENU_HEIGHT = 120;
 function uiPlugin(config = {}) {
   let api;
   let controlBar = null;
@@ -6314,6 +7473,7 @@ function uiPlugin(config = {}) {
   let progressBar = null;
   let bufferingIndicator = null;
   let errorOverlay = null;
+  let bigPlayButton = null;
   let styleEl = null;
   let controls = [];
   let hideTimeout = null;
@@ -6324,8 +7484,22 @@ function uiPlugin(config = {}) {
   let recoveredUnsubscribe = null;
   let controlsVisible = true;
   let rafHandle = null;
+  let tray = null;
+  let entries = [];
+  let timeEntry = null;
+  let resizeObserver = null;
+  let barPaddingX = FALLBACK_BAR_PADDING_X;
+  let barGap = FALLBACK_BAR_GAP;
+  let volumeSliderWidth = FALLBACK_VOLUME_SLIDER_WIDTH;
+  let lastFitSignature = null;
+  let fitPending = true;
   const layout = config.controls || DEFAULT_LAYOUT;
   const hideDelay = config.hideDelay ?? DEFAULT_HIDE_DELAY;
+  const showBigPlayButton = config.bigPlayButton !== false;
+  const responsive = config.responsive !== false;
+  if (responsive) {
+    assertFitLayout(layout, config.priority);
+  }
   const createControl = (slot) => {
     switch (slot) {
       case "play":
@@ -6379,13 +7553,179 @@ function uiPlugin(config = {}) {
     if (!controlBar) {
       return;
     }
+    const rules = new Map(
+      resolveFitItems(layout, config.priority).map((template) => [template.id, template])
+    );
     for (const slot of layout) {
       const control = createControl(slot);
-      if (control) {
-        controls.push(control);
-        controlBar.appendChild(control.render());
+      if (!control) {
+        continue;
+      }
+      controls.push(control);
+      const el = control.render();
+      controlBar.appendChild(el);
+      const rule = rules.get(slot);
+      const entry = {
+        slot,
+        control,
+        el,
+        rank: rule?.rank ?? "never",
+        exit: rule?.exit ?? "overflow",
+        width: -1
+      };
+      entries.push(entry);
+      if (slot === "time") {
+        timeEntry = entry;
+      }
+    }
+    if (responsive) {
+      tray = new OverflowTray(api);
+      controls.push(tray);
+      controlBar.appendChild(tray.render());
+      placeTrayButton();
+    }
+  };
+  const placeTrayButton = () => {
+    if (!controlBar || !tray) {
+      return;
+    }
+    const trayEl = tray.render();
+    const fullscreen = entries.find((entry) => entry.slot === "fullscreen");
+    const before = fullscreen && fullscreen.el.parentNode === controlBar ? fullscreen.el : null;
+    if (before) {
+      if (trayEl.nextSibling !== before) {
+        controlBar.insertBefore(trayEl, before);
+      }
+      return;
+    }
+    if (controlBar.lastChild !== trayEl) {
+      controlBar.appendChild(trayEl);
+    }
+  };
+  const visibilitySignature = () => {
+    let flags = "";
+    for (const entry of entries) {
+      flags += entry.el.style.display === "none" ? "0" : "1";
+    }
+    return `${flags}:${timeEntry?.el.textContent?.length ?? 0}`;
+  };
+  const applyFit = (plan) => {
+    if (!controlBar || !tray) {
+      return;
+    }
+    const overflow = new Set(plan.overflow);
+    const hidden = new Set(plan.hidden);
+    for (const entry of entries) {
+      if (entry.slot === "spacer") {
+        continue;
+      }
+      if (hidden.has(entry.slot)) {
+        if (tray.holds(entry.el)) {
+          returnToBar(entry);
+        }
+        entry.el.classList.add("sp-control--collapsed");
+        continue;
+      }
+      entry.el.classList.remove("sp-control--collapsed");
+      if (overflow.has(entry.slot)) {
+        if (!tray.holds(entry.el)) {
+          tray.adopt(entry.el);
+        }
+      } else if (tray.holds(entry.el)) {
+        returnToBar(entry);
+      }
+    }
+    tray.refresh();
+    placeTrayButton();
+  };
+  const returnToBar = (entry) => {
+    if (!controlBar || !tray) {
+      return;
+    }
+    const el = tray.release(entry.el);
+    const trayEl = tray.render();
+    let before = trayEl.parentNode === controlBar ? trayEl : null;
+    for (let i = entries.indexOf(entry) + 1; i < entries.length; i++) {
+      if (entries[i].el.parentNode === controlBar) {
+        before = entries[i].el;
+        break;
       }
     }
+    controlBar.insertBefore(el, before);
+  };
+  const expandedWidth = (entry) => {
+    if (entry.slot !== "volume") {
+      return 0;
+    }
+    const wrap = entry.el.querySelector(".sp-volume__slider-wrap");
+    return wrap ? wrap.getBoundingClientRect().width : 0;
+  };
+  const interactionReserve = (entry) => entry.slot === "volume" ? volumeSliderWidth : 0;
+  const readBarMetrics = (bar) => {
+    const barStyle = getComputedStyle(bar);
+    const paddingLeft = parseFloat(barStyle.paddingLeft);
+    const paddingRight = parseFloat(barStyle.paddingRight);
+    const gap = parseFloat(barStyle.columnGap || barStyle.gap);
+    const sliderWidth = parseFloat(
+      barStyle.getPropertyValue("--sp-volume-slider-width")
+    );
+    barPaddingX = Number.isFinite(paddingLeft) && Number.isFinite(paddingRight) ? paddingLeft + paddingRight : FALLBACK_BAR_PADDING_X;
+    barGap = Number.isFinite(gap) ? gap : FALLBACK_BAR_GAP;
+    volumeSliderWidth = Number.isFinite(sliderWidth) ? sliderWidth : FALLBACK_VOLUME_SLIDER_WIDTH;
+  };
+  const fitControls = () => {
+    if (!responsive || !controlBar || !tray) {
+      return;
+    }
+    if (controlBar.clientWidth === 0) {
+      return;
+    }
+    readBarMetrics(controlBar);
+    const spacerGaps = entries.filter(
+      (entry) => entry.slot === "spacer" && entry.el.style.display !== "none"
+    ).length;
+    const available = controlBar.clientWidth - barPaddingX - spacerGaps * barGap;
+    const items = [];
+    for (const entry of entries) {
+      if (entry.slot === "spacer") {
+        continue;
+      }
+      const visible = entry.el.style.display !== "none";
+      const measurable = visible && entry.el.parentNode === controlBar && !entry.el.classList.contains("sp-control--collapsed");
+      if (measurable) {
+        entry.width = entry.el.getBoundingClientRect().width - expandedWidth(entry);
+      } else if (entry.width < 0) {
+        entry.width = UNMEASURED_CONTROL_WIDTH;
+      }
+      items.push({
+        id: entry.slot,
+        rank: entry.rank,
+        exit: entry.exit,
+        width: entry.width + interactionReserve(entry),
+        visible
+      });
+    }
+    const trayEl = tray.render();
+    const trayWidth = trayEl.style.display === "none" ? 0 : trayEl.getBoundingClientRect().width;
+    applyFit(planFit(items, available, barGap, trayWidth || OVERFLOW_BUTTON_WIDTH));
+    lastFitSignature = visibilitySignature();
+    fitPending = false;
+  };
+  const maybeFit = () => {
+    if (!responsive) {
+      return;
+    }
+    if (!fitPending && visibilitySignature() === lastFitSignature) {
+      return;
+    }
+    fitControls();
+  };
+  const applyMenuBounds = (height) => {
+    const barHeight = controlBar?.offsetHeight || FALLBACK_BAR_HEIGHT;
+    api?.container?.style.setProperty(
+      "--sp-menu-max-height",
+      `${Math.max(MIN_MENU_HEIGHT, Math.round(height) - barHeight - MENU_HEIGHT_RESERVE)}px`
+    );
   };
   const rebuildControlBar = () => {
     if (!controlBar) {
@@ -6393,7 +7733,12 @@ function uiPlugin(config = {}) {
     }
     controls.forEach((c) => c.destroy());
     controls = [];
+    entries = [];
+    timeEntry = null;
+    tray = null;
     controlBar.replaceChildren();
+    lastFitSignature = null;
+    fitPending = true;
     populateControlBar();
     updateControls();
   };
@@ -6407,6 +7752,8 @@ function uiPlugin(config = {}) {
     const showSpinner = waiting || seeking && !api?.getState("paused") || isLoading;
     bufferingIndicator?.classList.toggle("sp-buffering--visible", !!showSpinner);
     errorOverlay?.update();
+    bigPlayButton?.update();
+    maybeFit();
   };
   const scheduleUpdate = () => {
     if (rafHandle !== null) return;
@@ -6485,11 +7832,11 @@ function uiPlugin(config = {}) {
         break;
       case "f":
         e.preventDefault();
-        if (document.fullscreenElement) {
-          document.exitFullscreen().catch(() => {
+        if (isFullscreen(api.container)) {
+          exitFullscreen(api.container).catch(() => {
           });
         } else {
-          api.container.requestFullscreen?.().catch(() => {
+          enterFullscreen(api.container).catch(() => {
           });
         }
         break;
@@ -6527,11 +7874,11 @@ function uiPlugin(config = {}) {
     id: "ui-controls",
     name: "UI Controls",
     type: "ui",
-    version: "1.0.0",
+    version: PKG_VERSION$8,
     async init(pluginApi) {
       api = pluginApi;
       styleEl = document.createElement("style");
-      styleEl.textContent = styles$1;
+      styleEl.textContent = styles$2;
       document.head.appendChild(styleEl);
       if (config.theme) {
         this.setTheme(config.theme);
@@ -6568,6 +7915,10 @@ function uiPlugin(config = {}) {
       recoveredUnsubscribe = api.on("error:recovered", () => {
         errorOverlay?.hide();
       });
+      if (showBigPlayButton) {
+        bigPlayButton = new BigPlayButton(api, () => errorOverlay?.isVisible() ?? false);
+        container.appendChild(bigPlayButton.render());
+      }
       progressBar = new ProgressBar(api);
       container.appendChild(progressBar.render());
       if (!isPlaying) {
@@ -6579,6 +7930,14 @@ function uiPlugin(config = {}) {
       controlBar.setAttribute("aria-label", "Video controls");
       populateControlBar();
       container.appendChild(controlBar);
+      if (responsive && typeof ResizeObserver === "function") {
+        resizeObserver = new ResizeObserver((observed) => {
+          applyMenuBounds(observed[0]?.contentRect.height ?? container.clientHeight);
+          fitPending = true;
+          scheduleUpdate();
+        });
+        resizeObserver.observe(container);
+      }
       controlRegistryUnsubscribe = onControlRegistered((id) => {
         if (!layout.includes(id)) {
           return;
@@ -6595,7 +7954,6 @@ function uiPlugin(config = {}) {
       container.addEventListener("click", handleInteraction);
       document.addEventListener("keydown", handleKeyDown);
       stateUnsubscribe = api.subscribeToState(scheduleUpdate);
-      document.addEventListener("fullscreenchange", scheduleUpdate);
       updateControls();
       if (!container.hasAttribute("tabindex")) {
         container.setAttribute("tabindex", "0");
@@ -6616,6 +7974,9 @@ function uiPlugin(config = {}) {
         cancelAnimationFrame(rafHandle);
         rafHandle = null;
       }
+      resizeObserver?.disconnect();
+      resizeObserver = null;
+      api?.container?.style.removeProperty("--sp-menu-max-height");
       stateUnsubscribe?.();
       stateUnsubscribe = null;
       errorUnsubscribe?.();
@@ -6634,15 +7995,19 @@ function uiPlugin(config = {}) {
         api.container.removeEventListener("click", handleInteraction);
       }
       document.removeEventListener("keydown", handleKeyDown);
-      document.removeEventListener("fullscreenchange", scheduleUpdate);
       controlRegistryUnsubscribe?.();
       controlRegistryUnsubscribe = null;
       controls.forEach((c) => c.destroy());
       controls = [];
+      entries = [];
+      timeEntry = null;
+      tray = null;
       progressBar?.destroy();
       progressBar = null;
       errorOverlay?.destroy();
       errorOverlay = null;
+      bigPlayButton?.destroy();
+      bigPlayButton = null;
       controlBar?.remove();
       controlBar = null;
       gradient?.remove();
@@ -6690,14 +8055,19 @@ function uiPlugin(config = {}) {
 }
 const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
+  DEFAULT_PRIORITY,
+  assertFitLayout,
   formatLiveTime,
   formatTime: formatTime$1,
   getControlFactory,
   icons,
+  planFit,
   registerControl,
-  styles: styles$1,
+  resolveFitItems,
+  styles: styles$2,
   uiPlugin
 }, Symbol.toStringTag, { value: "Module" }));
+var PKG_VERSION$7 = "1.7.1";
 var DEFAULT_THEME = {
   primary: "#6366f1",
   background: "#18181b",
@@ -7324,7 +8694,7 @@ function createAudioUIPlugin(config) {
   const plugin = {
     id: "audio-ui",
     name: "Audio UI",
-    version: "1.0.0",
+    version: PKG_VERSION$7,
     type: "ui",
     description: "Compact audio player interface",
     async init(pluginApi) {
@@ -7629,7 +8999,8 @@ function safeStringify(data) {
     return "{}";
   }
 }
-var PLUGIN_VERSION = "0.1.0";
+var PKG_VERSION$6 = "1.7.1";
+var PLUGIN_VERSION = PKG_VERSION$6;
 var PLUGIN_NAME = "scarlett-player";
 var DEFAULT_CONFIG$2 = {
   heartbeatInterval: 1e4,
@@ -8167,8 +9538,8 @@ var PlaylistPanel = class {
     });
   }
 };
-var STYLE_ID = "sp-playlist-styles";
-var styles = `
+var STYLE_ID$1 = "sp-playlist-styles";
+var styles$1 = `
 .sp-playlist-skip[disabled] {
   opacity: 0.4;
   cursor: default;
@@ -8268,15 +9639,16 @@ var styles = `
 }
 `;
 function injectStyles() {
-  if (typeof document === "undefined" || document.getElementById(STYLE_ID)) {
+  if (typeof document === "undefined" || document.getElementById(STYLE_ID$1)) {
     return null;
   }
   const el = document.createElement("style");
-  el.id = STYLE_ID;
-  el.textContent = styles;
+  el.id = STYLE_ID$1;
+  el.textContent = styles$1;
   document.head.appendChild(el);
   return el;
 }
+var PKG_VERSION$5 = "1.7.1";
 var DEFAULT_CONFIG$1 = {
   autoAdvance: true,
   preloadNext: true,
@@ -8425,9 +9797,7 @@ function createPlaylistPlugin(config) {
     currentIndex = index2;
     api?.logger.info("Track changed", { index: index2, title: track.title, src: track.src });
     api?.setState("title", track.title || "");
-    if (track.artwork) {
-      api?.setState("poster", track.artwork);
-    }
+    api?.setState("poster", track.artwork || "");
     api?.setState("mediaType", track.type || "audio");
     emitChange();
     if (mergedConfig.autoLoad !== false && track.src) {
@@ -8437,7 +9807,7 @@ function createPlaylistPlugin(config) {
   const plugin = {
     id: "playlist",
     name: "Playlist",
-    version: "1.0.0",
+    version: PKG_VERSION$5,
     type: "feature",
     description: "Playlist management with shuffle, repeat, and gapless playback",
     async init(pluginApi) {
@@ -8693,6 +10063,7 @@ function createPlaylistPlugin(config) {
   };
   return plugin;
 }
+var PKG_VERSION$4 = "1.7.1";
 var DEFAULT_CONFIG = {
   enablePlayPause: true,
   enableSeek: true,
@@ -8840,7 +10211,7 @@ function createMediaSessionPlugin(config) {
   const plugin = {
     id: "media-session",
     name: "Media Session",
-    version: "1.0.0",
+    version: PKG_VERSION$4,
     type: "feature",
     description: "Media Session API integration for system-level media controls",
     async init(pluginApi) {
@@ -8951,6 +10322,7 @@ function createMediaSessionPlugin(config) {
   };
   return plugin;
 }
+var PKG_VERSION$3 = "1.7.1";
 var POSITIONS = ["top-left", "top-right", "bottom-left", "bottom-right", "center"];
 function getPositionStyles(padding, bottomPadding) {
   return {
@@ -9060,7 +10432,7 @@ function createWatermarkPlugin(config = {}) {
   return {
     id: "watermark",
     name: "Watermark",
-    version: "1.0.0",
+    version: PKG_VERSION$3,
     type: "feature",
     description: "Anti-piracy watermark overlay with text/image support and dynamic repositioning",
     init(pluginApi) {
@@ -9145,6 +10517,7 @@ function createWatermarkPlugin(config = {}) {
     }
   };
 }
+var PKG_VERSION$2 = "1.7.1";
 var HLS_SUBTITLE_TRACKS_UPDATED = "hlsSubtitleTracksUpdated";
 var HLS_INSTANCE_RETRY_MS = 500;
 function createCaptionsPlugin(config = {}) {
@@ -9315,7 +10688,7 @@ function createCaptionsPlugin(config = {}) {
   return {
     id: "captions",
     name: "Captions",
-    version: "1.0.0",
+    version: PKG_VERSION$2,
     type: "feature",
     description: "WebVTT subtitles and closed captions with HLS extraction",
     init(pluginApi) {
@@ -9364,6 +10737,493 @@ function createCaptionsPlugin(config = {}) {
     }
   };
 }
+var ZONE_HYSTERESIS = 0.05;
+var DEFAULT_RECOGNIZER_OPTIONS = {
+  doubleTapWindowMs: 275,
+  accumulationWindowMs: 650,
+  leftZone: 0.33,
+  rightZone: 0.33,
+  slopPx: 10
+};
+function zoneFor(fraction, options) {
+  if (fraction <= options.leftZone) return "left";
+  if (fraction >= 1 - options.rightZone) return "right";
+  return "middle";
+}
+function createRecognizer(options = {}) {
+  const config = { ...DEFAULT_RECOGNIZER_OPTIONS, ...options };
+  let pending = null;
+  let lastTapZone = null;
+  let lastTapAt = 0;
+  let accumulatingZone = null;
+  let accumulatedCount = 0;
+  let lastAccumulateAt = 0;
+  let activePointers = 0;
+  const resetSequence = () => {
+    lastTapZone = null;
+    lastTapAt = 0;
+    accumulatingZone = null;
+    accumulatedCount = 0;
+    lastAccumulateAt = 0;
+  };
+  const resolveZone = (fraction) => {
+    const raw = zoneFor(fraction, config);
+    const active = accumulatingZone ?? lastTapZone;
+    if (!active || raw === active) return raw;
+    if (active === "left" && fraction <= config.leftZone + ZONE_HYSTERESIS) return "left";
+    if (active === "right" && fraction >= 1 - config.rightZone - ZONE_HYSTERESIS) return "right";
+    return raw;
+  };
+  const expire = (now) => {
+    if (accumulatingZone && now - lastAccumulateAt > config.accumulationWindowMs) {
+      resetSequence();
+    } else if (!accumulatingZone && lastTapZone && now - lastTapAt > config.doubleTapWindowMs) {
+      lastTapZone = null;
+      lastTapAt = 0;
+    }
+    return [];
+  };
+  return {
+    handle(record) {
+      const events = [];
+      switch (record.type) {
+        case "down": {
+          activePointers += 1;
+          if (activePointers > 1) {
+            if (pending) pending.invalid = true;
+            if (accumulatingZone || lastTapZone) {
+              resetSequence();
+              events.push({ type: "cancel" });
+            }
+            return events;
+          }
+          expire(record.timeStamp);
+          pending = {
+            pointerId: record.pointerId,
+            x: record.x,
+            y: record.y,
+            fraction: record.fraction,
+            timeStamp: record.timeStamp,
+            invalid: false
+          };
+          return events;
+        }
+        case "move": {
+          if (!pending || pending.pointerId !== record.pointerId || pending.invalid) {
+            return events;
+          }
+          const dx = record.x - pending.x;
+          const dy = record.y - pending.y;
+          if (Math.hypot(dx, dy) > config.slopPx) {
+            pending.invalid = true;
+            if (accumulatingZone || lastTapZone) {
+              resetSequence();
+              events.push({ type: "cancel" });
+            }
+          }
+          return events;
+        }
+        case "up": {
+          activePointers = Math.max(0, activePointers - 1);
+          const candidate = pending;
+          pending = null;
+          if (!candidate || candidate.pointerId !== record.pointerId || candidate.invalid) {
+            return events;
+          }
+          expire(record.timeStamp);
+          const zone = resolveZone(record.fraction);
+          if (accumulatingZone) {
+            if (zone === accumulatingZone) {
+              accumulatedCount += 1;
+              lastAccumulateAt = record.timeStamp;
+              events.push({ type: "accumulate", zone, count: accumulatedCount });
+            } else {
+              resetSequence();
+              events.push({ type: "cancel" });
+            }
+            return events;
+          }
+          if (lastTapZone && zone === lastTapZone && record.timeStamp - lastTapAt <= config.doubleTapWindowMs) {
+            accumulatingZone = zone;
+            accumulatedCount = 1;
+            lastAccumulateAt = record.timeStamp;
+            lastTapZone = null;
+            lastTapAt = 0;
+            events.push({ type: "double-tap", zone, count: 1 });
+            return events;
+          }
+          lastTapZone = zone;
+          lastTapAt = record.timeStamp;
+          events.push({ type: "tap", zone });
+          return events;
+        }
+        case "cancel": {
+          activePointers = Math.max(0, activePointers - 1);
+          pending = null;
+          if (accumulatingZone || lastTapZone) {
+            resetSequence();
+            events.push({ type: "cancel" });
+          }
+          return events;
+        }
+        default:
+          return events;
+      }
+    },
+    tick(now) {
+      return expire(now);
+    },
+    reset() {
+      pending = null;
+      activePointers = 0;
+      resetSequence();
+    },
+    isAccumulating() {
+      return accumulatingZone !== null;
+    }
+  };
+}
+var STYLE_ID = "sp-gestures-styles";
+var styles = `
+.sp-gestures {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  /* The bottom strip belongs to the progress bar and control bar. */
+  bottom: 64px;
+  z-index: 6;
+  touch-action: manipulation;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+}
+
+.sp-gestures__zone {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  opacity: 0;
+  color: #fff;
+  transition: opacity 0.25s ease;
+}
+
+.sp-gestures__zone--left {
+  left: 0;
+  border-radius: 0 50% 50% 0;
+}
+
+.sp-gestures__zone--right {
+  right: 0;
+  border-radius: 50% 0 0 50%;
+}
+
+.sp-gestures__zone--active {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.sp-gestures__label {
+  font-size: 13px;
+  font-weight: 600;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+}
+
+.sp-gestures__live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sp-gestures__zone {
+    transition: none;
+  }
+}
+`;
+var GestureOverlay = class {
+  constructor(container, options) {
+    this.container = container;
+    this.options = options;
+    this.styleEl = null;
+    this.hideTimer = null;
+    this.pointerHandler = (event) => {
+      if (event.pointerType !== "touch") return;
+      const rect = this.el.getBoundingClientRect();
+      const width = rect.width || 1;
+      this.options.onPointer({
+        type: event.type === "pointerdown" ? "down" : event.type === "pointermove" ? "move" : event.type === "pointerup" ? "up" : "cancel",
+        x: event.clientX,
+        y: event.clientY,
+        fraction: Math.max(0, Math.min(1, (event.clientX - rect.left) / width)),
+        pointerId: event.pointerId,
+        timeStamp: event.timeStamp
+      });
+    };
+    this.injectStyles();
+    this.el = document.createElement("div");
+    this.el.className = "sp-gestures";
+    const left = this.createZone("left");
+    const right = this.createZone("right");
+    this.zones = { left: left.zone, right: right.zone };
+    this.labels = { left: left.label, right: right.label };
+    this.live = document.createElement("div");
+    this.live.className = "sp-gestures__live";
+    this.live.setAttribute("aria-live", "polite");
+    this.live.setAttribute("role", "status");
+    this.el.appendChild(left.zone);
+    this.el.appendChild(right.zone);
+    this.el.appendChild(this.live);
+    this.el.addEventListener("pointerdown", this.pointerHandler);
+    this.el.addEventListener("pointermove", this.pointerHandler);
+    this.el.addEventListener("pointerup", this.pointerHandler);
+    this.el.addEventListener("pointercancel", this.pointerHandler);
+    container.appendChild(this.el);
+  }
+  /** Size the zones to match the recognizer's split. */
+  setZoneWidths(left, right) {
+    this.zones.left.style.width = `${left * 100}%`;
+    this.zones.right.style.width = `${right * 100}%`;
+  }
+  /**
+   * Show the cumulative seek for a zone.
+   *
+   * @param zone - Which side was tapped
+   * @param seconds - Total seconds this sequence has moved
+   */
+  showSeek(zone, seconds) {
+    if (zone === "middle") return;
+    const direction = zone === "right" ? "forward" : "back";
+    this.live.textContent = `${seconds} seconds ${direction}`;
+    if (!this.options.feedback) return;
+    const target = this.zones[zone];
+    this.labels[zone].textContent = `${seconds} seconds`;
+    target.classList.add("sp-gestures__zone--active");
+    if (this.hideTimer) clearTimeout(this.hideTimer);
+    this.hideTimer = setTimeout(() => {
+      this.zones.left.classList.remove("sp-gestures__zone--active");
+      this.zones.right.classList.remove("sp-gestures__zone--active");
+      this.hideTimer = null;
+    }, 600);
+  }
+  /** Announce that a forward seek was refused because the viewer is at the live edge. */
+  announceLiveEdge() {
+    this.live.textContent = "Already at the live edge";
+  }
+  destroy() {
+    if (this.hideTimer) {
+      clearTimeout(this.hideTimer);
+      this.hideTimer = null;
+    }
+    this.el.removeEventListener("pointerdown", this.pointerHandler);
+    this.el.removeEventListener("pointermove", this.pointerHandler);
+    this.el.removeEventListener("pointerup", this.pointerHandler);
+    this.el.removeEventListener("pointercancel", this.pointerHandler);
+    this.el.remove();
+    this.styleEl?.remove();
+    this.styleEl = null;
+  }
+  /** Exposed for tests and for hosts that want to inspect the surface. */
+  getElement() {
+    return this.el;
+  }
+  createZone(side) {
+    const zone = document.createElement("div");
+    zone.className = `sp-gestures__zone sp-gestures__zone--${side}`;
+    zone.setAttribute("aria-hidden", "true");
+    const label = document.createElement("span");
+    label.className = "sp-gestures__label";
+    zone.appendChild(label);
+    return { zone, label };
+  }
+  injectStyles() {
+    if (document.getElementById(STYLE_ID)) return;
+    this.styleEl = document.createElement("style");
+    this.styleEl.id = STYLE_ID;
+    this.styleEl.textContent = styles;
+    document.head.appendChild(this.styleEl);
+  }
+};
+var PKG_VERSION$1 = "1.7.1";
+function hasCoarsePointer() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+  try {
+    return window.matchMedia("(any-pointer: coarse)").matches;
+  } catch {
+    return false;
+  }
+}
+function createGesturesPlugin(config = {}) {
+  let api = null;
+  let overlay = null;
+  let recognizer = null;
+  let active = false;
+  let runSeconds = 0;
+  let pendingHide = null;
+  const seekSeconds = config.seekSeconds ?? 10;
+  const doubleTapWindowMs = config.doubleTapWindowMs ?? DEFAULT_RECOGNIZER_OPTIONS.doubleTapWindowMs;
+  const leftZone = config.zones?.left ?? DEFAULT_RECOGNIZER_OPTIONS.leftZone;
+  const rightZone = config.zones?.right ?? DEFAULT_RECOGNIZER_OPTIONS.rightZone;
+  const feedback = config.feedback !== false;
+  const haptics = config.haptics !== false;
+  const tapToToggleControls = config.tapToToggleControls !== false;
+  const canSeek = () => {
+    if (!api) return false;
+    if (api.getState("chromecastActive") || api.getState("airplayActive")) return false;
+    const live = api.getState("live");
+    const seekableRange = api.getState("seekableRange");
+    if (live && !seekableRange) return false;
+    const duration = api.getState("duration");
+    if (!live && (!duration || !Number.isFinite(duration))) return false;
+    return true;
+  };
+  const applySeek = (zone) => {
+    if (!api || zone === "middle") return false;
+    const video = api.container.querySelector("video");
+    if (!video) return false;
+    const delta = zone === "right" ? seekSeconds : -seekSeconds;
+    const live = api.getState("live");
+    const seekableRange = api.getState("seekableRange");
+    const current = video.currentTime;
+    let target;
+    if (live && seekableRange) {
+      target = Math.max(seekableRange.start, Math.min(seekableRange.end, current + delta));
+      if (zone === "right" && target <= current) {
+        overlay?.announceLiveEdge();
+        return false;
+      }
+    } else {
+      const duration = video.duration;
+      const max = Number.isFinite(duration) && duration > 0 ? duration - 0.25 : current;
+      target = Math.max(0, Math.min(max, current + delta));
+    }
+    video.currentTime = target;
+    api.emit("playback:seeking", { time: target });
+    if (haptics && typeof navigator !== "undefined" && typeof navigator.vibrate === "function") {
+      navigator.vibrate(10);
+    }
+    return true;
+  };
+  const ui = () => api?.getPlugin("ui-controls") ?? null;
+  const clearPendingHide = () => {
+    if (pendingHide) {
+      clearTimeout(pendingHide);
+      pendingHide = null;
+    }
+  };
+  const handleTap = () => {
+    if (!tapToToggleControls || !api) return;
+    const controls = ui();
+    if (!controls) return;
+    const visible = Boolean(api.getState("controlsVisible"));
+    const paused = Boolean(api.getState("paused"));
+    if (!visible) {
+      controls.show();
+      return;
+    }
+    if (paused) return;
+    clearPendingHide();
+    pendingHide = setTimeout(() => {
+      pendingHide = null;
+      controls.hide();
+    }, doubleTapWindowMs);
+  };
+  const handleSeekStep = (zone) => {
+    clearPendingHide();
+    if (!canSeek()) return;
+    const moved = applySeek(zone);
+    if (!moved) return;
+    runSeconds += seekSeconds;
+    overlay?.showSeek(zone, runSeconds);
+    api?.emit("gesture:seek", {
+      direction: zone === "right" ? "forward" : "backward",
+      seconds: seekSeconds,
+      cumulative: runSeconds
+    });
+  };
+  const onPointer = (record) => {
+    if (!recognizer) return;
+    for (const event of recognizer.handle(record)) {
+      switch (event.type) {
+        case "tap":
+          api?.emit("gesture:tap", { zone: event.zone });
+          handleTap();
+          break;
+        case "double-tap":
+          runSeconds = 0;
+          handleSeekStep(event.zone);
+          break;
+        case "accumulate":
+          handleSeekStep(event.zone);
+          break;
+        case "cancel":
+          runSeconds = 0;
+          clearPendingHide();
+          break;
+      }
+    }
+  };
+  return {
+    id: "gestures",
+    name: "Gestures",
+    version: PKG_VERSION$1,
+    type: "feature",
+    init(pluginApi) {
+      api = pluginApi;
+      const enabled = config.enabled ?? "auto";
+      active = enabled === "auto" ? hasCoarsePointer() : Boolean(enabled);
+      if (!active) {
+        api.logger.debug("[gestures] no coarse pointer, gesture surface not installed");
+        return;
+      }
+      if (api.getState("mediaType") === "audio") {
+        active = false;
+        return;
+      }
+      recognizer = createRecognizer({
+        doubleTapWindowMs,
+        accumulationWindowMs: config.accumulationWindowMs,
+        leftZone,
+        rightZone,
+        slopPx: config.slopPx
+      });
+      overlay = new GestureOverlay(api.container, { onPointer, feedback });
+      overlay.setZoneWidths(leftZone, rightZone);
+      api.onDestroy(() => {
+        clearPendingHide();
+        overlay?.destroy();
+        overlay = null;
+        recognizer?.reset();
+        recognizer = null;
+      });
+    },
+    destroy() {
+      clearPendingHide();
+      overlay?.destroy();
+      overlay = null;
+      recognizer?.reset();
+      recognizer = null;
+      active = false;
+      runSeconds = 0;
+      api = null;
+    },
+    ownsTapInteraction() {
+      return active && tapToToggleControls;
+    }
+  };
+}
 function getAttr(element, ...names) {
   for (const name of names) {
     const value = element.getAttribute(name);
@@ -9393,6 +11253,14 @@ function parseDataAttributes(element) {
   if (controls !== null) {
     config.controls = controls !== "false";
   }
+  const bigPlayButton = getAttr(element, "data-big-play-button", "big-play-button");
+  if (bigPlayButton !== null) {
+    config.bigPlayButton = bigPlayButton !== "false";
+  }
+  const gestures = getAttr(element, "data-gestures", "gestures");
+  if (gestures !== null) {
+    config.gestures = gestures !== "false";
+  }
   const keyboard = getAttr(element, "data-keyboard", "keyboard");
   if (keyboard !== null) {
     config.keyboard = keyboard !== "false";
@@ -9542,6 +11410,9 @@ async function createEmbedPlayer(container, config, pluginCreators2, availableTy
     if (config.primaryColor) theme.primaryColor = config.primaryColor;
     if (config.backgroundColor) theme.backgroundColor = config.backgroundColor;
     const plugins = [pluginCreators2.hls()];
+    if (pluginCreators2.native) {
+      plugins.push(pluginCreators2.native());
+    }
     if (pluginCreators2.playlist && config.playlist?.length) {
       plugins.push(pluginCreators2.playlist({
         items: config.playlist.map((item, index2) => ({
@@ -9568,6 +11439,9 @@ async function createEmbedPlayer(container, config, pluginCreators2, availableTy
     if (pluginCreators2.captions) {
       plugins.push(pluginCreators2.captions(config.captions || {}));
     }
+    if (type === "video" && pluginCreators2.gestures && config.gestures !== false) {
+      plugins.push(pluginCreators2.gestures({}));
+    }
     if (pluginCreators2.analytics && config.analytics?.beaconUrl) {
       plugins.push(pluginCreators2.analytics({
         beaconUrl: config.analytics.beaconUrl,
@@ -9580,6 +11454,7 @@ async function createEmbedPlayer(container, config, pluginCreators2, availableTy
         const uiConfig = {};
         if (Object.keys(theme).length > 0) uiConfig.theme = theme;
         if (config.hideDelay !== void 0) uiConfig.hideDelay = config.hideDelay;
+        if (config.bigPlayButton !== void 0) uiConfig.bigPlayButton = config.bigPlayButton;
         plugins.push(pluginCreators2.videoUI(uiConfig));
       } else if ((type === "audio" || type === "audio-mini") && pluginCreators2.audioUI) {
         plugins.push(pluginCreators2.audioUI({
@@ -9685,17 +11560,20 @@ function setupAutoInit(pluginCreators2, availableTypes) {
     }
   }
 }
-const VERSION = "0.5.3";
+const PKG_VERSION = "1.7.1";
+const VERSION = PKG_VERSION;
 const AVAILABLE_TYPES = ["video", "audio", "audio-mini"];
 const pluginCreators = {
   hls: createHLSPlugin,
+  native: createNativePlugin,
   videoUI: uiPlugin,
   audioUI: createAudioUIPlugin,
   analytics: createAnalyticsPlugin,
   playlist: createPlaylistPlugin,
   mediaSession: createMediaSessionPlugin,
   watermark: createWatermarkPlugin,
-  captions: createCaptionsPlugin
+  captions: createCaptionsPlugin,
+  gestures: createGesturesPlugin
 };
 const ScarlettPlayerAPI = createScarlettPlayerAPI(
   pluginCreators,