ts-video-player 0.1.0

package/dist/chunk-eajts2jv.js

@@ -0,0 +1,4243 @@
+import {
+  EventEmitter,
+  MediaEventsNormalizer,
+  StateStore,
+  createActivityDetector,
+  createKeyboardHandler,
+  createStorageSync,
+  detectFullscreenAvailability,
+  detectPipAvailability,
+  detectVolumeAvailability,
+  enterFullscreen,
+  enterPiP,
+  exitFullscreen,
+  exitPiP,
+  onFullscreenChange,
+  onPiPChange,
+  probeVolumeAvailability,
+  selectBufferedAmount
+} from "./chunk-36x4yhjn.js";
+
+// src/core/media-session.ts
+function isMediaSessionSupported() {
+  return typeof navigator !== "undefined" && "mediaSession" in navigator;
+}
+function createMediaSession(store, actions, options) {
+  if (!isMediaSessionSupported())
+    return () => {};
+  const session = navigator.mediaSession;
+  if (options) {
+    updateMetadata(options);
+  }
+  const handlers = [
+    ["play", () => actions.play()],
+    ["pause", () => actions.pause()],
+    ["stop", () => actions.stop()],
+    ["seekbackward", (details) => {
+      const offset = details.seekOffset || -10;
+      actions.seekBy(offset);
+    }],
+    ["seekforward", (details) => {
+      const offset = details.seekOffset || 10;
+      actions.seekBy(offset);
+    }],
+    ["seekto", (details) => {
+      const seekTime = details.seekTime;
+      if (seekTime !== undefined)
+        actions.seekTo(seekTime);
+    }]
+  ];
+  for (const [action, handler] of handlers) {
+    try {
+      session.setActionHandler(action, handler);
+    } catch {}
+  }
+  const unsubPaused = store.subscribe("paused", (state) => {
+    session.playbackState = state.paused ? "paused" : "playing";
+  });
+  let positionTimer = null;
+  const updatePosition = () => {
+    const state = store.getState();
+    if (!isFinite(state.duration) || state.duration <= 0)
+      return;
+    try {
+      session.setPositionState({
+        duration: state.duration,
+        playbackRate: state.playbackRate,
+        position: Math.min(state.currentTime, state.duration)
+      });
+    } catch {}
+  };
+  const unsubPlaying = store.subscribe("playing", (state) => {
+    if (state.playing) {
+      updatePosition();
+      if (!positionTimer) {
+        positionTimer = setInterval(updatePosition, 1000);
+      }
+    } else {
+      if (positionTimer) {
+        clearInterval(positionTimer);
+        positionTimer = null;
+      }
+      updatePosition();
+    }
+  });
+  return () => {
+    if (positionTimer)
+      clearInterval(positionTimer);
+    unsubPaused();
+    unsubPlaying();
+    for (const [action] of handlers) {
+      try {
+        session.setActionHandler(action, null);
+      } catch {}
+    }
+  };
+}
+function updateMetadata(options) {
+  if (!isMediaSessionSupported())
+    return;
+  navigator.mediaSession.metadata = new MediaMetadata({
+    title: options.title || "",
+    artist: options.artist || "",
+    album: options.album || "",
+    artwork: options.artwork || []
+  });
+}
+
+// src/core/orientation.ts
+function isOrientationLockSupported() {
+  return typeof screen !== "undefined" && "orientation" in screen && typeof screen.orientation.lock === "function";
+}
+function lockOrientation(type) {
+  if (!isOrientationLockSupported())
+    return;
+  const orientationMap = {
+    landscape: "landscape",
+    portrait: "portrait",
+    any: "any"
+  };
+  screen.orientation.lock(orientationMap[type]).catch(() => {});
+}
+function unlockOrientation() {
+  if (!isOrientationLockSupported())
+    return;
+  try {
+    screen.orientation.unlock();
+  } catch {}
+}
+
+// src/providers/base.ts
+class BaseProvider {
+  container = null;
+  options = {};
+  events = new EventEmitter;
+  _ready = false;
+  get mediaElement() {
+    return null;
+  }
+  get ready() {
+    return this._ready;
+  }
+  async setup(container, options) {
+    this.container = container;
+    this.options = options;
+    await this.initialize();
+    this._ready = true;
+    this.events.emit("ready");
+  }
+  destroy() {
+    this._ready = false;
+    this.cleanup();
+    this.events.removeAllListeners();
+  }
+  stop() {
+    this.pause();
+    this.seekTo(0);
+  }
+  getQualities() {
+    return [];
+  }
+  setQuality(_quality) {}
+  getTextTracks() {
+    return [];
+  }
+  setTextTrackMode(_trackId, _mode) {}
+  getAudioTracks() {
+    return [];
+  }
+  setAudioTrack(_trackId) {}
+  getFeatureAvailability(feature) {
+    const el = this.mediaElement;
+    const media = el instanceof HTMLMediaElement ? el : null;
+    const video = el instanceof HTMLVideoElement ? el : null;
+    switch (feature) {
+      case "volume":
+        return el && !(el instanceof HTMLMediaElement) ? "available" : detectVolumeAvailability(media);
+      case "fullscreen":
+        return detectFullscreenAvailability(this.container, video);
+      case "pip":
+        return el && !(el instanceof HTMLMediaElement) ? "unsupported" : detectPipAvailability(video);
+      default:
+        return "unsupported";
+    }
+  }
+  async enterFullscreen() {
+    await enterFullscreen(this.container, this.mediaElement);
+  }
+  async exitFullscreen() {
+    await exitFullscreen(this.mediaElement);
+  }
+  getFullscreenElement() {
+    return this.container;
+  }
+  async enterPiP() {
+    const media = this.mediaElement;
+    if (!media)
+      return;
+    await enterPiP(media);
+  }
+  async exitPiP() {
+    await exitPiP(this.mediaElement);
+  }
+  on(event, handler) {
+    this.events.on(event, handler);
+  }
+  off(event, handler) {
+    this.events.off(event, handler);
+  }
+  emitError(code, message, details) {
+    const error = { code, message, details };
+    this.events.emit("error", error);
+  }
+}
+// src/providers/html5.ts
+function isHTML5Source(src) {
+  if (typeof src === "string") {
+    const extension = getExtension(src);
+    if (extension === "mp4" || extension === "webm" || extension === "ogg" || extension === "ogv" || extension === "mov" || extension === "mp3" || extension === "wav" || extension === "flac" || extension === "m4a" || extension === "aac" || extension === "oga" || extension === "opus") {
+      return true;
+    }
+    return false;
+  }
+  if (typeof src === "object" && "type" in src) {
+    const type = src.type?.toLowerCase() || "";
+    return type.startsWith("video/") || type.startsWith("audio/") || type === "application/ogg";
+  }
+  return false;
+}
+function getExtension(src) {
+  const path = src.split(/[?#]/, 1)[0];
+  return path.slice(path.lastIndexOf(".") + 1).toLowerCase();
+}
+function getMimeType(src) {
+  const ext = getExtension(src);
+  const mimeTypes = {
+    mp4: "video/mp4",
+    webm: "video/webm",
+    ogg: "video/ogg",
+    ogv: "video/ogg",
+    mov: "video/quicktime",
+    mp3: "audio/mpeg",
+    wav: "audio/wav",
+    flac: "audio/flac",
+    m4a: "audio/mp4",
+    aac: "audio/aac",
+    oga: "audio/ogg",
+    opus: "audio/ogg; codecs=opus"
+  };
+  return mimeTypes[ext || ""] || "video/mp4";
+}
+
+class HTML5Provider extends BaseProvider {
+  name = "html5";
+  type = "video";
+  media = null;
+  eventsNormalizer = null;
+  cleanupFullscreen = null;
+  cleanupPiP = null;
+  isAudio = false;
+  get mediaElement() {
+    return this.media;
+  }
+  async initialize() {
+    if (!this.container) {
+      throw new Error("Container element is required");
+    }
+    this.isAudio = this.options.mediaType === "audio";
+    this.media = document.createElement(this.isAudio ? "audio" : "video");
+    this.media.className = "ts-video-player__media";
+    if (this.options.autoplay)
+      this.media.autoplay = true;
+    if (this.options.loop)
+      this.media.loop = true;
+    if (this.options.muted)
+      this.media.muted = true;
+    if (this.options.playsinline && !this.isAudio) {
+      this.media.playsInline = true;
+    }
+    if (this.options.preload)
+      this.media.preload = this.options.preload;
+    if (this.options.crossorigin)
+      this.media.crossOrigin = this.options.crossorigin;
+    if (this.options.controlsList?.length)
+      this.media.setAttribute("controlslist", this.options.controlsList.join(" "));
+    if (!this.isAudio && this.options.disablePictureInPicture) {
+      this.media.disablePictureInPicture = true;
+    }
+    if (this.options.poster && !this.isAudio) {
+      this.media.poster = this.options.poster;
+    }
+    if (this.options.volume !== undefined) {
+      this.media.volume = this.options.volume;
+    }
+    this.container.appendChild(this.media);
+    for (const track of this.options.tracks ?? [])
+      this.addTextTrack(track);
+    this.eventsNormalizer = new MediaEventsNormalizer(this.media, this.events);
+    this.cleanupFullscreen = onFullscreenChange((fullscreen) => {
+      this.events.emit("fullscreenchange", fullscreen);
+    });
+    if (!this.isAudio && this.media instanceof HTMLVideoElement) {
+      this.cleanupPiP = onPiPChange(this.media, (pip) => {
+        this.events.emit("pipchange", pip);
+      });
+    }
+    if (!this.isAudio) {
+      this.media.addEventListener("loadedmetadata", () => {
+        const video = this.media;
+        const fullscreenAvailability = this.getFeatureAvailability("fullscreen");
+        const pipAvailability = this.getFeatureAvailability("pip");
+        const volumeAvailability = this.getFeatureAvailability("volume");
+        this.events.emit("statechange", {
+          videoWidth: video.videoWidth,
+          videoHeight: video.videoHeight,
+          aspectRatio: (video.videoHeight > 0 ? video.videoWidth / video.videoHeight : 0) || 16 / 9,
+          canFullscreen: fullscreenAvailability === "available",
+          canPictureInPicture: pipAvailability === "available",
+          fullscreenAvailability,
+          pipAvailability,
+          volumeAvailability
+        });
+        this.events.emit("availabilitychange", "fullscreen", fullscreenAvailability);
+        this.events.emit("availabilitychange", "pip", pipAvailability);
+        this.events.emit("availabilitychange", "volume", volumeAvailability);
+      });
+    }
+    this.media.addEventListener("loadeddata", () => {
+      if (!this.media)
+        return;
+      probeVolumeAvailability(this.media).then((availability) => {
+        this.events.emit("statechange", {
+          volumeAvailability: availability
+        });
+        this.events.emit("availabilitychange", "volume", availability);
+      }).catch(() => {});
+    });
+    if (!this.isAudio && this.media instanceof HTMLVideoElement) {
+      this.media.addEventListener("webkitpresentationmodechanged", () => {
+        const video = this.media;
+        if (video?.webkitPresentationMode) {
+          const isPiP = video.webkitPresentationMode === "picture-in-picture";
+          this.events.emit("pipchange", isPiP);
+        }
+      });
+    }
+  }
+  cleanup() {
+    this.eventsNormalizer?.destroy();
+    this.cleanupFullscreen?.();
+    this.cleanupPiP?.();
+    if (this.media) {
+      this.media.pause();
+      this.media.removeAttribute("src");
+      this.media.load();
+      this.media.remove();
+      this.media = null;
+    }
+  }
+  canPlay(src) {
+    return isHTML5Source(src);
+  }
+  async load(src) {
+    if (!this.media)
+      return;
+    this.media.innerHTML = "";
+    this.media.removeAttribute("src");
+    const sources = Array.isArray(src) ? src : [src];
+    for (const source of sources) {
+      if (typeof source === "string") {
+        const sourceEl = document.createElement("source");
+        sourceEl.src = source;
+        sourceEl.type = getMimeType(source);
+        this.media.appendChild(sourceEl);
+      } else if ("src" in source && typeof source.src === "string") {
+        const mediaSource = source;
+        const sourceEl = document.createElement("source");
+        sourceEl.src = mediaSource.src;
+        sourceEl.type = mediaSource.type || getMimeType(mediaSource.src);
+        this.media.appendChild(sourceEl);
+      }
+    }
+    this.media.load();
+  }
+  async play() {
+    if (!this.media)
+      return;
+    try {
+      await this.media.play();
+    } catch (error) {
+      if (error.name === "NotAllowedError") {
+        this.emitError(1, "Playback was blocked. User interaction required.", error);
+      } else {
+        throw error;
+      }
+    }
+  }
+  pause() {
+    this.media?.pause();
+  }
+  seekTo(time) {
+    if (this.media) {
+      this.media.currentTime = Math.max(0, Math.min(time, this.getDuration()));
+    }
+  }
+  getCurrentTime() {
+    return this.media?.currentTime || 0;
+  }
+  getDuration() {
+    return this.media?.duration || 0;
+  }
+  setVolume(volume) {
+    if (this.media) {
+      this.media.volume = Math.max(0, Math.min(1, volume));
+    }
+  }
+  getVolume() {
+    return this.media?.volume || 1;
+  }
+  setMuted(muted) {
+    if (this.media) {
+      this.media.muted = muted;
+    }
+  }
+  getMuted() {
+    return this.media?.muted || false;
+  }
+  setPlaybackRate(rate) {
+    if (this.media) {
+      this.media.playbackRate = Math.max(0.25, Math.min(4, rate));
+    }
+  }
+  getPlaybackRate() {
+    return this.media?.playbackRate || 1;
+  }
+  getTextTracks() {
+    if (!this.media)
+      return [];
+    const tracks = [];
+    const textTracks = this.media.textTracks;
+    for (let i = 0;i < textTracks.length; i++) {
+      const track = textTracks[i];
+      tracks.push({
+        id: String(i),
+        kind: track.kind,
+        label: track.label || `Track ${i + 1}`,
+        language: track.language || "",
+        mode: track.mode,
+        cues: this.getTrackCues(track)
+      });
+    }
+    return tracks;
+  }
+  getTrackCues(track) {
+    if (!track.cues)
+      return [];
+    const cues = [];
+    for (let i = 0;i < track.cues.length; i++) {
+      const cue = track.cues[i];
+      cues.push({
+        id: cue.id || String(i),
+        startTime: cue.startTime,
+        endTime: cue.endTime,
+        text: cue.text
+      });
+    }
+    return cues;
+  }
+  setTextTrackMode(trackId, mode) {
+    if (!this.media)
+      return;
+    const index = parseInt(trackId, 10);
+    const track = this.media.textTracks[index];
+    if (track) {
+      track.mode = mode;
+      this.events.emit("texttrackchange", mode === "showing" ? this.getTextTracks()[index] : null);
+    }
+  }
+  getAudioTracks() {
+    if (!this.media || this.isAudio)
+      return [];
+    const video = this.media;
+    if (!("audioTracks" in video))
+      return [];
+    const audioTracks = video.audioTracks;
+    const tracks = [];
+    for (let i = 0;i < audioTracks.length; i++) {
+      const track = audioTracks[i];
+      tracks.push({
+        id: track.id || String(i),
+        label: track.label || `Track ${i + 1}`,
+        language: track.language || "",
+        kind: track.kind || "",
+        selected: track.enabled
+      });
+    }
+    return tracks;
+  }
+  setAudioTrack(trackId) {
+    if (!this.media || this.isAudio)
+      return;
+    const video = this.media;
+    if (!("audioTracks" in video))
+      return;
+    const audioTracks = video.audioTracks;
+    for (let i = 0;i < audioTracks.length; i++) {
+      const isTarget = audioTracks[i].id === trackId || String(i) === trackId;
+      audioTracks[i].enabled = isTarget;
+    }
+    this.events.emit("audiotrackchange", this.getAudioTracks().find((t) => t.selected) || null);
+  }
+  addTextTrack(options) {
+    if (!this.media)
+      return;
+    const track = document.createElement("track");
+    if (options.src)
+      track.src = options.src;
+    track.kind = options.kind || "subtitles";
+    track.label = options.label || "";
+    track.srclang = options.language || "";
+    if (options.default)
+      track.default = true;
+    this.media.appendChild(track);
+  }
+}
+var html5Loader = {
+  name: "html5",
+  type: "video",
+  canPlay(src) {
+    return isHTML5Source(src);
+  },
+  mediaType(src) {
+    if (typeof src === "string") {
+      const extension = getExtension(src);
+      if (["mp3", "wav", "flac", "m4a", "aac", "oga", "opus"].includes(extension)) {
+        return "audio";
+      }
+      return "video";
+    }
+    if (typeof src === "object" && "type" in src) {
+      const type = src.type?.toLowerCase() || "";
+      if (type.startsWith("audio/"))
+        return "audio";
+    }
+    return "video";
+  },
+  async load(container, options) {
+    const provider = new HTML5Provider;
+    await provider.setup(container, options);
+    return provider;
+  }
+};
+// src/providers/youtube.ts
+var YOUTUBE_PATTERNS = [
+  /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/,
+  /youtube\.com\/v\/([a-zA-Z0-9_-]{11})/,
+  /youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/
+];
+function extractYouTubeId(url) {
+  for (const pattern of YOUTUBE_PATTERNS) {
+    const match = url.match(pattern);
+    if (match)
+      return match[1];
+  }
+  return null;
+}
+function isYouTubeSource(src) {
+  if (typeof src === "string") {
+    return extractYouTubeId(src) !== null;
+  }
+  if (typeof src === "object" && "type" in src) {
+    return src.type === "youtube";
+  }
+  return false;
+}
+function parseYouTubeSource(src) {
+  if (typeof src === "string") {
+    const videoId = extractYouTubeId(src);
+    if (!videoId)
+      return null;
+    const url = new URL(src, "https://youtube.com");
+    const start = url.searchParams.get("t") || url.searchParams.get("start");
+    const end = url.searchParams.get("end");
+    return {
+      videoId,
+      startTime: start ? parseTime(start) : undefined,
+      endTime: end ? parseTime(end) : undefined
+    };
+  }
+  if (typeof src === "object" && "type" in src && src.type === "youtube") {
+    const ytSrc = src;
+    return {
+      videoId: ytSrc.videoId || extractYouTubeId(ytSrc.src) || "",
+      startTime: ytSrc.startTime,
+      endTime: ytSrc.endTime
+    };
+  }
+  return null;
+}
+function parseTime(time) {
+  if (/^\d+$/.test(time))
+    return parseInt(time, 10);
+  const match1 = time.match(/(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?/);
+  if (match1) {
+    const h = parseInt(match1[1] || "0", 10);
+    const m = parseInt(match1[2] || "0", 10);
+    const s = parseInt(match1[3] || "0", 10);
+    return h * 3600 + m * 60 + s;
+  }
+  const parts = time.split(":").map((p) => parseInt(p, 10));
+  if (parts.length === 2)
+    return parts[0] * 60 + parts[1];
+  if (parts.length === 3)
+    return parts[0] * 3600 + parts[1] * 60 + parts[2];
+  return 0;
+}
+
+class YouTubeProvider extends BaseProvider {
+  name = "youtube";
+  type = "youtube";
+  player = null;
+  iframe = null;
+  pendingVideoId = null;
+  startTime;
+  endTime;
+  timeUpdateInterval = null;
+  lastState = -1;
+  get mediaElement() {
+    return this.iframe;
+  }
+  async initialize() {
+    if (!this.container) {
+      throw new Error("Container element is required");
+    }
+    await this.loadYouTubeAPI();
+    const playerDiv = document.createElement("div");
+    playerDiv.id = `ts-video-player-yt-${Date.now()}`;
+    playerDiv.className = "ts-video-player__youtube";
+    this.container.appendChild(playerDiv);
+    const playerVars = {
+      autoplay: this.options.autoplay ? 1 : 0,
+      controls: 0,
+      disablekb: 1,
+      enablejsapi: 1,
+      iv_load_policy: 3,
+      modestbranding: 1,
+      playsinline: this.options.playsinline ? 1 : 0,
+      rel: 0,
+      origin: window.location.origin
+    };
+    if (this.options.youtubeParams) {
+      Object.assign(playerVars, this.options.youtubeParams);
+    }
+    playerVars.host = "https://www.youtube-nocookie.com";
+    this.player = new window.YT.Player(playerDiv.id, {
+      width: "100%",
+      height: "100%",
+      playerVars,
+      events: {
+        onReady: () => this.onReady(),
+        onStateChange: (e) => this.onStateChange(e),
+        onError: (e) => this.onError(e),
+        onPlaybackQualityChange: () => this.onQualityChange(),
+        onPlaybackRateChange: () => this.onRateChange()
+      }
+    });
+    this.iframe = this.player.getIframe();
+    this.iframe.className = "ts-video-player__media";
+  }
+  async loadYouTubeAPI() {
+    if (window.YT?.Player)
+      return;
+    return new Promise((resolve) => {
+      if (document.querySelector('script[src*="youtube.com/iframe_api"]')) {
+        const check = () => {
+          if (window.YT?.Player) {
+            resolve();
+          } else {
+            setTimeout(check, 100);
+          }
+        };
+        check();
+        return;
+      }
+      const script = document.createElement("script");
+      script.src = "https://www.youtube.com/iframe_api";
+      script.async = true;
+      window.onYouTubeIframeAPIReady = () => {
+        resolve();
+      };
+      document.head.appendChild(script);
+    });
+  }
+  cleanup() {
+    if (this.timeUpdateInterval) {
+      clearInterval(this.timeUpdateInterval);
+      this.timeUpdateInterval = null;
+    }
+    this.player?.destroy();
+    this.player = null;
+    this.iframe = null;
+  }
+  onReady() {
+    this.timeUpdateInterval = setInterval(() => {
+      if (this.player && this.lastState === 1) {
+        this.events.emit("timeupdate", this.getCurrentTime());
+      }
+    }, 250);
+    this.events.emit("loadedmetadata");
+    this.events.emit("canplay");
+    if (this.pendingVideoId) {
+      this.loadVideo(this.pendingVideoId, this.startTime, this.endTime);
+      this.pendingVideoId = null;
+    }
+  }
+  onStateChange(event) {
+    const state = event.data;
+    this.lastState = state;
+    const PlayerState = window.YT.PlayerState;
+    switch (state) {
+      case PlayerState.UNSTARTED:
+        this.events.emit("loadstart");
+        break;
+      case PlayerState.PLAYING:
+        this.events.emit("play");
+        this.events.emit("playing");
+        this.events.emit("statechange", { paused: false, playing: true, waiting: false });
+        break;
+      case PlayerState.PAUSED:
+        this.events.emit("pause");
+        this.events.emit("statechange", { paused: true, playing: false });
+        break;
+      case PlayerState.BUFFERING:
+        this.events.emit("waiting");
+        this.events.emit("statechange", { waiting: true });
+        break;
+      case PlayerState.ENDED:
+        this.events.emit("ended");
+        this.events.emit("statechange", { ended: true, playing: false });
+        break;
+      case PlayerState.CUED:
+        this.events.emit("loadeddata");
+        this.events.emit("durationchange", this.getDuration());
+        break;
+    }
+  }
+  onError(event) {
+    const errorMessages = {
+      2: "Invalid video ID",
+      5: "HTML5 player error",
+      100: "Video not found or removed",
+      101: "Video cannot be embedded",
+      150: "Video cannot be embedded"
+    };
+    this.emitError(event.data, errorMessages[event.data] || "Unknown YouTube error");
+  }
+  onQualityChange() {
+    const quality = this.player?.getPlaybackQuality() || "auto";
+    const qualities = this.getQualities();
+    this.events.emit("qualitychange", qualities.find((q) => q.id === quality) || null);
+  }
+  onRateChange() {
+    this.events.emit("ratechange", this.getPlaybackRate());
+  }
+  canPlay(src) {
+    return isYouTubeSource(src);
+  }
+  async load(src) {
+    const parsed = parseYouTubeSource(src);
+    if (!parsed) {
+      this.emitError(2, "Invalid YouTube source");
+      return;
+    }
+    this.startTime = parsed.startTime;
+    this.endTime = parsed.endTime;
+    if (!this.player || !this._ready) {
+      this.pendingVideoId = parsed.videoId;
+      return;
+    }
+    this.loadVideo(parsed.videoId, parsed.startTime, parsed.endTime);
+  }
+  loadVideo(videoId, startTime, endTime) {
+    if (!this.player)
+      return;
+    if (this.options.autoplay) {
+      this.player.loadVideoById({
+        videoId,
+        startSeconds: startTime,
+        endSeconds: endTime
+      });
+    } else {
+      this.player.cueVideoById({
+        videoId,
+        startSeconds: startTime,
+        endSeconds: endTime
+      });
+    }
+  }
+  async play() {
+    this.player?.playVideo();
+  }
+  pause() {
+    this.player?.pauseVideo();
+  }
+  stop() {
+    this.player?.stopVideo();
+  }
+  seekTo(time) {
+    this.player?.seekTo(time, true);
+    this.events.emit("seeking");
+    setTimeout(() => this.events.emit("seeked"), 100);
+  }
+  getCurrentTime() {
+    return this.player?.getCurrentTime() || 0;
+  }
+  getDuration() {
+    return this.player?.getDuration() || 0;
+  }
+  setVolume(volume) {
+    this.player?.setVolume(Math.round(volume * 100));
+    this.events.emit("volumechange", volume, this.getMuted());
+  }
+  getVolume() {
+    return (this.player?.getVolume() || 100) / 100;
+  }
+  setMuted(muted) {
+    if (muted) {
+      this.player?.mute();
+    } else {
+      this.player?.unMute();
+    }
+    this.events.emit("volumechange", this.getVolume(), muted);
+  }
+  getMuted() {
+    return this.player?.isMuted() || false;
+  }
+  setPlaybackRate(rate) {
+    this.player?.setPlaybackRate(rate);
+  }
+  getPlaybackRate() {
+    return this.player?.getPlaybackRate() || 1;
+  }
+  getQualities() {
+    const levels = this.player?.getAvailableQualityLevels() || [];
+    const heights = {
+      highres: 2160,
+      hd2160: 2160,
+      hd1440: 1440,
+      hd1080: 1080,
+      hd720: 720,
+      large: 480,
+      medium: 360,
+      small: 240,
+      tiny: 144
+    };
+    const current = this.player?.getPlaybackQuality();
+    return levels.map((level) => ({
+      id: level,
+      width: Math.round((heights[level] || 480) * (16 / 9)),
+      height: heights[level] || 480,
+      bitrate: 0,
+      selected: level === current
+    }));
+  }
+  setQuality(quality) {
+    if (quality === "auto") {
+      this.player?.setPlaybackQuality("default");
+    } else {
+      this.player?.setPlaybackQuality(quality.id);
+    }
+  }
+}
+var youtubeLoader = {
+  name: "youtube",
+  type: "youtube",
+  canPlay(src) {
+    return isYouTubeSource(src);
+  },
+  mediaType() {
+    return "video";
+  },
+  preconnect() {
+    return [
+      "https://www.youtube-nocookie.com",
+      "https://www.youtube.com",
+      "https://i.ytimg.com",
+      "https://s.ytimg.com"
+    ];
+  },
+  async load(container, options) {
+    const provider = new YouTubeProvider;
+    await provider.setup(container, options);
+    return provider;
+  }
+};
+// src/providers/vimeo.ts
+var VIMEO_PATTERNS = [
+  /vimeo\.com\/(\d+)/,
+  /vimeo\.com\/video\/(\d+)/,
+  /player\.vimeo\.com\/video\/(\d+)/,
+  /vimeo\.com\/channels\/[\w]+\/(\d+)/,
+  /vimeo\.com\/groups\/[\w]+\/videos\/(\d+)/
+];
+function extractVimeoId(url) {
+  for (const pattern of VIMEO_PATTERNS) {
+    const match = url.match(pattern);
+    if (match)
+      return match[1];
+  }
+  return null;
+}
+function extractVimeoHash(url) {
+  const match = url.match(/vimeo\.com\/\d+\/([a-f0-9]+)/);
+  return match ? match[1] : null;
+}
+function isVimeoSource(src) {
+  if (typeof src === "string") {
+    return extractVimeoId(src) !== null;
+  }
+  if (typeof src === "object" && "type" in src) {
+    return src.type === "vimeo";
+  }
+  return false;
+}
+function parseVimeoSource(src) {
+  if (typeof src === "string") {
+    const videoId = extractVimeoId(src);
+    if (!videoId)
+      return null;
+    return { videoId, hash: extractVimeoHash(src) || undefined };
+  }
+  if (typeof src === "object" && "type" in src && src.type === "vimeo") {
+    const vSrc = src;
+    return {
+      videoId: vSrc.videoId || extractVimeoId(vSrc.src) || "",
+      hash: vSrc.hash
+    };
+  }
+  return null;
+}
+var VIMEO_SDK_URL = "https://player.vimeo.com/api/player.js";
+
+class VimeoProvider extends BaseProvider {
+  name = "vimeo";
+  type = "vimeo";
+  container_el = null;
+  player = null;
+  iframe = null;
+  timeUpdateInterval = null;
+  _qualities = [];
+  _duration = 0;
+  get mediaElement() {
+    return this.iframe;
+  }
+  async initialize() {
+    if (!this.container) {
+      throw new Error("Container element is required");
+    }
+    await this.loadVimeoSDK();
+    this.container_el = document.createElement("div");
+    this.container_el.className = "ts-video-player__vimeo";
+    this.container.appendChild(this.container_el);
+  }
+  async loadVimeoSDK() {
+    if (window.Vimeo)
+      return;
+    return new Promise((resolve, reject) => {
+      if (document.querySelector(`script[src="${VIMEO_SDK_URL}"]`)) {
+        const check = () => {
+          if (window.Vimeo)
+            resolve();
+          else
+            setTimeout(check, 100);
+        };
+        check();
+        return;
+      }
+      const script = document.createElement("script");
+      script.src = VIMEO_SDK_URL;
+      script.async = true;
+      script.onload = () => resolve();
+      script.onerror = () => reject(new Error("Failed to load Vimeo SDK"));
+      document.head.appendChild(script);
+    });
+  }
+  cleanup() {
+    if (this.timeUpdateInterval) {
+      clearInterval(this.timeUpdateInterval);
+      this.timeUpdateInterval = null;
+    }
+    this.player?.destroy();
+    this.player = null;
+    this.iframe = null;
+    this.container_el?.remove();
+    this.container_el = null;
+  }
+  canPlay(src) {
+    return isVimeoSource(src);
+  }
+  async load(src) {
+    const parsed = parseVimeoSource(src);
+    if (!parsed || !this.container_el) {
+      this.emitError(2, "Invalid Vimeo source");
+      return;
+    }
+    if (this.player) {
+      await this.player.destroy();
+      this.player = null;
+    }
+    const playerOptions = {
+      id: parseInt(parsed.videoId, 10),
+      autopause: false,
+      autoplay: this.options.autoplay || false,
+      controls: false,
+      loop: this.options.loop || false,
+      muted: this.options.muted || false,
+      playsinline: this.options.playsinline !== false,
+      responsive: true,
+      dnt: true
+    };
+    if (this.options.vimeoParams) {
+      Object.assign(playerOptions, this.options.vimeoParams);
+    }
+    this.player = new window.Vimeo.Player(this.container_el, playerOptions);
+    await this.player.ready();
+    this.iframe = this.container_el.querySelector("iframe");
+    if (this.iframe) {
+      this.iframe.className = "ts-video-player__media";
+    }
+    this.attachVimeoEvents();
+    this.events.emit("loadedmetadata");
+    this.events.emit("canplay");
+    this._duration = await this.player.getDuration();
+    this.events.emit("durationchange", this._duration);
+    await this.updateQualities();
+    const [width, height] = await Promise.all([this.player.getVideoWidth(), this.player.getVideoHeight()]);
+    this.events.emit("statechange", {
+      videoWidth: width,
+      videoHeight: height,
+      aspectRatio: width / height || 16 / 9,
+      canFullscreen: true,
+      canPictureInPicture: false
+    });
+  }
+  attachVimeoEvents() {
+    if (!this.player)
+      return;
+    this.player.on("play", () => {
+      this.events.emit("play");
+      this.events.emit("playing");
+      this.events.emit("statechange", { paused: false, playing: true });
+    });
+    this.player.on("pause", () => {
+      this.events.emit("pause");
+      this.events.emit("statechange", { paused: true, playing: false });
+    });
+    this.player.on("ended", () => {
+      this.events.emit("ended");
+      this.events.emit("statechange", { ended: true, playing: false });
+    });
+    this.player.on("timeupdate", (data) => {
+      this.events.emit("timeupdate", data.seconds);
+    });
+    this.player.on("seeking", () => {
+      this.events.emit("seeking");
+    });
+    this.player.on("seeked", () => {
+      this.events.emit("seeked");
+    });
+    this.player.on("bufferstart", () => {
+      this.events.emit("waiting");
+      this.events.emit("statechange", { waiting: true });
+    });
+    this.player.on("bufferend", () => {
+      this.events.emit("statechange", { waiting: false });
+    });
+    this.player.on("progress", (data) => {
+      const buffered = [{ start: 0, end: data.percent * this._duration }];
+      this.events.emit("progress", buffered);
+    });
+    this.player.on("volumechange", async () => {
+      const [volume, muted] = await Promise.all([this.player.getVolume(), this.player.getMuted()]);
+      this.events.emit("volumechange", volume, muted);
+    });
+    this.player.on("playbackratechange", (data) => {
+      this.events.emit("ratechange", data.playbackRate);
+    });
+    this.player.on("qualitychange", async () => {
+      await this.updateQualities();
+      const current = this._qualities.find((q) => q.selected);
+      this.events.emit("qualitychange", current || null);
+    });
+    this.player.on("error", (error) => {
+      this.emitError(5, error.message, error);
+    });
+  }
+  async updateQualities() {
+    if (!this.player)
+      return;
+    try {
+      const qualities = await this.player.getQualities();
+      this._qualities = qualities.map((q) => {
+        const match = q.label.match(/(\d+)p/);
+        const height = match ? parseInt(match[1], 10) : 0;
+        return {
+          id: q.id,
+          width: Math.round(height * (16 / 9)),
+          height,
+          bitrate: 0,
+          selected: q.active
+        };
+      });
+      this.events.emit("statechange", { qualities: this._qualities });
+    } catch {}
+  }
+  async play() {
+    try {
+      await this.player?.play();
+    } catch (error) {
+      if (error.name === "NotAllowedError") {
+        this.emitError(1, "Playback was blocked. User interaction required.", error);
+      } else {
+        throw error;
+      }
+    }
+  }
+  pause() {
+    this.player?.pause();
+  }
+  stop() {
+    this.pause();
+    this.seekTo(0);
+  }
+  seekTo(time) {
+    this.player?.setCurrentTime(time);
+  }
+  getCurrentTime() {
+    return 0;
+  }
+  getDuration() {
+    return this._duration;
+  }
+  setVolume(volume) {
+    this.player?.setVolume(Math.max(0, Math.min(1, volume)));
+  }
+  getVolume() {
+    return 1;
+  }
+  setMuted(muted) {
+    this.player?.setMuted(muted);
+  }
+  getMuted() {
+    return false;
+  }
+  setPlaybackRate(rate) {
+    this.player?.setPlaybackRate(rate);
+  }
+  getPlaybackRate() {
+    return 1;
+  }
+  getQualities() {
+    return this._qualities;
+  }
+  setQuality(quality) {
+    if (!this.player)
+      return;
+    if (quality === "auto") {
+      this.player.setQuality("auto");
+    } else {
+      this.player.setQuality(quality.id);
+    }
+  }
+  async enableTextTrack(language) {
+    await this.player?.enableTextTrack(language);
+  }
+  async disableTextTrack() {
+    await this.player?.disableTextTrack();
+  }
+  async getChapters() {
+    if (!this.player)
+      return [];
+    try {
+      return await this.player.getChapters();
+    } catch {
+      return [];
+    }
+  }
+}
+var vimeoLoader = {
+  name: "vimeo",
+  type: "vimeo",
+  canPlay(src) {
+    return isVimeoSource(src);
+  },
+  mediaType() {
+    return "video";
+  },
+  preconnect() {
+    return ["https://player.vimeo.com", "https://i.vimeocdn.com", "https://f.vimeocdn.com"];
+  },
+  async load(container, options) {
+    const provider = new VimeoProvider;
+    await provider.setup(container, options);
+    return provider;
+  }
+};
+// src/providers/hls.ts
+function isHLSSource(src) {
+  if (typeof src === "string") {
+    const url = src.toLowerCase();
+    return url.endsWith(".m3u8") || url.includes("application/x-mpegurl") || url.includes("application/vnd.apple.mpegurl");
+  }
+  if (typeof src === "object" && "type" in src) {
+    const type = src.type?.toLowerCase() || "";
+    return type === "application/x-mpegurl" || type === "application/vnd.apple.mpegurl";
+  }
+  return false;
+}
+function isNativeHLSSupported() {
+  const video = document.createElement("video");
+  return video.canPlayType("application/vnd.apple.mpegurl") !== "";
+}
+var HLS_CDN_DEFAULT = "https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js";
+
+class HLSProvider extends BaseProvider {
+  name = "hls";
+  type = "hls";
+  video = null;
+  hls = null;
+  eventsNormalizer = null;
+  cleanupFullscreen = null;
+  cleanupPiP = null;
+  useNativeHLS = false;
+  _qualities = [];
+  _audioTracks = [];
+  _textTracks = [];
+  currentQualityIndex = -1;
+  get mediaElement() {
+    return this.video;
+  }
+  get canLiveSync() {
+    return !this.useNativeHLS && this.hls !== null;
+  }
+  get hlsConfig() {
+    return this.hls?.config || {};
+  }
+  async initialize() {
+    if (!this.container) {
+      throw new Error("Container element is required");
+    }
+    this.video = document.createElement("video");
+    this.video.className = "ts-video-player__media";
+    if (this.options.autoplay)
+      this.video.autoplay = true;
+    if (this.options.loop)
+      this.video.loop = true;
+    if (this.options.muted)
+      this.video.muted = true;
+    if (this.options.playsinline)
+      this.video.playsInline = true;
+    if (this.options.preload)
+      this.video.preload = this.options.preload;
+    if (this.options.crossorigin)
+      this.video.crossOrigin = this.options.crossorigin;
+    if (this.options.poster)
+      this.video.poster = this.options.poster;
+    if (this.options.volume !== undefined)
+      this.video.volume = this.options.volume;
+    this.container.appendChild(this.video);
+    this.eventsNormalizer = new MediaEventsNormalizer(this.video, this.events);
+    this.cleanupFullscreen = onFullscreenChange((fullscreen) => {
+      this.events.emit("fullscreenchange", fullscreen);
+    });
+    this.cleanupPiP = onPiPChange(this.video, (pip) => {
+      this.events.emit("pipchange", pip);
+    });
+    this.useNativeHLS = isNativeHLSSupported();
+    if (!this.useNativeHLS) {
+      await this.loadHLSLibrary();
+    }
+    this.video.addEventListener("loadedmetadata", () => {
+      const fullscreenAvailability = this.getFeatureAvailability("fullscreen");
+      const pipAvailability = this.getFeatureAvailability("pip");
+      const volumeAvailability = this.getFeatureAvailability("volume");
+      this.events.emit("statechange", {
+        videoWidth: this.video.videoWidth,
+        videoHeight: this.video.videoHeight,
+        aspectRatio: (this.video.videoHeight > 0 ? this.video.videoWidth / this.video.videoHeight : 0) || 16 / 9,
+        canFullscreen: fullscreenAvailability === "available",
+        canPictureInPicture: pipAvailability === "available",
+        fullscreenAvailability,
+        pipAvailability,
+        volumeAvailability
+      });
+      this.events.emit("availabilitychange", "fullscreen", fullscreenAvailability);
+      this.events.emit("availabilitychange", "pip", pipAvailability);
+      this.events.emit("availabilitychange", "volume", volumeAvailability);
+    });
+  }
+  async loadHLSLibrary() {
+    if (window.Hls)
+      return;
+    return new Promise((resolve, reject) => {
+      const script = document.createElement("script");
+      script.src = this.options.hlsCdnUrl || HLS_CDN_DEFAULT;
+      script.async = true;
+      script.onload = () => resolve();
+      script.onerror = () => reject(new Error("Failed to load HLS.js"));
+      document.head.appendChild(script);
+    });
+  }
+  cleanup() {
+    this.eventsNormalizer?.destroy();
+    this.cleanupFullscreen?.();
+    this.cleanupPiP?.();
+    if (this.hls) {
+      this.hls.destroy();
+      this.hls = null;
+    }
+    if (this.video) {
+      this.video.pause();
+      this.video.removeAttribute("src");
+      this.video.load();
+      this.video.remove();
+      this.video = null;
+    }
+    this._qualities = [];
+    this._audioTracks = [];
+    this._textTracks = [];
+  }
+  canPlay(src) {
+    return isHLSSource(src);
+  }
+  async load(src) {
+    if (!this.video)
+      return;
+    const url = typeof src === "string" ? src : src.src;
+    if (this.useNativeHLS) {
+      this.video.src = url;
+      this.video.load();
+      return;
+    }
+    if (!window.Hls) {
+      await this.loadHLSLibrary();
+    }
+    if (!window.Hls?.isSupported()) {
+      this.emitError(4, "HLS is not supported in this browser");
+      return;
+    }
+    if (this.hls) {
+      this.hls.destroy();
+    }
+    const config = {
+      enableWorker: true,
+      lowLatencyMode: false,
+      ...this.options.hlsConfig
+    };
+    this.hls = new window.Hls(config);
+    this.attachHLSEvents();
+    this.hls.attachMedia(this.video);
+    this.hls.loadSource(url);
+  }
+  attachHLSEvents() {
+    if (!this.hls || !window.Hls)
+      return;
+    const Hls = window.Hls;
+    this.hls.on(Hls.Events.MANIFEST_PARSED, (_event, data) => {
+      this.updateQualities(data.levels);
+      if (this.options.autoplay) {
+        this.video?.play().catch(() => {});
+      }
+    });
+    this.hls.on(Hls.Events.LEVEL_SWITCHED, (_event, data) => {
+      this.currentQualityIndex = data.level;
+      this.updateQualitySelection();
+      this.events.emit("qualitychange", this._qualities[data.level] || null);
+    });
+    this.hls.on(Hls.Events.AUDIO_TRACK_LOADED, () => {
+      this.updateAudioTracks();
+    });
+    this.hls.on(Hls.Events.AUDIO_TRACK_SWITCHED, () => {
+      this.updateAudioTracks();
+      const current = this._audioTracks.find((t) => t.selected);
+      this.events.emit("audiotrackchange", current || null);
+    });
+    this.hls.on(Hls.Events.SUBTITLE_TRACK_LOADED, () => {
+      this.updateTextTracks();
+    });
+    this.hls.on(Hls.Events.ERROR, (_event, data) => {
+      if (data.fatal) {
+        switch (data.type) {
+          case Hls.ErrorTypes.NETWORK_ERROR:
+            this.hls?.startLoad();
+            break;
+          case Hls.ErrorTypes.MEDIA_ERROR:
+            this.hls?.recoverMediaError();
+            break;
+          default:
+            this.emitError(5, `HLS fatal error: ${data.details}`, data);
+            this.hls?.destroy();
+            break;
+        }
+      }
+    });
+  }
+  updateQualities(levels) {
+    this._qualities = levels.map((level, index) => ({
+      id: String(index),
+      width: level.width,
+      height: level.height,
+      bitrate: level.bitrate,
+      codec: level.codecSet || level.videoCodec || undefined,
+      selected: index === this.currentQualityIndex
+    }));
+    this.events.emit("statechange", { qualities: this._qualities });
+  }
+  updateQualitySelection() {
+    this._qualities = this._qualities.map((q, i) => ({
+      ...q,
+      selected: i === this.currentQualityIndex
+    }));
+  }
+  updateAudioTracks() {
+    if (!this.hls)
+      return;
+    this._audioTracks = this.hls.audioTracks.map((track, index) => ({
+      id: String(track.id),
+      label: track.name || `Track ${index + 1}`,
+      language: track.lang || "",
+      kind: track.default ? "main" : "alternative",
+      selected: index === this.hls.audioTrack
+    }));
+    this.events.emit("statechange", { audioTracks: this._audioTracks });
+  }
+  updateTextTracks() {
+    if (!this.hls)
+      return;
+    this._textTracks = this.hls.subtitleTracks.map((track, index) => ({
+      id: String(track.id),
+      kind: "subtitles",
+      label: track.name || `Subtitle ${index + 1}`,
+      language: track.lang || "",
+      mode: index === this.hls.subtitleTrack ? "showing" : "disabled",
+      cues: []
+    }));
+    this.events.emit("statechange", { textTracks: this._textTracks });
+  }
+  async play() {
+    if (!this.video)
+      return;
+    try {
+      await this.video.play();
+    } catch (error) {
+      if (error.name === "NotAllowedError") {
+        this.emitError(1, "Playback was blocked. User interaction required.", error);
+      } else {
+        throw error;
+      }
+    }
+  }
+  pause() {
+    this.video?.pause();
+  }
+  seekTo(time) {
+    if (this.video) {
+      this.video.currentTime = Math.max(0, Math.min(time, this.getDuration()));
+    }
+  }
+  getCurrentTime() {
+    return this.video?.currentTime || 0;
+  }
+  getDuration() {
+    return this.video?.duration || 0;
+  }
+  syncToLive() {
+    if (this.hls?.liveSyncPosition != null) {
+      this.seekTo(this.hls.liveSyncPosition);
+    }
+  }
+  setVolume(volume) {
+    if (this.video) {
+      this.video.volume = Math.max(0, Math.min(1, volume));
+    }
+  }
+  getVolume() {
+    return this.video?.volume || 1;
+  }
+  setMuted(muted) {
+    if (this.video) {
+      this.video.muted = muted;
+    }
+  }
+  getMuted() {
+    return this.video?.muted || false;
+  }
+  setPlaybackRate(rate) {
+    if (this.video) {
+      this.video.playbackRate = Math.max(0.25, Math.min(4, rate));
+    }
+  }
+  getPlaybackRate() {
+    return this.video?.playbackRate || 1;
+  }
+  getQualities() {
+    return this._qualities;
+  }
+  setQuality(quality) {
+    if (!this.hls)
+      return;
+    if (quality === "auto") {
+      this.hls.currentLevel = -1;
+      this.currentQualityIndex = -1;
+      this.events.emit("statechange", { autoQuality: true });
+    } else {
+      const index = parseInt(quality.id, 10);
+      if (!isNaN(index) && index >= 0 && index < this._qualities.length) {
+        this.hls.currentLevel = index;
+        this.currentQualityIndex = index;
+        this.events.emit("statechange", { autoQuality: false });
+      }
+    }
+  }
+  getAudioTracks() {
+    return this._audioTracks;
+  }
+  setAudioTrack(trackId) {
+    if (!this.hls)
+      return;
+    const index = parseInt(trackId, 10);
+    if (!isNaN(index) && index >= 0 && index < this.hls.audioTracks.length) {
+      this.hls.audioTrack = index;
+    }
+  }
+  getTextTracks() {
+    return this._textTracks;
+  }
+  setTextTrackMode(trackId, mode) {
+    if (!this.hls)
+      return;
+    if (mode === "showing") {
+      const index = parseInt(trackId, 10);
+      if (!isNaN(index)) {
+        this.hls.subtitleTrack = index;
+      }
+    } else {
+      this.hls.subtitleTrack = -1;
+    }
+    this.updateTextTracks();
+    const current = this._textTracks.find((t) => t.mode === "showing");
+    this.events.emit("texttrackchange", current || null);
+  }
+}
+var hlsLoader = {
+  name: "hls",
+  type: "hls",
+  canPlay(src) {
+    return isHLSSource(src);
+  },
+  mediaType() {
+    return "video";
+  },
+  preconnect() {
+    return ["https://cdn.jsdelivr.net"];
+  },
+  async load(container, options) {
+    const provider = new HLSProvider;
+    await provider.setup(container, options);
+    return provider;
+  }
+};
+// src/providers/dash.ts
+var dashjs = null;
+var dashLoading = null;
+var DASH_CDN_DEFAULT = "https://cdn.dashjs.org/latest/dash.all.min.js";
+async function loadDashJS(cdnUrl) {
+  if (dashjs)
+    return dashjs;
+  if (dashLoading)
+    return dashLoading;
+  dashLoading = new Promise((resolve, reject) => {
+    if (typeof window !== "undefined" && window.dashjs) {
+      dashjs = window.dashjs;
+      resolve(dashjs);
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = cdnUrl || DASH_CDN_DEFAULT;
+    script.async = true;
+    script.onload = () => {
+      dashjs = window.dashjs;
+      resolve(dashjs);
+    };
+    script.onerror = () => {
+      reject(new Error("Failed to load dash.js"));
+    };
+    document.head.appendChild(script);
+  });
+  return dashLoading;
+}
+function isDASHSource(src) {
+  if (typeof src === "object" && "type" in src && src.type === "dash") {
+    return true;
+  }
+  if (typeof src === "string") {
+    return src.includes(".mpd") || src.includes("manifest(format=mpd");
+  }
+  return false;
+}
+
+class DASHProvider extends BaseProvider {
+  name = "dash";
+  type = "dash";
+  dash = null;
+  video = null;
+  source = null;
+  config = {};
+  _volume = 1;
+  _muted = false;
+  _playbackRate = 1;
+  get mediaElement() {
+    return this.video;
+  }
+  async initialize() {
+    this.video = document.createElement("video");
+    this.video.style.width = "100%";
+    this.video.style.height = "100%";
+    this.video.style.display = "block";
+    await loadDashJS(this.options.dashCdnUrl);
+    this.dash = dashjs.MediaPlayer().create();
+    if (this.options.dashConfig) {
+      this.config.dashConfig = this.options.dashConfig;
+    }
+    if (this.config.dashConfig) {
+      Object.entries(this.config.dashConfig).forEach(([key, value]) => {
+        this.dash.updateSettings({ [key]: value });
+      });
+    }
+    if (this.config.lowLatency) {
+      this.dash.updateSettings({
+        streaming: {
+          lowLatencyEnabled: true,
+          liveDelay: 3,
+          liveCatchUpMinDrift: 0.05,
+          liveCatchUpPlaybackRate: 0.5
+        }
+      });
+    }
+    this.attachDashEvents();
+    if (this.container) {
+      this.container.appendChild(this.video);
+    }
+    this.attachVideoEvents();
+  }
+  attachVideoEvents() {
+    if (!this.video)
+      return;
+    this.video.addEventListener("play", () => this.events.emit("play"));
+    this.video.addEventListener("pause", () => this.events.emit("pause"));
+    this.video.addEventListener("ended", () => this.events.emit("ended"));
+    this.video.addEventListener("timeupdate", () => this.events.emit("timeupdate", this.getCurrentTime()));
+    this.video.addEventListener("durationchange", () => this.events.emit("durationchange", this.getDuration()));
+    this.video.addEventListener("volumechange", () => {
+      this.events.emit("volumechange", this.getVolume(), this.getMuted());
+    });
+    this.video.addEventListener("waiting", () => this.events.emit("waiting"));
+    this.video.addEventListener("playing", () => this.events.emit("playing"));
+    this.video.addEventListener("seeking", () => this.events.emit("seeking"));
+    this.video.addEventListener("seeked", () => this.events.emit("seeked"));
+    this.video.addEventListener("progress", () => {
+      const ranges = [];
+      for (let i = 0;i < this.video.buffered.length; i++) {
+        ranges.push({
+          start: this.video.buffered.start(i),
+          end: this.video.buffered.end(i)
+        });
+      }
+      this.events.emit("progress", ranges);
+    });
+    this.video.addEventListener("loadedmetadata", () => {
+      this.events.emit("loadedmetadata");
+      const fullscreenAvailability = this.getFeatureAvailability("fullscreen");
+      const pipAvailability = this.getFeatureAvailability("pip");
+      const volumeAvailability = this.getFeatureAvailability("volume");
+      this.events.emit("statechange", {
+        videoWidth: this.video.videoWidth,
+        videoHeight: this.video.videoHeight,
+        aspectRatio: (this.video.videoHeight > 0 ? this.video.videoWidth / this.video.videoHeight : 0) || 16 / 9,
+        canFullscreen: fullscreenAvailability === "available",
+        canPictureInPicture: pipAvailability === "available",
+        fullscreenAvailability,
+        pipAvailability,
+        volumeAvailability
+      });
+      this.events.emit("availabilitychange", "fullscreen", fullscreenAvailability);
+      this.events.emit("availabilitychange", "pip", pipAvailability);
+      this.events.emit("availabilitychange", "volume", volumeAvailability);
+    });
+    this.video.addEventListener("loadeddata", () => this.events.emit("loadeddata"));
+    this.video.addEventListener("canplay", () => this.events.emit("canplay"));
+    this.video.addEventListener("canplaythrough", () => this.events.emit("canplaythrough"));
+    this.video.addEventListener("ratechange", () => this.events.emit("ratechange", this.getPlaybackRate()));
+  }
+  attachDashEvents() {
+    if (!dashjs)
+      return;
+    const MediaPlayer = dashjs.MediaPlayer;
+    this.dash.on(MediaPlayer.events.QUALITY_CHANGE_RENDERED, () => {
+      this.events.emit("qualitychange", this.getQualities().find((q) => q.selected) || null);
+    });
+    this.dash.on(MediaPlayer.events.MANIFEST_LOADED, () => {});
+    this.dash.on(MediaPlayer.events.ERROR, (event) => {
+      this.emitError(event.error?.code || 0, event.error?.message || "DASH playback error", event.error);
+    });
+  }
+  configureDRM(drm) {
+    const protectionData = {};
+    if (drm.widevine) {
+      protectionData["com.widevine.alpha"] = {
+        serverURL: drm.widevine.url,
+        httpRequestHeaders: drm.widevine.headers
+      };
+    }
+    if (drm.playready) {
+      protectionData["com.microsoft.playready"] = {
+        serverURL: drm.playready.url,
+        httpRequestHeaders: drm.playready.headers
+      };
+    }
+    if (drm.fairplay) {
+      protectionData["com.apple.fps.1_0"] = {
+        serverURL: drm.fairplay.url,
+        serverCertificateURL: drm.fairplay.certificateUrl,
+        httpRequestHeaders: drm.fairplay.headers
+      };
+    }
+    this.dash.setProtectionData(protectionData);
+  }
+  async load(src) {
+    if (!this.video || !this.dash)
+      return;
+    if (typeof src === "string") {
+      this.source = { src, type: "dash" };
+    } else if (isDASHSource(src)) {
+      this.source = src;
+    } else {
+      this.emitError(4, "Invalid DASH source");
+      return;
+    }
+    if (this.source.drm) {
+      this.configureDRM(this.source.drm);
+    }
+    this.dash.initialize(this.video, this.source.src, false);
+  }
+  canPlay(src) {
+    return isDASHSource(src);
+  }
+  cleanup() {
+    if (this.dash) {
+      this.dash.reset();
+      this.dash = null;
+    }
+    if (this.video) {
+      this.video.remove();
+      this.video = null;
+    }
+    this.source = null;
+  }
+  async play() {
+    if (!this.video)
+      return;
+    try {
+      await this.video.play();
+    } catch (error) {
+      if (error.name === "NotAllowedError") {
+        this.emitError(1, "Playback was blocked. User interaction required.", error);
+      } else {
+        throw error;
+      }
+    }
+  }
+  pause() {
+    if (this.video) {
+      this.video.pause();
+    }
+  }
+  seekTo(time) {
+    if (this.video) {
+      this.video.currentTime = time;
+    }
+  }
+  getCurrentTime() {
+    return this.video?.currentTime || 0;
+  }
+  getDuration() {
+    return this.video?.duration || 0;
+  }
+  setVolume(volume) {
+    this._volume = Math.max(0, Math.min(1, volume));
+    if (this.video) {
+      this.video.volume = this._volume;
+    }
+  }
+  getVolume() {
+    return this.video?.volume ?? this._volume;
+  }
+  setMuted(muted) {
+    this._muted = muted;
+    if (this.video) {
+      this.video.muted = muted;
+    }
+  }
+  getMuted() {
+    return this.video?.muted ?? this._muted;
+  }
+  setPlaybackRate(rate) {
+    this._playbackRate = rate;
+    if (this.video) {
+      this.video.playbackRate = rate;
+    }
+  }
+  getPlaybackRate() {
+    return this.video?.playbackRate ?? this._playbackRate;
+  }
+  get isLive() {
+    return this.dash?.isDynamic() ?? false;
+  }
+  get liveLatency() {
+    return this.dash?.getCurrentLiveLatency() ?? 0;
+  }
+  get canLiveSync() {
+    return this.isLive;
+  }
+  syncToLive() {
+    if (this.dash && this.isLive) {
+      this.dash.seekToOriginalLive();
+    }
+  }
+  getQualities() {
+    if (!this.dash)
+      return [];
+    const bitrateInfoList = this.dash.getBitrateInfoListFor("video");
+    if (!bitrateInfoList)
+      return [];
+    const currentIndex = this.dash.getQualityFor("video");
+    return bitrateInfoList.map((info, index) => ({
+      id: `${index}`,
+      label: `${info.height}p`,
+      width: info.width,
+      height: info.height,
+      bitrate: info.bitrate,
+      selected: index === currentIndex
+    }));
+  }
+  setQuality(quality) {
+    if (!this.dash)
+      return;
+    if (quality === "auto") {
+      this.dash.updateSettings({
+        streaming: { abr: { autoSwitchBitrate: { video: true } } }
+      });
+    } else {
+      const index = Number.parseInt(quality.id, 10);
+      if (!Number.isNaN(index)) {
+        this.dash.updateSettings({
+          streaming: { abr: { autoSwitchBitrate: { video: false } } }
+        });
+        this.dash.setQualityFor("video", index);
+      }
+    }
+  }
+  get isAutoQuality() {
+    if (!this.dash)
+      return true;
+    const settings = this.dash.getSettings();
+    return settings?.streaming?.abr?.autoSwitchBitrate?.video ?? true;
+  }
+  getAudioTracks() {
+    if (!this.dash)
+      return [];
+    const tracks = this.dash.getTracksFor("audio");
+    if (!tracks)
+      return [];
+    const currentTrack = this.dash.getCurrentTrackFor("audio");
+    return tracks.map((track, index) => ({
+      id: track.id || `${index}`,
+      label: track.labels?.[0]?.text || track.lang || `Track ${index + 1}`,
+      language: track.lang || "",
+      kind: "main",
+      selected: track === currentTrack
+    }));
+  }
+  setAudioTrack(trackId) {
+    if (!this.dash)
+      return;
+    const tracks = this.dash.getTracksFor("audio");
+    const track = tracks.find((t, i) => (t.id || `${i}`) === trackId);
+    if (track) {
+      this.dash.setCurrentTrack(track);
+    }
+  }
+  getTextTracks() {
+    if (!this.dash)
+      return [];
+    const tracks = this.dash.getTracksFor("text");
+    if (!tracks)
+      return [];
+    const currentTrack = this.dash.getCurrentTrackFor("text");
+    return tracks.map((track, index) => ({
+      id: track.id || `${index}`,
+      label: track.labels?.[0]?.text || track.lang || `Subtitle ${index + 1}`,
+      language: track.lang || "",
+      kind: track.kind || "subtitles",
+      mode: track === currentTrack ? "showing" : "disabled",
+      cues: []
+    }));
+  }
+  setTextTrackMode(trackId, mode) {
+    if (!this.dash)
+      return;
+    if (mode === "disabled") {
+      this.dash.enableText(false);
+      return;
+    }
+    const tracks = this.dash.getTracksFor("text");
+    const track = tracks.find((t, i) => (t.id || `${i}`) === trackId);
+    if (track) {
+      this.dash.setCurrentTrack(track);
+      this.dash.enableText(mode === "showing");
+    }
+  }
+}
+var dashLoader = {
+  name: "dash",
+  type: "dash",
+  canPlay(src) {
+    return isDASHSource(src);
+  },
+  mediaType() {
+    return "video";
+  },
+  async load(container, options) {
+    const provider = new DASHProvider;
+    await provider.setup(container, options);
+    return provider;
+  },
+  preconnect() {
+    return ["https://cdn.dashjs.org"];
+  }
+};
+// src/providers/index.ts
+var defaultLoaders = [
+  hlsLoader,
+  dashLoader,
+  youtubeLoader,
+  vimeoLoader,
+  html5Loader
+];
+function findLoader(src, loaders = defaultLoaders) {
+  for (const loader of loaders) {
+    if (loader.canPlay(src)) {
+      return loader;
+    }
+  }
+  return null;
+}
+function findSourceCandidates(sources, loaders = defaultLoaders) {
+  const candidates = [];
+  sources.forEach((src, index) => {
+    const loader = findLoader(src, loaders);
+    if (loader)
+      candidates.push({ src, index, loader });
+  });
+  return candidates;
+}
+function detectMediaType(src, loaders = defaultLoaders) {
+  const loader = findLoader(src, loaders);
+  return loader?.mediaType(src) || "unknown";
+}
+function getPreconnectHints(src, loaders = defaultLoaders) {
+  const loader = findLoader(src, loaders);
+  return loader?.preconnect?.() || [];
+}
+
+// src/player.ts
+class Player {
+  _el;
+  _options;
+  _store;
+  _events = new EventEmitter;
+  _provider = null;
+  _loaders;
+  _cleanupFns = [];
+  _destroyed = false;
+  _sourceLoadId = 0;
+  _announcer = null;
+  constructor(container, options = {}) {
+    if (typeof container === "string") {
+      const el = document.querySelector(container);
+      if (!el)
+        throw new Error(`Container element not found: ${container}`);
+      this._el = el;
+    } else {
+      this._el = container;
+    }
+    this._options = { ...defaultOptions, ...options };
+    this._loaders = defaultLoaders;
+    this._store = new StateStore;
+    this.setupElement();
+    this.setupState();
+    this.setupKeyboard();
+    this.setupActivity();
+    this.setupStorage();
+    this.setupMediaSession();
+    this.setupEvents();
+    if (this._options.src) {
+      this.setSrc(this._options.src);
+    }
+    this._events.emit("init");
+  }
+  get el() {
+    return this._el;
+  }
+  get state() {
+    return this._store.getState();
+  }
+  get provider() {
+    return this._provider;
+  }
+  get ready() {
+    return this._provider?.ready || false;
+  }
+  setupElement() {
+    this._el.classList.add("ts-video-player");
+    this._el.setAttribute("tabindex", "0");
+    this._el.setAttribute("role", "region");
+    this._el.setAttribute("aria-roledescription", "video player");
+    this._el.setAttribute("aria-label", this._options.title || "Video player");
+    this._el.setAttribute("aria-keyshortcuts", "Space K M F I C ArrowLeft ArrowRight J L ArrowUp ArrowDown Home End 0 1 2 3 4 5 6 7 8 9");
+    const mediaContainer = document.createElement("div");
+    mediaContainer.className = "ts-video-player__container";
+    this._el.appendChild(mediaContainer);
+    if (this._options.announcements !== false) {
+      const liveRegion = document.createElement("div");
+      liveRegion.className = "ts-video-player__announcer";
+      liveRegion.setAttribute("role", "status");
+      liveRegion.setAttribute("aria-live", "polite");
+      liveRegion.setAttribute("aria-atomic", "true");
+      liveRegion.style.cssText = "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0";
+      this._el.appendChild(liveRegion);
+      this._announcer = liveRegion;
+    }
+    const _el = this._el;
+    _el.__videoPlayer = this;
+  }
+  setupState() {
+    this._store.batch({
+      volume: this._options.volume ?? 1,
+      muted: this._options.muted ?? false,
+      loop: this._options.loop ?? false,
+      autoplay: this._options.autoplay ?? false,
+      playsinline: this._options.playsinline ?? true,
+      playbackRate: this._options.playbackRate ?? 1,
+      poster: this._options.poster || "",
+      title: this._options.title || "",
+      preload: this._options.preload || "metadata"
+    });
+    const unsubscribe = this._store.subscribe((state) => {
+      this.updateAttributes(state);
+    });
+    this._cleanupFns.push(unsubscribe);
+  }
+  setupKeyboard() {
+    if (this._options.keyboard === false)
+      return;
+    const actions = {
+      togglePlay: () => this.togglePlay(),
+      toggleMute: () => this.toggleMute(),
+      toggleFullscreen: () => this.toggleFullscreen(),
+      togglePiP: () => this.togglePiP(),
+      toggleCaptions: () => this.toggleCaptions(),
+      seekBackward: () => this.seekBy(-5),
+      seekForward: () => this.seekBy(5),
+      volumeUp: () => this.setVolume(Math.min(1, this.state.volume + 0.1)),
+      volumeDown: () => this.setVolume(Math.max(0, this.state.volume - 0.1)),
+      speedUp: () => this.setPlaybackRate(Math.min(4, this.state.playbackRate + 0.25)),
+      speedDown: () => this.setPlaybackRate(Math.max(0.25, this.state.playbackRate - 0.25)),
+      seekStart: () => this.seekTo(0),
+      seekEnd: () => this.seekTo(this.state.duration),
+      seekPercent: (percent) => this.seekTo(percent / 100 * this.state.duration)
+    };
+    const config = typeof this._options.keyboard === "object" ? this._options.keyboard : {};
+    const handler = createKeyboardHandler(actions, {
+      seekStep: config.seekStep,
+      volumeStep: config.volumeStep
+    });
+    const target = config.global ? document : this._el;
+    target.addEventListener("keydown", handler);
+    this._cleanupFns.push(() => target.removeEventListener("keydown", handler));
+  }
+  setupActivity() {
+    const cleanup = createActivityDetector(this._el, {
+      timeout: this._options.controlsTimeout || 3000,
+      onActive: () => {
+        this._store.batch({ userActive: true, controlsVisible: true });
+        this._events.emit("useractivitychange", true);
+        this._events.emit("controlschange", true);
+      },
+      onInactive: () => {
+        if (this.state.playing) {
+          this._store.batch({ userActive: false, controlsVisible: false });
+          this._events.emit("useractivitychange", false);
+          this._events.emit("controlschange", false);
+        }
+      }
+    });
+    this._cleanupFns.push(cleanup);
+    const onMouseEnter = () => this._store.set("pointerOver", true);
+    const onMouseLeave = () => this._store.set("pointerOver", false);
+    this._el.addEventListener("mouseenter", onMouseEnter);
+    this._el.addEventListener("mouseleave", onMouseLeave);
+    this._cleanupFns.push(() => this._el.removeEventListener("mouseenter", onMouseEnter), () => this._el.removeEventListener("mouseleave", onMouseLeave));
+  }
+  setupStorage() {
+    if (!this._options.storage)
+      return;
+    const config = typeof this._options.storage === "object" ? this._options.storage : {};
+    const storage = config.type === "session" ? sessionStorage : localStorage;
+    const cleanup = createStorageSync(this._store, config.persist || ["volume", "muted", "playbackRate"], storage);
+    this._cleanupFns.push(cleanup);
+  }
+  setupMediaSession() {
+    if (this._options.mediaSession === false)
+      return;
+    const sessionOpts = typeof this._options.mediaSession === "object" ? this._options.mediaSession : this._options.title ? { title: this._options.title } : undefined;
+    const cleanup = createMediaSession(this._store, {
+      play: () => this.play(),
+      pause: () => this.pause(),
+      seekTo: (time) => this.seekTo(time),
+      seekBy: (offset) => this.seekBy(offset),
+      stop: () => this.stop()
+    }, sessionOpts);
+    this._cleanupFns.push(cleanup);
+  }
+  setupEvents() {
+    if (this._options.on) {
+      for (const [event, handler] of Object.entries(this._options.on)) {
+        if (handler) {
+          this.on(event, handler);
+        }
+      }
+    }
+  }
+  updateAttributes(state) {
+    const el = this._el;
+    el.dataset.paused = String(state.paused);
+    el.dataset.playing = String(state.playing);
+    el.dataset.started = String(state.started);
+    el.dataset.ended = String(state.ended);
+    el.dataset.seeking = String(state.seeking);
+    el.dataset.waiting = String(state.waiting);
+    el.dataset.loop = String(state.loop);
+    el.dataset.autoplay = String(state.autoplay);
+    el.dataset.loading = String(state.waiting || state.loadingState === "loading");
+    el.dataset.canPlay = String(state.canPlay);
+    el.dataset.loadingState = state.loadingState;
+    el.setAttribute("aria-busy", String(state.waiting || state.loadingState === "loading"));
+    el.dataset.muted = String(state.muted);
+    el.dataset.volumeLevel = state.muted || state.volume === 0 ? "silent" : state.volume < 0.5 ? "low" : "high";
+    el.dataset.fullscreen = String(state.fullscreen);
+    el.dataset.pip = String(state.pictureInPicture);
+    el.dataset.controlsVisible = String(state.controlsVisible);
+    el.dataset.userActive = String(state.userActive);
+    el.dataset.mediaType = state.mediaType;
+    el.dataset.streamType = state.streamType;
+    const hasActiveCaptions = state.textTracks.some((t) => t.mode === "showing");
+    el.dataset.captions = String(hasActiveCaptions);
+    el.dataset.error = String(!!state.error);
+  }
+  announce(message) {
+    if (!this._announcer)
+      return;
+    this._announcer.textContent = "";
+    requestAnimationFrame(() => {
+      if (this._announcer)
+        this._announcer.textContent = message;
+    });
+  }
+  destroy() {
+    if (this._destroyed)
+      return;
+    this._destroyed = true;
+    this._sourceLoadId++;
+    this._events.emit("destroy");
+    this._cleanupFns.forEach((fn) => fn());
+    this._cleanupFns = [];
+    this._provider?.destroy();
+    this._provider = null;
+    this._events.removeAllListeners();
+    this._store.reset();
+    this._el.classList.remove("ts-video-player");
+    this._el.innerHTML = "";
+    delete this._el.__videoPlayer;
+  }
+  async setSrc(src) {
+    if (this._destroyed)
+      return;
+    const loadId = ++this._sourceLoadId;
+    const sources = Array.isArray(src) ? src : [src];
+    if (sources.length === 0) {
+      return;
+    }
+    this._store.batch({
+      sources,
+      src: sources[0],
+      loadingState: "loading",
+      error: null
+    });
+    this._events.emit("sourceschange", sources);
+    const candidates = findSourceCandidates(sources, this._loaders);
+    if (candidates.length === 0) {
+      this._store.batch({
+        loadingState: "error",
+        error: { code: 4, message: "No compatible provider found for source" }
+      });
+      return;
+    }
+    let lastError;
+    for (const candidate of candidates) {
+      if (this._destroyed || loadId !== this._sourceLoadId)
+        return;
+      const { loader } = candidate;
+      if (this._provider && this._provider.type !== loader.type) {
+        this._provider.destroy();
+        this._provider = null;
+        this._events.emit("providerchange", null);
+      }
+      if (!this._provider) {
+        const mediaContainer = this._el.querySelector(".ts-video-player__container");
+        try {
+          this._provider = await loader.load(mediaContainer, {
+            ...this._options,
+            mediaType: loader.mediaType(candidate.src)
+          });
+          if (this._destroyed || loadId !== this._sourceLoadId) {
+            this._provider.destroy();
+            this._provider = null;
+            return;
+          }
+          this._events.emit("providerchange", this._provider);
+          this.attachProviderEvents(this._provider);
+        } catch (error) {
+          lastError = error;
+          this._provider = null;
+          continue;
+        }
+      }
+      try {
+        const compatibleSources = loader.type === "video" ? candidates.filter((item) => item.loader.type === loader.type).map((item) => item.src) : [candidate.src];
+        await this._provider.load(compatibleSources.length > 1 ? compatibleSources : candidate.src);
+        if (this._destroyed || loadId !== this._sourceLoadId)
+          return;
+        this._store.batch({
+          src: candidate.src,
+          currentSourceIndex: candidate.index,
+          mediaType: loader.mediaType(candidate.src),
+          providerType: loader.type
+        });
+        return;
+      } catch (error) {
+        lastError = error;
+        if (this._provider) {
+          this._provider.destroy();
+          this._provider = null;
+        }
+        this._events.emit("providerchange", null);
+      }
+    }
+    if (this._destroyed || loadId !== this._sourceLoadId)
+      return;
+    this._store.batch({
+      loadingState: "error",
+      error: { code: 4, message: "Failed to load all compatible sources", details: lastError }
+    });
+  }
+  getSrc() {
+    return this.state.src;
+  }
+  attachProviderEvents(provider) {
+    provider.on("loadstart", () => {
+      this._store.set("loadingState", "loading");
+      this._events.emit("loadstart");
+    });
+    provider.on("loadedmetadata", () => {
+      this._events.emit("loadedmetadata");
+    });
+    provider.on("loadeddata", () => {
+      this._events.emit("loadeddata");
+    });
+    provider.on("canplay", () => {
+      this._store.batch({ canPlay: true, loadingState: "loaded" });
+      this._events.emit("canplay");
+    });
+    provider.on("canplaythrough", () => {
+      this._store.set("canPlayThrough", true);
+      this._events.emit("canplaythrough");
+    });
+    provider.on("play", () => {
+      this._store.batch({ paused: false, ended: false });
+      this._events.emit("play");
+      this.announce("Playing");
+    });
+    provider.on("pause", () => {
+      this._store.set("paused", true);
+      this._events.emit("pause");
+      this.announce("Paused");
+    });
+    provider.on("playing", () => {
+      this._store.batch({ playing: true, started: true, waiting: false, playbackState: "playing" });
+      this._events.emit("playing");
+    });
+    provider.on("waiting", () => {
+      this._store.batch({ waiting: true, playbackState: "buffering" });
+      this._events.emit("waiting");
+    });
+    provider.on("seeking", () => {
+      this._store.set("seeking", true);
+      this._events.emit("seeking");
+    });
+    provider.on("seeked", () => {
+      this._store.set("seeking", false);
+      this._events.emit("seeked");
+    });
+    provider.on("timeupdate", (time) => {
+      this._store.set("currentTime", time);
+      this._events.emit("timeupdate", time);
+    });
+    provider.on("durationchange", (duration) => {
+      this._store.set("duration", duration);
+      this._events.emit("durationchange", duration);
+    });
+    provider.on("volumechange", (volume, muted) => {
+      this._store.batch({ volume, muted });
+      this._events.emit("volumechange", volume, muted);
+      if (muted) {
+        this.announce("Muted");
+      } else {
+        this.announce(`Volume ${Math.round(volume * 100)}%`);
+      }
+    });
+    provider.on("ratechange", (rate) => {
+      this._store.set("playbackRate", rate);
+      this._events.emit("ratechange", rate);
+    });
+    provider.on("progress", (buffered) => {
+      this._store.batch({
+        buffered,
+        bufferedAmount: selectBufferedAmount({ ...this.state, buffered })
+      });
+      this._events.emit("progress", buffered);
+    });
+    provider.on("ended", () => {
+      this._store.batch({ ended: true, playing: false, playbackState: "ended" });
+      this._events.emit("ended");
+      this.announce("Playback ended");
+      if (this.state.loop) {
+        this.seekTo(0);
+        this.play();
+      }
+    });
+    provider.on("error", (error) => {
+      this._store.batch({ loadingState: "error", error });
+      this._events.emit("error", error);
+      this.announce(`Error: ${error.message}`);
+    });
+    provider.on("statechange", (state) => {
+      this._store.batch(state);
+      this._events.emit("statechange", state);
+    });
+    provider.on("qualitychange", (quality) => {
+      this._store.set("qualities", provider.getQualities());
+      this._events.emit("qualitychange", quality);
+    });
+    provider.on("fullscreenchange", (fullscreen) => {
+      this._store.set("fullscreen", fullscreen);
+      this._events.emit("fullscreenchange", fullscreen);
+      this.announce(fullscreen ? "Entered fullscreen" : "Exited fullscreen");
+    });
+    provider.on("pipchange", (pip) => {
+      this._store.set("pictureInPicture", pip);
+      this._events.emit("pipchange", pip);
+    });
+    provider.on("availabilitychange", (feature, availability) => {
+      if (feature === "volume")
+        this._store.set("volumeAvailability", availability);
+      else if (feature === "fullscreen")
+        this._store.set("fullscreenAvailability", availability);
+      else if (feature === "pip")
+        this._store.set("pipAvailability", availability);
+      this._events.emit("availabilitychange", feature, availability);
+    });
+  }
+  async play() {
+    if (!this._provider)
+      return;
+    await this._provider.play();
+  }
+  pause() {
+    this._provider?.pause();
+  }
+  togglePlay() {
+    if (this.state.paused) {
+      this.play().catch(() => {});
+    } else {
+      this.pause();
+    }
+  }
+  stop() {
+    this._provider?.stop();
+    this._store.batch({ playing: false, paused: true, currentTime: 0, playbackState: "idle" });
+  }
+  seekTo(time) {
+    this._provider?.seekTo(time);
+  }
+  seekBy(offset) {
+    const newTime = Math.max(0, Math.min(this.state.currentTime + offset, this.state.duration));
+    this.seekTo(newTime);
+  }
+  setVolume(volume) {
+    if (this.state.volumeAvailability === "unsupported")
+      return;
+    const clamped = Math.max(0, Math.min(1, volume));
+    this._provider?.setVolume(clamped);
+    this._store.set("volume", clamped);
+  }
+  setMuted(muted) {
+    this._provider?.setMuted(muted);
+    this._store.set("muted", muted);
+  }
+  toggleMute() {
+    this.setMuted(!this.state.muted);
+  }
+  setPlaybackRate(rate) {
+    const clamped = Math.max(0.25, Math.min(4, rate));
+    this._provider?.setPlaybackRate(clamped);
+    this._store.set("playbackRate", clamped);
+  }
+  async enterFullscreen() {
+    if (this.state.fullscreenAvailability === "unsupported")
+      return;
+    if (this.state.pictureInPicture) {
+      await this.exitPiP();
+    }
+    await this._provider?.enterFullscreen();
+    if (this._options.fullscreenOrientationLock !== false) {
+      lockOrientation("landscape");
+    }
+  }
+  async exitFullscreen() {
+    await this._provider?.exitFullscreen();
+    if (this._options.fullscreenOrientationLock !== false) {
+      unlockOrientation();
+    }
+  }
+  async toggleFullscreen() {
+    if (this.state.fullscreen) {
+      await this.exitFullscreen();
+    } else {
+      await this.enterFullscreen();
+    }
+  }
+  async enterPiP() {
+    if (this.state.pipAvailability === "unsupported")
+      return;
+    if (this.state.fullscreen) {
+      await this.exitFullscreen();
+    }
+    await this._provider?.enterPiP();
+  }
+  async exitPiP() {
+    await this._provider?.exitPiP();
+  }
+  async togglePiP() {
+    if (this.state.pictureInPicture) {
+      await this.exitPiP();
+    } else {
+      await this.enterPiP();
+    }
+  }
+  setQuality(quality) {
+    this._provider?.setQuality(quality);
+    if (quality === "auto") {
+      this._store.set("autoQuality", true);
+    } else {
+      this._store.set("autoQuality", false);
+    }
+  }
+  setTextTrack(trackId, mode) {
+    this._provider?.setTextTrackMode(trackId, mode);
+    this._store.set("textTracks", this._provider?.getTextTracks() || []);
+  }
+  setAudioTrack(trackId) {
+    this._provider?.setAudioTrack(trackId);
+    this._store.set("audioTracks", this._provider?.getAudioTracks() || []);
+  }
+  toggleCaptions() {
+    const textTracks = this.state.textTracks;
+    const showing = textTracks.find((t) => t.mode === "showing");
+    if (showing) {
+      this.setTextTrack(showing.id, "disabled");
+    } else {
+      const first = textTracks.find((t) => t.kind === "subtitles" || t.kind === "captions");
+      if (first) {
+        this.setTextTrack(first.id, "showing");
+      }
+    }
+  }
+  on(event, handler) {
+    this._events.on(event, handler);
+  }
+  off(event, handler) {
+    this._events.off(event, handler);
+  }
+  once(event, handler) {
+    this._events.once(event, handler);
+  }
+  subscribe(keyOrListener, listener) {
+    return this._store.subscribe(keyOrListener, listener);
+  }
+}
+var defaultOptions = {
+  autoplay: false,
+  loop: false,
+  muted: false,
+  volume: 1,
+  playbackRate: 1,
+  playsinline: true,
+  preload: "metadata",
+  controls: true,
+  keyboard: true,
+  controlsTimeout: 3000,
+  storage: true
+};
+function createPlayer(container, options) {
+  return new Player(container, options);
+}
+function getPlayer(element) {
+  return element.__videoPlayer || null;
+}
+
+// src/elements/base.ts
+var HTMLElementBase = globalThis.HTMLElement ?? class {
+};
+
+// src/elements/video-player.ts
+var OBSERVED_ATTRS = ["src", "poster", "autoplay", "loop", "muted", "controls", "volume", "playback-rate", "preload", "playsinline", "crossorigin", "controlslist", "disable-picture-in-picture"];
+
+class VideoPlayerElement extends HTMLElementBase {
+  _player = null;
+  _container = null;
+  _disconnectId = 0;
+  static get observedAttributes() {
+    return [...OBSERVED_ATTRS];
+  }
+  get player() {
+    return this._player;
+  }
+  connectedCallback() {
+    this._disconnectId++;
+    if (this._player)
+      return;
+    const shadow = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+    this._container = document.createElement("div");
+    this._container.setAttribute("part", "container");
+    this._container.style.cssText = "position:relative;width:100%;height:100%;";
+    const slot = document.createElement("slot");
+    this._container.appendChild(slot);
+    shadow.appendChild(this._container);
+    const options = this.buildOptions();
+    this._player = new Player(this._container, options);
+    this.forwardEvents();
+  }
+  disconnectedCallback() {
+    if (this.hasAttribute("keep-alive"))
+      return;
+    const disconnectId = ++this._disconnectId;
+    queueMicrotask(() => {
+      if (this.isConnected || disconnectId !== this._disconnectId)
+        return;
+      this._player?.destroy();
+      this._player = null;
+      this._container = null;
+      this.shadowRoot?.replaceChildren();
+    });
+  }
+  attributeChangedCallback(name, _old, value) {
+    if (!this._player)
+      return;
+    switch (name) {
+      case "src":
+        if (value)
+          this._player.setSrc(value);
+        break;
+      case "muted":
+        this._player.setMuted(value !== null);
+        break;
+      case "volume":
+        if (value !== null)
+          this._player.setVolume(parseFloat(value));
+        break;
+      case "playback-rate":
+        if (value !== null)
+          this._player.setPlaybackRate(parseFloat(value));
+        break;
+    }
+  }
+  buildOptions() {
+    const options = {};
+    const config = this.readSourceConfig();
+    if (config.sources?.length)
+      options.src = config.sources;
+    if (config.tracks?.length)
+      options.tracks = config.tracks;
+    const src = this.getAttribute("src");
+    if (src && !options.src)
+      options.src = config.drm ? { src, type: "application/dash+xml", drm: config.drm } : src;
+    const poster = this.getAttribute("poster");
+    if (poster)
+      options.poster = poster;
+    const title = this.getAttribute("title");
+    if (title)
+      options.title = title;
+    if (this.hasAttribute("autoplay"))
+      options.autoplay = true;
+    if (this.hasAttribute("loop"))
+      options.loop = true;
+    if (this.hasAttribute("muted"))
+      options.muted = true;
+    const volume = this.getAttribute("volume");
+    if (volume)
+      options.volume = parseFloat(volume);
+    const rate = this.getAttribute("playback-rate");
+    if (rate)
+      options.playbackRate = parseFloat(rate);
+    const preload = this.getAttribute("preload");
+    if (preload)
+      options.preload = preload;
+    if (this.hasAttribute("controls"))
+      options.controls = true;
+    options.playsinline = this.getAttribute("playsinline") !== "false";
+    const crossorigin = this.getAttribute("crossorigin");
+    if (crossorigin !== null)
+      options.crossorigin = crossorigin;
+    const controlsList = this.getAttribute("controlslist");
+    if (controlsList)
+      options.controlsList = controlsList.split(/\s+/);
+    options.disablePictureInPicture = this.hasAttribute("disable-picture-in-picture");
+    return options;
+  }
+  readSourceConfig() {
+    const script = this.querySelector('script[type="application/json"][data-media-config]');
+    const value = this.getAttribute("data-media-config")?.trim() || script?.textContent?.trim();
+    if (!value)
+      return {};
+    if (value.length > 65536)
+      throw new TypeError("Media player configuration is too large");
+    try {
+      const parsed = JSON.parse(value);
+      if (parsed.sources !== undefined && (!Array.isArray(parsed.sources) || parsed.sources.some((source) => !source || typeof source !== "object" || typeof source.src !== "string"))) {
+        throw new TypeError("Media player sources are invalid");
+      }
+      const trackKinds = new Set(["subtitles", "captions", "descriptions", "chapters", "metadata"]);
+      if (parsed.tracks !== undefined && (!Array.isArray(parsed.tracks) || parsed.tracks.some((track) => !track || typeof track !== "object" || typeof track.src !== "string" || !trackKinds.has(String(track.kind))))) {
+        throw new TypeError("Media player tracks are invalid");
+      }
+      return { sources: parsed.sources, drm: parsed.drm, tracks: parsed.tracks };
+    } catch (error) {
+      if (error instanceof TypeError)
+        throw error;
+      throw new TypeError("Media player configuration is invalid JSON");
+    }
+  }
+  forwardEvents() {
+    if (!this._player)
+      return;
+    const events = [
+      "play",
+      "pause",
+      "playing",
+      "waiting",
+      "ended",
+      "timeupdate",
+      "durationchange",
+      "volumechange",
+      "fullscreenchange",
+      "pipchange",
+      "error",
+      "loadstart",
+      "loadeddata",
+      "loadedmetadata",
+      "canplay",
+      "canplaythrough",
+      "seeking",
+      "seeked",
+      "ratechange",
+      "qualitychange",
+      "statechange",
+      "availabilitychange"
+    ];
+    for (const event of events) {
+      this._player.on(event, (...args) => {
+        this.dispatchEvent(new CustomEvent(event, {
+          detail: args.length === 1 ? args[0] : args,
+          bubbles: true,
+          composed: true
+        }));
+      });
+    }
+  }
+}
+// src/elements/utils.ts
+function formatTime(seconds, guide = 0) {
+  if (!isFinite(seconds) || isNaN(seconds))
+    return "0:00";
+  const s = Math.floor(seconds);
+  const h = Math.floor(s / 3600);
+  const m = Math.floor(s % 3600 / 60);
+  const sec = s % 60;
+  const showHours = h > 0 || guide >= 3600;
+  if (showHours) {
+    return `${h}:${m.toString().padStart(2, "0")}:${sec.toString().padStart(2, "0")}`;
+  }
+  return `${m}:${sec.toString().padStart(2, "0")}`;
+}
+function formatTimePhrase(seconds) {
+  if (!isFinite(seconds) || isNaN(seconds))
+    return "0 seconds";
+  const s = Math.floor(seconds);
+  const h = Math.floor(s / 3600);
+  const m = Math.floor(s % 3600 / 60);
+  const sec = s % 60;
+  const parts = [];
+  if (h > 0)
+    parts.push(`${h} ${h === 1 ? "hour" : "hours"}`);
+  if (m > 0)
+    parts.push(`${m} ${m === 1 ? "minute" : "minutes"}`);
+  if (sec > 0 || parts.length === 0)
+    parts.push(`${sec} ${sec === 1 ? "second" : "seconds"}`);
+  return parts.join(", ");
+}
+function toISODuration(seconds) {
+  if (!isFinite(seconds) || isNaN(seconds))
+    return "PT0S";
+  const s = Math.floor(seconds);
+  const h = Math.floor(s / 3600);
+  const m = Math.floor(s % 3600 / 60);
+  const sec = s % 60;
+  let result = "PT";
+  if (h > 0)
+    result += `${h}H`;
+  if (m > 0)
+    result += `${m}M`;
+  if (sec > 0 || result === "PT")
+    result += `${sec}S`;
+  return result;
+}
+function resolvePlayer(el) {
+  const forId = el.getAttribute("for");
+  if (forId) {
+    const target = document.getElementById(forId);
+    return target?.player ?? null;
+  }
+  const host = el.closest("video-player");
+  return host?.player ?? null;
+}
+
+// src/elements/video-skin.ts
+class VideoSkin extends HTMLElementBase {
+  _cleanups = [];
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: "open" });
+      shadow.innerHTML = `
+        <style>
+          :host {
+            display: flex;
+            flex-direction: column;
+            position: absolute;
+            inset: 0;
+            z-index: 1;
+            pointer-events: none;
+            color: white;
+            font-family: system-ui, -apple-system, sans-serif;
+            font-size: 14px;
+          }
+
+          /* Click-to-play overlay */
+          .overlay {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            pointer-events: auto;
+          }
+
+          /* Bottom controls bar */
+          .controls {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            padding: 8px 12px;
+            background: linear-gradient(transparent, rgba(0,0,0,0.7));
+            pointer-events: auto;
+            transition: opacity 0.3s, visibility 0.3s;
+          }
+
+          :host([controls-hidden]) .controls {
+            opacity: 0;
+            visibility: hidden;
+          }
+
+          /* Spacer pushes right-aligned controls */
+          .spacer {
+            flex: 1;
+          }
+
+          /* Slots for left/center/right control groups */
+          ::slotted(*) {
+            pointer-events: auto;
+          }
+        </style>
+        <div class="overlay" part="overlay">
+          <slot name="overlay"></slot>
+        </div>
+        <div class="controls" part="controls">
+          <slot name="left"></slot>
+          <slot name="center"></slot>
+          <div class="spacer"></div>
+          <slot name="right"></slot>
+          <slot></slot>
+        </div>
+      `;
+    }
+    queueMicrotask(() => this.attach());
+  }
+  disconnectedCallback() {
+    this._cleanups.forEach((fn) => fn());
+    this._cleanups = [];
+  }
+  attach() {
+    const player = resolvePlayer(this);
+    if (!player)
+      return;
+    const unsub = player.subscribe((state) => {
+      if (state.controlsVisible) {
+        this.removeAttribute("controls-hidden");
+      } else {
+        this.setAttribute("controls-hidden", "");
+      }
+      this.dataset.fullscreen = state.fullscreenAvailability;
+      this.dataset.pip = state.pipAvailability;
+      this.dataset.volume = state.volumeAvailability;
+      this.dataset.captions = String(state.textTracks.length > 0);
+      this.dataset.qualities = String(state.qualities.length > 0);
+    });
+    const overlay = this.shadowRoot.querySelector(".overlay");
+    const onOverlayClick = () => player.togglePlay();
+    overlay.addEventListener("click", onOverlayClick);
+    this._cleanups.push(unsub, () => overlay.removeEventListener("click", onOverlayClick));
+  }
+}
+// src/elements/media-play-button.ts
+var PLAY_ICON = "M8 5v14l11-7z";
+var PAUSE_ICON = "M6 19h4V5H6v14zm8-14v14h4V5h-4z";
+
+class MediaPlayButton extends HTMLElementBase {
+  _cleanup = null;
+  _onClick = null;
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: "open" });
+      shadow.innerHTML = `
+        <style>
+          :host { display: inline-flex; }
+          button {
+            display: inline-flex; align-items: center; justify-content: center;
+            width: 40px; height: 40px; padding: 8px;
+            background: transparent; border: none; color: inherit; cursor: pointer;
+          }
+          button:hover { opacity: 0.8; }
+        </style>
+        <button part="button" type="button" aria-label="Play">
+          <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
+            <path d="${PLAY_ICON}"/>
+          </svg>
+        </button>
+      `;
+    }
+    queueMicrotask(() => this.attach());
+  }
+  disconnectedCallback() {
+    const button = this.shadowRoot?.querySelector("button");
+    if (button && this._onClick)
+      button.removeEventListener("click", this._onClick);
+    this._cleanup?.();
+    this._cleanup = null;
+    this._onClick = null;
+  }
+  attach() {
+    const player = resolvePlayer(this);
+    if (!player)
+      return;
+    const btn = this.shadowRoot.querySelector("button");
+    this._onClick = () => player.togglePlay();
+    btn.addEventListener("click", this._onClick);
+    const unsub = player.subscribe("paused", (state) => {
+      const paused = state.paused;
+      btn.setAttribute("aria-label", paused ? "Play" : "Pause");
+      btn.setAttribute("aria-pressed", String(!paused));
+      const path = this.shadowRoot.querySelector("path");
+      path.setAttribute("d", paused ? PLAY_ICON : PAUSE_ICON);
+    });
+    this._cleanup = unsub;
+  }
+}
+// src/elements/media-mute-button.ts
+var ICON_MUTED = "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.51A8.796 8.796 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06a8.99 8.99 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4 9.91 6.09 12 8.18V4z";
+var ICON_LOW = "M18.5 12A4.5 4.5 0 0 0 16 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z";
+var ICON_HIGH = "M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.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";
+function getVolumeIcon(muted, volume) {
+  if (muted || volume === 0)
+    return ICON_MUTED;
+  if (volume < 0.5)
+    return ICON_LOW;
+  return ICON_HIGH;
+}
+
+class MediaMuteButton extends HTMLElementBase {
+  _cleanup = null;
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: "open" });
+      shadow.innerHTML = `
+        <style>
+          :host { display: inline-flex; }
+          button {
+            display: inline-flex; align-items: center; justify-content: center;
+            width: 40px; height: 40px; padding: 8px;
+            background: transparent; border: none; color: inherit; cursor: pointer;
+          }
+          button:hover { opacity: 0.8; }
+        </style>
+        <button part="button" type="button" aria-label="Mute">
+          <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
+            <path d="${ICON_HIGH}"/>
+          </svg>
+        </button>
+      `;
+    }
+    queueMicrotask(() => this.attach());
+  }
+  disconnectedCallback() {
+    this._cleanup?.();
+    this._cleanup = null;
+  }
+  attach() {
+    const player = resolvePlayer(this);
+    if (!player)
+      return;
+    const btn = this.shadowRoot.querySelector("button");
+    btn.addEventListener("click", () => player.toggleMute());
+    const unsub = player.subscribe((state) => {
+      const icon = getVolumeIcon(state.muted, state.volume);
+      btn.setAttribute("aria-label", state.muted ? "Unmute" : "Mute");
+      const path = this.shadowRoot.querySelector("path");
+      path.setAttribute("d", icon);
+    });
+    this._cleanup = unsub;
+  }
+}
+// src/elements/media-fullscreen-button.ts
+var ENTER_FS = "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z";
+var EXIT_FS = "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z";
+
+class MediaFullscreenButton extends HTMLElementBase {
+  _cleanup = null;
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: "open" });
+      shadow.innerHTML = `
+        <style>
+          :host { display: inline-flex; }
+          :host([hidden]) { display: none; }
+          button {
+            display: inline-flex; align-items: center; justify-content: center;
+            width: 40px; height: 40px; padding: 8px;
+            background: transparent; border: none; color: inherit; cursor: pointer;
+          }
+          button:hover { opacity: 0.8; }
+          button:disabled { opacity: 0.4; cursor: not-allowed; }
+        </style>
+        <button part="button" type="button" aria-label="Enter fullscreen">
+          <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
+            <path d="${ENTER_FS}"/>
+          </svg>
+        </button>
+      `;
+    }
+    queueMicrotask(() => this.attach());
+  }
+  disconnectedCallback() {
+    this._cleanup?.();
+    this._cleanup = null;
+  }
+  attach() {
+    const player = resolvePlayer(this);
+    if (!player)
+      return;
+    const btn = this.shadowRoot.querySelector("button");
+    btn.addEventListener("click", () => player.toggleFullscreen());
+    const unsub = player.subscribe((state) => {
+      const avail = state.fullscreenAvailability;
+      if (avail === "unsupported") {
+        this.setAttribute("hidden", "");
+      } else {
+        this.removeAttribute("hidden");
+      }
+      btn.disabled = avail !== "available";
+      const fs = state.fullscreen;
+      btn.setAttribute("aria-label", fs ? "Exit fullscreen" : "Enter fullscreen");
+      const path = this.shadowRoot.querySelector("path");
+      path.setAttribute("d", fs ? EXIT_FS : ENTER_FS);
+    });
+    this._cleanup = unsub;
+  }
+}
+// src/elements/media-pip-button.ts
+var PIP_ICON = "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";
+
+class MediaPipButton extends HTMLElementBase {
+  _cleanup = null;
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: "open" });
+      shadow.innerHTML = `
+        <style>
+          :host { display: inline-flex; }
+          :host([hidden]) { display: none; }
+          button {
+            display: inline-flex; align-items: center; justify-content: center;
+            width: 40px; height: 40px; padding: 8px;
+            background: transparent; border: none; color: inherit; cursor: pointer;
+          }
+          button:hover { opacity: 0.8; }
+          button:disabled { opacity: 0.4; cursor: not-allowed; }
+        </style>
+        <button part="button" type="button" aria-label="Picture in picture">
+          <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
+            <path d="${PIP_ICON}"/>
+          </svg>
+        </button>
+      `;
+    }
+    queueMicrotask(() => this.attach());
+  }
+  disconnectedCallback() {
+    this._cleanup?.();
+    this._cleanup = null;
+  }
+  attach() {
+    const player = resolvePlayer(this);
+    if (!player)
+      return;
+    const btn = this.shadowRoot.querySelector("button");
+    btn.addEventListener("click", () => player.togglePiP());
+    const unsub = player.subscribe((state) => {
+      const avail = state.pipAvailability;
+      if (avail === "unsupported") {
+        this.setAttribute("hidden", "");
+      } else {
+        this.removeAttribute("hidden");
+      }
+      btn.disabled = avail !== "available";
+    });
+    this._cleanup = unsub;
+  }
+}
+// src/elements/media-time-display.ts
+class MediaTimeDisplay extends HTMLElementBase {
+  _cleanup = null;
+  _showRemaining = false;
+  static get observedAttributes() {
+    return ["type"];
+  }
+  get type() {
+    return this.getAttribute("type") || "current";
+  }
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: "open" });
+      shadow.innerHTML = `
+        <style>
+          :host {
+            display: inline-flex;
+            font-size: 14px;
+            font-variant-numeric: tabular-nums;
+            user-select: none;
+            cursor: pointer;
+            color: inherit;
+          }
+          time { color: inherit; }
+          .separator { margin: 0 2px; }
+        </style>
+        <time part="time" datetime="PT0S" aria-valuetext="0 seconds">0:00</time>
+      `;
+    }
+    this.addEventListener("click", this.handleClick);
+    queueMicrotask(() => this.attach());
+  }
+  disconnectedCallback() {
+    this._cleanup?.();
+    this._cleanup = null;
+    this.removeEventListener("click", this.handleClick);
+  }
+  handleClick = () => {
+    if (this.type === "duration") {
+      this._showRemaining = !this._showRemaining;
+      const player = resolvePlayer(this);
+      if (player)
+        this.render(player.state);
+    }
+  };
+  attach() {
+    const player = resolvePlayer(this);
+    if (!player)
+      return;
+    const unsub = player.subscribe((state) => {
+      this.render(state);
+    });
+    this._cleanup = unsub;
+  }
+  render(state) {
+    const timeEl = this.shadowRoot?.querySelector("time");
+    if (!timeEl)
+      return;
+    const type = this.type;
+    let seconds;
+    if (type === "remaining" || type === "duration" && this._showRemaining) {
+      seconds = Math.max(state.duration - state.currentTime, 0);
+      const formatted = `-${formatTime(seconds, state.duration)}`;
+      timeEl.textContent = formatted;
+    } else if (type === "duration") {
+      seconds = state.duration;
+      timeEl.textContent = formatTime(seconds);
+    } else {
+      seconds = state.currentTime;
+      timeEl.textContent = formatTime(seconds, state.duration);
+    }
+    timeEl.setAttribute("datetime", toISODuration(seconds));
+    timeEl.setAttribute("aria-valuetext", formatTimePhrase(seconds));
+  }
+}
+// src/elements/media-time-group.ts
+class MediaTimeGroup extends HTMLElementBase {
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: "open" });
+      shadow.innerHTML = `
+        <style>
+          :host {
+            display: inline-flex;
+            align-items: center;
+            gap: 2px;
+            font-variant-numeric: tabular-nums;
+            font-family: inherit;
+            font-size: inherit;
+            color: inherit;
+          }
+        </style>
+        <slot></slot>
+      `;
+    }
+  }
+}
+// src/elements/media-time-separator.ts
+class MediaTimeSeparator extends HTMLElementBase {
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: "open" });
+      shadow.innerHTML = `
+        <style>
+          :host {
+            display: inline-flex;
+            align-items: center;
+            padding: 0 2px;
+            font-family: inherit;
+            font-size: inherit;
+            color: inherit;
+            opacity: 0.7;
+          }
+        </style>
+        <span aria-hidden="true" part="separator"><slot>/</slot></span>
+      `;
+    }
+    this.setAttribute("role", "separator");
+    this.setAttribute("aria-hidden", "true");
+  }
+}
+// src/elements/media-preview-time.ts
+class MediaPreviewTime extends HTMLElementBase {
+  _cleanups = [];
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: "open" });
+      shadow.innerHTML = `
+        <style>
+          :host {
+            display: inline-block;
+            font-variant-numeric: tabular-nums;
+            font-family: monospace;
+            font-size: 12px;
+            color: inherit;
+            pointer-events: none;
+          }
+        </style>
+        <span part="value">0:00</span>
+      `;
+    }
+    queueMicrotask(() => this.attach());
+  }
+  disconnectedCallback() {
+    this._cleanups.forEach((fn) => fn());
+    this._cleanups = [];
+  }
+  attach() {
+    const player = resolvePlayer(this);
+    if (!player)
+      return;
+    const progressBar = this.closest("media-progress-bar") || this.parentElement?.querySelector("media-progress-bar");
+    if (progressBar) {
+      const onPointerMove = (e) => {
+        const pe = e;
+        const track = progressBar.shadowRoot?.querySelector(".track") || progressBar;
+        const rect = track.getBoundingClientRect();
+        const percent = Math.max(0, Math.min(1, (pe.clientX - rect.left) / rect.width));
+        const time = percent * (player.state.duration || 0);
+        this.updateTime(time, player.state.duration);
+      };
+      progressBar.addEventListener("pointermove", onPointerMove);
+      this._cleanups.push(() => progressBar.removeEventListener("pointermove", onPointerMove));
+    }
+  }
+  updateTime(time, duration) {
+    const span = this.shadowRoot?.querySelector("span");
+    if (span) {
+      span.textContent = formatTime(time, duration);
+    }
+  }
+}
+// src/elements/media-progress-bar.ts
+class MediaProgressBar extends HTMLElementBase {
+  _cleanups = [];
+  _isDragging = false;
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: "open" });
+      shadow.innerHTML = `
+        <style>
+          :host { display: flex; flex: 1; align-items: center; }
+          .container {
+            position: relative; width: 100%; height: 20px;
+            cursor: pointer; touch-action: none;
+          }
+          .track {
+            position: absolute; top: 50%; left: 0; right: 0;
+            height: 4px; background: rgba(255,255,255,0.3);
+            border-radius: 2px; transform: translateY(-50%);
+          }
+          :host([waveform]) .track { height: 20px; overflow: hidden; background: rgba(255,255,255,0.16); }
+          .waveform { position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; opacity: 0.65; }
+          .buffered {
+            position: absolute; top: 0; left: 0;
+            height: 100%; background: rgba(255,255,255,0.4);
+            border-radius: 2px; width: 0%;
+          }
+          .fill {
+            position: absolute; top: 0; left: 0;
+            height: 100%; background: #fff;
+            border-radius: 2px; width: 0%;
+          }
+          .thumb {
+            position: absolute; top: 50%; left: 0%;
+            width: 12px; height: 12px; background: #fff;
+            border-radius: 50%; transform: translate(-50%, -50%);
+            transition: transform 0.1s;
+          }
+          .container:hover .thumb { transform: translate(-50%, -50%) scale(1.2); }
+          .tooltip {
+            position: absolute; bottom: 100%; left: 0;
+            transform: translateX(-50%);
+            background: rgba(0,0,0,0.85); color: #fff;
+            padding: 4px 8px; border-radius: 3px;
+            font-size: 12px; font-family: monospace;
+            white-space: nowrap; pointer-events: none;
+            opacity: 0; transition: opacity 0.15s;
+            margin-bottom: 8px;
+          }
+          .tooltip::after {
+            content: ''; position: absolute;
+            top: 100%; left: 50%; transform: translateX(-50%);
+            border: 4px solid transparent;
+            border-top-color: rgba(0,0,0,0.85);
+          }
+          .container:hover .tooltip { opacity: 1; }
+        </style>
+        <div class="container" part="container" role="slider"
+          aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"
+          aria-label="Seek" tabindex="0">
+          <div class="tooltip" part="tooltip">0:00</div>
+          <div class="track" part="track">
+            <div class="waveform" part="waveform" aria-hidden="true"></div>
+            <div class="buffered" part="buffered"></div>
+            <div class="fill" part="fill"></div>
+            <div class="thumb" part="thumb"></div>
+          </div>
+        </div>
+      `;
+    }
+    queueMicrotask(() => this.attach());
+  }
+  disconnectedCallback() {
+    this._cleanups.forEach((fn) => fn());
+    this._cleanups = [];
+  }
+  attach() {
+    const player = resolvePlayer(this);
+    if (!player)
+      return;
+    const container = this.shadowRoot.querySelector(".container");
+    const track = this.shadowRoot.querySelector(".track");
+    const fill = this.shadowRoot.querySelector(".fill");
+    const thumb = this.shadowRoot.querySelector(".thumb");
+    const buffered = this.shadowRoot.querySelector(".buffered");
+    const tooltip = this.shadowRoot.querySelector(".tooltip");
+    const waveform = this.getAttribute("waveform");
+    if (waveform) {
+      const resolved = new URL(waveform, document.baseURI);
+      if (["http:", "https:", "blob:"].includes(resolved.protocol) || resolved.href.startsWith("data:image/")) {
+        const layer = this.shadowRoot.querySelector(".waveform");
+        layer.style.backgroundImage = `url(${JSON.stringify(resolved.href)})`;
+      }
+    }
+    const updateTooltip = (e) => {
+      const rect = track.getBoundingClientRect();
+      const percent = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+      const time = percent * (player.state.duration || 0);
+      tooltip.textContent = formatTime(time, player.state.duration);
+      const containerRect = container.getBoundingClientRect();
+      const tooltipWidth = tooltip.offsetWidth;
+      const rawLeft = e.clientX - containerRect.left;
+      const minLeft = tooltipWidth / 2;
+      const maxLeft = containerRect.width - tooltipWidth / 2;
+      const clampedLeft = Math.max(minLeft, Math.min(maxLeft, rawLeft));
+      tooltip.style.left = `${clampedLeft}px`;
+    };
+    const seekFromEvent = (e) => {
+      const rect = track.getBoundingClientRect();
+      const percent = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+      const time = percent * (player.state.duration || 0);
+      player.seekTo(time);
+    };
+    const onPointerDown = (e) => {
+      this._isDragging = true;
+      container.setPointerCapture(e.pointerId);
+      seekFromEvent(e);
+    };
+    const onPointerMove = (e) => {
+      updateTooltip(e);
+      if (!this._isDragging)
+        return;
+      seekFromEvent(e);
+    };
+    const onPointerUp = (e) => {
+      if (!this._isDragging)
+        return;
+      this._isDragging = false;
+      container.releasePointerCapture(e.pointerId);
+    };
+    const onKeyDown = (e) => {
+      const step = 5;
+      let newTime = player.state.currentTime;
+      switch (e.key) {
+        case "ArrowRight":
+          newTime = Math.min(player.state.duration, newTime + step);
+          break;
+        case "ArrowLeft":
+          newTime = Math.max(0, newTime - step);
+          break;
+        case "Home":
+          newTime = 0;
+          break;
+        case "End":
+          newTime = player.state.duration;
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      player.seekTo(newTime);
+    };
+    container.addEventListener("pointerdown", onPointerDown);
+    container.addEventListener("pointermove", onPointerMove);
+    container.addEventListener("pointerup", onPointerUp);
+    container.addEventListener("keydown", onKeyDown);
+    this._cleanups.push(() => container.removeEventListener("pointerdown", onPointerDown), () => container.removeEventListener("pointermove", onPointerMove), () => container.removeEventListener("pointerup", onPointerUp), () => container.removeEventListener("keydown", onKeyDown));
+    const unsub = player.subscribe((state) => {
+      if (this._isDragging)
+        return;
+      const duration = state.duration || 0;
+      const percent = duration > 0 ? state.currentTime / duration * 100 : 0;
+      fill.style.width = `${percent}%`;
+      thumb.style.left = `${percent}%`;
+      container.setAttribute("aria-valuenow", String(Math.round(percent)));
+      container.setAttribute("aria-valuetext", `${formatTimePhrase(state.currentTime)} of ${formatTimePhrase(duration)}`);
+      const bufferedPct = (state.bufferedAmount || 0) * 100;
+      buffered.style.width = `${bufferedPct}%`;
+    });
+    this._cleanups.push(unsub);
+  }
+}
+// src/elements/media-volume-slider.ts
+class MediaVolumeSlider extends HTMLElementBase {
+  _cleanups = [];
+  _isDragging = false;
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: "open" });
+      shadow.innerHTML = `
+        <style>
+          :host { display: inline-flex; align-items: center; width: 80px; }
+          :host([hidden]) { display: none; }
+          .container {
+            position: relative; width: 100%; height: 20px;
+            cursor: pointer; touch-action: none;
+          }
+          .track {
+            position: absolute; top: 50%; left: 0; right: 0;
+            height: 4px; background: rgba(255,255,255,0.3);
+            border-radius: 2px; transform: translateY(-50%);
+          }
+          .fill {
+            position: absolute; top: 0; left: 0;
+            height: 100%; background: #fff;
+            border-radius: 2px; width: 100%;
+          }
+          .thumb {
+            position: absolute; top: 50%; left: 100%;
+            width: 12px; height: 12px; background: #fff;
+            border-radius: 50%; transform: translate(-50%, -50%);
+            transition: transform 0.1s;
+          }
+          .container:hover .thumb { transform: translate(-50%, -50%) scale(1.2); }
+        </style>
+        <div class="container" part="container" role="slider"
+          aria-valuemin="0" aria-valuemax="100" aria-valuenow="100"
+          aria-label="Volume" tabindex="0">
+          <div class="track" part="track">
+            <div class="fill" part="fill"></div>
+            <div class="thumb" part="thumb"></div>
+          </div>
+        </div>
+      `;
+    }
+    queueMicrotask(() => this.attach());
+  }
+  disconnectedCallback() {
+    this._cleanups.forEach((fn) => fn());
+    this._cleanups = [];
+  }
+  attach() {
+    const player = resolvePlayer(this);
+    if (!player)
+      return;
+    const container = this.shadowRoot.querySelector(".container");
+    const track = this.shadowRoot.querySelector(".track");
+    const fill = this.shadowRoot.querySelector(".fill");
+    const thumb = this.shadowRoot.querySelector(".thumb");
+    const setFromEvent = (e) => {
+      const rect = track.getBoundingClientRect();
+      const volume = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+      player.setVolume(volume);
+      if (volume > 0 && player.state.muted)
+        player.setMuted(false);
+    };
+    const onPointerDown = (e) => {
+      this._isDragging = true;
+      container.setPointerCapture(e.pointerId);
+      setFromEvent(e);
+    };
+    const onPointerMove = (e) => {
+      if (!this._isDragging)
+        return;
+      setFromEvent(e);
+    };
+    const onPointerUp = (e) => {
+      if (!this._isDragging)
+        return;
+      this._isDragging = false;
+      container.releasePointerCapture(e.pointerId);
+    };
+    const onKeyDown = (e) => {
+      let volume = player.state.volume;
+      const step = 0.05;
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          volume = Math.min(1, volume + step);
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          volume = Math.max(0, volume - step);
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      player.setVolume(volume);
+    };
+    container.addEventListener("pointerdown", onPointerDown);
+    container.addEventListener("pointermove", onPointerMove);
+    container.addEventListener("pointerup", onPointerUp);
+    container.addEventListener("keydown", onKeyDown);
+    this._cleanups.push(() => container.removeEventListener("pointerdown", onPointerDown), () => container.removeEventListener("pointermove", onPointerMove), () => container.removeEventListener("pointerup", onPointerUp), () => container.removeEventListener("keydown", onKeyDown));
+    const unsub = player.subscribe((state) => {
+      if (state.volumeAvailability === "unsupported") {
+        this.setAttribute("hidden", "");
+        return;
+      }
+      this.removeAttribute("hidden");
+      const vol = state.muted ? 0 : state.volume;
+      const percent = vol * 100;
+      fill.style.width = `${percent}%`;
+      thumb.style.left = `${percent}%`;
+      container.setAttribute("aria-valuenow", String(Math.round(percent)));
+    });
+    this._cleanups.push(unsub);
+  }
+}
+// src/core/popover.ts
+function computePosition(anchor, popover, options = {}) {
+  const {
+    placement = "top",
+    offset = 4,
+    boundary = null,
+    padding = 8
+  } = options;
+  const anchorRect = anchor.getBoundingClientRect();
+  const popoverRect = popover.getBoundingClientRect();
+  const boundaryRect = boundary ? boundary.getBoundingClientRect() : { top: 0, left: 0, bottom: window.innerHeight, right: window.innerWidth, width: window.innerWidth, height: window.innerHeight };
+  const availableTop = anchorRect.top - boundaryRect.top - padding;
+  const availableBottom = boundaryRect.bottom - anchorRect.bottom - padding;
+  let vertical;
+  if (placement.startsWith("top")) {
+    vertical = popoverRect.height + offset <= availableTop ? "top" : "bottom";
+  } else {
+    vertical = popoverRect.height + offset <= availableBottom ? "bottom" : "top";
+  }
+  let top;
+  if (vertical === "top") {
+    top = anchorRect.top - popoverRect.height - offset;
+  } else {
+    top = anchorRect.bottom + offset;
+  }
+  let align = "";
+  if (placement.endsWith("-start"))
+    align = "-start";
+  else if (placement.endsWith("-end"))
+    align = "-end";
+  let left;
+  switch (align) {
+    case "-start":
+      left = anchorRect.left;
+      break;
+    case "-end":
+      left = anchorRect.right - popoverRect.width;
+      break;
+    default:
+      left = anchorRect.left + (anchorRect.width - popoverRect.width) / 2;
+      break;
+  }
+  const minLeft = boundaryRect.left + padding;
+  const maxLeft = boundaryRect.right - popoverRect.width - padding;
+  left = Math.max(minLeft, Math.min(maxLeft, left));
+  const minTop = boundaryRect.top + padding;
+  const maxTop = boundaryRect.bottom - popoverRect.height - padding;
+  top = Math.max(minTop, Math.min(maxTop, top));
+  const finalPlacement = `${vertical}${align}`;
+  return { top, left, placement: finalPlacement };
+}
+function applyPosition(anchor, popover, options = {}) {
+  const prevVisibility = popover.style.visibility;
+  popover.style.visibility = "hidden";
+  popover.style.display = "block";
+  const result = computePosition(anchor, popover, options);
+  const offsetParent = popover.offsetParent;
+  if (offsetParent) {
+    const parentRect = offsetParent.getBoundingClientRect();
+    popover.style.top = `${result.top - parentRect.top}px`;
+    popover.style.left = `${result.left - parentRect.left}px`;
+  } else {
+    popover.style.top = `${result.top}px`;
+    popover.style.left = `${result.left}px`;
+  }
+  popover.style.visibility = prevVisibility;
+  return result.placement;
+}
+
+// src/elements/media-settings-menu.ts
+var GEAR_ICON = "M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.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.58a.49.49 0 0 0-.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";
+var SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+
+class MediaSettingsMenu extends HTMLElementBase {
+  _cleanup = null;
+  _isOpen = false;
+  _currentPanel = "main";
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: "open" });
+      shadow.innerHTML = `
+        <style>
+          :host { display: inline-flex; position: relative; }
+          button.trigger {
+            display: inline-flex; align-items: center; justify-content: center;
+            width: 40px; height: 40px; padding: 8px;
+            background: transparent; border: none; color: inherit; cursor: pointer;
+          }
+          button.trigger:hover { opacity: 0.8; }
+          .menu {
+            position: fixed; z-index: 9999;
+            min-width: 160px; max-height: 250px; overflow-y: auto;
+            background: rgba(28,28,28,0.95); border-radius: 4px;
+            padding: 4px 0; opacity: 0; visibility: hidden;
+            transform: translateY(4px);
+            transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
+          }
+          :host([open]) .menu {
+            opacity: 1; visibility: visible; transform: translateY(0);
+          }
+          .item {
+            display: flex; align-items: center; gap: 8px;
+            width: 100%; padding: 8px 16px;
+            background: none; border: none; color: white;
+            text-align: left; cursor: pointer; font-size: 14px;
+          }
+          .item:hover { background: rgba(255,255,255,0.1); }
+          .item[aria-checked="true"]::before { content: '\\2713'; }
+          .item[aria-checked="false"]::before { content: ''; min-width: 12px; display: inline-block; }
+          .back { font-weight: bold; border-bottom: 1px solid rgba(255,255,255,0.2); }
+        </style>
+        <button class="trigger" part="trigger" type="button"
+                aria-label="Settings" aria-haspopup="true" aria-expanded="false">
+          <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
+            <path d="${GEAR_ICON}"/>
+          </svg>
+        </button>
+        <div class="menu" part="menu" role="menu" aria-hidden="true"></div>
+      `;
+    }
+    const trigger = this.shadowRoot.querySelector(".trigger");
+    this._onTriggerClick = () => this.toggle();
+    trigger.addEventListener("click", this._onTriggerClick);
+    this._onDocClick = (e) => {
+      if (this._isOpen && !this.contains(e.target))
+        this.close();
+    };
+    document.addEventListener("click", this._onDocClick);
+    this._onDocKeydown = (e) => {
+      if (e.key === "Escape" && this._isOpen)
+        this.close();
+    };
+    document.addEventListener("keydown", this._onDocKeydown);
+    queueMicrotask(() => this.attach());
+  }
+  _onTriggerClick = null;
+  _onDocClick = null;
+  _onDocKeydown = null;
+  disconnectedCallback() {
+    this._cleanup?.();
+    this._cleanup = null;
+    if (this._onTriggerClick) {
+      this.shadowRoot?.querySelector(".trigger")?.removeEventListener("click", this._onTriggerClick);
+    }
+    if (this._onDocClick)
+      document.removeEventListener("click", this._onDocClick);
+    if (this._onDocKeydown)
+      document.removeEventListener("keydown", this._onDocKeydown);
+  }
+  toggle() {
+    if (this._isOpen)
+      this.close();
+    else
+      this.open();
+  }
+  open() {
+    this._isOpen = true;
+    this._currentPanel = "main";
+    this.setAttribute("open", "");
+    this.shadowRoot.querySelector(".trigger").setAttribute("aria-expanded", "true");
+    this.shadowRoot.querySelector(".menu").setAttribute("aria-hidden", "false");
+    this.renderPanel();
+    this.positionMenu();
+  }
+  close() {
+    this._isOpen = false;
+    this.removeAttribute("open");
+    this.shadowRoot.querySelector(".trigger").setAttribute("aria-expanded", "false");
+    this.shadowRoot.querySelector(".menu").setAttribute("aria-hidden", "true");
+  }
+  positionMenu() {
+    const trigger = this.shadowRoot.querySelector(".trigger");
+    const menu = this.shadowRoot.querySelector(".menu");
+    if (!trigger || !menu)
+      return;
+    const playerEl = this.closest("video-player, .ts-video-player");
+    const result = computePosition(trigger, menu, {
+      placement: "top-end",
+      offset: 4,
+      boundary: playerEl,
+      padding: 8
+    });
+    menu.style.top = `${result.top}px`;
+    menu.style.left = `${result.left}px`;
+  }
+  attach() {
+    const player = resolvePlayer(this);
+    if (!player)
+      return;
+    const unsub = player.subscribe(() => {
+      if (this._isOpen)
+        this.renderPanel();
+    });
+    this._cleanup = unsub;
+  }
+  renderPanel() {
+    const player = resolvePlayer(this);
+    if (!player)
+      return;
+    const menu = this.shadowRoot.querySelector(".menu");
+    menu.innerHTML = "";
+    switch (this._currentPanel) {
+      case "main":
+        this.renderMain(menu, player);
+        break;
+      case "speed":
+        this.renderSpeed(menu, player);
+        break;
+      case "quality":
+        this.renderQuality(menu, player);
+        break;
+      case "captions":
+        this.renderCaptions(menu, player);
+        break;
+      case "audio":
+        this.renderAudio(menu, player);
+        break;
+    }
+    if (this._isOpen) {
+      queueMicrotask(() => this.positionMenu());
+    }
+  }
+  renderMain(menu, player) {
+    const state = player.state;
+    this.addItem(menu, `Speed: ${state.playbackRate}x`, () => {
+      this._currentPanel = "speed";
+      this.renderPanel();
+    });
+    if (state.qualities.length > 0) {
+      const current = state.qualities.find((q) => q.selected);
+      const label = state.autoQuality ? "Auto" : current ? `${current.height}p` : "Auto";
+      this.addItem(menu, `Quality: ${label}`, () => {
+        this._currentPanel = "quality";
+        this.renderPanel();
+      });
+    }
+    if (state.textTracks.length > 0) {
+      const showing = state.textTracks.find((t) => t.mode === "showing");
+      this.addItem(menu, `Captions: ${showing?.label || "Off"}`, () => {
+        this._currentPanel = "captions";
+        this.renderPanel();
+      });
+    }
+    if (state.audioTracks.length > 1) {
+      const selected = state.audioTracks.find((track) => track.selected);
+      this.addItem(menu, `Audio: ${selected?.label || "Default"}`, () => {
+        this._currentPanel = "audio";
+        this.renderPanel();
+      });
+    }
+  }
+  renderSpeed(menu, player) {
+    this.addItem(menu, "Back", () => {
+      this._currentPanel = "main";
+      this.renderPanel();
+    }, false, true);
+    for (const speed of SPEEDS) {
+      const checked = player.state.playbackRate === speed;
+      this.addItem(menu, `${speed}x`, () => {
+        player.setPlaybackRate(speed);
+        this.close();
+      }, checked);
+    }
+  }
+  renderQuality(menu, player) {
+    this.addItem(menu, "Back", () => {
+      this._currentPanel = "main";
+      this.renderPanel();
+    }, false, true);
+    this.addItem(menu, "Auto", () => {
+      player.setQuality("auto");
+      this.close();
+    }, player.state.autoQuality);
+    for (const q of player.state.qualities) {
+      this.addItem(menu, `${q.height}p`, () => {
+        player.setQuality(q);
+        this.close();
+      }, q.selected && !player.state.autoQuality);
+    }
+  }
+  renderCaptions(menu, player) {
+    this.addItem(menu, "Back", () => {
+      this._currentPanel = "main";
+      this.renderPanel();
+    }, false, true);
+    const anyShowing = player.state.textTracks.some((t) => t.mode === "showing");
+    this.addItem(menu, "Off", () => {
+      for (const t of player.state.textTracks) {
+        if (t.mode === "showing")
+          player.setTextTrack(t.id, "disabled");
+      }
+      this.close();
+    }, !anyShowing);
+    for (const track of player.state.textTracks) {
+      if (track.kind === "subtitles" || track.kind === "captions") {
+        this.addItem(menu, track.label, () => {
+          player.setTextTrack(track.id, "showing");
+          this.close();
+        }, track.mode === "showing");
+      }
+    }
+  }
+  renderAudio(menu, player) {
+    this.addItem(menu, "Back", () => {
+      this._currentPanel = "main";
+      this.renderPanel();
+    }, false, true);
+    for (const track of player.state.audioTracks) {
+      this.addItem(menu, track.label || track.language || "Audio track", () => {
+        player.setAudioTrack(track.id);
+        this.close();
+      }, track.selected);
+    }
+  }
+  addItem(menu, label, onClick, checked = false, isBack = false) {
+    const btn = document.createElement("button");
+    btn.className = `item${isBack ? " back" : ""}`;
+    btn.setAttribute("role", "menuitem");
+    if (!isBack)
+      btn.setAttribute("aria-checked", String(checked));
+    btn.textContent = label;
+    btn.addEventListener("click", onClick);
+    menu.appendChild(btn);
+  }
+}
+// src/elements/media-seek-button.ts
+class MediaSeekButton extends HTMLElementBase {
+  cleanup = null;
+  onClick = null;
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: "open" });
+      shadow.innerHTML = `
+        <style>
+          :host { display: inline-flex; }
+          button { min-width: 40px; height: 40px; padding: 0 8px; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; }
+          button:hover { opacity: .8; }
+          button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
+          button:disabled { cursor: default; opacity: .45; }
+        </style>
+        <button part="button" type="button"></button>
+      `;
+    }
+    queueMicrotask(() => this.attach());
+  }
+  disconnectedCallback() {
+    const button = this.shadowRoot?.querySelector("button");
+    if (button && this.onClick)
+      button.removeEventListener("click", this.onClick);
+    this.cleanup?.();
+    this.cleanup = null;
+    this.onClick = null;
+  }
+  attach() {
+    const player = resolvePlayer(this);
+    const button = this.shadowRoot?.querySelector("button");
+    if (!player || !button)
+      return;
+    const seconds = Number.parseFloat(this.getAttribute("seconds") ?? "10");
+    const offset = Number.isFinite(seconds) && seconds !== 0 ? seconds : 10;
+    const label = offset > 0 ? `Forward ${offset} seconds` : `Back ${Math.abs(offset)} seconds`;
+    button.textContent = offset > 0 ? `+${offset}` : String(offset);
+    button.setAttribute("aria-label", label);
+    this.onClick = () => player.seekBy(offset);
+    button.addEventListener("click", this.onClick);
+    this.cleanup = player.subscribe((state) => {
+      button.disabled = offset < 0 ? state.currentTime <= 0 : state.duration > 0 && state.currentTime >= state.duration;
+    });
+  }
+}
+// src/elements/media-playback-rate-button.ts
+var defaultRates = [0.5, 0.75, 1, 1.25, 1.5, 2];
+
+class MediaPlaybackRateButton extends HTMLElementBase {
+  cleanup = null;
+  onClick = null;
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: "open" });
+      shadow.innerHTML = `
+        <style>
+          :host { display: inline-flex; }
+          button { min-width: 42px; height: 40px; padding: 0 8px; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; font-variant-numeric: tabular-nums; }
+          button:hover { opacity: .8; }
+          button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
+        </style>
+        <button part="button" type="button" aria-label="Playback speed"></button>
+      `;
+    }
+    queueMicrotask(() => this.attach());
+  }
+  disconnectedCallback() {
+    const button = this.shadowRoot?.querySelector("button");
+    if (button && this.onClick)
+      button.removeEventListener("click", this.onClick);
+    this.cleanup?.();
+    this.cleanup = null;
+    this.onClick = null;
+  }
+  getRates() {
+    const rates = (this.getAttribute("rates") ?? "").split(",").map((value) => Number.parseFloat(value.trim())).filter((value) => Number.isFinite(value) && value >= 0.25 && value <= 4);
+    return [...new Set(rates.length > 0 ? rates : defaultRates)].sort((a, b) => a - b);
+  }
+  attach() {
+    const player = resolvePlayer(this);
+    const button = this.shadowRoot?.querySelector("button");
+    if (!player || !button)
+      return;
+    const rates = this.getRates();
+    this.onClick = () => {
+      const currentIndex = rates.findIndex((rate) => rate > player.state.playbackRate + 0.001);
+      player.setPlaybackRate(rates[currentIndex < 0 ? 0 : currentIndex]);
+    };
+    button.addEventListener("click", this.onClick);
+    this.cleanup = player.subscribe("playbackRate", (state) => {
+      button.textContent = `${state.playbackRate}x`;
+      button.setAttribute("aria-label", `Playback speed ${state.playbackRate}x`);
+    });
+  }
+}
+// src/elements/media-airplay-button.ts
+var AIRPLAY_ICON = "M6.2 19h11.6L12 13.2 6.2 19zM19 3H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h2v-2H5V5h14v10h-2v2h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z";
+
+class MediaAirplayButton extends HTMLElementBase {
+  cleanup = null;
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: "open" });
+      shadow.innerHTML = `
+        <style>
+          :host { display: none; }
+          :host([available]) { display: inline-flex; }
+          button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; background: transparent; border: 0; color: inherit; cursor: pointer; }
+          button:hover { opacity: 0.8; }
+          :host([connected]) button { color: var(--media-airplay-active-color, #38bdf8); }
+        </style>
+        <button part="button" type="button" aria-label="Play on AirPlay">
+          <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon"><path d="${AIRPLAY_ICON}"/></svg>
+        </button>
+      `;
+    }
+    queueMicrotask(() => this.attach());
+  }
+  disconnectedCallback() {
+    this.cleanup?.();
+    this.cleanup = null;
+  }
+  attach() {
+    const player = resolvePlayer(this);
+    const button = this.shadowRoot?.querySelector("button");
+    if (!player || !button)
+      return;
+    let video = null;
+    const availability = () => update();
+    const update = () => {
+      const media = player.provider?.mediaElement;
+      const nextVideo = media instanceof HTMLVideoElement ? media : null;
+      if (nextVideo !== video) {
+        video?.removeEventListener("webkitplaybacktargetavailabilitychanged", availability);
+        video?.removeEventListener("webkitcurrentplaybacktargetiswirelesschanged", availability);
+        nextVideo?.addEventListener("webkitplaybacktargetavailabilitychanged", availability);
+        nextVideo?.addEventListener("webkitcurrentplaybacktargetiswirelesschanged", availability);
+        video = nextVideo;
+      }
+      const available = typeof video?.webkitShowPlaybackTargetPicker === "function";
+      this.toggleAttribute("available", available);
+      this.toggleAttribute("connected", video?.webkitCurrentPlaybackTargetIsWireless === true);
+      button.setAttribute("aria-pressed", String(video?.webkitCurrentPlaybackTargetIsWireless === true));
+    };
+    const click = () => video?.webkitShowPlaybackTargetPicker?.();
+    button.addEventListener("click", click);
+    const unsubscribe = player.subscribe(update);
+    update();
+    this.cleanup = () => {
+      unsubscribe();
+      button.removeEventListener("click", click);
+      video?.removeEventListener("webkitplaybacktargetavailabilitychanged", availability);
+      video?.removeEventListener("webkitcurrentplaybacktargetiswirelesschanged", availability);
+    };
+  }
+}
+// src/elements/media-live-button.ts
+class MediaLiveButton extends HTMLElementBase {
+  cleanup = null;
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: "open" });
+      shadow.innerHTML = `
+        <style>
+          :host { display: none; }
+          :host([available]) { display: inline-flex; }
+          button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px; background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
+          i { width: 8px; height: 8px; border-radius: 9999px; background: #ef4444; }
+          :host(:not([at-live-edge])) button { opacity: 0.72; }
+        </style>
+        <button part="button" type="button" aria-label="Go to live edge"><i aria-hidden="true"></i><span>LIVE</span></button>
+      `;
+    }
+    queueMicrotask(() => this.attach());
+  }
+  disconnectedCallback() {
+    this.cleanup?.();
+    this.cleanup = null;
+  }
+  attach() {
+    const player = resolvePlayer(this);
+    const button = this.shadowRoot?.querySelector("button");
+    if (!player || !button)
+      return;
+    const threshold = Math.max(0, Number(this.getAttribute("threshold") || 10));
+    const update = () => {
+      const state = player.state;
+      const end = state.seekable.at(-1)?.end;
+      const providerLive = player.provider?.isLive === true;
+      const available = end !== undefined && (providerLive || !Number.isFinite(state.duration));
+      const atLiveEdge = available && end - state.currentTime <= threshold;
+      this.toggleAttribute("available", available);
+      this.toggleAttribute("at-live-edge", atLiveEdge);
+      button.setAttribute("aria-pressed", String(atLiveEdge));
+    };
+    const click = () => {
+      const end = player.state.seekable.at(-1)?.end;
+      if (end !== undefined) {
+        player.seekTo(end);
+        player.play();
+      }
+    };
+    button.addEventListener("click", click);
+    const unsubscribe = player.subscribe(update);
+    update();
+    this.cleanup = () => {
+      unsubscribe();
+      button.removeEventListener("click", click);
+    };
+  }
+}
+// src/elements/media-error-display.ts
+class MediaErrorDisplay extends HTMLElementBase {
+  cleanup = null;
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: "open" });
+      shadow.innerHTML = `
+        <style>
+          :host { display: none; position: absolute; inset: 0; z-index: 5; place-items: center; padding: 24px; background: rgba(0, 0, 0, 0.76); color: white; text-align: center; }
+          :host([open]) { display: grid; }
+          p { max-width: 42rem; margin: 0; font: 500 14px/1.5 system-ui, sans-serif; }
+        </style>
+        <p part="message" role="alert" aria-live="assertive"></p>
+      `;
+    }
+    queueMicrotask(() => this.attach());
+  }
+  disconnectedCallback() {
+    this.cleanup?.();
+    this.cleanup = null;
+  }
+  attach() {
+    const player = resolvePlayer(this);
+    const message = this.shadowRoot?.querySelector("p");
+    if (!player || !message)
+      return;
+    const update = () => {
+      const error = player.state.error;
+      this.toggleAttribute("open", !!error);
+      message.textContent = error?.message || "";
+      if (error?.code !== undefined)
+        this.setAttribute("data-code", String(error.code));
+      else
+        this.removeAttribute("data-code");
+    };
+    this.cleanup = player.subscribe(update);
+    update();
+  }
+}
+// src/elements/media-remote-playback-button.ts
+var REMOTE_ICON = "M1 18v3h3a3 3 0 0 0-3-3zm0-4v2a5 5 0 0 1 5 5h2a7 7 0 0 0-7-7zm0-4v2c5 0 9 4 9 9h2c0-6.1-4.9-11-11-11zm18-7H5a2 2 0 0 0-2 2v3h2V5h14v10h-5v2h5a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z";
+
+class MediaRemotePlaybackButton extends HTMLElementBase {
+  cleanup = null;
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: "open" });
+      shadow.innerHTML = `
+        <style>
+          :host { display: none; }
+          :host([available]) { display: inline-flex; }
+          button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; background: transparent; border: 0; color: inherit; cursor: pointer; }
+          button:hover { opacity: 0.8; }
+          :host([connected]) button { color: var(--media-remote-active-color, #38bdf8); }
+        </style>
+        <button part="button" type="button" aria-label="Play on another device">
+          <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon"><path d="${REMOTE_ICON}"/></svg>
+        </button>
+      `;
+    }
+    queueMicrotask(() => this.attach());
+  }
+  disconnectedCallback() {
+    this.cleanup?.();
+    this.cleanup = null;
+  }
+  attach() {
+    const player = resolvePlayer(this);
+    const button = this.shadowRoot?.querySelector("button");
+    if (!player || !button)
+      return;
+    let remote = null;
+    let watchId = null;
+    let generation = 0;
+    const stateChanged = () => {
+      const connected = remote?.state === "connected";
+      this.toggleAttribute("connected", connected);
+      button.setAttribute("aria-pressed", String(connected));
+    };
+    const detachRemote = () => {
+      generation++;
+      remote?.removeEventListener("connecting", stateChanged);
+      remote?.removeEventListener("connect", stateChanged);
+      remote?.removeEventListener("disconnect", stateChanged);
+      if (remote && watchId !== null)
+        remote.cancelWatchAvailability(watchId).catch(() => {});
+      remote = null;
+      watchId = null;
+      this.removeAttribute("available");
+      this.removeAttribute("connected");
+    };
+    const update = () => {
+      const media = player.provider?.mediaElement;
+      const nextRemote = media instanceof HTMLMediaElement ? media.remote ?? null : null;
+      if (nextRemote === remote)
+        return;
+      detachRemote();
+      if (!nextRemote)
+        return;
+      remote = nextRemote;
+      const currentGeneration = generation;
+      remote.addEventListener("connecting", stateChanged);
+      remote.addEventListener("connect", stateChanged);
+      remote.addEventListener("disconnect", stateChanged);
+      stateChanged();
+      remote.watchAvailability((available) => {
+        if (generation === currentGeneration && remote === nextRemote)
+          this.toggleAttribute("available", available);
+      }).then((id) => {
+        if (generation === currentGeneration && remote === nextRemote)
+          watchId = id;
+        else
+          nextRemote.cancelWatchAvailability(id).catch(() => {});
+      }).catch(() => this.removeAttribute("available"));
+    };
+    const click = () => {
+      remote?.prompt().catch(() => {});
+    };
+    button.addEventListener("click", click);
+    const unsubscribe = player.subscribe(update);
+    update();
+    this.cleanup = () => {
+      unsubscribe();
+      button.removeEventListener("click", click);
+      detachRemote();
+    };
+  }
+}
+// src/elements/index.ts
+var elements = [
+  ["video-player", VideoPlayerElement],
+  ["video-skin", VideoSkin],
+  ["media-play-button", MediaPlayButton],
+  ["media-mute-button", MediaMuteButton],
+  ["media-fullscreen-button", MediaFullscreenButton],
+  ["media-pip-button", MediaPipButton],
+  ["media-time-display", MediaTimeDisplay],
+  ["media-time-group", MediaTimeGroup],
+  ["media-time-separator", MediaTimeSeparator],
+  ["media-preview-time", MediaPreviewTime],
+  ["media-progress-bar", MediaProgressBar],
+  ["media-volume-slider", MediaVolumeSlider],
+  ["media-settings-menu", MediaSettingsMenu],
+  ["media-seek-button", MediaSeekButton],
+  ["media-playback-rate-button", MediaPlaybackRateButton],
+  ["media-airplay-button", MediaAirplayButton],
+  ["media-live-button", MediaLiveButton],
+  ["media-error-display", MediaErrorDisplay],
+  ["media-remote-playback-button", MediaRemotePlaybackButton]
+];
+function registerElements() {
+  for (const [name, ctor] of elements) {
+    if (!customElements.get(name)) {
+      customElements.define(name, ctor);
+    }
+  }
+}
+
+export { isMediaSessionSupported, createMediaSession, updateMetadata, isOrientationLockSupported, lockOrientation, unlockOrientation, BaseProvider, isHTML5Source, HTML5Provider, html5Loader, extractYouTubeId, isYouTubeSource, YouTubeProvider, youtubeLoader, extractVimeoId, extractVimeoHash, isVimeoSource, VimeoProvider, vimeoLoader, isHLSSource, isNativeHLSSupported, HLSProvider, hlsLoader, isDASHSource, DASHProvider, dashLoader, defaultLoaders, findLoader, detectMediaType, getPreconnectHints, Player, createPlayer, getPlayer, VideoPlayerElement, formatTime, formatTimePhrase, toISODuration, resolvePlayer, VideoSkin, MediaPlayButton, MediaMuteButton, MediaFullscreenButton, MediaPipButton, MediaTimeDisplay, MediaTimeGroup, MediaTimeSeparator, MediaPreviewTime, MediaProgressBar, MediaVolumeSlider, computePosition, applyPosition, MediaSettingsMenu, MediaSeekButton, MediaPlaybackRateButton, MediaAirplayButton, MediaLiveButton, MediaErrorDisplay, MediaRemotePlaybackButton, registerElements };
+
+//# debugId=BE17C381D5DC647964756E2164756E21