@scarlett-player/embed 0.1.2 → 0.4.0

package/dist/embed.video.js

@@ -0,0 +1,4736 @@
+function formatLevel(level) {
+  if (level.name) {
+    return level.name;
+  }
+  if (level.height) {
+    const standardLabels = {
+      2160: "4K",
+      1440: "1440p",
+      1080: "1080p",
+      720: "720p",
+      480: "480p",
+      360: "360p",
+      240: "240p",
+      144: "144p"
+    };
+    const closest = Object.keys(standardLabels).map(Number).sort((a, b) => Math.abs(a - level.height) - Math.abs(b - level.height))[0];
+    if (Math.abs(closest - level.height) <= 20) {
+      return standardLabels[closest];
+    }
+    return `${level.height}p`;
+  }
+  if (level.bitrate) {
+    return formatBitrate(level.bitrate);
+  }
+  return "Unknown";
+}
+function formatBitrate(bitrate) {
+  if (bitrate >= 1e6) {
+    return `${(bitrate / 1e6).toFixed(1)} Mbps`;
+  }
+  if (bitrate >= 1e3) {
+    return `${Math.round(bitrate / 1e3)} Kbps`;
+  }
+  return `${bitrate} bps`;
+}
+function mapLevels(levels, currentLevel) {
+  return levels.map((level, index) => ({
+    index,
+    width: level.width || 0,
+    height: level.height || 0,
+    bitrate: level.bitrate || 0,
+    label: formatLevel(level),
+    codec: level.codecSet
+  }));
+}
+var HLS_ERROR_TYPES = {
+  NETWORK_ERROR: "networkError",
+  MEDIA_ERROR: "mediaError",
+  MUX_ERROR: "muxError"
+};
+function mapErrorType(hlsType) {
+  switch (hlsType) {
+    case HLS_ERROR_TYPES.NETWORK_ERROR:
+      return "network";
+    case HLS_ERROR_TYPES.MEDIA_ERROR:
+      return "media";
+    case HLS_ERROR_TYPES.MUX_ERROR:
+      return "mux";
+    default:
+      return "other";
+  }
+}
+function parseHlsError(data) {
+  return {
+    type: mapErrorType(data.type),
+    details: data.details || "Unknown error",
+    fatal: data.fatal || false,
+    url: data.url,
+    reason: data.reason,
+    response: data.response
+  };
+}
+function setupHlsEventHandlers(hls, api, callbacks) {
+  const handlers = [];
+  const addHandler = (event, handler) => {
+    hls.on(event, handler);
+    handlers.push({ event, handler });
+  };
+  addHandler("hlsManifestParsed", (_event, data) => {
+    api.logger.debug("HLS manifest parsed", { levels: data.levels.length });
+    const levels = data.levels.map((level, index) => ({
+      id: `level-${index}`,
+      label: formatLevel(level),
+      width: level.width,
+      height: level.height,
+      bitrate: level.bitrate,
+      active: index === hls.currentLevel
+    }));
+    api.setState("qualities", levels);
+    api.emit("quality:levels", {
+      levels: levels.map((l) => ({ id: l.id, label: l.label }))
+    });
+    callbacks.onManifestParsed?.(data.levels);
+  });
+  addHandler("hlsLevelSwitched", (_event, data) => {
+    const level = hls.levels[data.level];
+    const isAuto = callbacks.getIsAutoQuality?.() ?? hls.autoLevelEnabled;
+    api.logger.debug("HLS level switched", { level: data.level, height: level?.height, auto: isAuto });
+    if (level) {
+      const label = isAuto ? `Auto (${formatLevel(level)})` : formatLevel(level);
+      api.setState("currentQuality", {
+        id: isAuto ? "auto" : `level-${data.level}`,
+        label,
+        width: level.width,
+        height: level.height,
+        bitrate: level.bitrate,
+        active: true
+      });
+    }
+    api.emit("quality:change", {
+      quality: level ? formatLevel(level) : "auto",
+      auto: isAuto
+    });
+    callbacks.onLevelSwitched?.(data.level);
+  });
+  addHandler("hlsFragBuffered", () => {
+    api.setState("buffering", false);
+    callbacks.onBufferUpdate?.();
+  });
+  addHandler("hlsFragLoading", () => {
+    api.setState("buffering", true);
+  });
+  addHandler("hlsLevelLoaded", (_event, data) => {
+    if (data.details?.live !== void 0) {
+      api.setState("live", data.details.live);
+      callbacks.onLiveUpdate?.();
+    }
+  });
+  addHandler("hlsError", (_event, data) => {
+    const error = parseHlsError(data);
+    api.logger.warn("HLS error", { error });
+    callbacks.onError?.(error);
+  });
+  return () => {
+    for (const { event, handler } of handlers) {
+      hls.off(event, handler);
+    }
+    handlers.length = 0;
+  };
+}
+function setupVideoEventHandlers(video, api) {
+  const handlers = [];
+  const addHandler = (event, handler) => {
+    video.addEventListener(event, handler);
+    handlers.push({ event, handler });
+  };
+  addHandler("playing", () => {
+    api.setState("playing", true);
+    api.setState("paused", false);
+    api.setState("playbackState", "playing");
+  });
+  addHandler("pause", () => {
+    api.setState("playing", false);
+    api.setState("paused", true);
+    api.setState("playbackState", "paused");
+  });
+  addHandler("ended", () => {
+    api.setState("playing", false);
+    api.setState("ended", true);
+    api.setState("playbackState", "ended");
+    api.emit("playback:ended", void 0);
+  });
+  addHandler("timeupdate", () => {
+    api.setState("currentTime", video.currentTime);
+    api.emit("playback:timeupdate", { currentTime: video.currentTime });
+  });
+  addHandler("durationchange", () => {
+    api.setState("duration", video.duration || 0);
+    api.emit("media:loadedmetadata", { duration: video.duration || 0 });
+  });
+  addHandler("waiting", () => {
+    api.setState("waiting", true);
+    api.setState("buffering", true);
+    api.emit("media:waiting", void 0);
+  });
+  addHandler("canplay", () => {
+    api.setState("waiting", false);
+    api.setState("playbackState", "ready");
+    api.emit("media:canplay", void 0);
+  });
+  addHandler("canplaythrough", () => {
+    api.setState("buffering", false);
+    api.emit("media:canplaythrough", void 0);
+  });
+  addHandler("progress", () => {
+    if (video.buffered.length > 0) {
+      const bufferedEnd = video.buffered.end(video.buffered.length - 1);
+      const bufferedAmount = video.duration > 0 ? bufferedEnd / video.duration : 0;
+      api.setState("bufferedAmount", bufferedAmount);
+      api.setState("buffered", video.buffered);
+      api.emit("media:progress", { buffered: bufferedAmount });
+    }
+  });
+  addHandler("seeking", () => {
+    api.setState("seeking", true);
+  });
+  addHandler("seeked", () => {
+    api.setState("seeking", false);
+    api.emit("playback:seeked", { time: video.currentTime });
+  });
+  addHandler("volumechange", () => {
+    api.setState("volume", video.volume);
+    api.setState("muted", video.muted);
+    api.emit("volume:change", { volume: video.volume, muted: video.muted });
+  });
+  addHandler("ratechange", () => {
+    api.setState("playbackRate", video.playbackRate);
+    api.emit("playback:ratechange", { rate: video.playbackRate });
+  });
+  addHandler("loadedmetadata", () => {
+    api.setState("duration", video.duration);
+    api.setState("mediaType", video.videoWidth > 0 ? "video" : "audio");
+  });
+  addHandler("error", () => {
+    const error = video.error;
+    if (error) {
+      api.logger.error("Video element error", { code: error.code, message: error.message });
+      api.emit("media:error", { error: new Error(error.message || "Video playback error") });
+    }
+  });
+  addHandler("enterpictureinpicture", () => {
+    api.setState("pip", true);
+    api.logger.debug("PiP: entered (standard)");
+  });
+  addHandler("leavepictureinpicture", () => {
+    api.setState("pip", false);
+    api.logger.debug("PiP: exited (standard)");
+    if (!video.paused || api.getState("playing")) {
+      video.play().catch(() => {
+      });
+    }
+  });
+  const webkitVideo = video;
+  if ("webkitPresentationMode" in video) {
+    addHandler("webkitpresentationmodechanged", () => {
+      const mode = webkitVideo.webkitPresentationMode;
+      const isInPip = mode === "picture-in-picture";
+      api.setState("pip", isInPip);
+      api.logger.debug(`PiP: mode changed to ${mode} (webkit)`);
+      if (mode === "inline" && video.paused) {
+        video.play().catch(() => {
+        });
+      }
+    });
+  }
+  return () => {
+    for (const { event, handler } of handlers) {
+      video.removeEventListener(event, handler);
+    }
+    handlers.length = 0;
+  };
+}
+var hlsConstructor = null;
+var loadingPromise = null;
+function supportsNativeHLS() {
+  if (typeof document === "undefined") return false;
+  const video = document.createElement("video");
+  return video.canPlayType("application/vnd.apple.mpegurl") !== "";
+}
+function isHlsJsSupported() {
+  if (hlsConstructor) {
+    return hlsConstructor.isSupported();
+  }
+  if (typeof window === "undefined") return false;
+  return !!(window.MediaSource || window.WebKitMediaSource);
+}
+function isHLSSupported() {
+  return supportsNativeHLS() || isHlsJsSupported();
+}
+async function loadHlsJs() {
+  if (hlsConstructor) {
+    return hlsConstructor;
+  }
+  if (loadingPromise) {
+    return loadingPromise;
+  }
+  loadingPromise = (async () => {
+    try {
+      const hlsModule = await import("./hls.js");
+      hlsConstructor = hlsModule.default;
+      if (!hlsConstructor.isSupported()) {
+        throw new Error("hls.js is not supported in this browser");
+      }
+      return hlsConstructor;
+    } catch (error) {
+      loadingPromise = null;
+      throw new Error(
+        `Failed to load hls.js: ${error instanceof Error ? error.message : "Unknown error"}`
+      );
+    }
+  })();
+  return loadingPromise;
+}
+function createHlsInstance(config) {
+  if (!hlsConstructor) {
+    throw new Error("hls.js is not loaded. Call loadHlsJs() first.");
+  }
+  return new hlsConstructor(config);
+}
+function getHlsConstructor() {
+  return hlsConstructor;
+}
+var DEFAULT_CONFIG = {
+  debug: false,
+  autoStartLoad: true,
+  startPosition: -1,
+  lowLatencyMode: false,
+  maxBufferLength: 30,
+  maxMaxBufferLength: 600,
+  backBufferLength: 30,
+  enableWorker: true,
+  // Error recovery settings
+  maxNetworkRetries: 3,
+  maxMediaRetries: 2,
+  retryDelayMs: 1e3,
+  retryBackoffFactor: 2
+};
+function createHLSPlugin(config) {
+  const mergedConfig = { ...DEFAULT_CONFIG, ...config };
+  let api = null;
+  let hls = null;
+  let video = null;
+  let isNative = false;
+  let currentSrc = null;
+  let cleanupHlsEvents = null;
+  let cleanupVideoEvents = null;
+  let isAutoQuality = true;
+  let networkRetryCount = 0;
+  let mediaRetryCount = 0;
+  let retryTimeout = null;
+  let errorCount = 0;
+  let errorWindowStart = 0;
+  const MAX_ERRORS_IN_WINDOW = 10;
+  const ERROR_WINDOW_MS = 5e3;
+  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 = "metadata";
+    video.controls = false;
+    video.playsInline = true;
+    const poster = api?.getState("poster");
+    if (poster) {
+      video.poster = poster;
+    }
+    api?.container.appendChild(video);
+    return video;
+  };
+  const cleanup = () => {
+    cleanupHlsEvents?.();
+    cleanupHlsEvents = null;
+    cleanupVideoEvents?.();
+    cleanupVideoEvents = null;
+    if (retryTimeout) {
+      clearTimeout(retryTimeout);
+      retryTimeout = null;
+    }
+    if (hls) {
+      hls.destroy();
+      hls = null;
+    }
+    currentSrc = null;
+    isNative = false;
+    isAutoQuality = true;
+    networkRetryCount = 0;
+    mediaRetryCount = 0;
+    errorCount = 0;
+    errorWindowStart = 0;
+  };
+  const buildHlsConfig = () => ({
+    debug: mergedConfig.debug,
+    autoStartLoad: mergedConfig.autoStartLoad,
+    startPosition: mergedConfig.startPosition,
+    startLevel: -1,
+    // Auto quality selection (ABR)
+    lowLatencyMode: mergedConfig.lowLatencyMode,
+    maxBufferLength: mergedConfig.maxBufferLength,
+    maxMaxBufferLength: mergedConfig.maxMaxBufferLength,
+    backBufferLength: mergedConfig.backBufferLength,
+    enableWorker: mergedConfig.enableWorker,
+    // Minimize hls.js internal retries - we handle retries ourselves
+    fragLoadingMaxRetry: 1,
+    manifestLoadingMaxRetry: 1,
+    levelLoadingMaxRetry: 1,
+    fragLoadingRetryDelay: 500,
+    manifestLoadingRetryDelay: 500,
+    levelLoadingRetryDelay: 500
+  });
+  const getRetryDelay = (retryCount) => {
+    const baseDelay = mergedConfig.retryDelayMs ?? 1e3;
+    const backoffFactor = mergedConfig.retryBackoffFactor ?? 2;
+    return baseDelay * Math.pow(backoffFactor, retryCount);
+  };
+  const emitFatalError = (error, retriesExhausted) => {
+    const message = retriesExhausted ? `HLS error: ${error.details} (max retries exceeded)` : `HLS error: ${error.details}`;
+    api?.logger.error(message, { type: error.type, details: error.details });
+    api?.setState("playbackState", "error");
+    api?.setState("buffering", false);
+    api?.emit("error", {
+      code: "MEDIA_ERROR",
+      message,
+      fatal: true,
+      timestamp: Date.now()
+    });
+  };
+  const handleHlsError = (error) => {
+    const Hls = getHlsConstructor();
+    if (!Hls || !hls) return;
+    const now = Date.now();
+    if (now - errorWindowStart > ERROR_WINDOW_MS) {
+      errorCount = 1;
+      errorWindowStart = now;
+    } else {
+      errorCount++;
+    }
+    if (errorCount >= MAX_ERRORS_IN_WINDOW) {
+      api?.logger.error(`Too many errors (${errorCount} in ${ERROR_WINDOW_MS}ms), giving up`);
+      emitFatalError(error, true);
+      cleanupHlsEvents?.();
+      cleanupHlsEvents = null;
+      hls.destroy();
+      hls = null;
+      return;
+    }
+    if (error.fatal) {
+      api?.logger.error("Fatal HLS error", { type: error.type, details: error.details });
+      switch (error.type) {
+        case "network": {
+          const maxRetries = mergedConfig.maxNetworkRetries ?? 3;
+          if (networkRetryCount >= maxRetries) {
+            api?.logger.error(`Network error recovery failed after ${networkRetryCount} attempts`);
+            emitFatalError(error, true);
+            return;
+          }
+          networkRetryCount++;
+          const delay = getRetryDelay(networkRetryCount - 1);
+          api?.logger.info(`Attempting network error recovery (attempt ${networkRetryCount}/${maxRetries}) in ${delay}ms`);
+          api?.emit("error:network", { error: new Error(error.details) });
+          if (retryTimeout) {
+            clearTimeout(retryTimeout);
+          }
+          retryTimeout = setTimeout(() => {
+            if (hls) {
+              hls.startLoad();
+            }
+          }, delay);
+          break;
+        }
+        case "media": {
+          const maxRetries = mergedConfig.maxMediaRetries ?? 2;
+          if (mediaRetryCount >= maxRetries) {
+            api?.logger.error(`Media error recovery failed after ${mediaRetryCount} attempts`);
+            emitFatalError(error, true);
+            return;
+          }
+          mediaRetryCount++;
+          const delay = getRetryDelay(mediaRetryCount - 1);
+          api?.logger.info(`Attempting media error recovery (attempt ${mediaRetryCount}/${maxRetries}) in ${delay}ms`);
+          api?.emit("error:media", { error: new Error(error.details) });
+          if (retryTimeout) {
+            clearTimeout(retryTimeout);
+          }
+          retryTimeout = setTimeout(() => {
+            if (hls) {
+              hls.recoverMediaError();
+            }
+          }, delay);
+          break;
+        }
+        default:
+          emitFatalError(error, false);
+          break;
+      }
+    }
+  };
+  const loadNative = async (src) => {
+    const videoEl = getOrCreateVideo();
+    isNative = true;
+    if (api) {
+      cleanupVideoEvents = setupVideoEventHandlers(videoEl, api);
+    }
+    return new Promise((resolve, reject) => {
+      const onLoaded = () => {
+        videoEl.removeEventListener("loadedmetadata", onLoaded);
+        videoEl.removeEventListener("error", onError);
+        api?.setState("source", { src, type: "application/x-mpegURL" });
+        api?.emit("media:loaded", { src, type: "application/x-mpegURL" });
+        resolve();
+      };
+      const onError = () => {
+        videoEl.removeEventListener("loadedmetadata", onLoaded);
+        videoEl.removeEventListener("error", onError);
+        const error = videoEl.error;
+        reject(new Error(error?.message || "Failed to load HLS source"));
+      };
+      videoEl.addEventListener("loadedmetadata", onLoaded);
+      videoEl.addEventListener("error", onError);
+      videoEl.src = src;
+      videoEl.load();
+    });
+  };
+  const loadWithHlsJs = async (src) => {
+    await loadHlsJs();
+    const videoEl = getOrCreateVideo();
+    isNative = false;
+    hls = createHlsInstance(buildHlsConfig());
+    if (api) {
+      cleanupVideoEvents = setupVideoEventHandlers(videoEl, api);
+    }
+    return new Promise((resolve, reject) => {
+      if (!hls || !api) {
+        reject(new Error("HLS not initialized"));
+        return;
+      }
+      let resolved = false;
+      cleanupHlsEvents = setupHlsEventHandlers(hls, api, {
+        onManifestParsed: () => {
+          if (!resolved) {
+            resolved = true;
+            api?.setState("source", { src, type: "application/x-mpegURL" });
+            api?.emit("media:loaded", { src, type: "application/x-mpegURL" });
+            resolve();
+          }
+        },
+        onLevelSwitched: () => {
+        },
+        onError: (error) => {
+          handleHlsError(error);
+          if (error.fatal && !resolved && error.type !== "network" && error.type !== "media") {
+            resolved = true;
+            reject(new Error(error.details));
+          }
+        },
+        getIsAutoQuality: () => isAutoQuality
+      });
+      hls.attachMedia(videoEl);
+      hls.loadSource(src);
+    });
+  };
+  const plugin = {
+    id: "hls-provider",
+    name: "HLS Provider",
+    version: "1.0.0",
+    type: "provider",
+    description: "HLS playback provider using hls.js",
+    canPlay(src) {
+      if (!isHLSSupported()) return false;
+      const url = src.toLowerCase();
+      const urlWithoutQuery = url.split("?")[0].split("#")[0];
+      if (urlWithoutQuery.endsWith(".m3u8")) return true;
+      if (url.includes("application/x-mpegurl")) return true;
+      if (url.includes("application/vnd.apple.mpegurl")) return true;
+      return false;
+    },
+    async init(pluginApi) {
+      api = pluginApi;
+      api.logger.info("HLS 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 }) => {
+        if (video) video.volume = volume;
+      });
+      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 unsubQuality = api.on("quality:select", ({ quality, auto }) => {
+        if (!hls || isNative) {
+          api?.logger.warn("Quality selection not available");
+          return;
+        }
+        if (auto || quality === "auto") {
+          isAutoQuality = true;
+          hls.currentLevel = -1;
+          api?.logger.debug("Quality: auto selection enabled");
+          api?.setState("currentQuality", {
+            id: "auto",
+            label: "Auto",
+            width: 0,
+            height: 0,
+            bitrate: 0,
+            active: true
+          });
+        } else {
+          isAutoQuality = false;
+          const levelIndex = parseInt(quality.replace("level-", ""), 10);
+          if (!isNaN(levelIndex) && levelIndex >= 0 && levelIndex < hls.levels.length) {
+            hls.nextLevel = levelIndex;
+            api?.logger.debug(`Quality: queued switch to level ${levelIndex}`);
+          }
+        }
+      });
+      api.onDestroy(() => {
+        unsubPlay();
+        unsubPause();
+        unsubSeek();
+        unsubVolume();
+        unsubMute();
+        unsubRate();
+        unsubQuality();
+      });
+    },
+    async destroy() {
+      api?.logger.info("HLS plugin destroying");
+      cleanup();
+      if (video?.parentNode) {
+        video.parentNode.removeChild(video);
+      }
+      video = null;
+      api = null;
+    },
+    async loadSource(src) {
+      if (!api) throw new Error("Plugin not initialized");
+      api.logger.info("Loading HLS source", { src });
+      cleanup();
+      currentSrc = src;
+      api.setState("playbackState", "loading");
+      api.setState("buffering", true);
+      if (isHlsJsSupported()) {
+        api.logger.info("Using hls.js for HLS playback");
+        await loadWithHlsJs(src);
+      } else if (supportsNativeHLS()) {
+        api.logger.info("Using native HLS playback (hls.js not supported)");
+        await loadNative(src);
+      } else {
+        throw new Error("HLS playback not supported in this browser");
+      }
+      if (video) {
+        const muted = api.getState("muted");
+        const volume = api.getState("volume");
+        if (muted !== void 0) video.muted = muted;
+        if (volume !== void 0) video.volume = volume;
+      }
+      api.setState("playbackState", "ready");
+      api.setState("buffering", false);
+    },
+    getCurrentLevel() {
+      if (isNative || !hls) return -1;
+      return hls.currentLevel;
+    },
+    setLevel(index) {
+      if (isNative || !hls) {
+        api?.logger.warn("Quality selection not available in native HLS mode");
+        return;
+      }
+      hls.currentLevel = index;
+    },
+    getLevels() {
+      if (isNative || !hls) return [];
+      return mapLevels(hls.levels, hls.currentLevel);
+    },
+    getHlsInstance() {
+      return hls;
+    },
+    isNativeHLS() {
+      return isNative;
+    },
+    getLiveInfo() {
+      if (isNative || !hls) return null;
+      const live = api?.getState("live") || false;
+      if (!live) return null;
+      return {
+        isLive: true,
+        latency: hls.latency || 0,
+        targetLatency: hls.targetLatency || 3,
+        drift: hls.drift || 0
+      };
+    },
+    /**
+     * Switch from hls.js to native HLS playback.
+     * Used for AirPlay compatibility in Safari.
+     * Preserves current playback position.
+     */
+    async switchToNative() {
+      if (isNative) {
+        api?.logger.debug("Already using native HLS");
+        return;
+      }
+      if (!supportsNativeHLS()) {
+        api?.logger.warn("Native HLS not supported in this browser");
+        return;
+      }
+      if (!currentSrc) {
+        api?.logger.warn("No source loaded");
+        return;
+      }
+      api?.logger.info("Switching to native HLS for AirPlay");
+      const wasPlaying = api?.getState("playing") || false;
+      const currentTime = video?.currentTime || 0;
+      const savedSrc = currentSrc;
+      cleanup();
+      await loadNative(savedSrc);
+      if (video && currentTime > 0) {
+        video.currentTime = currentTime;
+      }
+      if (wasPlaying && video) {
+        try {
+          await video.play();
+        } catch (e) {
+          api?.logger.debug("Could not auto-resume after switch");
+        }
+      }
+      api?.logger.info("Switched to native HLS");
+    },
+    /**
+     * Switch from native HLS back to hls.js.
+     * Restores quality control after AirPlay session ends.
+     */
+    async switchToHlsJs() {
+      if (!isNative) {
+        api?.logger.debug("Already using hls.js");
+        return;
+      }
+      if (!isHlsJsSupported()) {
+        api?.logger.warn("hls.js not supported in this browser");
+        return;
+      }
+      if (!currentSrc) {
+        api?.logger.warn("No source loaded");
+        return;
+      }
+      api?.logger.info("Switching back to hls.js");
+      const wasPlaying = api?.getState("playing") || false;
+      const currentTime = video?.currentTime || 0;
+      const savedSrc = currentSrc;
+      cleanup();
+      await loadWithHlsJs(savedSrc);
+      if (video && currentTime > 0) {
+        video.currentTime = currentTime;
+      }
+      if (wasPlaying && video) {
+        try {
+          await video.play();
+        } catch (e) {
+          api?.logger.debug("Could not auto-resume after switch");
+        }
+      }
+      api?.logger.info("Switched to hls.js");
+    }
+  };
+  return plugin;
+}
+var styles = `
+/* ============================================
+   Container & Base
+   ============================================ */
+.sp-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.sp-container video {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: contain;
+}
+
+.sp-container:focus {
+  outline: none;
+}
+
+/* ============================================
+   Gradient Overlay
+   ============================================ */
+.sp-gradient {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 160px;
+  background: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.8) 0%,
+    rgba(0, 0, 0, 0.4) 50%,
+    transparent 100%
+  );
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+  z-index: 5;
+}
+
+.sp-gradient--visible {
+  opacity: 1;
+}
+
+/* ============================================
+   Controls Container
+   ============================================ */
+.sp-controls {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  padding: 0 12px 12px;
+  gap: 4px;
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 0.25s ease, transform 0.25s ease;
+  z-index: 10;
+}
+
+.sp-controls--visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.sp-controls--hidden {
+  opacity: 0;
+  transform: translateY(4px);
+  pointer-events: none;
+}
+
+/* ============================================
+   Progress Bar (Above Controls)
+   ============================================ */
+.sp-progress-wrapper {
+  position: absolute;
+  bottom: 48px;
+  left: 12px;
+  right: 12px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  z-index: 10;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+
+.sp-progress-wrapper--visible {
+  opacity: 1;
+}
+
+.sp-progress {
+  position: relative;
+  width: 100%;
+  height: 3px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 1.5px;
+  transition: height 0.15s ease;
+}
+
+.sp-progress-wrapper:hover .sp-progress,
+.sp-progress--dragging {
+  height: 5px;
+}
+
+.sp-progress__track {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: inherit;
+  overflow: hidden;
+}
+
+.sp-progress__buffered {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.4);
+  border-radius: inherit;
+  transition: width 0.1s linear;
+}
+
+.sp-progress__filled {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: var(--sp-accent, #e50914);
+  border-radius: inherit;
+}
+
+.sp-progress__handle {
+  position: absolute;
+  top: 50%;
+  width: 14px;
+  height: 14px;
+  background: var(--sp-accent, #e50914);
+  border-radius: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform 0.15s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.sp-progress-wrapper:hover .sp-progress__handle,
+.sp-progress--dragging .sp-progress__handle {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+/* Progress Tooltip */
+.sp-progress__tooltip {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  padding: 6px 10px;
+  background: rgba(20, 20, 20, 0.95);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  border-radius: 4px;
+  white-space: nowrap;
+  transform: translateX(-50%);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.sp-progress-wrapper:hover .sp-progress__tooltip {
+  opacity: 1;
+}
+
+/* ============================================
+   Control Buttons
+   ============================================ */
+.sp-control {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.9);
+  cursor: pointer;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: color 0.15s ease, transform 0.15s ease, background 0.15s ease;
+  flex-shrink: 0;
+}
+
+.sp-control:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.sp-control:active {
+  transform: scale(0.92);
+}
+
+.sp-control:focus-visible {
+  outline: 2px solid var(--sp-accent, #e50914);
+  outline-offset: 2px;
+}
+
+.sp-control:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.sp-control:disabled:hover {
+  background: none;
+}
+
+.sp-control svg {
+  width: 24px;
+  height: 24px;
+  fill: currentColor;
+  display: block;
+}
+
+.sp-control--small svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* ============================================
+   Spacer
+   ============================================ */
+.sp-spacer {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ============================================
+   Time Display
+   ============================================ */
+.sp-time {
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  color: rgba(255, 255, 255, 0.9);
+  white-space: nowrap;
+  padding: 0 4px;
+  letter-spacing: 0.02em;
+}
+
+/* ============================================
+   Volume Control
+   ============================================ */
+.sp-volume {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.sp-volume__slider-wrap {
+  width: 0;
+  overflow: hidden;
+  transition: width 0.2s ease;
+}
+
+.sp-volume:hover .sp-volume__slider-wrap,
+.sp-volume:focus-within .sp-volume__slider-wrap {
+  width: 64px;
+}
+
+.sp-volume__slider {
+  width: 64px;
+  height: 3px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 1.5px;
+  cursor: pointer;
+  position: relative;
+  margin: 0 8px 0 4px;
+}
+
+.sp-volume__level {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: #fff;
+  border-radius: inherit;
+  transition: width 0.1s ease;
+}
+
+/* ============================================
+   Live Indicator
+   ============================================ */
+.sp-live {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--sp-accent, #e50914);
+  cursor: pointer;
+  padding: 6px 10px;
+  border-radius: 4px;
+  transition: background 0.15s ease, opacity 0.15s ease;
+}
+
+.sp-live:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.sp-live__dot {
+  width: 8px;
+  height: 8px;
+  background: currentColor;
+  border-radius: 50%;
+  animation: sp-pulse 2s ease-in-out infinite;
+}
+
+.sp-live--behind {
+  opacity: 0.6;
+}
+
+.sp-live--behind .sp-live__dot {
+  animation: none;
+}
+
+@keyframes sp-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+/* ============================================
+   Quality / Settings Menu
+   ============================================ */
+.sp-quality {
+  position: relative;
+}
+
+.sp-quality__btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.sp-quality__label {
+  font-size: 12px;
+  font-weight: 500;
+  opacity: 0.9;
+}
+
+.sp-quality-menu {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  right: 0;
+  background: rgba(20, 20, 20, 0.95);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-radius: 8px;
+  padding: 8px 0;
+  min-width: 150px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(8px);
+  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
+  z-index: 20;
+}
+
+.sp-quality-menu--open {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.sp-quality-menu__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.8);
+  cursor: pointer;
+  transition: background 0.1s ease, color 0.1s ease;
+}
+
+.sp-quality-menu__item:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+}
+
+.sp-quality-menu__item--active {
+  color: var(--sp-accent, #e50914);
+}
+
+.sp-quality-menu__check {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+  margin-left: 8px;
+  opacity: 0;
+}
+
+.sp-quality-menu__item--active .sp-quality-menu__check {
+  opacity: 1;
+}
+
+/* ============================================
+   Cast Button States
+   ============================================ */
+.sp-cast--active {
+  color: var(--sp-accent, #e50914);
+}
+
+.sp-cast--unavailable {
+  opacity: 0.4;
+}
+
+/* ============================================
+   Buffering Indicator
+   ============================================ */
+.sp-buffering {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 15;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.sp-buffering--visible {
+  opacity: 1;
+}
+
+.sp-buffering svg {
+  width: 48px;
+  height: 48px;
+  fill: rgba(255, 255, 255, 0.9);
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+}
+
+@keyframes sp-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.sp-spin {
+  animation: sp-spin 0.8s linear infinite;
+}
+
+/* ============================================
+   Reduced Motion
+   ============================================ */
+@media (prefers-reduced-motion: reduce) {
+  .sp-gradient,
+  .sp-controls,
+  .sp-progress-wrapper,
+  .sp-progress,
+  .sp-progress__handle,
+  .sp-progress__tooltip,
+  .sp-control,
+  .sp-volume__slider-wrap,
+  .sp-quality-menu,
+  .sp-buffering {
+    transition: none;
+  }
+
+  .sp-live__dot,
+  .sp-spin {
+    animation: none;
+  }
+}
+
+/* ============================================
+   CSS Custom Properties (Theming)
+   ============================================ */
+:root {
+  --sp-accent: #e50914;
+  --sp-color: #fff;
+  --sp-bg: rgba(0, 0, 0, 0.8);
+  --sp-control-height: 48px;
+  --sp-icon-size: 24px;
+}
+`;
+var icons = {
+  play: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>`,
+  pause: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/></svg>`,
+  replay: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg>`,
+  volumeHigh: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>`,
+  volumeLow: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>`,
+  volumeMute: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>`,
+  fullscreen: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>`,
+  exitFullscreen: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>`,
+  pip: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14z"/></svg>`,
+  settings: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>`,
+  chromecast: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm0-4v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11zm20-7H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>`,
+  chromecastConnected: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm18-7H5v1.63c3.96 1.28 7.09 4.41 8.37 8.37H19V7zM1 10v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11zm20-7H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>`,
+  airplay: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 22h12l-6-6-6 6zM21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v-2H3V5h18v12h-4v2h4c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></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>`
+};
+function createElement(tag, attrs, children) {
+  const el = document.createElement(tag);
+  if (attrs) {
+    for (const [key, value] of Object.entries(attrs)) {
+      if (key === "className") {
+        el.className = value;
+      } else {
+        el.setAttribute(key, value);
+      }
+    }
+  }
+  return el;
+}
+function createButton(className, label, icon) {
+  const btn = createElement("button", {
+    className: `sp-control ${className}`,
+    "aria-label": label,
+    type: "button"
+  });
+  btn.innerHTML = icon;
+  return btn;
+}
+function getVideo(container) {
+  return container.querySelector("video");
+}
+function formatTime(seconds) {
+  if (!isFinite(seconds) || isNaN(seconds)) {
+    return "0:00";
+  }
+  const absSeconds = Math.abs(seconds);
+  const h = Math.floor(absSeconds / 3600);
+  const m = Math.floor(absSeconds % 3600 / 60);
+  const s = Math.floor(absSeconds % 60);
+  const sign = seconds < 0 ? "-" : "";
+  if (h > 0) {
+    return `${sign}${h}:${pad(m)}:${pad(s)}`;
+  }
+  return `${sign}${m}:${pad(s)}`;
+}
+function pad(n) {
+  return n < 10 ? `0${n}` : `${n}`;
+}
+function formatLiveTime(behindLive) {
+  if (behindLive <= 0) {
+    return "LIVE";
+  }
+  return `-${formatTime(behindLive)}`;
+}
+var PlayButton = class {
+  constructor(api) {
+    this.clickHandler = () => {
+      this.toggle();
+    };
+    this.api = api;
+    this.el = createButton("sp-play", "Play", icons.play);
+    this.el.addEventListener("click", this.clickHandler);
+  }
+  render() {
+    return this.el;
+  }
+  update() {
+    const playing = this.api.getState("playing");
+    const ended = this.api.getState("ended");
+    let icon;
+    let label;
+    if (ended) {
+      icon = icons.replay;
+      label = "Replay";
+    } else if (playing) {
+      icon = icons.pause;
+      label = "Pause";
+    } else {
+      icon = icons.play;
+      label = "Play";
+    }
+    this.el.innerHTML = icon;
+    this.el.setAttribute("aria-label", label);
+  }
+  toggle() {
+    const video = getVideo(this.api.container);
+    if (!video) return;
+    const ended = this.api.getState("ended");
+    const playing = this.api.getState("playing");
+    if (ended) {
+      video.currentTime = 0;
+      video.play().catch(() => {
+      });
+    } else if (playing) {
+      video.pause();
+    } else {
+      video.play().catch(() => {
+      });
+    }
+  }
+  destroy() {
+    this.el.removeEventListener("click", this.clickHandler);
+    this.el.remove();
+  }
+};
+var ProgressBar = class {
+  constructor(api) {
+    this.isDragging = false;
+    this.lastSeekTime = 0;
+    this.seekThrottleMs = 100;
+    this.wasPlayingBeforeDrag = false;
+    this.onMouseDown = (e) => {
+      e.preventDefault();
+      const video = getVideo(this.api.container);
+      this.wasPlayingBeforeDrag = video ? !video.paused : false;
+      this.isDragging = true;
+      this.el.classList.add("sp-progress--dragging");
+      this.lastSeekTime = 0;
+      this.seek(e.clientX, true);
+    };
+    this.onDocMouseMove = (e) => {
+      if (this.isDragging) {
+        this.seek(e.clientX);
+        this.updateVisualPosition(e.clientX);
+      }
+    };
+    this.onMouseUp = (e) => {
+      if (this.isDragging) {
+        this.seek(e.clientX, true);
+        this.isDragging = false;
+        this.el.classList.remove("sp-progress--dragging");
+        if (this.wasPlayingBeforeDrag) {
+          const video = getVideo(this.api.container);
+          if (video && video.paused) {
+            const resumePlayback = () => {
+              video.removeEventListener("seeked", resumePlayback);
+              video.play().catch(() => {
+              });
+            };
+            video.addEventListener("seeked", resumePlayback);
+          }
+        }
+      }
+    };
+    this.onMouseMove = (e) => {
+      this.updateTooltip(e.clientX);
+    };
+    this.onMouseLeave = () => {
+      if (!this.isDragging) {
+        this.tooltip.style.opacity = "0";
+      }
+    };
+    this.onKeyDown = (e) => {
+      const video = getVideo(this.api.container);
+      if (!video) return;
+      const step = 5;
+      const duration = this.api.getState("duration") || 0;
+      switch (e.key) {
+        case "ArrowLeft":
+          e.preventDefault();
+          video.currentTime = Math.max(0, video.currentTime - step);
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          video.currentTime = Math.min(duration, video.currentTime + step);
+          break;
+        case "Home":
+          e.preventDefault();
+          video.currentTime = 0;
+          break;
+        case "End":
+          e.preventDefault();
+          video.currentTime = duration;
+          break;
+      }
+    };
+    this.api = api;
+    this.wrapper = createElement("div", { className: "sp-progress-wrapper" });
+    this.el = createElement("div", { className: "sp-progress" });
+    const track = createElement("div", { className: "sp-progress__track" });
+    this.buffered = createElement("div", { className: "sp-progress__buffered" });
+    this.filled = createElement("div", { className: "sp-progress__filled" });
+    this.handle = createElement("div", { className: "sp-progress__handle" });
+    this.tooltip = createElement("div", { className: "sp-progress__tooltip" });
+    this.tooltip.textContent = "0:00";
+    track.appendChild(this.buffered);
+    track.appendChild(this.filled);
+    track.appendChild(this.handle);
+    this.el.appendChild(track);
+    this.el.appendChild(this.tooltip);
+    this.wrapper.appendChild(this.el);
+    this.el.setAttribute("role", "slider");
+    this.el.setAttribute("aria-label", "Seek");
+    this.el.setAttribute("aria-valuemin", "0");
+    this.el.setAttribute("tabindex", "0");
+    this.wrapper.addEventListener("mousedown", this.onMouseDown);
+    this.wrapper.addEventListener("mousemove", this.onMouseMove);
+    this.wrapper.addEventListener("mouseleave", this.onMouseLeave);
+    this.el.addEventListener("keydown", this.onKeyDown);
+    document.addEventListener("mousemove", this.onDocMouseMove);
+    document.addEventListener("mouseup", this.onMouseUp);
+  }
+  render() {
+    return this.wrapper;
+  }
+  /** Show the progress bar */
+  show() {
+    this.wrapper.classList.add("sp-progress-wrapper--visible");
+  }
+  /** Hide the progress bar */
+  hide() {
+    this.wrapper.classList.remove("sp-progress-wrapper--visible");
+  }
+  update() {
+    const currentTime = this.api.getState("currentTime") || 0;
+    const duration = this.api.getState("duration") || 0;
+    const bufferedRanges = this.api.getState("buffered");
+    if (duration > 0) {
+      const progress = currentTime / duration * 100;
+      this.filled.style.width = `${progress}%`;
+      this.handle.style.left = `${progress}%`;
+      if (bufferedRanges && bufferedRanges.length > 0) {
+        const bufferedEnd = bufferedRanges.end(bufferedRanges.length - 1);
+        const bufferedPercent = bufferedEnd / duration * 100;
+        this.buffered.style.width = `${bufferedPercent}%`;
+      }
+      this.el.setAttribute("aria-valuemax", String(Math.floor(duration)));
+      this.el.setAttribute("aria-valuenow", String(Math.floor(currentTime)));
+      this.el.setAttribute("aria-valuetext", formatTime(currentTime));
+    }
+  }
+  getTimeFromPosition(clientX) {
+    const rect = this.el.getBoundingClientRect();
+    const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    const duration = this.api.getState("duration") || 0;
+    return percent * duration;
+  }
+  updateTooltip(clientX) {
+    const rect = this.el.getBoundingClientRect();
+    const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    const time = this.getTimeFromPosition(clientX);
+    this.tooltip.textContent = formatTime(time);
+    this.tooltip.style.left = `${percent * 100}%`;
+  }
+  updateVisualPosition(clientX) {
+    const rect = this.el.getBoundingClientRect();
+    const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    this.filled.style.width = `${percent * 100}%`;
+    this.handle.style.left = `${percent * 100}%`;
+  }
+  seek(clientX, force = false) {
+    const video = getVideo(this.api.container);
+    if (!video) return;
+    const now = Date.now();
+    if (!force && this.isDragging && now - this.lastSeekTime < this.seekThrottleMs) {
+      return;
+    }
+    this.lastSeekTime = now;
+    const time = this.getTimeFromPosition(clientX);
+    video.currentTime = time;
+  }
+  destroy() {
+    this.wrapper.removeEventListener("mousedown", this.onMouseDown);
+    this.wrapper.removeEventListener("mousemove", this.onMouseMove);
+    this.wrapper.removeEventListener("mouseleave", this.onMouseLeave);
+    document.removeEventListener("mousemove", this.onDocMouseMove);
+    document.removeEventListener("mouseup", this.onMouseUp);
+    this.wrapper.remove();
+  }
+};
+var TimeDisplay = class {
+  constructor(api) {
+    this.api = api;
+    this.el = createElement("div", { className: "sp-time" });
+    this.el.setAttribute("aria-live", "off");
+  }
+  render() {
+    return this.el;
+  }
+  update() {
+    const live = this.api.getState("live");
+    const currentTime = this.api.getState("currentTime") || 0;
+    const duration = this.api.getState("duration") || 0;
+    if (live) {
+      const seekableRange = this.api.getState("seekableRange");
+      if (seekableRange) {
+        const behindLive = seekableRange.end - currentTime;
+        this.el.textContent = formatLiveTime(behindLive);
+      } else {
+        this.el.textContent = formatLiveTime(0);
+      }
+    } else {
+      this.el.textContent = `${formatTime(currentTime)} / ${formatTime(duration)}`;
+    }
+  }
+  destroy() {
+    this.el.remove();
+  }
+};
+var VolumeControl = class {
+  constructor(api) {
+    this.isDragging = false;
+    this.onMouseDown = (e) => {
+      e.preventDefault();
+      this.isDragging = true;
+      this.setVolume(this.getVolumeFromPosition(e.clientX));
+    };
+    this.onDocMouseMove = (e) => {
+      if (this.isDragging) {
+        this.setVolume(this.getVolumeFromPosition(e.clientX));
+      }
+    };
+    this.onMouseUp = () => {
+      this.isDragging = false;
+    };
+    this.onKeyDown = (e) => {
+      const video = getVideo(this.api.container);
+      if (!video) return;
+      const step = 0.1;
+      switch (e.key) {
+        case "ArrowUp":
+        case "ArrowRight":
+          e.preventDefault();
+          this.setVolume(video.volume + step);
+          break;
+        case "ArrowDown":
+        case "ArrowLeft":
+          e.preventDefault();
+          this.setVolume(video.volume - step);
+          break;
+      }
+    };
+    this.api = api;
+    this.el = createElement("div", { className: "sp-volume" });
+    this.btn = createElement("button", {
+      className: "sp-control sp-volume__btn",
+      "aria-label": "Mute",
+      type: "button"
+    });
+    this.btn.innerHTML = icons.volumeHigh;
+    this.btn.onclick = () => this.toggleMute();
+    const sliderWrap = createElement("div", { className: "sp-volume__slider-wrap" });
+    this.slider = createElement("div", { className: "sp-volume__slider" });
+    this.slider.setAttribute("role", "slider");
+    this.slider.setAttribute("aria-label", "Volume");
+    this.slider.setAttribute("aria-valuemin", "0");
+    this.slider.setAttribute("aria-valuemax", "100");
+    this.slider.setAttribute("tabindex", "0");
+    this.level = createElement("div", { className: "sp-volume__level" });
+    this.slider.appendChild(this.level);
+    sliderWrap.appendChild(this.slider);
+    this.el.appendChild(this.btn);
+    this.el.appendChild(sliderWrap);
+    this.slider.addEventListener("mousedown", this.onMouseDown);
+    this.slider.addEventListener("keydown", this.onKeyDown);
+    document.addEventListener("mousemove", this.onDocMouseMove);
+    document.addEventListener("mouseup", this.onMouseUp);
+  }
+  render() {
+    return this.el;
+  }
+  update() {
+    const volume = this.api.getState("volume") ?? 1;
+    const muted = this.api.getState("muted") ?? false;
+    let icon;
+    let label;
+    if (muted || volume === 0) {
+      icon = icons.volumeMute;
+      label = "Unmute";
+    } else if (volume < 0.5) {
+      icon = icons.volumeLow;
+      label = "Mute";
+    } else {
+      icon = icons.volumeHigh;
+      label = "Mute";
+    }
+    this.btn.innerHTML = icon;
+    this.btn.setAttribute("aria-label", label);
+    const displayVolume = muted ? 0 : volume;
+    this.level.style.width = `${displayVolume * 100}%`;
+    this.slider.setAttribute("aria-valuenow", String(Math.round(displayVolume * 100)));
+  }
+  toggleMute() {
+    const video = getVideo(this.api.container);
+    if (!video) return;
+    video.muted = !video.muted;
+  }
+  setVolume(percent) {
+    const video = getVideo(this.api.container);
+    if (!video) return;
+    const vol = Math.max(0, Math.min(1, percent));
+    video.volume = vol;
+    if (vol > 0 && video.muted) {
+      video.muted = false;
+    }
+  }
+  getVolumeFromPosition(clientX) {
+    const rect = this.slider.getBoundingClientRect();
+    return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+  }
+  destroy() {
+    document.removeEventListener("mousemove", this.onDocMouseMove);
+    document.removeEventListener("mouseup", this.onMouseUp);
+    this.el.remove();
+  }
+};
+var LiveIndicator = class {
+  constructor(api) {
+    this.api = api;
+    this.el = createElement("div", { className: "sp-live" });
+    this.el.innerHTML = '<div class="sp-live__dot"></div><span>LIVE</span>';
+    this.el.setAttribute("role", "button");
+    this.el.setAttribute("aria-label", "Seek to live");
+    this.el.setAttribute("tabindex", "0");
+    this.el.onclick = () => this.seekToLive();
+    this.el.onkeydown = (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        this.seekToLive();
+      }
+    };
+  }
+  render() {
+    return this.el;
+  }
+  update() {
+    const live = this.api.getState("live");
+    const liveEdge = this.api.getState("liveEdge");
+    this.el.style.display = live ? "" : "none";
+    if (liveEdge) {
+      this.el.classList.remove("sp-live--behind");
+    } else {
+      this.el.classList.add("sp-live--behind");
+    }
+  }
+  seekToLive() {
+    const video = getVideo(this.api.container);
+    if (!video) return;
+    const seekableRange = this.api.getState("seekableRange");
+    if (seekableRange) {
+      video.currentTime = seekableRange.end;
+    }
+  }
+  destroy() {
+    this.el.remove();
+  }
+};
+var QualityMenu = class {
+  constructor(api) {
+    this.isOpen = false;
+    this.lastQualitiesJson = "";
+    this.api = api;
+    this.el = createElement("div", { className: "sp-quality" });
+    this.btn = createButton("sp-quality__btn", "Quality", icons.settings);
+    this.btnLabel = createElement("span", { className: "sp-quality__label" });
+    this.btnLabel.textContent = "Auto";
+    this.btn.appendChild(this.btnLabel);
+    this.btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.toggle();
+    });
+    this.menu = createElement("div", { className: "sp-quality-menu" });
+    this.menu.setAttribute("role", "menu");
+    this.menu.addEventListener("click", (e) => {
+      e.stopPropagation();
+    });
+    this.el.appendChild(this.btn);
+    this.el.appendChild(this.menu);
+    this.closeHandler = (e) => {
+      if (!this.el.contains(e.target)) {
+        this.close();
+      }
+    };
+    document.addEventListener("click", this.closeHandler);
+  }
+  render() {
+    return this.el;
+  }
+  update() {
+    const qualities = this.api.getState("qualities") || [];
+    const currentQuality = this.api.getState("currentQuality");
+    this.el.style.display = qualities.length > 0 ? "" : "none";
+    this.btnLabel.textContent = currentQuality?.label || "Auto";
+    const qualitiesJson = JSON.stringify(qualities.map((q) => q.id));
+    const currentId = currentQuality?.id || "auto";
+    if (qualitiesJson !== this.lastQualitiesJson) {
+      this.lastQualitiesJson = qualitiesJson;
+      this.rebuildMenu(qualities);
+    }
+    this.updateActiveStates(currentId);
+  }
+  rebuildMenu(qualities) {
+    this.menu.innerHTML = "";
+    const autoItem = this.createMenuItem("Auto", "auto");
+    this.menu.appendChild(autoItem);
+    const sorted = [...qualities].sort((a, b) => b.height - a.height);
+    for (const q of sorted) {
+      if (q.id === "auto") continue;
+      const item = this.createMenuItem(q.label, q.id);
+      this.menu.appendChild(item);
+    }
+  }
+  updateActiveStates(activeId) {
+    const items = this.menu.querySelectorAll(".sp-quality-menu__item");
+    items.forEach((item) => {
+      const id = item.getAttribute("data-quality-id");
+      const isActive = id === activeId;
+      item.classList.toggle("sp-quality-menu__item--active", isActive);
+    });
+  }
+  createMenuItem(label, qualityId) {
+    const item = createElement("div", {
+      className: "sp-quality-menu__item"
+    });
+    item.setAttribute("role", "menuitem");
+    item.setAttribute("data-quality-id", qualityId);
+    const labelSpan = createElement("span", { className: "sp-quality-menu__label" });
+    labelSpan.textContent = label;
+    item.appendChild(labelSpan);
+    item.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.selectQuality(qualityId);
+    });
+    return item;
+  }
+  selectQuality(qualityId) {
+    this.api.emit("quality:select", {
+      quality: qualityId,
+      auto: qualityId === "auto"
+    });
+    this.close();
+  }
+  toggle() {
+    this.isOpen ? this.close() : this.open();
+  }
+  open() {
+    this.isOpen = true;
+    this.menu.classList.add("sp-quality-menu--open");
+    this.btn.setAttribute("aria-expanded", "true");
+  }
+  close() {
+    this.isOpen = false;
+    this.menu.classList.remove("sp-quality-menu--open");
+    this.btn.setAttribute("aria-expanded", "false");
+  }
+  destroy() {
+    document.removeEventListener("click", this.closeHandler);
+    this.el.remove();
+  }
+};
+function isChromecastSupported() {
+  if (typeof navigator === "undefined") return false;
+  const ua = navigator.userAgent;
+  return /Chrome/.test(ua) && !/Edge|Edg/.test(ua);
+}
+function isAirPlaySupported() {
+  if (typeof HTMLVideoElement === "undefined") return false;
+  return typeof HTMLVideoElement.prototype.webkitShowPlaybackTargetPicker === "function";
+}
+var CastButton = class {
+  constructor(api, type) {
+    this.api = api;
+    this.type = type;
+    this.supported = type === "chromecast" ? isChromecastSupported() : isAirPlaySupported();
+    const icon = type === "chromecast" ? icons.chromecast : icons.airplay;
+    const label = type === "chromecast" ? "Cast" : "AirPlay";
+    this.el = createButton(`sp-cast sp-cast--${type}`, label, icon);
+    this.el.addEventListener("click", () => this.handleClick());
+    if (!this.supported) {
+      this.el.style.display = "none";
+    }
+  }
+  render() {
+    return this.el;
+  }
+  update() {
+    if (!this.supported) {
+      this.el.style.display = "none";
+      return;
+    }
+    if (this.type === "chromecast") {
+      const available = this.api.getState("chromecastAvailable");
+      const active = this.api.getState("chromecastActive");
+      this.el.style.display = "";
+      this.el.disabled = !available && !active;
+      this.el.classList.toggle("sp-cast--active", !!active);
+      this.el.classList.toggle("sp-cast--unavailable", !available && !active);
+      if (active) {
+        this.el.innerHTML = icons.chromecastConnected;
+        this.el.setAttribute("aria-label", "Stop casting");
+      } else {
+        this.el.innerHTML = icons.chromecast;
+        this.el.setAttribute("aria-label", available ? "Cast" : "No Cast devices found");
+      }
+    } else {
+      const active = this.api.getState("airplayActive");
+      this.el.style.display = "";
+      this.el.disabled = false;
+      this.el.classList.toggle("sp-cast--active", !!active);
+      this.el.classList.remove("sp-cast--unavailable");
+      this.el.setAttribute("aria-label", active ? "Stop AirPlay" : "AirPlay");
+    }
+  }
+  handleClick() {
+    if (this.type === "chromecast") {
+      this.handleChromecast();
+    } else {
+      this.handleAirPlay();
+    }
+  }
+  handleChromecast() {
+    const chromecast = this.api.getPlugin("chromecast");
+    if (!chromecast) return;
+    if (chromecast.isConnected()) {
+      chromecast.endSession();
+    } else {
+      chromecast.requestSession().catch(() => {
+      });
+    }
+  }
+  async handleAirPlay() {
+    const airplayPlugin = this.api.getPlugin("airplay");
+    if (airplayPlugin) {
+      await airplayPlugin.showPicker();
+    } else {
+      const video = getVideo(this.api.container);
+      video?.webkitShowPlaybackTargetPicker?.();
+    }
+  }
+  destroy() {
+    this.el.remove();
+  }
+};
+var PipButton = class {
+  constructor(api) {
+    this.clickHandler = () => {
+      this.toggle();
+    };
+    this.api = api;
+    const video = document.createElement("video");
+    this.supported = "pictureInPictureEnabled" in document || "webkitSetPresentationMode" in video;
+    this.el = createButton("sp-pip", "Picture-in-Picture", icons.pip);
+    this.el.addEventListener("click", this.clickHandler);
+    if (!this.supported) {
+      this.el.style.display = "none";
+    }
+  }
+  render() {
+    return this.el;
+  }
+  update() {
+    if (!this.supported) return;
+    const pip = this.api.getState("pip");
+    this.el.setAttribute("aria-label", pip ? "Exit Picture-in-Picture" : "Picture-in-Picture");
+    this.el.classList.toggle("sp-pip--active", !!pip);
+  }
+  async toggle() {
+    const video = getVideo(this.api.container);
+    if (!video) {
+      this.api.logger.warn("PiP: video element not found");
+      return;
+    }
+    try {
+      const isInPip = document.pictureInPictureElement === video || video.webkitPresentationMode === "picture-in-picture";
+      if (isInPip) {
+        if (document.pictureInPictureElement) {
+          await document.exitPictureInPicture();
+        } else if (video.webkitSetPresentationMode) {
+          video.webkitSetPresentationMode("inline");
+        }
+        this.api.logger.debug("PiP: exited");
+      } else {
+        if (video.requestPictureInPicture) {
+          await video.requestPictureInPicture();
+        } else if (video.webkitSetPresentationMode) {
+          video.webkitSetPresentationMode("picture-in-picture");
+        }
+        this.api.logger.debug("PiP: entered");
+      }
+    } catch (e) {
+      this.api.logger.warn("PiP: failed", { error: e.message });
+    }
+  }
+  destroy() {
+    this.el.removeEventListener("click", this.clickHandler);
+    this.el.remove();
+  }
+};
+var FullscreenButton = class {
+  constructor(api) {
+    this.clickHandler = () => {
+      this.toggle();
+    };
+    this.api = api;
+    this.el = createButton("sp-fullscreen", "Fullscreen", icons.fullscreen);
+    this.el.addEventListener("click", this.clickHandler);
+  }
+  render() {
+    return this.el;
+  }
+  update() {
+    const fullscreen = this.api.getState("fullscreen");
+    if (fullscreen) {
+      this.el.innerHTML = icons.exitFullscreen;
+      this.el.setAttribute("aria-label", "Exit fullscreen");
+    } else {
+      this.el.innerHTML = icons.fullscreen;
+      this.el.setAttribute("aria-label", "Fullscreen");
+    }
+  }
+  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();
+      }
+    } catch {
+    }
+  }
+  destroy() {
+    this.el.removeEventListener("click", this.clickHandler);
+    this.el.remove();
+  }
+};
+var Spacer = class {
+  constructor() {
+    this.el = createElement("div", { className: "sp-spacer" });
+  }
+  render() {
+    return this.el;
+  }
+  update() {
+  }
+  destroy() {
+    this.el.remove();
+  }
+};
+var DEFAULT_LAYOUT = [
+  "play",
+  "volume",
+  "time",
+  "live-indicator",
+  "spacer",
+  "quality",
+  "chromecast",
+  "airplay",
+  "pip",
+  "fullscreen"
+];
+var DEFAULT_HIDE_DELAY = 3e3;
+function uiPlugin(config = {}) {
+  let api;
+  let controlBar = null;
+  let gradient = null;
+  let progressBar = null;
+  let bufferingIndicator = null;
+  let styleEl = null;
+  let controls = [];
+  let hideTimeout = null;
+  let stateUnsubscribe = null;
+  let controlsVisible = true;
+  const layout = config.controls || DEFAULT_LAYOUT;
+  const hideDelay = config.hideDelay ?? DEFAULT_HIDE_DELAY;
+  const createControl = (slot) => {
+    switch (slot) {
+      case "play":
+        return new PlayButton(api);
+      case "volume":
+        return new VolumeControl(api);
+      case "progress":
+        return null;
+      case "time":
+        return new TimeDisplay(api);
+      case "live-indicator":
+        return new LiveIndicator(api);
+      case "quality":
+        return new QualityMenu(api);
+      case "chromecast":
+        return new CastButton(api, "chromecast");
+      case "airplay":
+        return new CastButton(api, "airplay");
+      case "pip":
+        return new PipButton(api);
+      case "fullscreen":
+        return new FullscreenButton(api);
+      case "spacer":
+        return new Spacer();
+      default:
+        return null;
+    }
+  };
+  const updateControls = () => {
+    controls.forEach((c) => c.update());
+    progressBar?.update();
+    const waiting = api?.getState("waiting");
+    const seeking = api?.getState("seeking");
+    const playbackState = api?.getState("playbackState");
+    const isLoading = playbackState === "loading";
+    const showSpinner = waiting || seeking && !api?.getState("paused") || isLoading;
+    bufferingIndicator?.classList.toggle("sp-buffering--visible", !!showSpinner);
+  };
+  const showControls = () => {
+    if (controlsVisible) {
+      resetHideTimer();
+      return;
+    }
+    controlsVisible = true;
+    controlBar?.classList.add("sp-controls--visible");
+    controlBar?.classList.remove("sp-controls--hidden");
+    gradient?.classList.add("sp-gradient--visible");
+    progressBar?.show();
+    api?.setState("controlsVisible", true);
+    resetHideTimer();
+  };
+  const hideControls = () => {
+    const paused = api?.getState("paused");
+    if (paused) return;
+    controlsVisible = false;
+    controlBar?.classList.remove("sp-controls--visible");
+    controlBar?.classList.add("sp-controls--hidden");
+    gradient?.classList.remove("sp-gradient--visible");
+    progressBar?.hide();
+    api?.setState("controlsVisible", false);
+  };
+  const resetHideTimer = () => {
+    if (hideTimeout) {
+      clearTimeout(hideTimeout);
+    }
+    hideTimeout = setTimeout(hideControls, hideDelay);
+  };
+  const handleInteraction = () => {
+    showControls();
+  };
+  const handleMouseLeave = () => {
+    hideControls();
+  };
+  const handleKeyDown = (e) => {
+    if (!api.container.contains(document.activeElement)) return;
+    const video = api.container.querySelector("video");
+    if (!video) return;
+    switch (e.key) {
+      case " ":
+      case "k":
+        e.preventDefault();
+        video.paused ? video.play() : video.pause();
+        break;
+      case "m":
+        e.preventDefault();
+        video.muted = !video.muted;
+        break;
+      case "f":
+        e.preventDefault();
+        if (document.fullscreenElement) {
+          document.exitFullscreen();
+        } else {
+          api.container.requestFullscreen?.();
+        }
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        video.currentTime = Math.max(0, video.currentTime - 5);
+        showControls();
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        video.currentTime = Math.min(video.duration || 0, video.currentTime + 5);
+        showControls();
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        video.volume = Math.min(1, video.volume + 0.1);
+        showControls();
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        video.volume = Math.max(0, video.volume - 0.1);
+        showControls();
+        break;
+    }
+  };
+  return {
+    id: "ui-controls",
+    name: "UI Controls",
+    type: "ui",
+    version: "1.0.0",
+    async init(pluginApi) {
+      api = pluginApi;
+      styleEl = document.createElement("style");
+      styleEl.textContent = styles;
+      document.head.appendChild(styleEl);
+      if (config.theme) {
+        this.setTheme(config.theme);
+      }
+      const container = api.container;
+      if (!container) {
+        api.logger.error("UI plugin: container not found");
+        return;
+      }
+      const containerStyle = getComputedStyle(container);
+      if (containerStyle.position === "static") {
+        container.style.position = "relative";
+      }
+      gradient = document.createElement("div");
+      gradient.className = "sp-gradient sp-gradient--visible";
+      container.appendChild(gradient);
+      bufferingIndicator = document.createElement("div");
+      bufferingIndicator.className = "sp-buffering";
+      bufferingIndicator.innerHTML = icons.spinner;
+      bufferingIndicator.setAttribute("aria-hidden", "true");
+      container.appendChild(bufferingIndicator);
+      progressBar = new ProgressBar(api);
+      container.appendChild(progressBar.render());
+      progressBar.show();
+      controlBar = document.createElement("div");
+      controlBar.className = "sp-controls sp-controls--visible";
+      controlBar.setAttribute("role", "toolbar");
+      controlBar.setAttribute("aria-label", "Video controls");
+      for (const slot of layout) {
+        const control = createControl(slot);
+        if (control) {
+          controls.push(control);
+          controlBar.appendChild(control.render());
+        }
+      }
+      container.appendChild(controlBar);
+      container.addEventListener("mousemove", handleInteraction);
+      container.addEventListener("mouseenter", handleInteraction);
+      container.addEventListener("mouseleave", handleMouseLeave);
+      container.addEventListener("touchstart", handleInteraction, { passive: true });
+      container.addEventListener("click", handleInteraction);
+      document.addEventListener("keydown", handleKeyDown);
+      stateUnsubscribe = api.subscribeToState(updateControls);
+      document.addEventListener("fullscreenchange", updateControls);
+      updateControls();
+      if (!container.hasAttribute("tabindex")) {
+        container.setAttribute("tabindex", "0");
+      }
+      api.logger.debug("UI controls plugin initialized");
+    },
+    async destroy() {
+      if (hideTimeout) {
+        clearTimeout(hideTimeout);
+        hideTimeout = null;
+      }
+      stateUnsubscribe?.();
+      stateUnsubscribe = null;
+      if (api?.container) {
+        api.container.removeEventListener("mousemove", handleInteraction);
+        api.container.removeEventListener("mouseenter", handleInteraction);
+        api.container.removeEventListener("mouseleave", handleMouseLeave);
+        api.container.removeEventListener("touchstart", handleInteraction);
+        api.container.removeEventListener("click", handleInteraction);
+      }
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("fullscreenchange", updateControls);
+      controls.forEach((c) => c.destroy());
+      controls = [];
+      progressBar?.destroy();
+      progressBar = null;
+      controlBar?.remove();
+      controlBar = null;
+      gradient?.remove();
+      gradient = null;
+      bufferingIndicator?.remove();
+      bufferingIndicator = null;
+      styleEl?.remove();
+      styleEl = null;
+      api?.logger.debug("UI controls plugin destroyed");
+    },
+    // Public API
+    show() {
+      showControls();
+    },
+    hide() {
+      controlsVisible = false;
+      controlBar?.classList.remove("sp-controls--visible");
+      controlBar?.classList.add("sp-controls--hidden");
+      gradient?.classList.remove("sp-gradient--visible");
+      progressBar?.hide();
+      api?.setState("controlsVisible", false);
+    },
+    setTheme(theme) {
+      const root = api?.container || document.documentElement;
+      if (theme.primaryColor) {
+        root.style.setProperty("--sp-color", theme.primaryColor);
+      }
+      if (theme.accentColor) {
+        root.style.setProperty("--sp-accent", theme.accentColor);
+      }
+      if (theme.backgroundColor) {
+        root.style.setProperty("--sp-bg", theme.backgroundColor);
+      }
+      if (theme.controlBarHeight) {
+        root.style.setProperty("--sp-control-height", `${theme.controlBarHeight}px`);
+      }
+      if (theme.iconSize) {
+        root.style.setProperty("--sp-icon-size", `${theme.iconSize}px`);
+      }
+    },
+    getControlBar() {
+      return controlBar;
+    }
+  };
+}
+class Signal {
+  constructor(initialValue) {
+    this.subscribers = /* @__PURE__ */ new Set();
+    this.value = initialValue;
+  }
+  /**
+   * Get the current value and track dependency if called within an effect.
+   *
+   * @returns Current value
+   */
+  get() {
+    return this.value;
+  }
+  /**
+   * Set a new value and notify subscribers if changed.
+   *
+   * @param newValue - New value to set
+   */
+  set(newValue) {
+    if (Object.is(this.value, newValue)) {
+      return;
+    }
+    this.value = newValue;
+    this.notify();
+  }
+  /**
+   * Update the value using a function.
+   *
+   * @param updater - Function that receives current value and returns new value
+   *
+   * @example
+   * ```ts
+   * const count = new Signal(0);
+   * count.update(n => n + 1); // Increments by 1
+   * ```
+   */
+  update(updater) {
+    this.set(updater(this.value));
+  }
+  /**
+   * Subscribe to changes without automatic dependency tracking.
+   *
+   * @param callback - Function to call when value changes
+   * @returns Unsubscribe function
+   */
+  subscribe(callback) {
+    this.subscribers.add(callback);
+    return () => this.subscribers.delete(callback);
+  }
+  /**
+   * Notify all subscribers of a change.
+   * @internal
+   */
+  notify() {
+    this.subscribers.forEach((subscriber) => {
+      try {
+        subscriber();
+      } catch (error) {
+        console.error("[Scarlett Player] Error in signal subscriber:", error);
+      }
+    });
+  }
+  /**
+   * Clean up all subscriptions.
+   * Call this when destroying the signal.
+   */
+  destroy() {
+    this.subscribers.clear();
+  }
+  /**
+   * Get the current number of subscribers (for debugging).
+   * @internal
+   */
+  getSubscriberCount() {
+    return this.subscribers.size;
+  }
+}
+function signal(initialValue) {
+  return new Signal(initialValue);
+}
+const DEFAULT_STATE = {
+  // Core Playback State
+  playbackState: "idle",
+  playing: false,
+  paused: true,
+  ended: false,
+  buffering: false,
+  waiting: false,
+  seeking: false,
+  // Time & Duration
+  currentTime: 0,
+  duration: NaN,
+  buffered: null,
+  bufferedAmount: 0,
+  // Media Info
+  mediaType: "unknown",
+  source: null,
+  title: "",
+  poster: "",
+  // Volume & Audio
+  volume: 1,
+  muted: false,
+  // Playback Controls
+  playbackRate: 1,
+  fullscreen: false,
+  pip: false,
+  controlsVisible: true,
+  // Quality & Tracks
+  qualities: [],
+  currentQuality: null,
+  audioTracks: [],
+  currentAudioTrack: null,
+  textTracks: [],
+  currentTextTrack: null,
+  // Live/DVR State (TSP features)
+  live: false,
+  liveEdge: true,
+  seekableRange: null,
+  liveLatency: 0,
+  lowLatencyMode: false,
+  // Chapters (TSP features)
+  chapters: [],
+  currentChapter: null,
+  // Error State
+  error: null,
+  // Network & Performance
+  bandwidth: 0,
+  autoplay: false,
+  loop: false,
+  // Casting State
+  airplayAvailable: false,
+  airplayActive: false,
+  chromecastAvailable: false,
+  chromecastActive: false,
+  // UI State
+  interacting: false,
+  hovering: false,
+  focused: false
+};
+class StateManager {
+  /**
+   * Create a new StateManager with default initial state.
+   *
+   * @param initialState - Optional partial initial state (merged with defaults)
+   */
+  constructor(initialState) {
+    this.signals = /* @__PURE__ */ new Map();
+    this.changeSubscribers = /* @__PURE__ */ new Set();
+    this.initializeSignals(initialState);
+  }
+  /**
+   * Initialize all state signals with default or provided values.
+   * @private
+   */
+  initializeSignals(overrides) {
+    const initialState = { ...DEFAULT_STATE, ...overrides };
+    for (const [key, value] of Object.entries(initialState)) {
+      const stateKey = key;
+      const stateSignal = signal(value);
+      stateSignal.subscribe(() => {
+        this.notifyChangeSubscribers(stateKey);
+      });
+      this.signals.set(stateKey, stateSignal);
+    }
+  }
+  /**
+   * Get the signal for a state property.
+   *
+   * @param key - State property key
+   * @returns Signal for the property
+   *
+   * @example
+   * ```ts
+   * const playingSignal = state.get('playing');
+   * playingSignal.get(); // false
+   * playingSignal.set(true);
+   * ```
+   */
+  get(key) {
+    const stateSignal = this.signals.get(key);
+    if (!stateSignal) {
+      throw new Error(`[StateManager] Unknown state key: ${key}`);
+    }
+    return stateSignal;
+  }
+  /**
+   * Get the current value of a state property (convenience method).
+   *
+   * @param key - State property key
+   * @returns Current value
+   *
+   * @example
+   * ```ts
+   * state.getValue('playing'); // false
+   * ```
+   */
+  getValue(key) {
+    return this.get(key).get();
+  }
+  /**
+   * Set the value of a state property.
+   *
+   * @param key - State property key
+   * @param value - New value
+   *
+   * @example
+   * ```ts
+   * state.set('playing', true);
+   * state.set('currentTime', 10.5);
+   * ```
+   */
+  set(key, value) {
+    this.get(key).set(value);
+  }
+  /**
+   * Update multiple state properties at once (batch update).
+   *
+   * More efficient than calling set() multiple times.
+   *
+   * @param updates - Partial state object with updates
+   *
+   * @example
+   * ```ts
+   * state.update({
+   *   playing: true,
+   *   currentTime: 0,
+   *   volume: 1.0,
+   * });
+   * ```
+   */
+  update(updates) {
+    for (const [key, value] of Object.entries(updates)) {
+      const stateKey = key;
+      if (this.signals.has(stateKey)) {
+        this.set(stateKey, value);
+      }
+    }
+  }
+  /**
+   * Subscribe to changes on a specific state property.
+   *
+   * @param key - State property key
+   * @param callback - Callback function receiving new value
+   * @returns Unsubscribe function
+   *
+   * @example
+   * ```ts
+   * const unsub = state.subscribe('playing', (value) => {
+   *   console.log('Playing:', value);
+   * });
+   * ```
+   */
+  subscribeToKey(key, callback) {
+    const stateSignal = this.get(key);
+    return stateSignal.subscribe(() => {
+      callback(stateSignal.get());
+    });
+  }
+  /**
+   * Subscribe to all state changes.
+   *
+   * Receives a StateChangeEvent for every state property change.
+   *
+   * @param callback - Callback function receiving change events
+   * @returns Unsubscribe function
+   *
+   * @example
+   * ```ts
+   * const unsub = state.subscribe((event) => {
+   *   console.log(`${event.key} changed:`, event.value);
+   * });
+   * ```
+   */
+  subscribe(callback) {
+    this.changeSubscribers.add(callback);
+    return () => this.changeSubscribers.delete(callback);
+  }
+  /**
+   * Notify all global change subscribers.
+   * @private
+   */
+  notifyChangeSubscribers(key) {
+    const stateSignal = this.get(key);
+    const value = stateSignal.get();
+    const event = {
+      key,
+      value,
+      previousValue: value
+      // Note: We don't track previous values in this simple impl
+    };
+    this.changeSubscribers.forEach((subscriber) => {
+      try {
+        subscriber(event);
+      } catch (error) {
+        console.error("[StateManager] Error in change subscriber:", error);
+      }
+    });
+  }
+  /**
+   * Reset all state to default values.
+   *
+   * @example
+   * ```ts
+   * state.reset();
+   * ```
+   */
+  reset() {
+    this.update(DEFAULT_STATE);
+  }
+  /**
+   * Reset a specific state property to its default value.
+   *
+   * @param key - State property key
+   *
+   * @example
+   * ```ts
+   * state.resetKey('playing');
+   * ```
+   */
+  resetKey(key) {
+    const defaultValue = DEFAULT_STATE[key];
+    this.set(key, defaultValue);
+  }
+  /**
+   * Get a snapshot of all current state values.
+   *
+   * @returns Frozen snapshot of current state
+   *
+   * @example
+   * ```ts
+   * const snapshot = state.snapshot();
+   * console.log(snapshot.playing, snapshot.currentTime);
+   * ```
+   */
+  snapshot() {
+    const snapshot = {};
+    for (const [key, stateSignal] of this.signals) {
+      snapshot[key] = stateSignal.get();
+    }
+    return Object.freeze(snapshot);
+  }
+  /**
+   * Get the number of subscribers for a state property (for debugging).
+   *
+   * @param key - State property key
+   * @returns Number of subscribers
+   * @internal
+   */
+  getSubscriberCount(key) {
+    return this.signals.get(key)?.getSubscriberCount() ?? 0;
+  }
+  /**
+   * Destroy the state manager and cleanup all signals.
+   *
+   * @example
+   * ```ts
+   * state.destroy();
+   * ```
+   */
+  destroy() {
+    this.signals.forEach((stateSignal) => stateSignal.destroy());
+    this.signals.clear();
+    this.changeSubscribers.clear();
+  }
+}
+const DEFAULT_OPTIONS = {
+  maxListeners: 100,
+  async: false,
+  interceptors: true
+};
+class EventBus {
+  /**
+   * Create a new EventBus.
+   *
+   * @param options - Optional configuration
+   */
+  constructor(options) {
+    this.listeners = /* @__PURE__ */ new Map();
+    this.onceListeners = /* @__PURE__ */ new Map();
+    this.interceptors = /* @__PURE__ */ new Map();
+    this.options = { ...DEFAULT_OPTIONS, ...options };
+  }
+  /**
+   * Subscribe to an event.
+   *
+   * @param event - Event name
+   * @param handler - Event handler function
+   * @returns Unsubscribe function
+   *
+   * @example
+   * ```ts
+   * const unsub = events.on('playback:play', () => {
+   *   console.log('Playing!');
+   * });
+   *
+   * // Later: unsubscribe
+   * unsub();
+   * ```
+   */
+  on(event, handler) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, /* @__PURE__ */ new Set());
+    }
+    const handlers = this.listeners.get(event);
+    handlers.add(handler);
+    this.checkMaxListeners(event);
+    return () => this.off(event, handler);
+  }
+  /**
+   * Subscribe to an event once (auto-unsubscribe after first call).
+   *
+   * @param event - Event name
+   * @param handler - Event handler function
+   * @returns Unsubscribe function
+   *
+   * @example
+   * ```ts
+   * events.once('player:ready', () => {
+   *   console.log('Player ready!');
+   * });
+   * ```
+   */
+  once(event, handler) {
+    if (!this.onceListeners.has(event)) {
+      this.onceListeners.set(event, /* @__PURE__ */ new Set());
+    }
+    const handlers = this.onceListeners.get(event);
+    handlers.add(handler);
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, /* @__PURE__ */ new Set());
+    }
+    return () => {
+      handlers.delete(handler);
+    };
+  }
+  /**
+   * Unsubscribe from an event.
+   *
+   * @param event - Event name
+   * @param handler - Event handler function to remove
+   *
+   * @example
+   * ```ts
+   * const handler = () => console.log('Playing!');
+   * events.on('playback:play', handler);
+   * events.off('playback:play', handler);
+   * ```
+   */
+  off(event, handler) {
+    const handlers = this.listeners.get(event);
+    if (handlers) {
+      handlers.delete(handler);
+      if (handlers.size === 0) {
+        this.listeners.delete(event);
+      }
+    }
+    const onceHandlers = this.onceListeners.get(event);
+    if (onceHandlers) {
+      onceHandlers.delete(handler);
+      if (onceHandlers.size === 0) {
+        this.onceListeners.delete(event);
+      }
+    }
+  }
+  /**
+   * Emit an event synchronously.
+   *
+   * Runs interceptors first, then calls all handlers.
+   *
+   * @param event - Event name
+   * @param payload - Event payload
+   *
+   * @example
+   * ```ts
+   * events.emit('playback:play', undefined);
+   * events.emit('playback:timeupdate', { currentTime: 10.5 });
+   * ```
+   */
+  emit(event, payload) {
+    const interceptedPayload = this.runInterceptors(event, payload);
+    if (interceptedPayload === null) {
+      return;
+    }
+    const handlers = this.listeners.get(event);
+    if (handlers) {
+      const handlersArray = Array.from(handlers);
+      handlersArray.forEach((handler) => {
+        this.safeCallHandler(handler, interceptedPayload);
+      });
+    }
+    const onceHandlers = this.onceListeners.get(event);
+    if (onceHandlers) {
+      const handlersArray = Array.from(onceHandlers);
+      handlersArray.forEach((handler) => {
+        this.safeCallHandler(handler, interceptedPayload);
+      });
+      this.onceListeners.delete(event);
+    }
+  }
+  /**
+   * Emit an event asynchronously (next tick).
+   *
+   * @param event - Event name
+   * @param payload - Event payload
+   * @returns Promise that resolves when all handlers complete
+   *
+   * @example
+   * ```ts
+   * await events.emitAsync('media:loaded', { src: 'video.mp4', type: 'video/mp4' });
+   * ```
+   */
+  async emitAsync(event, payload) {
+    const interceptedPayload = await this.runInterceptorsAsync(event, payload);
+    if (interceptedPayload === null) {
+      return;
+    }
+    const handlers = this.listeners.get(event);
+    if (handlers) {
+      const promises = Array.from(handlers).map(
+        (handler) => this.safeCallHandlerAsync(handler, interceptedPayload)
+      );
+      await Promise.all(promises);
+    }
+    const onceHandlers = this.onceListeners.get(event);
+    if (onceHandlers) {
+      const handlersArray = Array.from(onceHandlers);
+      const promises = handlersArray.map(
+        (handler) => this.safeCallHandlerAsync(handler, interceptedPayload)
+      );
+      await Promise.all(promises);
+      this.onceListeners.delete(event);
+    }
+  }
+  /**
+   * Add an event interceptor.
+   *
+   * Interceptors run before handlers and can modify or cancel events.
+   *
+   * @param event - Event name
+   * @param interceptor - Interceptor function
+   * @returns Remove interceptor function
+   *
+   * @example
+   * ```ts
+   * events.intercept('playback:timeupdate', (payload) => {
+   *   // Round time to 2 decimals
+   *   return { currentTime: Math.round(payload.currentTime * 100) / 100 };
+   * });
+   *
+   * // Cancel events
+   * events.intercept('playback:play', (payload) => {
+   *   if (notReady) return null; // Cancel event
+   *   return payload;
+   * });
+   * ```
+   */
+  intercept(event, interceptor) {
+    if (!this.options.interceptors) {
+      return () => {
+      };
+    }
+    if (!this.interceptors.has(event)) {
+      this.interceptors.set(event, /* @__PURE__ */ new Set());
+    }
+    const interceptorsSet = this.interceptors.get(event);
+    interceptorsSet.add(interceptor);
+    return () => {
+      interceptorsSet.delete(interceptor);
+      if (interceptorsSet.size === 0) {
+        this.interceptors.delete(event);
+      }
+    };
+  }
+  /**
+   * Remove all listeners for an event (or all events if no event specified).
+   *
+   * @param event - Optional event name
+   *
+   * @example
+   * ```ts
+   * events.removeAllListeners('playback:play'); // Remove all playback:play listeners
+   * events.removeAllListeners(); // Remove ALL listeners
+   * ```
+   */
+  removeAllListeners(event) {
+    if (event) {
+      this.listeners.delete(event);
+      this.onceListeners.delete(event);
+    } else {
+      this.listeners.clear();
+      this.onceListeners.clear();
+    }
+  }
+  /**
+   * Get the number of listeners for an event.
+   *
+   * @param event - Event name
+   * @returns Number of listeners
+   *
+   * @example
+   * ```ts
+   * events.listenerCount('playback:play'); // 3
+   * ```
+   */
+  listenerCount(event) {
+    const regularCount = this.listeners.get(event)?.size ?? 0;
+    const onceCount = this.onceListeners.get(event)?.size ?? 0;
+    return regularCount + onceCount;
+  }
+  /**
+   * Destroy event bus and cleanup all listeners/interceptors.
+   *
+   * @example
+   * ```ts
+   * events.destroy();
+   * ```
+   */
+  destroy() {
+    this.listeners.clear();
+    this.onceListeners.clear();
+    this.interceptors.clear();
+  }
+  /**
+   * Run interceptors synchronously.
+   * @private
+   */
+  runInterceptors(event, payload) {
+    if (!this.options.interceptors) {
+      return payload;
+    }
+    const interceptorsSet = this.interceptors.get(event);
+    if (!interceptorsSet || interceptorsSet.size === 0) {
+      return payload;
+    }
+    let currentPayload = payload;
+    for (const interceptor of interceptorsSet) {
+      try {
+        currentPayload = interceptor(currentPayload);
+        if (currentPayload === null) {
+          return null;
+        }
+      } catch (error) {
+        console.error("[EventBus] Error in interceptor:", error);
+      }
+    }
+    return currentPayload;
+  }
+  /**
+   * Run interceptors asynchronously.
+   * @private
+   */
+  async runInterceptorsAsync(event, payload) {
+    if (!this.options.interceptors) {
+      return payload;
+    }
+    const interceptorsSet = this.interceptors.get(event);
+    if (!interceptorsSet || interceptorsSet.size === 0) {
+      return payload;
+    }
+    let currentPayload = payload;
+    for (const interceptor of interceptorsSet) {
+      try {
+        const result = interceptor(currentPayload);
+        currentPayload = result instanceof Promise ? await result : result;
+        if (currentPayload === null) {
+          return null;
+        }
+      } catch (error) {
+        console.error("[EventBus] Error in interceptor:", error);
+      }
+    }
+    return currentPayload;
+  }
+  /**
+   * Safely call a handler with error handling.
+   * @private
+   */
+  safeCallHandler(handler, payload) {
+    try {
+      handler(payload);
+    } catch (error) {
+      console.error("[EventBus] Error in event handler:", error);
+    }
+  }
+  /**
+   * Safely call a handler asynchronously with error handling.
+   * @private
+   */
+  async safeCallHandlerAsync(handler, payload) {
+    try {
+      const result = handler(payload);
+      if (result instanceof Promise) {
+        await result;
+      }
+    } catch (error) {
+      console.error("[EventBus] Error in event handler:", error);
+    }
+  }
+  /**
+   * Check if max listeners exceeded and warn.
+   * @private
+   */
+  checkMaxListeners(event) {
+    const count = this.listenerCount(event);
+    if (count > this.options.maxListeners) {
+      console.warn(
+        `[EventBus] Max listeners (${this.options.maxListeners}) exceeded for event: ${event}. Current count: ${count}. This may indicate a memory leak.`
+      );
+    }
+  }
+}
+const LOG_LEVELS = ["debug", "info", "warn", "error"];
+const defaultConsoleHandler = (entry) => {
+  const prefix = entry.scope ? `[${entry.scope}]` : "[ScarlettPlayer]";
+  const message = `${prefix} ${entry.message}`;
+  const metadata = entry.metadata ?? "";
+  switch (entry.level) {
+    case "debug":
+      console.debug(message, metadata);
+      break;
+    case "info":
+      console.info(message, metadata);
+      break;
+    case "warn":
+      console.warn(message, metadata);
+      break;
+    case "error":
+      console.error(message, metadata);
+      break;
+  }
+};
+class Logger {
+  /**
+   * Create a new Logger.
+   *
+   * @param options - Logger configuration
+   */
+  constructor(options) {
+    this.level = options?.level ?? "warn";
+    this.scope = options?.scope;
+    this.enabled = options?.enabled ?? true;
+    this.handlers = options?.handlers ?? [defaultConsoleHandler];
+  }
+  /**
+   * Create a child logger with a scope.
+   *
+   * Child loggers inherit parent settings and chain scopes.
+   *
+   * @param scope - Child logger scope
+   * @returns New child logger
+   *
+   * @example
+   * ```ts
+   * const logger = new Logger();
+   * const hlsLogger = logger.child('hls-plugin');
+   * hlsLogger.info('Loading manifest');
+   * // Output: [ScarlettPlayer:hls-plugin] Loading manifest
+   * ```
+   */
+  child(scope) {
+    return new Logger({
+      level: this.level,
+      scope: this.scope ? `${this.scope}:${scope}` : scope,
+      enabled: this.enabled,
+      handlers: this.handlers
+    });
+  }
+  /**
+   * Log a debug message.
+   *
+   * @param message - Log message
+   * @param metadata - Optional structured metadata
+   *
+   * @example
+   * ```ts
+   * logger.debug('Request sent', { url: '/api/video' });
+   * ```
+   */
+  debug(message, metadata) {
+    this.log("debug", message, metadata);
+  }
+  /**
+   * Log an info message.
+   *
+   * @param message - Log message
+   * @param metadata - Optional structured metadata
+   *
+   * @example
+   * ```ts
+   * logger.info('Player ready');
+   * ```
+   */
+  info(message, metadata) {
+    this.log("info", message, metadata);
+  }
+  /**
+   * Log a warning message.
+   *
+   * @param message - Log message
+   * @param metadata - Optional structured metadata
+   *
+   * @example
+   * ```ts
+   * logger.warn('Low buffer', { buffered: 2.5 });
+   * ```
+   */
+  warn(message, metadata) {
+    this.log("warn", message, metadata);
+  }
+  /**
+   * Log an error message.
+   *
+   * @param message - Log message
+   * @param metadata - Optional structured metadata
+   *
+   * @example
+   * ```ts
+   * logger.error('Playback failed', { code: 'MEDIA_ERR_DECODE' });
+   * ```
+   */
+  error(message, metadata) {
+    this.log("error", message, metadata);
+  }
+  /**
+   * Set the minimum log level threshold.
+   *
+   * @param level - New log level
+   *
+   * @example
+   * ```ts
+   * logger.setLevel('debug'); // Show all logs
+   * logger.setLevel('error'); // Show only errors
+   * ```
+   */
+  setLevel(level) {
+    this.level = level;
+  }
+  /**
+   * Enable or disable logging.
+   *
+   * @param enabled - Enable flag
+   *
+   * @example
+   * ```ts
+   * logger.setEnabled(false); // Disable all logging
+   * ```
+   */
+  setEnabled(enabled) {
+    this.enabled = enabled;
+  }
+  /**
+   * Add a custom log handler.
+   *
+   * @param handler - Log handler function
+   *
+   * @example
+   * ```ts
+   * logger.addHandler((entry) => {
+   *   if (entry.level === 'error') {
+   *     sendToAnalytics(entry);
+   *   }
+   * });
+   * ```
+   */
+  addHandler(handler) {
+    this.handlers.push(handler);
+  }
+  /**
+   * Remove a custom log handler.
+   *
+   * @param handler - Log handler function to remove
+   *
+   * @example
+   * ```ts
+   * logger.removeHandler(myHandler);
+   * ```
+   */
+  removeHandler(handler) {
+    const index = this.handlers.indexOf(handler);
+    if (index !== -1) {
+      this.handlers.splice(index, 1);
+    }
+  }
+  /**
+   * Core logging implementation.
+   * @private
+   */
+  log(level, message, metadata) {
+    if (!this.enabled || !this.shouldLog(level)) {
+      return;
+    }
+    const entry = {
+      level,
+      message,
+      timestamp: Date.now(),
+      scope: this.scope,
+      metadata
+    };
+    for (const handler of this.handlers) {
+      try {
+        handler(entry);
+      } catch (error) {
+        console.error("[Logger] Handler error:", error);
+      }
+    }
+  }
+  /**
+   * Check if a log level should be output.
+   * @private
+   */
+  shouldLog(level) {
+    return LOG_LEVELS.indexOf(level) >= LOG_LEVELS.indexOf(this.level);
+  }
+}
+var ErrorCode = /* @__PURE__ */ ((ErrorCode2) => {
+  ErrorCode2["SOURCE_NOT_SUPPORTED"] = "SOURCE_NOT_SUPPORTED";
+  ErrorCode2["SOURCE_LOAD_FAILED"] = "SOURCE_LOAD_FAILED";
+  ErrorCode2["PROVIDER_NOT_FOUND"] = "PROVIDER_NOT_FOUND";
+  ErrorCode2["PROVIDER_SETUP_FAILED"] = "PROVIDER_SETUP_FAILED";
+  ErrorCode2["PLUGIN_SETUP_FAILED"] = "PLUGIN_SETUP_FAILED";
+  ErrorCode2["PLUGIN_NOT_FOUND"] = "PLUGIN_NOT_FOUND";
+  ErrorCode2["PLAYBACK_FAILED"] = "PLAYBACK_FAILED";
+  ErrorCode2["MEDIA_DECODE_ERROR"] = "MEDIA_DECODE_ERROR";
+  ErrorCode2["MEDIA_NETWORK_ERROR"] = "MEDIA_NETWORK_ERROR";
+  ErrorCode2["UNKNOWN_ERROR"] = "UNKNOWN_ERROR";
+  return ErrorCode2;
+})(ErrorCode || {});
+class ErrorHandler {
+  /**
+   * Create a new ErrorHandler.
+   *
+   * @param eventBus - Event bus for error emission
+   * @param logger - Logger for error logging
+   * @param options - Optional configuration
+   */
+  constructor(eventBus, logger, options) {
+    this.errors = [];
+    this.eventBus = eventBus;
+    this.logger = logger;
+    this.maxHistory = options?.maxHistory ?? 10;
+  }
+  /**
+   * Handle an error.
+   *
+   * Normalizes, logs, emits, and tracks the error.
+   *
+   * @param error - Error to handle (native or PlayerError)
+   * @param context - Optional context (what was happening)
+   * @returns Normalized PlayerError
+   *
+   * @example
+   * ```ts
+   * try {
+   *   loadVideo();
+   * } catch (error) {
+   *   errorHandler.handle(error as Error, { src: 'video.mp4' });
+   * }
+   * ```
+   */
+  handle(error, context) {
+    const playerError = this.normalizeError(error, context);
+    this.addToHistory(playerError);
+    this.logError(playerError);
+    this.eventBus.emit("error", playerError);
+    return playerError;
+  }
+  /**
+   * Create and handle an error from code.
+   *
+   * @param code - Error code
+   * @param message - Error message
+   * @param options - Optional error options
+   * @returns Created PlayerError
+   *
+   * @example
+   * ```ts
+   * errorHandler.throw(
+   *   ErrorCode.SOURCE_NOT_SUPPORTED,
+   *   'MP4 not supported',
+   *   { fatal: true, context: { type: 'video/mp4' } }
+   * );
+   * ```
+   */
+  throw(code, message, options) {
+    const error = {
+      code,
+      message,
+      fatal: options?.fatal ?? this.isFatalCode(code),
+      timestamp: Date.now(),
+      context: options?.context,
+      originalError: options?.originalError
+    };
+    return this.handle(error, options?.context);
+  }
+  /**
+   * Get error history.
+   *
+   * @returns Readonly copy of error history
+   *
+   * @example
+   * ```ts
+   * const history = errorHandler.getHistory();
+   * console.log(`${history.length} errors occurred`);
+   * ```
+   */
+  getHistory() {
+    return [...this.errors];
+  }
+  /**
+   * Get last error that occurred.
+   *
+   * @returns Last error or null if none
+   *
+   * @example
+   * ```ts
+   * const lastError = errorHandler.getLastError();
+   * if (lastError?.fatal) {
+   *   showErrorMessage(lastError.message);
+   * }
+   * ```
+   */
+  getLastError() {
+    return this.errors[this.errors.length - 1] ?? null;
+  }
+  /**
+   * Clear error history.
+   *
+   * @example
+   * ```ts
+   * errorHandler.clearHistory();
+   * ```
+   */
+  clearHistory() {
+    this.errors = [];
+  }
+  /**
+   * Check if any fatal errors occurred.
+   *
+   * @returns True if any fatal error in history
+   *
+   * @example
+   * ```ts
+   * if (errorHandler.hasFatalError()) {
+   *   player.reset();
+   * }
+   * ```
+   */
+  hasFatalError() {
+    return this.errors.some((e) => e.fatal);
+  }
+  /**
+   * Normalize error to PlayerError.
+   * @private
+   */
+  normalizeError(error, context) {
+    if (this.isPlayerError(error)) {
+      return {
+        ...error,
+        context: { ...error.context, ...context }
+      };
+    }
+    return {
+      code: this.getErrorCode(error),
+      message: error.message,
+      fatal: this.isFatal(error),
+      timestamp: Date.now(),
+      context,
+      originalError: error
+    };
+  }
+  /**
+   * Determine error code from native Error.
+   * @private
+   */
+  getErrorCode(error) {
+    const message = error.message.toLowerCase();
+    if (message.includes("network")) {
+      return "MEDIA_NETWORK_ERROR";
+    }
+    if (message.includes("decode")) {
+      return "MEDIA_DECODE_ERROR";
+    }
+    if (message.includes("source")) {
+      return "SOURCE_LOAD_FAILED";
+    }
+    if (message.includes("plugin")) {
+      return "PLUGIN_SETUP_FAILED";
+    }
+    if (message.includes("provider")) {
+      return "PROVIDER_SETUP_FAILED";
+    }
+    return "UNKNOWN_ERROR";
+  }
+  /**
+   * Determine if error is fatal.
+   * @private
+   */
+  isFatal(error) {
+    return this.isFatalCode(this.getErrorCode(error));
+  }
+  /**
+   * Determine if error code is fatal.
+   * @private
+   */
+  isFatalCode(code) {
+    const fatalCodes = [
+      "SOURCE_NOT_SUPPORTED",
+      "PROVIDER_NOT_FOUND",
+      "MEDIA_DECODE_ERROR"
+      /* MEDIA_DECODE_ERROR */
+    ];
+    return fatalCodes.includes(code);
+  }
+  /**
+   * Type guard for PlayerError.
+   * @private
+   */
+  isPlayerError(error) {
+    return typeof error === "object" && error !== null && "code" in error && "message" in error && "fatal" in error && "timestamp" in error;
+  }
+  /**
+   * Add error to history.
+   * @private
+   */
+  addToHistory(error) {
+    this.errors.push(error);
+    if (this.errors.length > this.maxHistory) {
+      this.errors.shift();
+    }
+  }
+  /**
+   * Log error with appropriate level.
+   * @private
+   */
+  logError(error) {
+    const logMessage = `[${error.code}] ${error.message}`;
+    if (error.fatal) {
+      this.logger.error(logMessage, {
+        code: error.code,
+        context: error.context
+      });
+    } else {
+      this.logger.warn(logMessage, {
+        code: error.code,
+        context: error.context
+      });
+    }
+  }
+}
+class PluginAPI {
+  /**
+   * Create a new PluginAPI.
+   *
+   * @param pluginId - ID of the plugin this API belongs to
+   * @param deps - Dependencies (stateManager, eventBus, logger, container, getPlugin)
+   */
+  constructor(pluginId, deps) {
+    this.cleanupFns = [];
+    this.pluginId = pluginId;
+    this.stateManager = deps.stateManager;
+    this.eventBus = deps.eventBus;
+    this.container = deps.container;
+    this.getPluginFn = deps.getPlugin;
+    this.logger = {
+      debug: (msg, metadata) => deps.logger.debug(`[${pluginId}] ${msg}`, metadata),
+      info: (msg, metadata) => deps.logger.info(`[${pluginId}] ${msg}`, metadata),
+      warn: (msg, metadata) => deps.logger.warn(`[${pluginId}] ${msg}`, metadata),
+      error: (msg, metadata) => deps.logger.error(`[${pluginId}] ${msg}`, metadata)
+    };
+  }
+  /**
+   * Get a state value.
+   *
+   * @param key - State property key
+   * @returns Current state value
+   */
+  getState(key) {
+    return this.stateManager.getValue(key);
+  }
+  /**
+   * Set a state value.
+   *
+   * @param key - State property key
+   * @param value - New state value
+   */
+  setState(key, value) {
+    this.stateManager.set(key, value);
+  }
+  /**
+   * Subscribe to an event.
+   *
+   * @param event - Event name
+   * @param handler - Event handler
+   * @returns Unsubscribe function
+   */
+  on(event, handler) {
+    return this.eventBus.on(event, handler);
+  }
+  /**
+   * Unsubscribe from an event.
+   *
+   * @param event - Event name
+   * @param handler - Event handler to remove
+   */
+  off(event, handler) {
+    this.eventBus.off(event, handler);
+  }
+  /**
+   * Emit an event.
+   *
+   * @param event - Event name
+   * @param payload - Event payload
+   */
+  emit(event, payload) {
+    this.eventBus.emit(event, payload);
+  }
+  /**
+   * Get another plugin by ID (if ready).
+   *
+   * @param id - Plugin ID
+   * @returns Plugin instance or null if not found/ready
+   */
+  getPlugin(id) {
+    return this.getPluginFn(id);
+  }
+  /**
+   * Register a cleanup function to run when plugin is destroyed.
+   *
+   * @param cleanup - Cleanup function
+   */
+  onDestroy(cleanup) {
+    this.cleanupFns.push(cleanup);
+  }
+  /**
+   * Subscribe to state changes.
+   *
+   * @param callback - Callback function called on any state change
+   * @returns Unsubscribe function
+   */
+  subscribeToState(callback) {
+    return this.stateManager.subscribe(callback);
+  }
+  /**
+   * Run all registered cleanup functions.
+   * Called by PluginManager when destroying the plugin.
+   *
+   * @internal
+   */
+  runCleanups() {
+    for (const cleanup of this.cleanupFns) {
+      try {
+        cleanup();
+      } catch (error) {
+        this.logger.error("Cleanup function failed", { error });
+      }
+    }
+    this.cleanupFns = [];
+  }
+  /**
+   * Get all registered cleanup functions.
+   *
+   * @returns Array of cleanup functions
+   * @internal
+   */
+  getCleanupFns() {
+    return this.cleanupFns;
+  }
+}
+class PluginManager {
+  constructor(eventBus, stateManager, logger, options) {
+    this.plugins = /* @__PURE__ */ new Map();
+    this.eventBus = eventBus;
+    this.stateManager = stateManager;
+    this.logger = logger;
+    this.container = options.container;
+  }
+  /** Register a plugin with optional configuration. */
+  register(plugin, config) {
+    if (this.plugins.has(plugin.id)) {
+      throw new Error(`Plugin "${plugin.id}" is already registered`);
+    }
+    this.validatePlugin(plugin);
+    const api = new PluginAPI(plugin.id, {
+      stateManager: this.stateManager,
+      eventBus: this.eventBus,
+      logger: this.logger,
+      container: this.container,
+      getPlugin: (id) => this.getReadyPlugin(id)
+    });
+    this.plugins.set(plugin.id, {
+      plugin,
+      state: "registered",
+      config,
+      cleanupFns: [],
+      api
+    });
+    this.logger.info(`Plugin registered: ${plugin.id}`);
+    this.eventBus.emit("plugin:registered", { name: plugin.id, type: plugin.type });
+  }
+  /** Unregister a plugin. Destroys it first if active. */
+  async unregister(id) {
+    const record = this.plugins.get(id);
+    if (!record) return;
+    if (record.state === "ready") {
+      await this.destroyPlugin(id);
+    }
+    this.plugins.delete(id);
+    this.logger.info(`Plugin unregistered: ${id}`);
+  }
+  /** Initialize all registered plugins in dependency order. */
+  async initAll() {
+    const order = this.resolveDependencyOrder();
+    for (const id of order) {
+      await this.initPlugin(id);
+    }
+  }
+  /** Initialize a specific plugin. */
+  async initPlugin(id) {
+    const record = this.plugins.get(id);
+    if (!record) {
+      throw new Error(`Plugin "${id}" not found`);
+    }
+    if (record.state === "ready") return;
+    if (record.state === "initializing") {
+      throw new Error(`Plugin "${id}" is already initializing (possible circular dependency)`);
+    }
+    for (const depId of record.plugin.dependencies || []) {
+      const dep = this.plugins.get(depId);
+      if (!dep) {
+        throw new Error(`Plugin "${id}" depends on missing plugin "${depId}"`);
+      }
+      if (dep.state !== "ready") {
+        await this.initPlugin(depId);
+      }
+    }
+    try {
+      record.state = "initializing";
+      if (record.plugin.onStateChange) {
+        const unsub = this.stateManager.subscribe(record.plugin.onStateChange.bind(record.plugin));
+        record.api.onDestroy(unsub);
+      }
+      if (record.plugin.onError) {
+        const unsub = this.eventBus.on("error", (err) => {
+          record.plugin.onError?.(err.originalError || new Error(err.message));
+        });
+        record.api.onDestroy(unsub);
+      }
+      await record.plugin.init(record.api, record.config);
+      record.state = "ready";
+      this.logger.info(`Plugin ready: ${id}`);
+      this.eventBus.emit("plugin:active", { name: id });
+    } catch (error) {
+      record.state = "error";
+      record.error = error;
+      this.logger.error(`Plugin init failed: ${id}`, { error });
+      this.eventBus.emit("plugin:error", { name: id, error });
+      throw error;
+    }
+  }
+  /** Destroy all plugins in reverse dependency order. */
+  async destroyAll() {
+    const order = this.resolveDependencyOrder().reverse();
+    for (const id of order) {
+      await this.destroyPlugin(id);
+    }
+  }
+  /** Destroy a specific plugin. */
+  async destroyPlugin(id) {
+    const record = this.plugins.get(id);
+    if (!record || record.state !== "ready") return;
+    try {
+      await record.plugin.destroy();
+      record.api.runCleanups();
+      record.state = "registered";
+      this.logger.info(`Plugin destroyed: ${id}`);
+      this.eventBus.emit("plugin:destroyed", { name: id });
+    } catch (error) {
+      this.logger.error(`Plugin destroy failed: ${id}`, { error });
+      record.state = "registered";
+    }
+  }
+  /** Get a plugin by ID (returns any registered plugin). */
+  getPlugin(id) {
+    const record = this.plugins.get(id);
+    return record ? record.plugin : null;
+  }
+  /** Get a plugin by ID only if ready (used by PluginAPI). */
+  getReadyPlugin(id) {
+    const record = this.plugins.get(id);
+    return record?.state === "ready" ? record.plugin : null;
+  }
+  /** Check if a plugin is registered. */
+  hasPlugin(id) {
+    return this.plugins.has(id);
+  }
+  /** Get plugin state. */
+  getPluginState(id) {
+    return this.plugins.get(id)?.state ?? null;
+  }
+  /** Get all registered plugin IDs. */
+  getPluginIds() {
+    return Array.from(this.plugins.keys());
+  }
+  /** Get all ready plugins. */
+  getReadyPlugins() {
+    return Array.from(this.plugins.values()).filter((r) => r.state === "ready").map((r) => r.plugin);
+  }
+  /** Get plugins by type. */
+  getPluginsByType(type) {
+    return Array.from(this.plugins.values()).filter((r) => r.plugin.type === type).map((r) => r.plugin);
+  }
+  /** Select a provider plugin that can play a source. */
+  selectProvider(source) {
+    const providers = this.getPluginsByType("provider");
+    for (const provider of providers) {
+      const canPlay = provider.canPlay;
+      if (typeof canPlay === "function" && canPlay(source)) {
+        return provider;
+      }
+    }
+    return null;
+  }
+  /** Resolve plugin initialization order using topological sort. */
+  resolveDependencyOrder() {
+    const visited = /* @__PURE__ */ new Set();
+    const visiting = /* @__PURE__ */ new Set();
+    const sorted = [];
+    const visit = (id, path = []) => {
+      if (visited.has(id)) return;
+      if (visiting.has(id)) {
+        const cycle = [...path, id].join(" -> ");
+        throw new Error(`Circular dependency detected: ${cycle}`);
+      }
+      const record = this.plugins.get(id);
+      if (!record) return;
+      visiting.add(id);
+      for (const depId of record.plugin.dependencies || []) {
+        if (this.plugins.has(depId)) {
+          visit(depId, [...path, id]);
+        }
+      }
+      visiting.delete(id);
+      visited.add(id);
+      sorted.push(id);
+    };
+    for (const id of this.plugins.keys()) {
+      visit(id);
+    }
+    return sorted;
+  }
+  /** Validate plugin has required properties. */
+  validatePlugin(plugin) {
+    if (!plugin.id || typeof plugin.id !== "string") {
+      throw new Error("Plugin must have a valid id");
+    }
+    if (!plugin.name || typeof plugin.name !== "string") {
+      throw new Error(`Plugin "${plugin.id}" must have a valid name`);
+    }
+    if (!plugin.version || typeof plugin.version !== "string") {
+      throw new Error(`Plugin "${plugin.id}" must have a valid version`);
+    }
+    if (!plugin.type || typeof plugin.type !== "string") {
+      throw new Error(`Plugin "${plugin.id}" must have a valid type`);
+    }
+    if (typeof plugin.init !== "function") {
+      throw new Error(`Plugin "${plugin.id}" must have an init() method`);
+    }
+    if (typeof plugin.destroy !== "function") {
+      throw new Error(`Plugin "${plugin.id}" must have a destroy() method`);
+    }
+  }
+}
+class ScarlettPlayer {
+  /**
+   * Create a new ScarlettPlayer.
+   *
+   * @param options - Player configuration
+   */
+  constructor(options) {
+    this._currentProvider = null;
+    this.destroyed = false;
+    this.seekingWhilePlaying = false;
+    this.seekResumeTimeout = null;
+    if (typeof options.container === "string") {
+      const el = document.querySelector(options.container);
+      if (!el || !(el instanceof HTMLElement)) {
+        throw new Error(`ScarlettPlayer: container not found: ${options.container}`);
+      }
+      this.container = el;
+    } else if (options.container instanceof HTMLElement) {
+      this.container = options.container;
+    } else {
+      throw new Error("ScarlettPlayer requires a valid HTMLElement container or CSS selector");
+    }
+    this.initialSrc = options.src;
+    this.eventBus = new EventBus();
+    this.stateManager = new StateManager({
+      autoplay: options.autoplay ?? false,
+      loop: options.loop ?? false,
+      volume: options.volume ?? 1,
+      muted: options.muted ?? false,
+      poster: options.poster ?? ""
+    });
+    this.logger = new Logger({
+      level: options.logLevel ?? "warn",
+      scope: "ScarlettPlayer"
+    });
+    this.errorHandler = new ErrorHandler(this.eventBus, this.logger);
+    this.pluginManager = new PluginManager(
+      this.eventBus,
+      this.stateManager,
+      this.logger,
+      { container: this.container }
+    );
+    if (options.plugins) {
+      for (const plugin of options.plugins) {
+        this.pluginManager.register(plugin);
+      }
+    }
+    this.logger.info("ScarlettPlayer initialized", {
+      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.
+   */
+  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);
+      }
+    }
+    if (this.initialSrc) {
+      await this.load(this.initialSrc);
+    }
+    return Promise.resolve();
+  }
+  /**
+   * Load a media source.
+   *
+   * Selects appropriate provider plugin and loads the source.
+   *
+   * @param source - Media source URL
+   * @returns Promise that resolves when source is loaded
+   *
+   * @example
+   * ```ts
+   * await player.load('video.m3u8');
+   * ```
+   */
+  async load(source) {
+    this.checkDestroyed();
+    try {
+      this.logger.info("Loading source", { source });
+      this.stateManager.update({
+        playing: false,
+        paused: true,
+        ended: false,
+        buffering: true,
+        currentTime: 0,
+        duration: 0,
+        bufferedAmount: 0,
+        playbackState: "loading"
+      });
+      if (this._currentProvider) {
+        const previousProviderId = this._currentProvider.id;
+        this.logger.info("Destroying previous provider", { provider: previousProviderId });
+        await this.pluginManager.destroyPlugin(previousProviderId);
+        this._currentProvider = null;
+      }
+      const provider = this.pluginManager.selectProvider(source);
+      if (!provider) {
+        this.errorHandler.throw(
+          ErrorCode.PROVIDER_NOT_FOUND,
+          `No provider found for source: ${source}`,
+          {
+            fatal: true,
+            context: { source }
+          }
+        );
+        return;
+      }
+      this._currentProvider = provider;
+      this.logger.info("Provider selected", { provider: provider.id });
+      await this.pluginManager.initPlugin(provider.id);
+      this.stateManager.set("source", { src: source, type: this.detectMimeType(source) });
+      if (typeof provider.loadSource === "function") {
+        await provider.loadSource(source);
+      }
+      if (this.stateManager.getValue("autoplay")) {
+        await this.play();
+      }
+    } catch (error) {
+      this.errorHandler.handle(error, {
+        operation: "load",
+        source
+      });
+    }
+  }
+  /**
+   * Start playback.
+   *
+   * @returns Promise that resolves when playback starts
+   *
+   * @example
+   * ```ts
+   * await player.play();
+   * ```
+   */
+  async play() {
+    this.checkDestroyed();
+    try {
+      this.logger.debug("Play requested");
+      this.eventBus.emit("playback:play", void 0);
+    } catch (error) {
+      this.errorHandler.handle(error, { operation: "play" });
+    }
+  }
+  /**
+   * Pause playback.
+   *
+   * @example
+   * ```ts
+   * player.pause();
+   * ```
+   */
+  pause() {
+    this.checkDestroyed();
+    try {
+      this.logger.debug("Pause requested");
+      this.seekingWhilePlaying = false;
+      if (this.seekResumeTimeout !== null) {
+        clearTimeout(this.seekResumeTimeout);
+        this.seekResumeTimeout = null;
+      }
+      this.eventBus.emit("playback:pause", void 0);
+    } catch (error) {
+      this.errorHandler.handle(error, { operation: "pause" });
+    }
+  }
+  /**
+   * Seek to a specific time.
+   *
+   * @param time - Time in seconds
+   *
+   * @example
+   * ```ts
+   * player.seek(30); // Seek to 30 seconds
+   * ```
+   */
+  seek(time) {
+    this.checkDestroyed();
+    try {
+      this.logger.debug("Seek requested", { time });
+      const wasPlaying = this.stateManager.getValue("playing");
+      if (wasPlaying) {
+        this.seekingWhilePlaying = true;
+      }
+      if (this.seekResumeTimeout !== null) {
+        clearTimeout(this.seekResumeTimeout);
+        this.seekResumeTimeout = null;
+      }
+      this.eventBus.emit("playback:seeking", { time });
+      this.stateManager.set("currentTime", time);
+      if (this.seekingWhilePlaying) {
+        this.seekResumeTimeout = setTimeout(() => {
+          if (this.seekingWhilePlaying && this.stateManager.getValue("playing")) {
+            this.logger.debug("Resuming playback after seek");
+            this.seekingWhilePlaying = false;
+            this.eventBus.emit("playback:play", void 0);
+          }
+          this.seekResumeTimeout = null;
+        }, 300);
+      }
+    } catch (error) {
+      this.errorHandler.handle(error, { operation: "seek", time });
+    }
+  }
+  /**
+   * Set volume.
+   *
+   * @param volume - Volume 0-1
+   *
+   * @example
+   * ```ts
+   * player.setVolume(0.5); // 50% volume
+   * ```
+   */
+  setVolume(volume) {
+    this.checkDestroyed();
+    const clampedVolume = Math.max(0, Math.min(1, volume));
+    this.stateManager.set("volume", clampedVolume);
+    this.eventBus.emit("volume:change", {
+      volume: clampedVolume,
+      muted: this.stateManager.getValue("muted")
+    });
+  }
+  /**
+   * Set muted state.
+   *
+   * @param muted - Mute flag
+   *
+   * @example
+   * ```ts
+   * player.setMuted(true);
+   * ```
+   */
+  setMuted(muted) {
+    this.checkDestroyed();
+    this.stateManager.set("muted", muted);
+    this.eventBus.emit("volume:mute", { muted });
+  }
+  /**
+   * Set playback rate.
+   *
+   * @param rate - Playback rate (e.g., 1.0 = normal, 2.0 = 2x speed)
+   *
+   * @example
+   * ```ts
+   * player.setPlaybackRate(1.5); // 1.5x speed
+   * ```
+   */
+  setPlaybackRate(rate) {
+    this.checkDestroyed();
+    this.stateManager.set("playbackRate", rate);
+    this.eventBus.emit("playback:ratechange", { rate });
+  }
+  /**
+   * Set autoplay state.
+   *
+   * When enabled, videos will automatically play after loading.
+   *
+   * @param autoplay - Autoplay flag
+   *
+   * @example
+   * ```ts
+   * player.setAutoplay(true);
+   * await player.load('video.mp4'); // Will auto-play
+   * ```
+   */
+  setAutoplay(autoplay) {
+    this.checkDestroyed();
+    this.stateManager.set("autoplay", autoplay);
+    this.logger.debug("Autoplay set", { autoplay });
+  }
+  /**
+   * Subscribe to an event.
+   *
+   * @param event - Event name
+   * @param handler - Event handler
+   * @returns Unsubscribe function
+   *
+   * @example
+   * ```ts
+   * const unsub = player.on('playback:play', () => {
+   *   console.log('Playing!');
+   * });
+   *
+   * // Later: unsubscribe
+   * unsub();
+   * ```
+   */
+  on(event, handler) {
+    this.checkDestroyed();
+    return this.eventBus.on(event, handler);
+  }
+  /**
+   * Subscribe to an event once.
+   *
+   * @param event - Event name
+   * @param handler - Event handler
+   * @returns Unsubscribe function
+   *
+   * @example
+   * ```ts
+   * player.once('player:ready', () => {
+   *   console.log('Player ready!');
+   * });
+   * ```
+   */
+  once(event, handler) {
+    this.checkDestroyed();
+    return this.eventBus.once(event, handler);
+  }
+  /**
+   * Get a plugin by name.
+   *
+   * @param name - Plugin name
+   * @returns Plugin instance or null
+   *
+   * @example
+   * ```ts
+   * const hls = player.getPlugin('hls-plugin');
+   * ```
+   */
+  getPlugin(name) {
+    this.checkDestroyed();
+    return this.pluginManager.getPlugin(name);
+  }
+  /**
+   * Register a plugin.
+   *
+   * @param plugin - Plugin to register
+   *
+   * @example
+   * ```ts
+   * player.registerPlugin(myPlugin);
+   * ```
+   */
+  registerPlugin(plugin) {
+    this.checkDestroyed();
+    this.pluginManager.register(plugin);
+  }
+  /**
+   * Get current state snapshot.
+   *
+   * @returns Readonly state snapshot
+   *
+   * @example
+   * ```ts
+   * const state = player.getState();
+   * console.log(state.playing, state.currentTime);
+   * ```
+   */
+  getState() {
+    this.checkDestroyed();
+    return this.stateManager.snapshot();
+  }
+  // ===== Quality Methods (proxied to provider) =====
+  /**
+   * Get available quality levels from the current provider.
+   * @returns Array of quality levels or empty array if not available
+   */
+  getQualities() {
+    this.checkDestroyed();
+    if (!this._currentProvider) return [];
+    const provider = this._currentProvider;
+    if (typeof provider.getLevels === "function") {
+      return provider.getLevels();
+    }
+    return [];
+  }
+  /**
+   * Set quality level (-1 for auto).
+   * @param index - Quality level index
+   */
+  setQuality(index) {
+    this.checkDestroyed();
+    if (!this._currentProvider) {
+      this.logger.warn("No provider available for quality change");
+      return;
+    }
+    const provider = this._currentProvider;
+    if (typeof provider.setLevel === "function") {
+      provider.setLevel(index);
+      this.eventBus.emit("quality:change", {
+        quality: index === -1 ? "auto" : `level-${index}`,
+        auto: index === -1
+      });
+    }
+  }
+  /**
+   * Get current quality level index (-1 = auto).
+   */
+  getCurrentQuality() {
+    this.checkDestroyed();
+    if (!this._currentProvider) return -1;
+    const provider = this._currentProvider;
+    if (typeof provider.getCurrentLevel === "function") {
+      return provider.getCurrentLevel();
+    }
+    return -1;
+  }
+  // ===== Fullscreen Methods =====
+  /**
+   * Request fullscreen mode.
+   */
+  async requestFullscreen() {
+    this.checkDestroyed();
+    try {
+      if (this.container.requestFullscreen) {
+        await this.container.requestFullscreen();
+      } else if (this.container.webkitRequestFullscreen) {
+        await this.container.webkitRequestFullscreen();
+      }
+      this.stateManager.set("fullscreen", true);
+      this.eventBus.emit("fullscreen:change", { fullscreen: true });
+    } catch (error) {
+      this.logger.error("Fullscreen request failed", { error });
+    }
+  }
+  /**
+   * Exit fullscreen mode.
+   */
+  async exitFullscreen() {
+    this.checkDestroyed();
+    try {
+      if (document.exitFullscreen) {
+        await document.exitFullscreen();
+      } else if (document.webkitExitFullscreen) {
+        await document.webkitExitFullscreen();
+      }
+      this.stateManager.set("fullscreen", false);
+      this.eventBus.emit("fullscreen:change", { fullscreen: false });
+    } catch (error) {
+      this.logger.error("Exit fullscreen failed", { error });
+    }
+  }
+  /**
+   * Toggle fullscreen mode.
+   */
+  async toggleFullscreen() {
+    if (this.fullscreen) {
+      await this.exitFullscreen();
+    } else {
+      await this.requestFullscreen();
+    }
+  }
+  // ===== Casting Methods (proxied to plugins) =====
+  /**
+   * Request AirPlay (proxied to airplay plugin).
+   */
+  requestAirPlay() {
+    this.checkDestroyed();
+    const airplay = this.pluginManager.getPlugin("airplay");
+    if (airplay && typeof airplay.showPicker === "function") {
+      airplay.showPicker();
+    } else {
+      this.logger.warn("AirPlay plugin not available");
+    }
+  }
+  /**
+   * Request Chromecast session (proxied to chromecast plugin).
+   */
+  async requestChromecast() {
+    this.checkDestroyed();
+    const chromecast = this.pluginManager.getPlugin("chromecast");
+    if (chromecast && typeof chromecast.requestSession === "function") {
+      await chromecast.requestSession();
+    } else {
+      this.logger.warn("Chromecast plugin not available");
+    }
+  }
+  /**
+   * Stop casting (AirPlay or Chromecast).
+   */
+  stopCasting() {
+    this.checkDestroyed();
+    const airplay = this.pluginManager.getPlugin("airplay");
+    if (airplay && typeof airplay.stop === "function") {
+      airplay.stop();
+    }
+    const chromecast = this.pluginManager.getPlugin("chromecast");
+    if (chromecast && typeof chromecast.stopSession === "function") {
+      chromecast.stopSession();
+    }
+  }
+  // ===== Live Stream Methods =====
+  /**
+   * Seek to live edge (for live streams).
+   */
+  seekToLive() {
+    this.checkDestroyed();
+    const isLive = this.stateManager.getValue("live");
+    if (!isLive) {
+      this.logger.warn("Not a live stream");
+      return;
+    }
+    if (this._currentProvider) {
+      const provider = this._currentProvider;
+      if (typeof provider.getLiveInfo === "function") {
+        const liveInfo = provider.getLiveInfo();
+        if (liveInfo?.liveSyncPosition !== void 0) {
+          this.seek(liveInfo.liveSyncPosition);
+          return;
+        }
+      }
+    }
+    const duration = this.stateManager.getValue("duration");
+    if (duration > 0) {
+      this.seek(duration);
+    }
+  }
+  /**
+   * Destroy the player and cleanup all resources.
+   *
+   * @example
+   * ```ts
+   * player.destroy();
+   * ```
+   */
+  destroy() {
+    if (this.destroyed) {
+      return;
+    }
+    this.logger.info("Destroying player");
+    if (this.seekResumeTimeout !== null) {
+      clearTimeout(this.seekResumeTimeout);
+      this.seekResumeTimeout = null;
+    }
+    this.eventBus.emit("player:destroy", void 0);
+    this.pluginManager.destroyAll();
+    this.eventBus.destroy();
+    this.stateManager.destroy();
+    this.destroyed = true;
+    this.logger.info("Player destroyed");
+  }
+  // ===== State Getters =====
+  /**
+   * Get playing state.
+   */
+  get playing() {
+    return this.stateManager.getValue("playing");
+  }
+  /**
+   * Get paused state.
+   */
+  get paused() {
+    return this.stateManager.getValue("paused");
+  }
+  /**
+   * Get current time in seconds.
+   */
+  get currentTime() {
+    return this.stateManager.getValue("currentTime");
+  }
+  /**
+   * Get duration in seconds.
+   */
+  get duration() {
+    return this.stateManager.getValue("duration");
+  }
+  /**
+   * Get volume (0-1).
+   */
+  get volume() {
+    return this.stateManager.getValue("volume");
+  }
+  /**
+   * Get muted state.
+   */
+  get muted() {
+    return this.stateManager.getValue("muted");
+  }
+  /**
+   * Get playback rate.
+   */
+  get playbackRate() {
+    return this.stateManager.getValue("playbackRate");
+  }
+  /**
+   * Get buffered amount (0-1).
+   */
+  get bufferedAmount() {
+    return this.stateManager.getValue("bufferedAmount");
+  }
+  /**
+   * Get current provider plugin.
+   */
+  get currentProvider() {
+    return this._currentProvider;
+  }
+  /**
+   * Get fullscreen state.
+   */
+  get fullscreen() {
+    return this.stateManager.getValue("fullscreen");
+  }
+  /**
+   * Get live stream state.
+   */
+  get live() {
+    return this.stateManager.getValue("live");
+  }
+  /**
+   * Get autoplay state.
+   */
+  get autoplay() {
+    return this.stateManager.getValue("autoplay");
+  }
+  /**
+   * Check if player is destroyed.
+   * @private
+   */
+  checkDestroyed() {
+    if (this.destroyed) {
+      throw new Error("Cannot call methods on destroyed player");
+    }
+  }
+  /**
+   * Detect MIME type from source URL.
+   * @private
+   */
+  detectMimeType(source) {
+    const ext = source.split(".").pop()?.toLowerCase();
+    switch (ext) {
+      case "m3u8":
+        return "application/x-mpegURL";
+      case "mpd":
+        return "application/dash+xml";
+      case "mp4":
+        return "video/mp4";
+      case "webm":
+        return "video/webm";
+      case "ogg":
+        return "video/ogg";
+      default:
+        return "video/mp4";
+    }
+  }
+}
+async function createPlayer(options) {
+  const player = new ScarlettPlayer(options);
+  await player.init();
+  return player;
+}
+function getAttr(element, ...names) {
+  for (const name of names) {
+    const value = element.getAttribute(name);
+    if (value !== null) return value;
+  }
+  return null;
+}
+function parseDataAttributes(element) {
+  const config = {};
+  const src = getAttr(element, "data-src", "src", "href");
+  if (src) {
+    config.src = src;
+  }
+  const type = getAttr(element, "data-type", "type");
+  if (type && ["video", "audio", "audio-mini"].includes(type)) {
+    config.type = type;
+  }
+  const autoplay = getAttr(element, "data-autoplay", "autoplay");
+  if (autoplay !== null) {
+    config.autoplay = autoplay !== "false";
+  }
+  const muted = getAttr(element, "data-muted", "muted");
+  if (muted !== null) {
+    config.muted = muted !== "false";
+  }
+  const controls = getAttr(element, "data-controls", "controls");
+  if (controls !== null) {
+    config.controls = controls !== "false";
+  }
+  const keyboard = getAttr(element, "data-keyboard", "keyboard");
+  if (keyboard !== null) {
+    config.keyboard = keyboard !== "false";
+  }
+  const loop = getAttr(element, "data-loop", "loop");
+  if (loop !== null) {
+    config.loop = loop !== "false";
+  }
+  const poster = getAttr(element, "data-poster", "poster");
+  if (poster) {
+    config.poster = poster;
+  }
+  const artwork = getAttr(element, "data-artwork", "artwork");
+  if (artwork) {
+    config.artwork = artwork;
+  }
+  const title = getAttr(element, "data-title", "title");
+  if (title) {
+    config.title = title;
+  }
+  const artist = getAttr(element, "data-artist", "artist");
+  if (artist) {
+    config.artist = artist;
+  }
+  const album = getAttr(element, "data-album", "album");
+  if (album) {
+    config.album = album;
+  }
+  const brandColor = getAttr(element, "data-brand-color", "data-color", "color");
+  if (brandColor) {
+    config.brandColor = brandColor;
+  }
+  const primaryColor = element.getAttribute("data-primary-color");
+  if (primaryColor) {
+    config.primaryColor = primaryColor;
+  }
+  const backgroundColor = element.getAttribute("data-background-color");
+  if (backgroundColor) {
+    config.backgroundColor = backgroundColor;
+  }
+  const width = element.getAttribute("data-width");
+  if (width) {
+    config.width = width;
+  }
+  const height = element.getAttribute("data-height");
+  if (height) {
+    config.height = height;
+  }
+  const aspectRatio = element.getAttribute("data-aspect-ratio");
+  if (aspectRatio) {
+    config.aspectRatio = aspectRatio;
+  }
+  const className = element.getAttribute("data-class");
+  if (className) {
+    config.className = className;
+  }
+  const hideDelay = element.getAttribute("data-hide-delay");
+  if (hideDelay) {
+    const parsed = parseInt(hideDelay, 10);
+    if (!isNaN(parsed)) {
+      config.hideDelay = parsed;
+    }
+  }
+  const playbackRate = element.getAttribute("data-playback-rate");
+  if (playbackRate) {
+    const parsed = parseFloat(playbackRate);
+    if (!isNaN(parsed)) {
+      config.playbackRate = parsed;
+    }
+  }
+  const startTime = element.getAttribute("data-start-time");
+  if (startTime) {
+    const parsed = parseFloat(startTime);
+    if (!isNaN(parsed)) {
+      config.startTime = parsed;
+    }
+  }
+  const playlist = element.getAttribute("data-playlist");
+  if (playlist) {
+    try {
+      config.playlist = JSON.parse(playlist);
+    } catch {
+      console.warn("[ScarlettPlayer] Invalid playlist JSON");
+    }
+  }
+  const analyticsBeaconUrl = element.getAttribute("data-analytics-beacon-url");
+  if (analyticsBeaconUrl) {
+    config.analytics = {
+      beaconUrl: analyticsBeaconUrl,
+      apiKey: element.getAttribute("data-analytics-api-key") || void 0,
+      videoId: element.getAttribute("data-analytics-video-id") || void 0
+    };
+  }
+  return config;
+}
+function aspectRatioToPercent(ratio) {
+  const parts = ratio.split(":").map(Number);
+  const width = parts[0];
+  const height = parts[1];
+  if (parts.length === 2 && width !== void 0 && height !== void 0 && !isNaN(width) && !isNaN(height) && width > 0) {
+    return height / width * 100;
+  }
+  return 56.25;
+}
+function applyContainerStyles(container, config) {
+  const type = config.type || "video";
+  if (config.className) {
+    container.classList.add(...config.className.split(" "));
+  }
+  if (config.width) {
+    container.style.width = config.width;
+  }
+  if (type === "video") {
+    if (config.height) {
+      container.style.height = config.height;
+    } else if (config.aspectRatio) {
+      container.style.position = "relative";
+      container.style.paddingBottom = `${aspectRatioToPercent(config.aspectRatio)}%`;
+      container.style.height = "0";
+    }
+  } else if (type === "audio") {
+    container.style.position = container.style.position || "relative";
+    container.style.height = config.height || "120px";
+    container.style.width = container.style.width || "100%";
+  } else if (type === "audio-mini") {
+    container.style.position = container.style.position || "relative";
+    container.style.height = config.height || "64px";
+    container.style.width = container.style.width || "100%";
+  }
+}
+async function createEmbedPlayer(container, config, pluginCreators2, availableTypes) {
+  const type = config.type || "video";
+  if (!availableTypes.includes(type)) {
+    const buildSuggestion = type === "video" ? "Use embed.js or embed.video.js" : "Use embed.js or embed.audio.js";
+    throw new Error(
+      `[ScarlettPlayer] Player type "${type}" is not available in this build. ${buildSuggestion}`
+    );
+  }
+  if (!config.src && !config.playlist?.length) {
+    console.error("[ScarlettPlayer] No source URL or playlist provided");
+    return null;
+  }
+  try {
+    applyContainerStyles(container, config);
+    const theme = {};
+    if (config.brandColor) theme.accentColor = config.brandColor;
+    if (config.primaryColor) theme.primaryColor = config.primaryColor;
+    if (config.backgroundColor) theme.backgroundColor = config.backgroundColor;
+    const plugins = [pluginCreators2.hls()];
+    if (pluginCreators2.playlist && config.playlist?.length) {
+      plugins.push(pluginCreators2.playlist({
+        items: config.playlist.map((item, index) => ({
+          id: `item-${index}`,
+          src: item.src,
+          title: item.title,
+          artist: item.artist,
+          poster: item.poster || item.artwork,
+          duration: item.duration
+        }))
+      }));
+    }
+    if (pluginCreators2.mediaSession && (type !== "video" || config.title)) {
+      plugins.push(pluginCreators2.mediaSession({
+        title: config.title || config.playlist?.[0]?.title,
+        artist: config.artist || config.playlist?.[0]?.artist,
+        album: config.album,
+        artwork: config.artwork || config.poster || config.playlist?.[0]?.artwork
+      }));
+    }
+    if (pluginCreators2.analytics && config.analytics?.beaconUrl) {
+      plugins.push(pluginCreators2.analytics({
+        beaconUrl: config.analytics.beaconUrl,
+        apiKey: config.analytics.apiKey,
+        videoId: config.analytics.videoId || config.src || "unknown"
+      }));
+    }
+    if (config.controls !== false) {
+      if (type === "video" && pluginCreators2.videoUI) {
+        const uiConfig = {};
+        if (Object.keys(theme).length > 0) uiConfig.theme = theme;
+        if (config.hideDelay !== void 0) uiConfig.hideDelay = config.hideDelay;
+        plugins.push(pluginCreators2.videoUI(uiConfig));
+      } else if ((type === "audio" || type === "audio-mini") && pluginCreators2.audioUI) {
+        plugins.push(pluginCreators2.audioUI({
+          layout: type === "audio-mini" ? "compact" : "full",
+          theme: {
+            primary: config.brandColor,
+            text: config.primaryColor,
+            background: config.backgroundColor
+          }
+        }));
+      }
+    }
+    const player = await createPlayer({
+      container,
+      src: config.src || config.playlist?.[0]?.src || "",
+      autoplay: config.autoplay || false,
+      muted: config.muted || false,
+      poster: config.poster || config.artwork || config.playlist?.[0]?.poster,
+      loop: config.loop || false,
+      plugins
+    });
+    const video = container.querySelector("video");
+    if (video) {
+      if (config.playbackRate) video.playbackRate = config.playbackRate;
+      if (config.startTime) video.currentTime = config.startTime;
+    }
+    return player;
+  } catch (error) {
+    console.error("[ScarlettPlayer] Failed to create player:", error);
+    throw error;
+  }
+}
+async function initElement(element, pluginCreators2, availableTypes) {
+  if (element.hasAttribute("data-scarlett-initialized")) {
+    return null;
+  }
+  const config = parseDataAttributes(element);
+  element.setAttribute("data-scarlett-initialized", "true");
+  try {
+    const player = await createEmbedPlayer(element, config, pluginCreators2, availableTypes);
+    return player;
+  } catch (error) {
+    element.removeAttribute("data-scarlett-initialized");
+    throw error;
+  }
+}
+const PLAYER_SELECTORS = [
+  "[data-scarlett-player]",
+  "[data-sp]",
+  ".scarlett-player"
+];
+async function initAll(pluginCreators2, availableTypes) {
+  const selector = PLAYER_SELECTORS.join(", ");
+  const elements = document.querySelectorAll(selector);
+  let initialized = 0;
+  let errors = 0;
+  for (const element of Array.from(elements)) {
+    try {
+      const player = await initElement(element, pluginCreators2, availableTypes);
+      if (player) initialized++;
+    } catch (error) {
+      errors++;
+      console.error("[ScarlettPlayer] Failed to initialize element:", error);
+    }
+  }
+  if (initialized > 0) {
+    console.log(`[ScarlettPlayer] Initialized ${initialized} player(s)`);
+  }
+  if (errors > 0) {
+    console.warn(`[ScarlettPlayer] ${errors} player(s) failed to initialize`);
+  }
+}
+function createScarlettPlayerAPI(pluginCreators2, availableTypes, version) {
+  return {
+    version,
+    availableTypes,
+    async create(options) {
+      let container = null;
+      if (typeof options.container === "string") {
+        container = document.querySelector(options.container);
+        if (!container) {
+          console.error(`[ScarlettPlayer] Container not found: ${options.container}`);
+          return null;
+        }
+      } else {
+        container = options.container;
+      }
+      return createEmbedPlayer(container, options, pluginCreators2, availableTypes);
+    },
+    async initAll() {
+      return initAll(pluginCreators2, availableTypes);
+    }
+  };
+}
+function setupAutoInit(pluginCreators2, availableTypes) {
+  if (typeof document !== "undefined") {
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", () => {
+        initAll(pluginCreators2, availableTypes);
+      });
+    } else {
+      initAll(pluginCreators2, availableTypes);
+    }
+  }
+}
+const VERSION = "0.3.0-video";
+const AVAILABLE_TYPES = ["video"];
+const pluginCreators = {
+  hls: createHLSPlugin,
+  videoUI: uiPlugin
+  // Audio UI not available in this build
+  // Analytics not available in this build
+  // Playlist not available in this build
+  // Media Session not available in this build
+};
+const ScarlettPlayerAPI = createScarlettPlayerAPI(
+  pluginCreators,
+  AVAILABLE_TYPES,
+  VERSION
+);
+if (typeof window !== "undefined") {
+  window.ScarlettPlayer = ScarlettPlayerAPI;
+}
+setupAutoInit(pluginCreators, AVAILABLE_TYPES);
+export {
+  applyContainerStyles,
+  aspectRatioToPercent,
+  ScarlettPlayerAPI as default,
+  parseDataAttributes
+};
+//# sourceMappingURL=embed.video.js.map