@scarlett-player/embed 1.7.0 → 1.8.0

package/dist/embed.audio.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$5 = "1.7.1";
 var DEFAULT_CONFIG$3 = {
   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$5,
     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()) {
@@ -3551,8 +3775,8 @@ function createHLSPluginWith(loader, variant, config) {
   };
   return plugin;
 }
-var hls_loader_exports = {};
-__export(hls_loader_exports, {
+var hls_loader_light_exports = {};
+__export(hls_loader_light_exports, {
   createHlsInstance: () => createHlsInstance,
   getHlsConstructor: () => getHlsConstructor,
   isHLSSupported: () => isHLSSupported,
@@ -3595,7 +3819,7 @@ async function loadHlsJs() {
   }
   loadingPromise = (async () => {
     try {
-      const hlsModule = await import("./hls.js");
+      const hlsModule = await import("./hls.light.js");
       hlsConstructor = hlsModule.default;
       if (!hlsConstructor.isSupported()) {
         throw new Error("hls.js is not supported in this browser");
@@ -3625,16 +3849,396 @@ function resetLoader() {
 }
 function createHLSPlugin(config) {
   return createHLSPluginWith(
-    hls_loader_exports,
+    hls_loader_light_exports,
     {
-      name: "HLS Provider",
-      description: "HLS playback provider using hls.js",
-      logSuffix: "",
-      engineLabel: "hls.js"
+      name: "HLS Provider (Light)",
+      description: "HLS playback provider using hls.js/light (smaller bundle)",
+      logSuffix: " (light)",
+      engineLabel: "hls.js/light"
     },
     config
   );
 }
+var PKG_VERSION$4 = "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$4,
+    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 PKG_VERSION$3 = "1.7.1";
 var DEFAULT_THEME = {
   primary: "#6366f1",
   background: "#18181b",
@@ -4261,7 +4865,7 @@ function createAudioUIPlugin(config) {
   const plugin = {
     id: "audio-ui",
     name: "Audio UI",
-    version: "1.0.0",
+    version: PKG_VERSION$3,
     type: "ui",
     description: "Compact audio player interface",
     async init(pluginApi) {
@@ -4633,6 +5237,7 @@ function injectStyles() {
   document.head.appendChild(el);
   return el;
 }
+var PKG_VERSION$2 = "1.7.1";
 var DEFAULT_CONFIG$1 = {
   autoAdvance: true,
   preloadNext: true,
@@ -4781,9 +5386,7 @@ function createPlaylistPlugin(config) {
     currentIndex = index;
     api?.logger.info("Track changed", { index, 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) {
@@ -4793,7 +5396,7 @@ function createPlaylistPlugin(config) {
   const plugin = {
     id: "playlist",
     name: "Playlist",
-    version: "1.0.0",
+    version: PKG_VERSION$2,
     type: "feature",
     description: "Playlist management with shuffle, repeat, and gapless playback",
     async init(pluginApi) {
@@ -4823,7 +5426,7 @@ function createPlaylistPlugin(config) {
         }
       });
       injectStyles();
-      void import("./hls2.js").then(({ registerControl }) => {
+      void import("./embed.audio.index.js").then(({ registerControl }) => {
         const self = plugin;
         registerControl(
           "playlist-previous",
@@ -5049,6 +5652,7 @@ function createPlaylistPlugin(config) {
   };
   return plugin;
 }
+var PKG_VERSION$1 = "1.7.1";
 var DEFAULT_CONFIG = {
   enablePlayPause: true,
   enableSeek: true,
@@ -5196,7 +5800,7 @@ function createMediaSessionPlugin(config) {
   const plugin = {
     id: "media-session",
     name: "Media Session",
-    version: "1.0.0",
+    version: PKG_VERSION$1,
     type: "feature",
     description: "Media Session API integration for system-level media controls",
     async init(pluginApi) {
@@ -5336,6 +5940,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";
@@ -5485,6 +6097,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, index) => ({
@@ -5511,6 +6126,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,
@@ -5523,6 +6141,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({
@@ -5628,10 +6247,12 @@ function setupAutoInit(pluginCreators2, availableTypes) {
     }
   }
 }
-const VERSION = "0.5.3-audio";
+const PKG_VERSION = "1.7.1";
+const VERSION = `${PKG_VERSION}-audio`;
 const AVAILABLE_TYPES = ["audio", "audio-mini"];
 const pluginCreators = {
   hls: createHLSPlugin,
+  native: createNativePlugin,
   audioUI: createAudioUIPlugin,
   playlist: createPlaylistPlugin,
   mediaSession: createMediaSessionPlugin