@hanifhan1f/vidstack 1.12.25 → 1.12.27

package/prod/chunks/vidstack-CLTPjjXX.js

@@ -0,0 +1,4772 @@
+import { EventsTarget, DOMEvent, fscreen, ViewController, EventsController, onDispose, signal, listenEvent, peek, isString, State, tick, Component, functionThrottle, effect, untrack, functionDebounce, isArray, isKeyboardClick, isKeyboardEvent, waitIdlePeriod, deferredPromise, isUndefined, isNumber, prop, method, provideContext, setAttribute, animationFrameThrottle, uppercaseFirstChar, camelToKebabCase, setStyle, computed, scoped, noop } from './vidstack-BNpgCJJ1.js';
+import { mediaContext, useMediaContext } from './vidstack-tt3O1zL6.js';
+import { canOrientScreen, IS_IPHONE, isAudioSrc, canPlayAudioType, isVideoSrc, canPlayVideoType, isHLSSupported, isHLSSrc, isDASHSupported, isDASHSrc, IS_CHROME, IS_IOS, canGoogleCastSrc, canChangeVolume } from './vidstack-wTTCvdqe.js';
+import { TimeRange, getTimeRangesEnd, getTimeRangesStart, updateTimeIntervals } from './vidstack-Fem0yF3c.js';
+import { isTrackCaptionKind, TextTrackSymbol, TextTrack } from './vidstack-sP7TQMB1.js';
+import { ListSymbol } from './vidstack-D5EzK014.js';
+import { QualitySymbol } from './vidstack-B01xzxC4.js';
+import { isHTMLElement, isTouchPinchEvent, prefersReducedMotion, setAttributeIfEmpty } from './vidstack-DB9WDRL5.js';
+import { coerceToError } from './vidstack-C9vIqaYT.js';
+import { preconnect, getRequestCredentials } from './vidstack-KShKSmYu.js';
+import { clampNumber } from './vidstack-Dihypf8P.js';
+import { FocusVisibleController } from './vidstack-COLU-zPZ.js';
+
+class List extends EventsTarget {
+  items = [];
+  /** @internal */
+  [ListSymbol.readonly] = false;
+  get length() {
+    return this.items.length;
+  }
+  get readonly() {
+    return this[ListSymbol.readonly];
+  }
+  /**
+   * Returns the index of the first occurrence of the given item, or -1 if it is not present.
+   */
+  indexOf(item) {
+    return this.items.indexOf(item);
+  }
+  /**
+   * Returns an item matching the given `id`, or `null` if not present.
+   */
+  getById(id) {
+    if (id === "") return null;
+    return this.items.find((item) => item.id === id) ?? null;
+  }
+  /**
+   * Transform list to an array.
+   */
+  toArray() {
+    return [...this.items];
+  }
+  [Symbol.iterator]() {
+    return this.items.values();
+  }
+  /** @internal */
+  [ListSymbol.add](item, trigger) {
+    const index = this.items.length;
+    if (!("" + index in this)) {
+      Object.defineProperty(this, index, {
+        get() {
+          return this.items[index];
+        }
+      });
+    }
+    if (this.items.includes(item)) return;
+    this.items.push(item);
+    this.dispatchEvent(new DOMEvent("add", { detail: item, trigger }));
+  }
+  /** @internal */
+  [ListSymbol.remove](item, trigger) {
+    const index = this.items.indexOf(item);
+    if (index >= 0) {
+      this[ListSymbol.onRemove]?.(item, trigger);
+      this.items.splice(index, 1);
+      this.dispatchEvent(new DOMEvent("remove", { detail: item, trigger }));
+    }
+  }
+  /** @internal */
+  [ListSymbol.reset](trigger) {
+    for (const item of [...this.items]) this[ListSymbol.remove](item, trigger);
+    this.items = [];
+    this[ListSymbol.setReadonly](false, trigger);
+    this[ListSymbol.onReset]?.();
+  }
+  /** @internal */
+  [ListSymbol.setReadonly](readonly, trigger) {
+    if (this[ListSymbol.readonly] === readonly) return;
+    this[ListSymbol.readonly] = readonly;
+    this.dispatchEvent(new DOMEvent("readonly-change", { detail: readonly, trigger }));
+  }
+}
+
+const CAN_FULLSCREEN = fscreen.fullscreenEnabled;
+class FullscreenController extends ViewController {
+  /**
+   * Tracks whether we're the active fullscreen event listener. Fullscreen events can only be
+   * listened to globally on the document so we need to know if they relate to the current host
+   * element or not.
+   */
+  #listening = false;
+  #active = false;
+  get active() {
+    return this.#active;
+  }
+  get supported() {
+    return CAN_FULLSCREEN;
+  }
+  onConnect() {
+    new EventsController(fscreen).add("fullscreenchange", this.#onChange.bind(this)).add("fullscreenerror", this.#onError.bind(this));
+    onDispose(this.#onDisconnect.bind(this));
+  }
+  async #onDisconnect() {
+    if (CAN_FULLSCREEN) await this.exit();
+  }
+  #onChange(event) {
+    const active = isFullscreen(this.el);
+    if (active === this.#active) return;
+    if (!active) this.#listening = false;
+    this.#active = active;
+    this.dispatch("fullscreen-change", { detail: active, trigger: event });
+  }
+  #onError(event) {
+    if (!this.#listening) return;
+    this.dispatch("fullscreen-error", { detail: null, trigger: event });
+    this.#listening = false;
+  }
+  async enter() {
+    try {
+      this.#listening = true;
+      if (!this.el || isFullscreen(this.el)) return;
+      assertFullscreenAPI();
+      return fscreen.requestFullscreen(this.el);
+    } catch (error) {
+      this.#listening = false;
+      throw error;
+    }
+  }
+  async exit() {
+    if (!this.el || !isFullscreen(this.el)) return;
+    assertFullscreenAPI();
+    return fscreen.exitFullscreen();
+  }
+}
+function canFullscreen() {
+  return CAN_FULLSCREEN;
+}
+function isFullscreen(host) {
+  if (fscreen.fullscreenElement === host) return true;
+  try {
+    return host.matches(
+      // @ts-expect-error - `fullscreenPseudoClass` is missing from `@types/fscreen`.
+      fscreen.fullscreenPseudoClass
+    );
+  } catch (error) {
+    return false;
+  }
+}
+function assertFullscreenAPI() {
+  if (CAN_FULLSCREEN) return;
+  throw Error(
+    "[vidstack] no fullscreen API"
+  );
+}
+
+class ScreenOrientationController extends ViewController {
+  #type = signal(this.#getScreenOrientation());
+  #locked = signal(false);
+  #currentLock;
+  /**
+   * The current screen orientation type.
+   *
+   * @signal
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation}
+   * @see https://w3c.github.io/screen-orientation/#screen-orientation-types-and-locks
+   */
+  get type() {
+    return this.#type();
+  }
+  /**
+   * Whether the screen orientation is currently locked.
+   *
+   * @signal
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation}
+   * @see https://w3c.github.io/screen-orientation/#screen-orientation-types-and-locks
+   */
+  get locked() {
+    return this.#locked();
+  }
+  /**
+   * Whether the viewport is in a portrait orientation.
+   *
+   * @signal
+   */
+  get portrait() {
+    return this.#type().startsWith("portrait");
+  }
+  /**
+   * Whether the viewport is in a landscape orientation.
+   *
+   * @signal
+   */
+  get landscape() {
+    return this.#type().startsWith("landscape");
+  }
+  /**
+   * Whether the native Screen Orientation API is available.
+   */
+  static supported = canOrientScreen();
+  /**
+   * Whether the native Screen Orientation API is available.
+   */
+  get supported() {
+    return ScreenOrientationController.supported;
+  }
+  onConnect() {
+    if (this.supported) {
+      listenEvent(screen.orientation, "change", this.#onOrientationChange.bind(this));
+    } else {
+      const query = window.matchMedia("(orientation: landscape)");
+      query.onchange = this.#onOrientationChange.bind(this);
+      onDispose(() => query.onchange = null);
+    }
+    onDispose(this.#onDisconnect.bind(this));
+  }
+  async #onDisconnect() {
+    if (this.supported && this.#locked()) await this.unlock();
+  }
+  #onOrientationChange(event) {
+    this.#type.set(this.#getScreenOrientation());
+    this.dispatch("orientation-change", {
+      detail: {
+        orientation: peek(this.#type),
+        lock: this.#currentLock
+      },
+      trigger: event
+    });
+  }
+  /**
+   * Locks the orientation of the screen to the desired orientation type using the
+   * Screen Orientation API.
+   *
+   * @param lockType - The screen lock orientation type.
+   * @throws Error - If screen orientation API is unavailable.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation}
+   * @see {@link https://w3c.github.io/screen-orientation}
+   */
+  async lock(lockType) {
+    if (peek(this.#locked) || this.#currentLock === lockType) return;
+    this.#assertScreenOrientationAPI();
+    await screen.orientation.lock(lockType);
+    this.#locked.set(true);
+    this.#currentLock = lockType;
+  }
+  /**
+   * Unlocks the orientation of the screen to it's default state using the Screen Orientation
+   * API. This method will throw an error if the API is unavailable.
+   *
+   * @throws Error - If screen orientation API is unavailable.
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation}
+   * @see {@link https://w3c.github.io/screen-orientation}
+   */
+  async unlock() {
+    if (!peek(this.#locked)) return;
+    this.#assertScreenOrientationAPI();
+    this.#currentLock = void 0;
+    await screen.orientation.unlock();
+    this.#locked.set(false);
+  }
+  #assertScreenOrientationAPI() {
+    if (this.supported) return;
+    throw Error(
+      "[vidstack] no orientation API"
+    );
+  }
+  #getScreenOrientation() {
+    if (this.supported) return window.screen.orientation.type;
+    return window.innerWidth >= window.innerHeight ? "landscape-primary" : "portrait-primary";
+  }
+}
+
+function isVideoQualitySrc(src) {
+  return !isString(src) && ("height" in src || "label" in src);
+}
+
+const mediaState = new State({
+  artist: "",
+  artwork: null,
+  audioTrack: null,
+  audioTracks: [],
+  autoPlay: false,
+  autoPlayError: null,
+  audioGain: null,
+  buffered: new TimeRange(),
+  canLoad: false,
+  canLoadPoster: false,
+  canFullscreen: false,
+  canOrientScreen: canOrientScreen(),
+  canPictureInPicture: false,
+  canPlay: false,
+  clipStartTime: 0,
+  clipEndTime: 0,
+  controls: false,
+  get iOSControls() {
+    return IS_IPHONE && this.mediaType === "video" && (!this.playsInline || !fscreen.fullscreenEnabled && this.fullscreen);
+  },
+  get nativeControls() {
+    return this.controls || this.iOSControls;
+  },
+  controlsVisible: false,
+  get controlsHidden() {
+    return !this.controlsVisible;
+  },
+  crossOrigin: null,
+  ended: false,
+  error: null,
+  fullscreen: false,
+  get loop() {
+    return this.providedLoop || this.userPrefersLoop;
+  },
+  logLevel: "silent",
+  mediaType: "unknown",
+  muted: false,
+  paused: true,
+  played: new TimeRange(),
+  playing: false,
+  playsInline: false,
+  pictureInPicture: false,
+  preload: "metadata",
+  playbackRate: 1,
+  qualities: [],
+  quality: null,
+  autoQuality: false,
+  canSetQuality: true,
+  canSetPlaybackRate: true,
+  canSetVolume: false,
+  canSetAudioGain: false,
+  seekable: new TimeRange(),
+  seeking: false,
+  source: { src: "", type: "" },
+  sources: [],
+  started: false,
+  textTracks: [],
+  textTrack: null,
+  get hasCaptions() {
+    return this.textTracks.filter(isTrackCaptionKind).length > 0;
+  },
+  volume: 1,
+  waiting: false,
+  realCurrentTime: 0,
+  get currentTime() {
+    return this.ended ? this.duration : this.clipStartTime > 0 ? Math.max(0, Math.min(this.realCurrentTime - this.clipStartTime, this.duration)) : this.realCurrentTime;
+  },
+  providedDuration: -1,
+  intrinsicDuration: 0,
+  get duration() {
+    return this.seekableWindow;
+  },
+  get title() {
+    return this.providedTitle || this.inferredTitle;
+  },
+  get poster() {
+    return this.providedPoster || this.inferredPoster;
+  },
+  get viewType() {
+    return this.providedViewType !== "unknown" ? this.providedViewType : this.inferredViewType;
+  },
+  get streamType() {
+    return this.providedStreamType !== "unknown" ? this.providedStreamType : this.inferredStreamType;
+  },
+  get currentSrc() {
+    return this.source;
+  },
+  get bufferedStart() {
+    const start = getTimeRangesStart(this.buffered) ?? 0;
+    return Math.max(start, this.clipStartTime);
+  },
+  get bufferedEnd() {
+    const end = getTimeRangesEnd(this.buffered) ?? 0;
+    return Math.min(this.seekableEnd, Math.max(0, end - this.clipStartTime));
+  },
+  get bufferedWindow() {
+    return Math.max(0, this.bufferedEnd - this.bufferedStart);
+  },
+  get seekableStart() {
+    if (this.isLiveDVR && this.liveDVRWindow > 0) {
+      return Math.max(0, this.seekableEnd - this.liveDVRWindow);
+    }
+    const start = getTimeRangesStart(this.seekable) ?? 0;
+    return Math.max(start, this.clipStartTime);
+  },
+  get seekableEnd() {
+    if (this.providedDuration > 0) return this.providedDuration;
+    const end = this.liveSyncPosition > 0 ? this.liveSyncPosition : this.canPlay ? getTimeRangesEnd(this.seekable) ?? Infinity : 0;
+    return this.clipEndTime > 0 ? Math.min(this.clipEndTime, end) : end;
+  },
+  get seekableWindow() {
+    const window = this.seekableEnd - this.seekableStart;
+    return !isNaN(window) ? Math.max(0, window) : Infinity;
+  },
+  // ~~ remote playback ~~
+  canAirPlay: false,
+  canGoogleCast: false,
+  remotePlaybackState: "disconnected",
+  remotePlaybackType: "none",
+  remotePlaybackLoader: null,
+  remotePlaybackInfo: null,
+  get isAirPlayConnected() {
+    return this.remotePlaybackType === "airplay" && this.remotePlaybackState === "connected";
+  },
+  get isGoogleCastConnected() {
+    return this.remotePlaybackType === "google-cast" && this.remotePlaybackState === "connected";
+  },
+  // ~~ responsive design ~~
+  pointer: "fine",
+  orientation: "landscape",
+  width: 0,
+  height: 0,
+  mediaWidth: 0,
+  mediaHeight: 0,
+  lastKeyboardAction: null,
+  // ~~ user props ~~
+  userBehindLiveEdge: false,
+  // ~~ live props ~~
+  liveEdgeTolerance: 10,
+  minLiveDVRWindow: 60,
+  get canSeek() {
+    return /unknown|on-demand|:dvr/.test(this.streamType) && Number.isFinite(this.duration) && (!this.isLiveDVR || this.duration >= this.liveDVRWindow);
+  },
+  get live() {
+    return this.streamType.includes("live") || !Number.isFinite(this.duration);
+  },
+  get liveEdgeStart() {
+    return this.live && Number.isFinite(this.seekableEnd) ? Math.max(0, this.seekableEnd - this.liveEdgeTolerance) : 0;
+  },
+  get liveEdge() {
+    return this.live && (!this.canSeek || !this.userBehindLiveEdge && this.currentTime >= this.liveEdgeStart);
+  },
+  get liveEdgeWindow() {
+    return this.live && Number.isFinite(this.seekableEnd) ? this.seekableEnd - this.liveEdgeStart : 0;
+  },
+  get isLiveDVR() {
+    return /:dvr/.test(this.streamType);
+  },
+  get liveDVRWindow() {
+    return Math.max(this.inferredLiveDVRWindow, this.minLiveDVRWindow);
+  },
+  // ~~ internal props ~~
+  autoPlaying: false,
+  providedTitle: "",
+  inferredTitle: "",
+  providedLoop: false,
+  userPrefersLoop: false,
+  providedPoster: "",
+  inferredPoster: "",
+  inferredViewType: "unknown",
+  providedViewType: "unknown",
+  providedStreamType: "unknown",
+  inferredStreamType: "unknown",
+  liveSyncPosition: null,
+  inferredLiveDVRWindow: 0,
+  savedState: null
+});
+const RESET_ON_SRC_QUALITY_CHANGE = /* @__PURE__ */ new Set([
+  "autoPlayError",
+  "autoPlaying",
+  "buffered",
+  "canPlay",
+  "error",
+  "paused",
+  "played",
+  "playing",
+  "seekable",
+  "seeking",
+  "waiting"
+]);
+const RESET_ON_SRC_CHANGE = /* @__PURE__ */ new Set([
+  ...RESET_ON_SRC_QUALITY_CHANGE,
+  "ended",
+  "inferredPoster",
+  "inferredStreamType",
+  "inferredTitle",
+  "intrinsicDuration",
+  "inferredLiveDVRWindow",
+  "liveSyncPosition",
+  "realCurrentTime",
+  "savedState",
+  "started",
+  "userBehindLiveEdge"
+]);
+function softResetMediaState($media, isSourceQualityChange = false) {
+  const filter = isSourceQualityChange ? RESET_ON_SRC_QUALITY_CHANGE : RESET_ON_SRC_CHANGE;
+  mediaState.reset($media, (prop) => filter.has(prop));
+  tick();
+}
+function boundTime(time, store) {
+  const clippedTime = time + store.clipStartTime(), isStart = Math.floor(time) === Math.floor(store.seekableStart()), isEnd = Math.floor(clippedTime) === Math.floor(store.seekableEnd());
+  if (isStart) {
+    return store.seekableStart();
+  }
+  if (isEnd) {
+    return store.seekableEnd();
+  }
+  if (store.isLiveDVR() && store.liveDVRWindow() > 0 && clippedTime < store.seekableEnd() - store.liveDVRWindow()) {
+    return store.bufferedStart();
+  }
+  return Math.min(Math.max(store.seekableStart() + 0.1, clippedTime), store.seekableEnd() - 0.1);
+}
+
+class MediaRemoteControl {
+  #target = null;
+  #player = null;
+  #prevTrackIndex = -1;
+  #logger;
+  constructor(logger = void 0) {
+    this.#logger = logger;
+  }
+  /**
+   * Set the target from which to dispatch media requests events from. The events should bubble
+   * up from this target to the player element.
+   *
+   * @example
+   * ```ts
+   * const button = document.querySelector('button');
+   * remote.setTarget(button);
+   * ```
+   */
+  setTarget(target) {
+    this.#target = target;
+  }
+  /**
+   * Returns the current player element. This method will attempt to find the player by
+   * searching up from either the given `target` or default target set via `remote.setTarget`.
+   *
+   * @example
+   * ```ts
+   * const player = remote.getPlayer();
+   * ```
+   */
+  getPlayer(target) {
+    if (this.#player) return this.#player;
+    (target ?? this.#target)?.dispatchEvent(
+      new DOMEvent("find-media-player", {
+        detail: (player) => void (this.#player = player),
+        bubbles: true,
+        composed: true
+      })
+    );
+    return this.#player;
+  }
+  /**
+   * Set the current player element so the remote can support toggle methods such as
+   * `togglePaused` as they rely on the current media state.
+   */
+  setPlayer(player) {
+    this.#player = player;
+  }
+  /**
+   * Dispatch a request to start the media loading process. This will only work if the media
+   * player has been initialized with a custom loading strategy `load="custom">`.
+   *
+   * @docs {@link https://www.vidstack.io/docs/player/core-concepts/loading#load-strategies}
+   */
+  startLoading(trigger) {
+    this.#dispatchRequest("media-start-loading", trigger);
+  }
+  /**
+   * Dispatch a request to start the poster loading process. This will only work if the media
+   * player has been initialized with a custom poster loading strategy `posterLoad="custom">`.
+   *
+   * @docs {@link https://www.vidstack.io/docs/player/core-concepts/loading#load-strategies}
+   */
+  startLoadingPoster(trigger) {
+    this.#dispatchRequest("media-poster-start-loading", trigger);
+  }
+  /**
+   * Dispatch a request to connect to AirPlay.
+   *
+   * @see {@link https://www.apple.com/au/airplay}
+   */
+  requestAirPlay(trigger) {
+    this.#dispatchRequest("media-airplay-request", trigger);
+  }
+  /**
+   * Dispatch a request to connect to Google Cast.
+   *
+   * @see {@link https://developers.google.com/cast/docs/overview}
+   */
+  requestGoogleCast(trigger) {
+    this.#dispatchRequest("media-google-cast-request", trigger);
+  }
+  /**
+   * Dispatch a request to begin/resume media playback.
+   */
+  play(trigger) {
+    this.#dispatchRequest("media-play-request", trigger);
+  }
+  /**
+   * Dispatch a request to pause media playback.
+   */
+  pause(trigger) {
+    this.#dispatchRequest("media-pause-request", trigger);
+  }
+  /**
+   * Dispatch a request to set the media volume to mute (0).
+   */
+  mute(trigger) {
+    this.#dispatchRequest("media-mute-request", trigger);
+  }
+  /**
+   * Dispatch a request to unmute the media volume and set it back to it's previous state.
+   */
+  unmute(trigger) {
+    this.#dispatchRequest("media-unmute-request", trigger);
+  }
+  /**
+   * Dispatch a request to enter fullscreen.
+   *
+   * @docs {@link https://www.vidstack.io/docs/player/api/fullscreen#remote-control}
+   */
+  enterFullscreen(target, trigger) {
+    this.#dispatchRequest("media-enter-fullscreen-request", trigger, target);
+  }
+  /**
+   * Dispatch a request to exit fullscreen.
+   *
+   * @docs {@link https://www.vidstack.io/docs/player/api/fullscreen#remote-control}
+   */
+  exitFullscreen(target, trigger) {
+    this.#dispatchRequest("media-exit-fullscreen-request", trigger, target);
+  }
+  /**
+   * Dispatch a request to lock the screen orientation.
+   *
+   * @docs {@link https://www.vidstack.io/docs/player/screen-orientation#remote-control}
+   */
+  lockScreenOrientation(lockType, trigger) {
+    this.#dispatchRequest("media-orientation-lock-request", trigger, lockType);
+  }
+  /**
+   * Dispatch a request to unlock the screen orientation.
+   *
+   * @docs {@link https://www.vidstack.io/docs/player/api/screen-orientation#remote-control}
+   */
+  unlockScreenOrientation(trigger) {
+    this.#dispatchRequest("media-orientation-unlock-request", trigger);
+  }
+  /**
+   * Dispatch a request to enter picture-in-picture mode.
+   *
+   * @docs {@link https://www.vidstack.io/docs/player/api/picture-in-picture#remote-control}
+   */
+  enterPictureInPicture(trigger) {
+    this.#dispatchRequest("media-enter-pip-request", trigger);
+  }
+  /**
+   * Dispatch a request to exit picture-in-picture mode.
+   *
+   * @docs {@link https://www.vidstack.io/docs/player/api/picture-in-picture#remote-control}
+   */
+  exitPictureInPicture(trigger) {
+    this.#dispatchRequest("media-exit-pip-request", trigger);
+  }
+  /**
+   * Notify the media player that a seeking process is happening and to seek to the given `time`.
+   */
+  seeking(time, trigger) {
+    this.#dispatchRequest("media-seeking-request", trigger, time);
+  }
+  /**
+   * Notify the media player that a seeking operation has completed and to seek to the given `time`.
+   * This is generally called after a series of `remote.seeking()` calls.
+   */
+  seek(time, trigger) {
+    this.#dispatchRequest("media-seek-request", trigger, time);
+  }
+  seekToLiveEdge(trigger) {
+    this.#dispatchRequest("media-live-edge-request", trigger);
+  }
+  /**
+   * Dispatch a request to update the length of the media in seconds.
+   *
+   * @example
+   * ```ts
+   * remote.changeDuration(100); // 100 seconds
+   * ```
+   */
+  changeDuration(duration, trigger) {
+    this.#dispatchRequest("media-duration-change-request", trigger, duration);
+  }
+  /**
+   * Dispatch a request to update the clip start time. This is the time at which media playback
+   * should start at.
+   *
+   * @example
+   * ```ts
+   * remote.changeClipStart(100); // start at 100 seconds
+   * ```
+   */
+  changeClipStart(startTime, trigger) {
+    this.#dispatchRequest("media-clip-start-change-request", trigger, startTime);
+  }
+  /**
+   * Dispatch a request to update the clip end time. This is the time at which media playback
+   * should end at.
+   *
+   * @example
+   * ```ts
+   * remote.changeClipEnd(100); // end at 100 seconds
+   * ```
+   */
+  changeClipEnd(endTime, trigger) {
+    this.#dispatchRequest("media-clip-end-change-request", trigger, endTime);
+  }
+  /**
+   * Dispatch a request to update the media volume to the given `volume` level which is a value
+   * between 0 and 1.
+   *
+   * @docs {@link https://www.vidstack.io/docs/player/api/audio-gain#remote-control}
+   * @example
+   * ```ts
+   * remote.changeVolume(0); // 0%
+   * remote.changeVolume(0.05); // 5%
+   * remote.changeVolume(0.5); // 50%
+   * remote.changeVolume(0.75); // 70%
+   * remote.changeVolume(1); // 100%
+   * ```
+   */
+  changeVolume(volume, trigger) {
+    this.#dispatchRequest("media-volume-change-request", trigger, Math.max(0, Math.min(1, volume)));
+  }
+  /**
+   * Dispatch a request to change the current audio track.
+   *
+   * @example
+   * ```ts
+   * remote.changeAudioTrack(1); // track at index 1
+   * ```
+   */
+  changeAudioTrack(index, trigger) {
+    this.#dispatchRequest("media-audio-track-change-request", trigger, index);
+  }
+  /**
+   * Dispatch a request to change the video quality. The special value `-1` represents auto quality
+   * selection.
+   *
+   * @example
+   * ```ts
+   * remote.changeQuality(-1); // auto
+   * remote.changeQuality(1); // quality at index 1
+   * ```
+   */
+  changeQuality(index, trigger) {
+    this.#dispatchRequest("media-quality-change-request", trigger, index);
+  }
+  /**
+   * Request auto quality selection.
+   */
+  requestAutoQuality(trigger) {
+    this.changeQuality(-1, trigger);
+  }
+  /**
+   * Dispatch a request to change the mode of the text track at the given index.
+   *
+   * @example
+   * ```ts
+   * remote.changeTextTrackMode(1, 'showing'); // track at index 1
+   * ```
+   */
+  changeTextTrackMode(index, mode, trigger) {
+    this.#dispatchRequest("media-text-track-change-request", trigger, {
+      index,
+      mode
+    });
+  }
+  /**
+   * Dispatch a request to change the media playback rate.
+   *
+   * @example
+   * ```ts
+   * remote.changePlaybackRate(0.5); // Half the normal speed
+   * remote.changePlaybackRate(1); // Normal speed
+   * remote.changePlaybackRate(1.5); // 50% faster than normal
+   * remote.changePlaybackRate(2); // Double the normal speed
+   * ```
+   */
+  changePlaybackRate(rate, trigger) {
+    this.#dispatchRequest("media-rate-change-request", trigger, rate);
+  }
+  /**
+   * Dispatch a request to change the media audio gain.
+   *
+   * @example
+   * ```ts
+   * remote.changeAudioGain(1); // Disable audio gain
+   * remote.changeAudioGain(1.5); // 50% louder
+   * remote.changeAudioGain(2); // 100% louder
+   * ```
+   */
+  changeAudioGain(gain, trigger) {
+    this.#dispatchRequest("media-audio-gain-change-request", trigger, gain);
+  }
+  /**
+   * Dispatch a request to resume idle tracking on controls.
+   */
+  resumeControls(trigger) {
+    this.#dispatchRequest("media-resume-controls-request", trigger);
+  }
+  /**
+   * Dispatch a request to pause controls idle tracking. Pausing tracking will result in the
+   * controls being visible until `remote.resumeControls()` is called. This method
+   * is generally used when building custom controls and you'd like to prevent the UI from
+   * disappearing.
+   *
+   * @example
+   * ```ts
+   * // Prevent controls hiding while menu is being interacted with.
+   * function onSettingsOpen() {
+   *   remote.pauseControls();
+   * }
+   *
+   * function onSettingsClose() {
+   *   remote.resumeControls();
+   * }
+   * ```
+   */
+  pauseControls(trigger) {
+    this.#dispatchRequest("media-pause-controls-request", trigger);
+  }
+  /**
+   * Dispatch a request to toggle the media playback state.
+   */
+  togglePaused(trigger) {
+    const player = this.getPlayer(trigger?.target);
+    if (!player) {
+      return;
+    }
+    if (player.state.paused) this.play(trigger);
+    else this.pause(trigger);
+  }
+  /**
+   * Dispatch a request to toggle the controls visibility.
+   */
+  toggleControls(trigger) {
+    const player = this.getPlayer(trigger?.target);
+    if (!player) {
+      return;
+    }
+    if (!player.controls.showing) {
+      player.controls.show(0, trigger);
+    } else {
+      player.controls.hide(0, trigger);
+    }
+  }
+  /**
+   * Dispatch a request to toggle the media muted state.
+   */
+  toggleMuted(trigger) {
+    const player = this.getPlayer(trigger?.target);
+    if (!player) {
+      return;
+    }
+    if (player.state.muted) this.unmute(trigger);
+    else this.mute(trigger);
+  }
+  /**
+   * Dispatch a request to toggle the media fullscreen state.
+   *
+   * @docs {@link https://www.vidstack.io/docs/player/api/fullscreen#remote-control}
+   */
+  toggleFullscreen(target, trigger) {
+    const player = this.getPlayer(trigger?.target);
+    if (!player) {
+      return;
+    }
+    if (player.state.fullscreen) this.exitFullscreen(target, trigger);
+    else this.enterFullscreen(target, trigger);
+  }
+  /**
+   * Dispatch a request to toggle the media picture-in-picture mode.
+   *
+   * @docs {@link https://www.vidstack.io/docs/player/api/picture-in-picture#remote-control}
+   */
+  togglePictureInPicture(trigger) {
+    const player = this.getPlayer(trigger?.target);
+    if (!player) {
+      return;
+    }
+    if (player.state.pictureInPicture) this.exitPictureInPicture(trigger);
+    else this.enterPictureInPicture(trigger);
+  }
+  /**
+   * Show captions.
+   */
+  showCaptions(trigger) {
+    const player = this.getPlayer(trigger?.target);
+    if (!player) {
+      return;
+    }
+    let tracks = player.state.textTracks, index = this.#prevTrackIndex;
+    if (!tracks[index] || !isTrackCaptionKind(tracks[index])) {
+      index = -1;
+    }
+    if (index === -1) {
+      index = tracks.findIndex((track) => isTrackCaptionKind(track) && track.default);
+    }
+    if (index === -1) {
+      index = tracks.findIndex((track) => isTrackCaptionKind(track));
+    }
+    if (index >= 0) this.changeTextTrackMode(index, "showing", trigger);
+    this.#prevTrackIndex = -1;
+  }
+  /**
+   * Turn captions off.
+   */
+  disableCaptions(trigger) {
+    const player = this.getPlayer(trigger?.target);
+    if (!player) {
+      return;
+    }
+    const tracks = player.state.textTracks, track = player.state.textTrack;
+    if (track) {
+      const index = tracks.indexOf(track);
+      this.changeTextTrackMode(index, "disabled", trigger);
+      this.#prevTrackIndex = index;
+    }
+  }
+  /**
+   * Dispatch a request to toggle the current captions mode.
+   */
+  toggleCaptions(trigger) {
+    const player = this.getPlayer(trigger?.target);
+    if (!player) {
+      return;
+    }
+    if (player.state.textTrack) {
+      this.disableCaptions();
+    } else {
+      this.showCaptions();
+    }
+  }
+  userPrefersLoopChange(prefersLoop, trigger) {
+    this.#dispatchRequest("media-user-loop-change-request", trigger, prefersLoop);
+  }
+  #dispatchRequest(type, trigger, detail) {
+    const request = new DOMEvent(type, {
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+      detail,
+      trigger
+    });
+    let target = trigger?.target || null;
+    if (target && target instanceof Component) target = target.el;
+    const shouldUsePlayer = !target || target === document || target === window || target === document.body || this.#player?.el && target instanceof Node && !this.#player.el.contains(target);
+    target = shouldUsePlayer ? this.#target ?? this.getPlayer()?.el : target ?? this.#target;
+    if (this.#player) {
+      if (type === "media-play-request" && !this.#player.state.canLoad) {
+        target?.dispatchEvent(request);
+      } else {
+        this.#player.canPlayQueue.enqueue(type, () => target?.dispatchEvent(request));
+      }
+    } else {
+      target?.dispatchEvent(request);
+    }
+  }
+  #noPlayerWarning(method) {
+  }
+}
+
+class LocalMediaStorage {
+  playerId = "vds-player";
+  mediaId = null;
+  #data = {
+    volume: null,
+    muted: null,
+    audioGain: null,
+    time: null,
+    lang: null,
+    captions: null,
+    rate: null,
+    quality: null
+  };
+  async getVolume() {
+    return this.#data.volume;
+  }
+  async setVolume(volume) {
+    this.#data.volume = volume;
+    this.save();
+  }
+  async getMuted() {
+    return this.#data.muted;
+  }
+  async setMuted(muted) {
+    this.#data.muted = muted;
+    this.save();
+  }
+  async getTime() {
+    return this.#data.time;
+  }
+  async setTime(time, ended) {
+    const shouldClear = time < 0;
+    this.#data.time = !shouldClear ? time : null;
+    if (shouldClear || ended) this.saveTime();
+    else this.saveTimeThrottled();
+  }
+  async getLang() {
+    return this.#data.lang;
+  }
+  async setLang(lang) {
+    this.#data.lang = lang;
+    this.save();
+  }
+  async getCaptions() {
+    return this.#data.captions;
+  }
+  async setCaptions(enabled) {
+    this.#data.captions = enabled;
+    this.save();
+  }
+  async getPlaybackRate() {
+    return this.#data.rate;
+  }
+  async setPlaybackRate(rate) {
+    this.#data.rate = rate;
+    this.save();
+  }
+  async getAudioGain() {
+    return this.#data.audioGain;
+  }
+  async setAudioGain(gain) {
+    this.#data.audioGain = gain;
+    this.save();
+  }
+  async getVideoQuality() {
+    return this.#data.quality;
+  }
+  async setVideoQuality(quality) {
+    this.#data.quality = quality;
+    this.save();
+  }
+  onChange(src, mediaId, playerId = "vds-player") {
+    const savedData = playerId ? localStorage.getItem(playerId) : null, savedTime = mediaId ? localStorage.getItem(mediaId) : null;
+    this.playerId = playerId;
+    this.mediaId = mediaId;
+    this.#data = {
+      volume: null,
+      muted: null,
+      audioGain: null,
+      lang: null,
+      captions: null,
+      rate: null,
+      quality: null,
+      ...savedData ? JSON.parse(savedData) : {},
+      time: savedTime ? +savedTime : null
+    };
+  }
+  save() {
+    if (!this.playerId) return;
+    const data = JSON.stringify({ ...this.#data, time: void 0 });
+    localStorage.setItem(this.playerId, data);
+  }
+  saveTimeThrottled = functionThrottle(this.saveTime.bind(this), 1e3);
+  saveTime() {
+    if (!this.mediaId) return;
+    const data = (this.#data.time ?? 0).toString();
+    localStorage.setItem(this.mediaId, data);
+  }
+}
+
+const SELECTED = Symbol(0);
+class SelectList extends List {
+  get selected() {
+    return this.items.find((item) => item.selected) ?? null;
+  }
+  get selectedIndex() {
+    return this.items.findIndex((item) => item.selected);
+  }
+  /** @internal */
+  [ListSymbol.onRemove](item, trigger) {
+    this[ListSymbol.select](item, false, trigger);
+  }
+  /** @internal */
+  [ListSymbol.add](item, trigger) {
+    item[SELECTED] = false;
+    Object.defineProperty(item, "selected", {
+      get() {
+        return this[SELECTED];
+      },
+      set: (selected) => {
+        if (this.readonly) return;
+        this[ListSymbol.onUserSelect]?.();
+        this[ListSymbol.select](item, selected);
+      }
+    });
+    super[ListSymbol.add](item, trigger);
+  }
+  /** @internal */
+  [ListSymbol.select](item, selected, trigger) {
+    if (selected === item?.[SELECTED]) return;
+    const prev = this.selected;
+    if (item) item[SELECTED] = selected;
+    const changed = !selected ? prev === item : prev !== item;
+    if (changed) {
+      if (prev) prev[SELECTED] = false;
+      this.dispatchEvent(
+        new DOMEvent("change", {
+          detail: {
+            prev,
+            current: this.selected
+          },
+          trigger
+        })
+      );
+    }
+  }
+}
+
+class AudioTrackList extends SelectList {
+}
+
+class NativeTextRenderer {
+  priority = 0;
+  #display = true;
+  #video = null;
+  #track = null;
+  #tracks = /* @__PURE__ */ new Set();
+  canRender(_, video) {
+    return !!video;
+  }
+  attach(video) {
+    this.#video = video;
+    if (video) video.textTracks.onchange = this.#onChange.bind(this);
+  }
+  addTrack(track) {
+    this.#tracks.add(track);
+    this.#attachTrack(track);
+  }
+  removeTrack(track) {
+    track[TextTrackSymbol.native]?.remove?.();
+    track[TextTrackSymbol.native] = null;
+    this.#tracks.delete(track);
+  }
+  changeTrack(track) {
+    const current = track?.[TextTrackSymbol.native];
+    if (current && current.track.mode !== "showing") {
+      current.track.mode = "showing";
+    }
+    this.#track = track;
+  }
+  setDisplay(display) {
+    this.#display = display;
+    this.#onChange();
+  }
+  detach() {
+    if (this.#video) this.#video.textTracks.onchange = null;
+    for (const track of this.#tracks) this.removeTrack(track);
+    this.#tracks.clear();
+    this.#video = null;
+    this.#track = null;
+  }
+  #attachTrack(track) {
+    if (!this.#video) return;
+    const el = track[TextTrackSymbol.native] ??= this.#createTrackElement(track);
+    if (isHTMLElement(el)) {
+      this.#video.append(el);
+      el.track.mode = el.default ? "showing" : "disabled";
+    }
+  }
+  #createTrackElement(track) {
+    const el = document.createElement("track"), isDefault = track.default || track.mode === "showing", isSupported = track.src && track.type === "vtt";
+    el.id = track.id;
+    el.src = isSupported ? track.src : "";
+    el.label = track.label;
+    el.kind = track.kind;
+    el.default = isDefault;
+    track.language && (el.srclang = track.language);
+    if (isDefault && !isSupported) {
+      this.#copyCues(track, el.track);
+    }
+    return el;
+  }
+  #copyCues(track, native) {
+    if (track.src && track.type === "vtt" || native.cues?.length) return;
+    for (const cue of track.cues) native.addCue(cue);
+  }
+  #onChange(event) {
+    for (const track of this.#tracks) {
+      const native = track[TextTrackSymbol.native];
+      if (!native) continue;
+      if (!this.#display) {
+        native.track.mode = native.managed ? "hidden" : "disabled";
+        continue;
+      }
+      const isShowing = native.track.mode === "showing";
+      if (isShowing) this.#copyCues(track, native.track);
+      track.setMode(isShowing ? "showing" : "disabled", event);
+    }
+  }
+}
+
+class TextRenderers {
+  #video = null;
+  #textTracks;
+  #renderers = [];
+  #media;
+  #nativeDisplay = false;
+  #nativeRenderer = null;
+  #customRenderer = null;
+  constructor(media) {
+    this.#media = media;
+    const textTracks = media.textTracks;
+    this.#textTracks = textTracks;
+    effect(this.#watchControls.bind(this));
+    onDispose(this.#detach.bind(this));
+    new EventsController(textTracks).add("add", this.#onAddTrack.bind(this)).add("remove", this.#onRemoveTrack.bind(this)).add("mode-change", this.#update.bind(this));
+  }
+  #watchControls() {
+    const { nativeControls } = this.#media.$state;
+    this.#nativeDisplay = nativeControls();
+    this.#update();
+  }
+  add(renderer) {
+    this.#renderers.push(renderer);
+    untrack(this.#update.bind(this));
+  }
+  remove(renderer) {
+    renderer.detach();
+    this.#renderers.splice(this.#renderers.indexOf(renderer), 1);
+    untrack(this.#update.bind(this));
+  }
+  /** @internal */
+  attachVideo(video) {
+    requestAnimationFrame(() => {
+      this.#video = video;
+      if (video) {
+        this.#nativeRenderer = new NativeTextRenderer();
+        this.#nativeRenderer.attach(video);
+        for (const track of this.#textTracks) this.#addNativeTrack(track);
+      }
+      this.#update();
+    });
+  }
+  #addNativeTrack(track) {
+    if (!isTrackCaptionKind(track)) return;
+    this.#nativeRenderer?.addTrack(track);
+  }
+  #removeNativeTrack(track) {
+    if (!isTrackCaptionKind(track)) return;
+    this.#nativeRenderer?.removeTrack(track);
+  }
+  #onAddTrack(event) {
+    this.#addNativeTrack(event.detail);
+  }
+  #onRemoveTrack(event) {
+    this.#removeNativeTrack(event.detail);
+  }
+  #update() {
+    const currentTrack = this.#textTracks.selected;
+    if (this.#video && (this.#nativeDisplay || currentTrack?.[TextTrackSymbol.nativeHLS])) {
+      this.#customRenderer?.changeTrack(null);
+      this.#nativeRenderer?.setDisplay(true);
+      this.#nativeRenderer?.changeTrack(currentTrack);
+      return;
+    }
+    this.#nativeRenderer?.setDisplay(false);
+    this.#nativeRenderer?.changeTrack(null);
+    if (!currentTrack) {
+      this.#customRenderer?.changeTrack(null);
+      return;
+    }
+    const customRenderer = this.#renderers.sort((a, b) => a.priority - b.priority).find((renderer) => renderer.canRender(currentTrack, this.#video));
+    if (this.#customRenderer !== customRenderer) {
+      this.#customRenderer?.detach();
+      customRenderer?.attach(this.#video);
+      this.#customRenderer = customRenderer ?? null;
+    }
+    customRenderer?.changeTrack(currentTrack);
+  }
+  #detach() {
+    this.#nativeRenderer?.detach();
+    this.#nativeRenderer = null;
+    this.#customRenderer?.detach();
+    this.#customRenderer = null;
+  }
+}
+
+class TextTrackList extends List {
+  #canLoad = false;
+  #defaults = {};
+  #storage = null;
+  #preferredLang = null;
+  /** @internal */
+  [TextTrackSymbol.crossOrigin];
+  constructor() {
+    super();
+  }
+  get selected() {
+    const track = this.items.find((t) => t.mode === "showing" && isTrackCaptionKind(t));
+    return track ?? null;
+  }
+  get selectedIndex() {
+    const selected = this.selected;
+    return selected ? this.indexOf(selected) : -1;
+  }
+  get preferredLang() {
+    return this.#preferredLang;
+  }
+  set preferredLang(lang) {
+    this.#preferredLang = lang;
+    this.#saveLang(lang);
+  }
+  add(init, trigger) {
+    const isTrack = init instanceof TextTrack, track = isTrack ? init : new TextTrack(init), kind = init.kind === "captions" || init.kind === "subtitles" ? "captions" : init.kind;
+    if (this.#defaults[kind] && init.default) delete init.default;
+    track.addEventListener("mode-change", this.#onTrackModeChangeBind);
+    this[ListSymbol.add](track, trigger);
+    track[TextTrackSymbol.crossOrigin] = this[TextTrackSymbol.crossOrigin];
+    if (this.#canLoad) track[TextTrackSymbol.canLoad]();
+    if (init.default) this.#defaults[kind] = track;
+    this.#selectTracks();
+    return this;
+  }
+  remove(track, trigger) {
+    this.#pendingRemoval = track;
+    if (!this.items.includes(track)) return;
+    if (track === this.#defaults[track.kind]) delete this.#defaults[track.kind];
+    track.mode = "disabled";
+    track[TextTrackSymbol.onModeChange] = null;
+    track.removeEventListener("mode-change", this.#onTrackModeChangeBind);
+    this[ListSymbol.remove](track, trigger);
+    this.#pendingRemoval = null;
+    return this;
+  }
+  clear(trigger) {
+    for (const track of [...this.items]) {
+      this.remove(track, trigger);
+    }
+    return this;
+  }
+  getByKind(kind) {
+    const kinds = Array.isArray(kind) ? kind : [kind];
+    return this.items.filter((track) => kinds.includes(track.kind));
+  }
+  /** @internal */
+  [TextTrackSymbol.canLoad]() {
+    if (this.#canLoad) return;
+    for (const track of this.items) track[TextTrackSymbol.canLoad]();
+    this.#canLoad = true;
+    this.#selectTracks();
+  }
+  #selectTracks = functionDebounce(async () => {
+    if (!this.#canLoad) return;
+    if (!this.#preferredLang && this.#storage) {
+      this.#preferredLang = await this.#storage.getLang();
+    }
+    const showCaptions = await this.#storage?.getCaptions(), kinds = [
+      ["captions", "subtitles"],
+      "chapters",
+      "descriptions",
+      "metadata"
+    ];
+    for (const kind of kinds) {
+      const tracks = this.getByKind(kind);
+      if (tracks.find((t) => t.mode === "showing")) continue;
+      const preferredTrack = this.#preferredLang ? tracks.find((track2) => track2.language === this.#preferredLang) : null;
+      const defaultTrack = isArray(kind) ? this.#defaults[kind.find((kind2) => this.#defaults[kind2]) || ""] : this.#defaults[kind];
+      const track = preferredTrack ?? defaultTrack, isCaptionsKind = track && isTrackCaptionKind(track);
+      if (track && (!isCaptionsKind || showCaptions !== false)) {
+        track.mode = "showing";
+        if (isCaptionsKind) this.#saveCaptionsTrack(track);
+      }
+    }
+  }, 300);
+  #pendingRemoval = null;
+  #onTrackModeChangeBind = this.#onTrackModeChange.bind(this);
+  #onTrackModeChange(event) {
+    const track = event.detail;
+    if (this.#storage && isTrackCaptionKind(track) && track !== this.#pendingRemoval) {
+      this.#saveCaptionsTrack(track);
+    }
+    if (track.mode === "showing") {
+      const kinds = isTrackCaptionKind(track) ? ["captions", "subtitles"] : [track.kind];
+      for (const t of this.items) {
+        if (t.mode === "showing" && t != track && kinds.includes(t.kind)) {
+          t.mode = "disabled";
+        }
+      }
+    }
+    this.dispatchEvent(
+      new DOMEvent("mode-change", {
+        detail: event.detail,
+        trigger: event
+      })
+    );
+  }
+  #saveCaptionsTrack(track) {
+    if (track.mode !== "disabled") {
+      this.#saveLang(track.language);
+    }
+    this.#storage?.setCaptions?.(track.mode === "showing");
+  }
+  #saveLang(lang) {
+    this.#storage?.setLang?.(this.#preferredLang = lang);
+  }
+  setStorage(storage) {
+    this.#storage = storage;
+  }
+}
+
+class VideoQualityList extends SelectList {
+  #auto = false;
+  /**
+   * Configures quality switching:
+   *
+   * - `current`: Trigger an immediate quality level switch. This will abort the current fragment
+   * request if any, flush the whole buffer, and fetch fragment matching with current position
+   * and requested quality level.
+   *
+   * - `next`: Trigger a quality level switch for next fragment. This could eventually flush
+   * already buffered next fragment.
+   *
+   * - `load`: Set quality level for next loaded fragment.
+   *
+   * @see {@link https://www.vidstack.io/docs/player/api/video-quality#switch}
+   * @see {@link https://github.com/video-dev/hls.js/blob/master/docs/API.md#quality-switch-control-api}
+   */
+  switch = "current";
+  /**
+   * Whether automatic quality selection is enabled.
+   */
+  get auto() {
+    return this.#auto || this.readonly;
+  }
+  /** @internal */
+  [QualitySymbol.enableAuto];
+  /** @internal */
+  [ListSymbol.onUserSelect]() {
+    this[QualitySymbol.setAuto](false);
+  }
+  /** @internal */
+  [ListSymbol.onReset](trigger) {
+    this[QualitySymbol.enableAuto] = void 0;
+    this[QualitySymbol.setAuto](false, trigger);
+  }
+  /**
+   * Request automatic quality selection (if supported). This will be a no-op if the list is
+   * `readonly` as that already implies auto-selection.
+   */
+  autoSelect(trigger) {
+    if (this.readonly || this.#auto || !this[QualitySymbol.enableAuto]) return;
+    this[QualitySymbol.enableAuto]?.(trigger);
+    this[QualitySymbol.setAuto](true, trigger);
+  }
+  getBySrc(src) {
+    return this.items.find((quality) => quality.src === src);
+  }
+  /** @internal */
+  [QualitySymbol.setAuto](auto, trigger) {
+    if (this.#auto === auto) return;
+    this.#auto = auto;
+    this.dispatchEvent(
+      new DOMEvent("auto-change", {
+        detail: auto,
+        trigger
+      })
+    );
+  }
+}
+
+function isAudioProvider(provider) {
+  return provider?.$$PROVIDER_TYPE === "AUDIO";
+}
+function isVideoProvider(provider) {
+  return provider?.$$PROVIDER_TYPE === "VIDEO";
+}
+function isHLSProvider(provider) {
+  return provider?.$$PROVIDER_TYPE === "HLS";
+}
+function isDASHProvider(provider) {
+  return provider?.$$PROVIDER_TYPE === "DASH";
+}
+function isYouTubeProvider(provider) {
+  return provider?.$$PROVIDER_TYPE === "YOUTUBE";
+}
+function isVimeoProvider(provider) {
+  return provider?.$$PROVIDER_TYPE === "VIMEO";
+}
+function isGoogleCastProvider(provider) {
+  return provider?.$$PROVIDER_TYPE === "GOOGLE_CAST";
+}
+function isHTMLAudioElement(element) {
+  return element instanceof HTMLAudioElement;
+}
+function isHTMLVideoElement(element) {
+  return element instanceof HTMLVideoElement;
+}
+function isHTMLMediaElement(element) {
+  return isHTMLAudioElement(element) || isHTMLVideoElement(element);
+}
+function isHTMLIFrameElement(element) {
+  return element instanceof HTMLIFrameElement;
+}
+
+class MediaPlayerController extends ViewController {
+}
+
+const MEDIA_KEY_SHORTCUTS = {
+  togglePaused: "k Space",
+  toggleMuted: "m",
+  toggleFullscreen: "f",
+  togglePictureInPicture: "i",
+  toggleCaptions: "c",
+  seekBackward: "j J ArrowLeft",
+  seekForward: "l L ArrowRight",
+  volumeUp: "ArrowUp",
+  volumeDown: "ArrowDown",
+  speedUp: ">",
+  slowDown: "<"
+};
+const MODIFIER_KEYS = /* @__PURE__ */ new Set(["Shift", "Alt", "Meta", "Ctrl"]), BUTTON_SELECTORS = 'button, [role="button"]', IGNORE_SELECTORS = 'input, textarea, select, [contenteditable], [role^="menuitem"], [role="timer"]';
+class MediaKeyboardController extends MediaPlayerController {
+  #media;
+  constructor(media) {
+    super();
+    this.#media = media;
+  }
+  onConnect() {
+    effect(this.#onTargetChange.bind(this));
+  }
+  #onTargetChange() {
+    const { keyDisabled, keyTarget } = this.$props;
+    if (keyDisabled()) return;
+    const target = keyTarget() === "player" ? this.el : document, $active = signal(false);
+    if (target === this.el) {
+      new EventsController(this.el).add("focusin", () => $active.set(true)).add("focusout", (event) => {
+        if (!this.el.contains(event.target)) $active.set(false);
+      });
+    } else {
+      if (!peek($active)) $active.set(document.querySelector("[data-media-player]") === this.el);
+      listenEvent(document, "focusin", (event) => {
+        const activePlayer = event.composedPath().find((el) => el instanceof Element && el.localName === "media-player");
+        if (activePlayer !== void 0) $active.set(this.el === activePlayer);
+      });
+    }
+    effect(() => {
+      if (!$active()) return;
+      new EventsController(target).add("keyup", this.#onKeyUp.bind(this)).add("keydown", this.#onKeyDown.bind(this)).add("keydown", this.#onPreventVideoKeys.bind(this), { capture: true });
+    });
+  }
+  #onKeyUp(event) {
+    const focusedEl = document.activeElement;
+    if (!event.key || !this.$state.canSeek() || focusedEl?.matches(IGNORE_SELECTORS)) {
+      return;
+    }
+    let { method, value } = this.#getMatchingMethod(event);
+    if (!isString(value) && !isArray(value)) {
+      value?.onKeyUp?.({
+        event,
+        player: this.#media.player,
+        remote: this.#media.remote
+      });
+      value?.callback?.(event, this.#media.remote);
+      return;
+    }
+    if (method?.startsWith("seek")) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.#timeSlider) {
+        this.#forwardTimeKeyboardEvent(event, method === "seekForward");
+        this.#timeSlider = null;
+      } else {
+        this.#media.remote.seek(this.#seekTotal, event);
+        this.#seekTotal = void 0;
+      }
+    }
+    if (method?.startsWith("volume")) {
+      const volumeSlider = this.el.querySelector("[data-media-volume-slider]");
+      volumeSlider?.dispatchEvent(
+        new KeyboardEvent("keyup", {
+          key: method === "volumeUp" ? "Up" : "Down",
+          shiftKey: event.shiftKey,
+          trigger: event
+        })
+      );
+    }
+  }
+  #onKeyDown(event) {
+    if (!event.key || MODIFIER_KEYS.has(event.key)) return;
+    const focusedEl = document.activeElement;
+    if (focusedEl?.matches(IGNORE_SELECTORS) || isKeyboardClick(event) && focusedEl?.matches(BUTTON_SELECTORS)) {
+      return;
+    }
+    let { method, value } = this.#getMatchingMethod(event), isNumberPress = !event.metaKey && /^[0-9]$/.test(event.key);
+    if (!isString(value) && !isArray(value) && !isNumberPress) {
+      value?.onKeyDown?.({
+        event,
+        player: this.#media.player,
+        remote: this.#media.remote
+      });
+      value?.callback?.(event, this.#media.remote);
+      return;
+    }
+    if (!method && isNumberPress && !modifierKeyPressed(event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.#media.remote.seek(this.$state.duration() / 10 * Number(event.key), event);
+      return;
+    }
+    if (!method) return;
+    event.preventDefault();
+    event.stopPropagation();
+    switch (method) {
+      case "seekForward":
+      case "seekBackward":
+        this.#seeking(event, method, method === "seekForward");
+        break;
+      case "volumeUp":
+      case "volumeDown":
+        const volumeSlider = this.el.querySelector("[data-media-volume-slider]");
+        if (volumeSlider) {
+          volumeSlider.dispatchEvent(
+            new KeyboardEvent("keydown", {
+              key: method === "volumeUp" ? "Up" : "Down",
+              shiftKey: event.shiftKey,
+              trigger: event
+            })
+          );
+        } else {
+          const value2 = event.shiftKey ? 0.1 : 0.05;
+          this.#media.remote.changeVolume(
+            this.$state.volume() + (method === "volumeUp" ? +value2 : -value2),
+            event
+          );
+        }
+        break;
+      case "toggleFullscreen":
+        this.#media.remote.toggleFullscreen("prefer-media", event);
+        break;
+      case "speedUp":
+      case "slowDown":
+        const playbackRate = this.$state.playbackRate();
+        this.#media.remote.changePlaybackRate(
+          Math.max(0.25, Math.min(2, playbackRate + (method === "speedUp" ? 0.25 : -0.25))),
+          event
+        );
+        break;
+      default:
+        this.#media.remote[method]?.(event);
+    }
+    this.$state.lastKeyboardAction.set({
+      action: method,
+      event
+    });
+  }
+  #onPreventVideoKeys(event) {
+    if (isHTMLMediaElement(event.target) && this.#getMatchingMethod(event).method) {
+      event.preventDefault();
+    }
+  }
+  #getMatchingMethod(event) {
+    const keyShortcuts = {
+      ...this.$props.keyShortcuts(),
+      ...this.#media.ariaKeys
+    };
+    const method = Object.keys(keyShortcuts).find((method2) => {
+      const value = keyShortcuts[method2], keys = isArray(value) ? value.join(" ") : isString(value) ? value : value?.keys;
+      const combinations = (isArray(keys) ? keys : keys?.split(" "))?.map(
+        (key) => replaceSymbolKeys(key).replace(/Control/g, "Ctrl").split("+")
+      );
+      return combinations?.some((combo) => {
+        const modifierKeys = new Set(combo.filter((key) => MODIFIER_KEYS.has(key)));
+        if ("<>".includes(event.key)) {
+          modifierKeys.add("Shift");
+        }
+        for (const modKey of MODIFIER_KEYS) {
+          const modKeyProp = modKey.toLowerCase() + "Key";
+          if (!modifierKeys.has(modKey) && event[modKeyProp]) {
+            return false;
+          }
+        }
+        return combo.every((key) => {
+          return MODIFIER_KEYS.has(key) ? event[key.toLowerCase() + "Key"] : event.key === key.replace("Space", " ");
+        });
+      });
+    });
+    return {
+      method,
+      value: method ? keyShortcuts[method] : null
+    };
+  }
+  #seekTotal;
+  #calcSeekAmount(event, type) {
+    const seekBy = event.shiftKey ? 10 : 5;
+    return this.#seekTotal = Math.max(
+      0,
+      Math.min(
+        (this.#seekTotal ?? this.$state.currentTime()) + (type === "seekForward" ? +seekBy : -seekBy),
+        this.$state.duration()
+      )
+    );
+  }
+  #timeSlider = null;
+  #forwardTimeKeyboardEvent(event, forward) {
+    this.#timeSlider?.dispatchEvent(
+      new KeyboardEvent(event.type, {
+        key: !forward ? "Left" : "Right",
+        shiftKey: event.shiftKey,
+        trigger: event
+      })
+    );
+  }
+  #seeking(event, type, forward) {
+    if (!this.$state.canSeek()) return;
+    if (!this.#timeSlider) {
+      this.#timeSlider = this.el.querySelector("[data-media-time-slider]");
+    }
+    if (this.#timeSlider) {
+      this.#forwardTimeKeyboardEvent(event, forward);
+    } else {
+      this.#media.remote.seeking(this.#calcSeekAmount(event, type), event);
+    }
+  }
+}
+const SYMBOL_KEY_MAP = ["!", "@", "#", "$", "%", "^", "&", "*", "(", ")"];
+function replaceSymbolKeys(key) {
+  return key.replace(/Shift\+(\d)/g, (_, num) => SYMBOL_KEY_MAP[num - 1]);
+}
+function modifierKeyPressed(event) {
+  for (const key of MODIFIER_KEYS) {
+    if (event[key.toLowerCase() + "Key"]) {
+      return true;
+    }
+  }
+  return false;
+}
+
+class MediaControls extends MediaPlayerController {
+  #idleTimer = -2;
+  #pausedTracking = false;
+  #hideOnMouseLeave = signal(false);
+  #isMouseOutside = signal(false);
+  #focusedItem = null;
+  #canIdle = signal(true);
+  /**
+   * The default amount of delay in milliseconds while media playback is progressing without user
+   * activity to indicate an idle state (i.e., hide controls).
+   *
+   * @defaultValue 2000
+   */
+  defaultDelay = 2e3;
+  /**
+   * Whether controls can hide after a delay in user interaction. If this is false, controls will
+   * not hide and be user controlled.
+   */
+  get canIdle() {
+    return this.#canIdle();
+  }
+  set canIdle(canIdle) {
+    this.#canIdle.set(canIdle);
+  }
+  /**
+   * Whether controls visibility should be toggled when the mouse enters and leaves the player
+   * container.
+   *
+   * @defaultValue false
+   */
+  get hideOnMouseLeave() {
+    const { hideControlsOnMouseLeave } = this.$props;
+    return this.#hideOnMouseLeave() || hideControlsOnMouseLeave();
+  }
+  set hideOnMouseLeave(hide) {
+    this.#hideOnMouseLeave.set(hide);
+  }
+  /**
+   * Whether media controls are currently visible.
+   */
+  get showing() {
+    return this.$state.controlsVisible();
+  }
+  /**
+   * Show controls.
+   */
+  show(delay = 0, trigger) {
+    this.#clearIdleTimer();
+    if (!this.#pausedTracking) {
+      this.#changeVisibility(true, delay, trigger);
+    }
+  }
+  /**
+   * Hide controls.
+   */
+  hide(delay = this.defaultDelay, trigger) {
+    this.#clearIdleTimer();
+    if (!this.#pausedTracking) {
+      this.#changeVisibility(false, delay, trigger);
+    }
+  }
+  /**
+   * Whether all idle tracking on controls should be paused until resumed again.
+   */
+  pause(trigger) {
+    this.#pausedTracking = true;
+    this.#clearIdleTimer();
+    this.#changeVisibility(true, 0, trigger);
+  }
+  resume(trigger) {
+    this.#pausedTracking = false;
+    if (this.$state.paused()) return;
+    this.#changeVisibility(false, this.defaultDelay, trigger);
+  }
+  onConnect() {
+    effect(this.#init.bind(this));
+  }
+  #init() {
+    const { viewType } = this.$state;
+    if (!this.el || !this.#canIdle()) return;
+    if (viewType() === "audio") {
+      this.show();
+      return;
+    }
+    effect(this.#watchMouse.bind(this));
+    effect(this.#watchPaused.bind(this));
+    const onPlay = this.#onPlay.bind(this), onPause = this.#onPause.bind(this), onEnd = this.#onEnd.bind(this);
+    new EventsController(this.el).add("can-play", (event) => this.show(0, event)).add("play", onPlay).add("pause", onPause).add("end", onEnd).add("auto-play-fail", onPause);
+  }
+  #watchMouse() {
+    if (!this.el) return;
+    const { started, pointer, paused } = this.$state;
+    if (!started() || pointer() !== "fine") return;
+    const events = new EventsController(this.el), shouldHideOnMouseLeave = this.hideOnMouseLeave;
+    if (!shouldHideOnMouseLeave || !this.#isMouseOutside()) {
+      effect(() => {
+        if (!paused()) events.add("pointermove", this.#onStopIdle.bind(this));
+      });
+    }
+    if (shouldHideOnMouseLeave) {
+      events.add("mouseenter", this.#onMouseEnter.bind(this)).add("mouseleave", this.#onMouseLeave.bind(this));
+    }
+  }
+  #watchPaused() {
+    const { paused, started, autoPlayError } = this.$state;
+    if (paused() || autoPlayError() && !started()) return;
+    const onStopIdle = this.#onStopIdle.bind(this);
+    effect(() => {
+      if (!this.el) return;
+      const pointer = this.$state.pointer(), isTouch = pointer === "coarse", events = new EventsController(this.el), eventTypes = [isTouch ? "touchend" : "pointerup", "keydown"];
+      for (const eventType of eventTypes) {
+        events.add(eventType, onStopIdle, { passive: false });
+      }
+    });
+  }
+  #onPlay(event) {
+    if (event.triggers.hasType("ended")) return;
+    this.show(0, event);
+    this.hide(void 0, event);
+  }
+  #onPause(event) {
+    this.show(0, event);
+  }
+  #onEnd(event) {
+    const { loop } = this.$state;
+    if (loop()) this.hide(0, event);
+  }
+  #onMouseEnter(event) {
+    this.#isMouseOutside.set(false);
+    this.show(0, event);
+    this.hide(void 0, event);
+  }
+  #onMouseLeave(event) {
+    this.#isMouseOutside.set(true);
+    this.hide(0, event);
+  }
+  #clearIdleTimer() {
+    window.clearTimeout(this.#idleTimer);
+    this.#idleTimer = -1;
+  }
+  #onStopIdle(event) {
+    if (
+      // @ts-expect-error
+      event.MEDIA_GESTURE || this.#pausedTracking || isTouchPinchEvent(event)
+    ) {
+      return;
+    }
+    if (isKeyboardEvent(event)) {
+      if (event.key === "Escape") {
+        this.el?.focus();
+        this.#focusedItem = null;
+      } else if (this.#focusedItem) {
+        event.preventDefault();
+        requestAnimationFrame(() => {
+          this.#focusedItem?.focus();
+          this.#focusedItem = null;
+        });
+      }
+    }
+    this.show(0, event);
+    this.hide(this.defaultDelay, event);
+  }
+  #changeVisibility(visible, delay, trigger) {
+    if (delay === 0) {
+      this.#onChange(visible, trigger);
+      return;
+    }
+    this.#idleTimer = window.setTimeout(() => {
+      if (!this.scope) return;
+      this.#onChange(visible && !this.#pausedTracking, trigger);
+    }, delay);
+  }
+  #onChange(visible, trigger) {
+    if (this.$state.controlsVisible() === visible) return;
+    this.$state.controlsVisible.set(visible);
+    if (!visible && document.activeElement && this.el?.contains(document.activeElement)) {
+      this.#focusedItem = document.activeElement;
+      requestAnimationFrame(() => {
+        this.el?.focus({ preventScroll: true });
+      });
+    }
+    this.dispatch("controls-change", {
+      detail: visible,
+      trigger
+    });
+  }
+}
+
+class AudioProviderLoader {
+  name = "audio";
+  target;
+  canPlay(src) {
+    if (!isAudioSrc(src)) return false;
+    return !isString(src.src) || src.type === "?" || canPlayAudioType(this.target, src.type);
+  }
+  mediaType() {
+    return "audio";
+  }
+  async load(ctx) {
+    return new (await import('../providers/vidstack-audio.js')).AudioProvider(this.target, ctx);
+  }
+}
+
+class VideoProviderLoader {
+  name = "video";
+  target;
+  canPlay(src) {
+    if (!isVideoSrc(src)) return false;
+    return !isString(src.src) || src.type === "?" || canPlayVideoType(this.target, src.type);
+  }
+  mediaType() {
+    return "video";
+  }
+  async load(ctx) {
+    return new (await import('../providers/vidstack-video.js')).VideoProvider(this.target, ctx);
+  }
+}
+
+class HLSProviderLoader extends VideoProviderLoader {
+  static supported = isHLSSupported();
+  name = "hls";
+  canPlay(src) {
+    return HLSProviderLoader.supported && isHLSSrc(src);
+  }
+  async load(context) {
+    return new (await import('../providers/vidstack-hls.js')).HLSProvider(this.target, context);
+  }
+}
+
+class DASHProviderLoader extends VideoProviderLoader {
+  static supported = isDASHSupported();
+  name = "dash";
+  canPlay(src) {
+    return DASHProviderLoader.supported && isDASHSrc(src);
+  }
+  async load(context) {
+    return new (await import('../providers/vidstack-dash.js')).DASHProvider(this.target, context);
+  }
+}
+
+class VimeoProviderLoader {
+  name = "vimeo";
+  target;
+  preconnect() {
+    const connections = [
+      "https://i.vimeocdn.com",
+      "https://f.vimeocdn.com",
+      "https://fresnel.vimeocdn.com"
+    ];
+    for (const url of connections) {
+      preconnect(url);
+    }
+  }
+  canPlay(src) {
+    return isString(src.src) && src.type === "video/vimeo";
+  }
+  mediaType() {
+    return "video";
+  }
+  async load(ctx) {
+    return new (await import('../providers/vidstack-vimeo.js')).VimeoProvider(this.target, ctx);
+  }
+  async loadPoster(src, ctx, abort) {
+    const { resolveVimeoVideoId, getVimeoVideoInfo } = await import('./vidstack-krOAtKMi.js');
+    if (!isString(src.src)) return null;
+    const { videoId, hash } = resolveVimeoVideoId(src.src);
+    if (videoId) {
+      return getVimeoVideoInfo(videoId, abort, hash).then((info) => info ? info.poster : null);
+    }
+    return null;
+  }
+}
+
+class YouTubeProviderLoader {
+  name = "youtube";
+  target;
+  preconnect() {
+    const connections = [
+      // Botguard script.
+      "https://www.google.com",
+      // Posters.
+      "https://i.ytimg.com",
+      // Ads.
+      "https://googleads.g.doubleclick.net",
+      "https://static.doubleclick.net"
+    ];
+    for (const url of connections) {
+      preconnect(url);
+    }
+  }
+  canPlay(src) {
+    return isString(src.src) && src.type === "video/youtube";
+  }
+  mediaType() {
+    return "video";
+  }
+  async load(ctx) {
+    return new (await import('../providers/vidstack-youtube.js')).YouTubeProvider(this.target, ctx);
+  }
+  async loadPoster(src, ctx, abort) {
+    const { findYouTubePoster, resolveYouTubeVideoId } = await import('./vidstack-Dm1xEU9Q.js');
+    const videoId = isString(src.src) && resolveYouTubeVideoId(src.src);
+    if (videoId) return findYouTubePoster(videoId, abort);
+    return null;
+  }
+}
+
+const MEDIA_ATTRIBUTES = Symbol(0);
+const mediaAttributes = [
+  "autoPlay",
+  "canAirPlay",
+  "canFullscreen",
+  "canGoogleCast",
+  "canLoad",
+  "canLoadPoster",
+  "canPictureInPicture",
+  "canPlay",
+  "canSeek",
+  "ended",
+  "fullscreen",
+  "isAirPlayConnected",
+  "isGoogleCastConnected",
+  "live",
+  "liveEdge",
+  "loop",
+  "mediaType",
+  "muted",
+  "paused",
+  "pictureInPicture",
+  "playing",
+  "playsInline",
+  "remotePlaybackState",
+  "remotePlaybackType",
+  "seeking",
+  "started",
+  "streamType",
+  "viewType",
+  "waiting"
+];
+
+const mediaPlayerProps = {
+  artist: "",
+  artwork: null,
+  autoplay: false,
+  autoPlay: false,
+  clipStartTime: 0,
+  clipEndTime: 0,
+  controls: false,
+  currentTime: 0,
+  crossorigin: null,
+  crossOrigin: null,
+  duration: -1,
+  fullscreenOrientation: "landscape",
+  googleCast: {},
+  load: "visible",
+  posterLoad: "visible",
+  logLevel: "silent",
+  loop: false,
+  muted: false,
+  paused: true,
+  playsinline: false,
+  playsInline: false,
+  playbackRate: 1,
+  poster: "",
+  preload: "metadata",
+  preferNativeHLS: false,
+  src: "",
+  title: "",
+  controlsDelay: 2e3,
+  hideControlsOnMouseLeave: false,
+  viewType: "unknown",
+  streamType: "unknown",
+  volume: 1,
+  liveEdgeTolerance: 10,
+  minLiveDVRWindow: 60,
+  keyDisabled: false,
+  keyTarget: "player",
+  keyShortcuts: MEDIA_KEY_SHORTCUTS,
+  storage: null
+};
+
+class MediaLoadController extends MediaPlayerController {
+  #type;
+  #callback;
+  constructor(type, callback) {
+    super();
+    this.#type = type;
+    this.#callback = callback;
+  }
+  async onAttach(el) {
+    const load = this.$props[this.#type]();
+    if (load === "eager") {
+      requestAnimationFrame(this.#callback);
+    } else if (load === "idle") {
+      waitIdlePeriod(this.#callback);
+    } else if (load === "visible") {
+      let dispose, observer = new IntersectionObserver((entries) => {
+        if (!this.scope) return;
+        if (entries[0].isIntersecting) {
+          dispose?.();
+          dispose = void 0;
+          this.#callback();
+        }
+      });
+      observer.observe(el);
+      dispose = onDispose(() => observer.disconnect());
+    }
+  }
+}
+
+class MediaPlayerDelegate {
+  #handle;
+  #media;
+  constructor(handle, media) {
+    this.#handle = handle;
+    this.#media = media;
+  }
+  notify(type, ...init) {
+    this.#handle(
+      new DOMEvent(type, {
+        detail: init?.[0],
+        trigger: init?.[1]
+      })
+    );
+  }
+  async ready(info, trigger) {
+    return untrack(async () => {
+      const { logger } = this.#media, {
+        autoPlay,
+        canPlay,
+        started,
+        duration,
+        seekable,
+        buffered,
+        remotePlaybackInfo,
+        playsInline,
+        savedState,
+        source
+      } = this.#media.$state;
+      if (canPlay()) return;
+      const detail = {
+        duration: info?.duration ?? duration(),
+        seekable: info?.seekable ?? seekable(),
+        buffered: info?.buffered ?? buffered(),
+        provider: this.#media.$provider()
+      };
+      this.notify("can-play", detail, trigger);
+      tick();
+      let provider = this.#media.$provider(), { storage, qualities } = this.#media, { muted, volume, clipStartTime, playbackRate } = this.#media.$props;
+      await storage?.onLoad?.(source());
+      const savedPlaybackTime = savedState()?.currentTime, savedPausedState = savedState()?.paused, storageTime = await storage?.getTime(), startTime = savedPlaybackTime ?? storageTime ?? clipStartTime(), shouldAutoPlay = savedPausedState === false || savedPausedState !== true && !started() && autoPlay();
+      if (provider) {
+        provider.setVolume(await storage?.getVolume() ?? volume());
+        provider.setMuted(muted() || !!await storage?.getMuted());
+        const audioGain = await storage?.getAudioGain() ?? 1;
+        if (audioGain > 1) provider.audioGain?.setGain?.(audioGain);
+        provider.setPlaybackRate?.(await storage?.getPlaybackRate() ?? playbackRate());
+        provider.setPlaysInline?.(playsInline());
+        if (startTime > 0) provider.setCurrentTime(startTime);
+      }
+      const prefQuality = await storage?.getVideoQuality();
+      if (prefQuality && qualities.length) {
+        let currentQuality = null, currentScore = Infinity;
+        for (const quality of qualities) {
+          const score = Math.abs(prefQuality.width - quality.width) + Math.abs(prefQuality.height - quality.height) + (prefQuality.bitrate ? Math.abs(prefQuality.bitrate - (quality.bitrate ?? 0)) : 0);
+          if (score < currentScore) {
+            currentQuality = quality;
+            currentScore = score;
+          }
+        }
+        if (currentQuality) currentQuality.selected = true;
+      }
+      if (canPlay() && shouldAutoPlay) {
+        await this.#attemptAutoplay(trigger);
+      } else if (storageTime && storageTime > 0) {
+        this.notify("started", void 0, trigger);
+      }
+      remotePlaybackInfo.set(null);
+    });
+  }
+  async #attemptAutoplay(trigger) {
+    const {
+      player,
+      $state: { autoPlaying, muted }
+    } = this.#media;
+    autoPlaying.set(true);
+    const attemptEvent = new DOMEvent("auto-play-attempt", { trigger });
+    try {
+      await player.play(attemptEvent);
+    } catch (error) {
+    }
+  }
+}
+
+class Queue {
+  #queue = /* @__PURE__ */ new Map();
+  /**
+   * Queue the given `item` under the given `key` to be processed at a later time by calling
+   * `serve(key)`.
+   */
+  enqueue(key, item) {
+    this.#queue.set(key, item);
+  }
+  /**
+   * Process item in queue for the given `key`.
+   */
+  serve(key) {
+    const value = this.peek(key);
+    this.#queue.delete(key);
+    return value;
+  }
+  /**
+   * Peek at item in queue for the given `key`.
+   */
+  peek(key) {
+    return this.#queue.get(key);
+  }
+  /**
+   * Removes queued item under the given `key`.
+   */
+  delete(key) {
+    this.#queue.delete(key);
+  }
+  /**
+   * Clear all items in the queue.
+   */
+  clear() {
+    this.#queue.clear();
+  }
+}
+
+class RequestQueue {
+  #serving = false;
+  #pending = deferredPromise();
+  #queue = /* @__PURE__ */ new Map();
+  /**
+   * The number of callbacks that are currently in queue.
+   */
+  get size() {
+    return this.#queue.size;
+  }
+  /**
+   * Whether items in the queue are being served immediately, otherwise they're queued to
+   * be processed later.
+   */
+  get isServing() {
+    return this.#serving;
+  }
+  /**
+   * Waits for the queue to be flushed (ie: start serving).
+   */
+  async waitForFlush() {
+    if (this.#serving) return;
+    await this.#pending.promise;
+  }
+  /**
+   * Queue the given `callback` to be invoked at a later time by either calling the `serve()` or
+   * `start()` methods. If the queue has started serving (i.e., `start()` was already called),
+   * then the callback will be invoked immediately.
+   *
+   * @param key - Uniquely identifies this callback so duplicates are ignored.
+   * @param callback - The function to call when this item in the queue is being served.
+   */
+  enqueue(key, callback) {
+    if (this.#serving) {
+      callback();
+      return;
+    }
+    this.#queue.delete(key);
+    this.#queue.set(key, callback);
+  }
+  /**
+   * Invokes the callback with the given `key` in the queue (if it exists).
+   */
+  serve(key) {
+    this.#queue.get(key)?.();
+    this.#queue.delete(key);
+  }
+  /**
+   * Flush all queued items and start serving future requests immediately until `stop()` is called.
+   */
+  start() {
+    this.#flush();
+    this.#serving = true;
+    if (this.#queue.size > 0) this.#flush();
+  }
+  /**
+   * Stop serving requests, they'll be queued until you begin processing again by calling `start()`.
+   */
+  stop() {
+    this.#serving = false;
+  }
+  /**
+   * Stop serving requests, empty the request queue, and release any promises waiting for the
+   * queue to flush.
+   */
+  reset() {
+    this.stop();
+    this.#queue.clear();
+    this.#release();
+  }
+  #flush() {
+    for (const key of this.#queue.keys()) this.serve(key);
+    this.#release();
+  }
+  #release() {
+    this.#pending.resolve();
+    this.#pending = deferredPromise();
+  }
+}
+
+class MediaRequestManager extends MediaPlayerController {
+  #stateMgr;
+  #request;
+  #media;
+  controls;
+  #fullscreen;
+  #orientation;
+  #$provider;
+  #providerQueue = new RequestQueue();
+  constructor(stateMgr, request, media) {
+    super();
+    this.#stateMgr = stateMgr;
+    this.#request = request;
+    this.#media = media;
+    this.#$provider = media.$provider;
+    this.controls = new MediaControls();
+    this.#fullscreen = new FullscreenController();
+    this.#orientation = new ScreenOrientationController();
+  }
+  onAttach() {
+    this.listen("fullscreen-change", this.#onFullscreenChange.bind(this));
+  }
+  onConnect(el) {
+    const names = Object.getOwnPropertyNames(Object.getPrototypeOf(this)), events = new EventsController(el), handleRequest = this.#handleRequest.bind(this);
+    for (const name of names) {
+      if (name.startsWith("media-")) {
+        events.add(name, handleRequest);
+      }
+    }
+    this.#attachLoadPlayListener();
+    effect(this.#watchProvider.bind(this));
+    effect(this.#watchControlsDelayChange.bind(this));
+    effect(this.#watchAudioGainSupport.bind(this));
+    effect(this.#watchAirPlaySupport.bind(this));
+    effect(this.#watchGoogleCastSupport.bind(this));
+    effect(this.#watchFullscreenSupport.bind(this));
+    effect(this.#watchPiPSupport.bind(this));
+  }
+  onDestroy() {
+    try {
+      const destroyEvent = this.createEvent("destroy"), { pictureInPicture, fullscreen } = this.$state;
+      if (fullscreen()) this.exitFullscreen("prefer-media", destroyEvent);
+      if (pictureInPicture()) this.exitPictureInPicture(destroyEvent);
+    } catch (e) {
+    }
+    this.#providerQueue.reset();
+  }
+  #attachLoadPlayListener() {
+    const { load } = this.$props, { canLoad } = this.$state;
+    if (load() !== "play" || canLoad()) return;
+    const off = this.listen("media-play-request", (event) => {
+      this.#handleLoadPlayStrategy(event);
+      off();
+    });
+  }
+  #watchProvider() {
+    const provider = this.#$provider(), canPlay = this.$state.canPlay();
+    if (provider && canPlay) {
+      this.#providerQueue.start();
+    }
+    return () => {
+      this.#providerQueue.stop();
+    };
+  }
+  #handleRequest(event) {
+    event.stopPropagation();
+    if (event.defaultPrevented) return;
+    if (!this[event.type]) return;
+    if (peek(this.#$provider)) {
+      this[event.type](event);
+    } else {
+      this.#providerQueue.enqueue(event.type, () => {
+        if (peek(this.#$provider)) this[event.type](event);
+      });
+    }
+  }
+  async play(trigger) {
+    const { canPlay, paused, autoPlaying } = this.$state;
+    if (this.#handleLoadPlayStrategy(trigger)) return;
+    if (!peek(paused)) return;
+    if (trigger) this.#request.queue.enqueue("media-play-request", trigger);
+    const isAutoPlaying = peek(autoPlaying);
+    try {
+      const provider = peek(this.#$provider);
+      throwIfNotReadyForPlayback(provider, peek(canPlay));
+      throwIfAutoplayingWithReducedMotion(isAutoPlaying);
+      return await provider.play();
+    } catch (error) {
+      const errorEvent = this.createEvent("play-fail", {
+        detail: coerceToError(error),
+        trigger
+      });
+      errorEvent.autoPlay = isAutoPlaying;
+      this.#stateMgr.handle(errorEvent);
+      throw error;
+    }
+  }
+  #handleLoadPlayStrategy(trigger) {
+    const { load } = this.$props, { canLoad } = this.$state;
+    if (load() === "play" && !canLoad()) {
+      const event = this.createEvent("media-start-loading", { trigger });
+      this.dispatchEvent(event);
+      this.#providerQueue.enqueue("media-play-request", async () => {
+        try {
+          await this.play(event);
+        } catch (error) {
+        }
+      });
+      return true;
+    }
+    return false;
+  }
+  async pause(trigger) {
+    const { canPlay, paused } = this.$state;
+    if (peek(paused)) return;
+    if (trigger) {
+      this.#request.queue.enqueue("media-pause-request", trigger);
+    }
+    try {
+      const provider = peek(this.#$provider);
+      throwIfNotReadyForPlayback(provider, peek(canPlay));
+      return await provider.pause();
+    } catch (error) {
+      this.#request.queue.delete("media-pause-request");
+      throw error;
+    }
+  }
+  setAudioGain(gain, trigger) {
+    const { audioGain, canSetAudioGain } = this.$state;
+    if (audioGain() === gain) return;
+    const provider = this.#$provider();
+    if (!provider?.audioGain || !canSetAudioGain()) {
+      throw Error("[vidstack] audio gain api not available");
+    }
+    if (trigger) {
+      this.#request.queue.enqueue("media-audio-gain-change-request", trigger);
+    }
+    provider.audioGain.setGain(gain);
+  }
+  seekToLiveEdge(trigger) {
+    const { canPlay, live, liveEdge, canSeek, liveSyncPosition, seekableEnd, userBehindLiveEdge } = this.$state;
+    userBehindLiveEdge.set(false);
+    if (peek(() => !live() || liveEdge() || !canSeek())) return;
+    const provider = peek(this.#$provider);
+    throwIfNotReadyForPlayback(provider, peek(canPlay));
+    if (trigger) this.#request.queue.enqueue("media-seek-request", trigger);
+    const end = seekableEnd() - 2;
+    provider.setCurrentTime(Math.min(end, liveSyncPosition() ?? end));
+  }
+  #wasPIPActive = false;
+  async enterFullscreen(target = "prefer-media", trigger) {
+    const adapter = this.#getFullscreenAdapter(target);
+    throwIfFullscreenNotSupported(target, adapter);
+    if (adapter.active) return;
+    if (peek(this.$state.pictureInPicture)) {
+      this.#wasPIPActive = true;
+      await this.exitPictureInPicture(trigger);
+    }
+    if (trigger) {
+      this.#request.queue.enqueue("media-enter-fullscreen-request", trigger);
+    }
+    return adapter.enter();
+  }
+  async exitFullscreen(target = "prefer-media", trigger) {
+    const adapter = this.#getFullscreenAdapter(target);
+    throwIfFullscreenNotSupported(target, adapter);
+    if (!adapter.active) return;
+    if (trigger) {
+      this.#request.queue.enqueue("media-exit-fullscreen-request", trigger);
+    }
+    try {
+      const result = await adapter.exit();
+      if (this.#wasPIPActive && peek(this.$state.canPictureInPicture)) {
+        await this.enterPictureInPicture();
+      }
+      return result;
+    } finally {
+      this.#wasPIPActive = false;
+    }
+  }
+  #getFullscreenAdapter(target) {
+    const provider = peek(this.#$provider);
+    return target === "prefer-media" && this.#fullscreen.supported || target === "media" ? this.#fullscreen : provider?.fullscreen;
+  }
+  async enterPictureInPicture(trigger) {
+    this.#throwIfPIPNotSupported();
+    if (this.$state.pictureInPicture()) return;
+    if (trigger) {
+      this.#request.queue.enqueue("media-enter-pip-request", trigger);
+    }
+    return await this.#$provider().pictureInPicture.enter();
+  }
+  async exitPictureInPicture(trigger) {
+    this.#throwIfPIPNotSupported();
+    if (!this.$state.pictureInPicture()) return;
+    if (trigger) {
+      this.#request.queue.enqueue("media-exit-pip-request", trigger);
+    }
+    try {
+      if (document?.pictureInPictureElement && document.exitPictureInPicture) {
+        await document.exitPictureInPicture();
+        return;
+      }
+      const provider = this.#$provider();
+      if (provider?.pictureInPicture) {
+        await provider.pictureInPicture.exit();
+        return;
+      }
+      const videoElements = document?.querySelectorAll?.("video") || [];
+      for (const video of videoElements) {
+        if (video === document.pictureInPictureElement) {
+          if (document.exitPictureInPicture) {
+            await document.exitPictureInPicture();
+            return;
+          }
+        }
+        if (video.webkitPresentationMode === "picture-in-picture") {
+          video.webkitSetPresentationMode("inline");
+          return;
+        }
+      }
+    } catch (error) {
+    }
+  }
+  #throwIfPIPNotSupported() {
+    if (this.$state.canPictureInPicture()) return;
+    throw Error(
+      "[vidstack] no pip support"
+    );
+  }
+  #watchControlsDelayChange() {
+    this.controls.defaultDelay = this.$props.controlsDelay();
+  }
+  #watchAudioGainSupport() {
+    const { canSetAudioGain } = this.$state, supported = !!this.#$provider()?.audioGain?.supported;
+    canSetAudioGain.set(supported);
+  }
+  #watchAirPlaySupport() {
+    const { canAirPlay } = this.$state, supported = !!this.#$provider()?.airPlay?.supported;
+    canAirPlay.set(supported);
+  }
+  #watchGoogleCastSupport() {
+    const { canGoogleCast, source } = this.$state, supported = IS_CHROME && !IS_IOS && canGoogleCastSrc(source());
+    canGoogleCast.set(supported);
+  }
+  #watchFullscreenSupport() {
+    const { canFullscreen } = this.$state, supported = this.#fullscreen.supported || !!this.#$provider()?.fullscreen?.supported;
+    canFullscreen.set(supported);
+  }
+  #watchPiPSupport() {
+    const { canPictureInPicture } = this.$state, supported = !!this.#$provider()?.pictureInPicture?.supported;
+    canPictureInPicture.set(supported);
+  }
+  async ["media-airplay-request"](event) {
+    try {
+      await this.requestAirPlay(event);
+    } catch (error) {
+    }
+  }
+  async requestAirPlay(trigger) {
+    try {
+      const adapter = this.#$provider()?.airPlay;
+      if (!adapter?.supported) {
+        throw Error(false ? "AirPlay adapter not available on provider." : "No AirPlay adapter.");
+      }
+      if (trigger) {
+        this.#request.queue.enqueue("media-airplay-request", trigger);
+      }
+      return await adapter.prompt();
+    } catch (error) {
+      this.#request.queue.delete("media-airplay-request");
+      throw error;
+    }
+  }
+  async ["media-google-cast-request"](event) {
+    try {
+      await this.requestGoogleCast(event);
+    } catch (error) {
+    }
+  }
+  #googleCastLoader;
+  async requestGoogleCast(trigger) {
+    try {
+      const { canGoogleCast } = this.$state;
+      if (!peek(canGoogleCast)) {
+        const error = Error(
+          false ? "Google Cast not available on this platform." : "Cast not available."
+        );
+        error.code = "CAST_NOT_AVAILABLE";
+        throw error;
+      }
+      preconnect("https://www.gstatic.com");
+      if (!this.#googleCastLoader) {
+        const $module = await import('./vidstack-Bf1Q6kqO.js');
+        this.#googleCastLoader = new $module.GoogleCastLoader();
+      }
+      await this.#googleCastLoader.prompt(this.#media);
+      if (trigger) {
+        this.#request.queue.enqueue("media-google-cast-request", trigger);
+      }
+      const isConnecting = peek(this.$state.remotePlaybackState) !== "disconnected";
+      if (isConnecting) {
+        this.$state.savedState.set({
+          paused: peek(this.$state.paused),
+          currentTime: peek(this.$state.currentTime)
+        });
+      }
+      this.$state.remotePlaybackLoader.set(isConnecting ? this.#googleCastLoader : null);
+    } catch (error) {
+      this.#request.queue.delete("media-google-cast-request");
+      throw error;
+    }
+  }
+  ["media-clip-start-change-request"](event) {
+    const { clipStartTime } = this.$state;
+    clipStartTime.set(event.detail);
+  }
+  ["media-clip-end-change-request"](event) {
+    const { clipEndTime } = this.$state;
+    clipEndTime.set(event.detail);
+    this.dispatch("duration-change", {
+      detail: event.detail,
+      trigger: event
+    });
+  }
+  ["media-duration-change-request"](event) {
+    const { providedDuration, clipEndTime } = this.$state;
+    providedDuration.set(event.detail);
+    if (clipEndTime() <= 0) {
+      this.dispatch("duration-change", {
+        detail: event.detail,
+        trigger: event
+      });
+    }
+  }
+  ["media-audio-track-change-request"](event) {
+    const { logger, audioTracks } = this.#media;
+    if (audioTracks.readonly) {
+      return;
+    }
+    const index = event.detail, track = audioTracks[index];
+    if (track) {
+      const key = event.type;
+      this.#request.queue.enqueue(key, event);
+      track.selected = true;
+    }
+  }
+  async ["media-enter-fullscreen-request"](event) {
+    try {
+      await this.enterFullscreen(event.detail, event);
+    } catch (error) {
+      this.#onFullscreenError(error, event);
+    }
+  }
+  async ["media-exit-fullscreen-request"](event) {
+    try {
+      await this.exitFullscreen(event.detail, event);
+    } catch (error) {
+      this.#onFullscreenError(error, event);
+    }
+  }
+  async #onFullscreenChange(event) {
+    const lockType = peek(this.$props.fullscreenOrientation), isFullscreen = event.detail;
+    if (isUndefined(lockType) || lockType === "none" || !this.#orientation.supported) return;
+    if (isFullscreen) {
+      if (this.#orientation.locked) return;
+      this.dispatch("media-orientation-lock-request", {
+        detail: lockType,
+        trigger: event
+      });
+    } else if (this.#orientation.locked) {
+      this.dispatch("media-orientation-unlock-request", {
+        trigger: event
+      });
+    }
+  }
+  #onFullscreenError(error, request) {
+    this.#stateMgr.handle(
+      this.createEvent("fullscreen-error", {
+        detail: coerceToError(error)
+      })
+    );
+  }
+  async ["media-orientation-lock-request"](event) {
+    const key = event.type;
+    try {
+      this.#request.queue.enqueue(key, event);
+      await this.#orientation.lock(event.detail);
+    } catch (error) {
+      this.#request.queue.delete(key);
+    }
+  }
+  async ["media-orientation-unlock-request"](event) {
+    const key = event.type;
+    try {
+      this.#request.queue.enqueue(key, event);
+      await this.#orientation.unlock();
+    } catch (error) {
+      this.#request.queue.delete(key);
+    }
+  }
+  async ["media-enter-pip-request"](event) {
+    try {
+      await this.enterPictureInPicture(event);
+    } catch (error) {
+      this.#onPictureInPictureError(error, event);
+    }
+  }
+  async ["media-exit-pip-request"](event) {
+    try {
+      await this.exitPictureInPicture(event);
+    } catch (error) {
+      this.#onPictureInPictureError(error, event);
+    }
+  }
+  #onPictureInPictureError(error, request) {
+    this.#stateMgr.handle(
+      this.createEvent("picture-in-picture-error", {
+        detail: coerceToError(error)
+      })
+    );
+  }
+  ["media-live-edge-request"](event) {
+    const { live, liveEdge, canSeek } = this.$state;
+    if (!live() || liveEdge() || !canSeek()) return;
+    this.#request.queue.enqueue("media-seek-request", event);
+    try {
+      this.seekToLiveEdge();
+    } catch (error) {
+      this.#request.queue.delete("media-seek-request");
+    }
+  }
+  async ["media-loop-request"](event) {
+    try {
+      this.#request.looping = true;
+      this.#request.replaying = true;
+      await this.play(event);
+    } catch (error) {
+      this.#request.looping = false;
+    }
+  }
+  ["media-user-loop-change-request"](event) {
+    this.$state.userPrefersLoop.set(event.detail);
+  }
+  async ["media-pause-request"](event) {
+    if (this.$state.paused()) return;
+    try {
+      await this.pause(event);
+    } catch (error) {
+    }
+  }
+  async ["media-play-request"](event) {
+    if (!this.$state.paused()) return;
+    try {
+      await this.play(event);
+    } catch (e) {
+    }
+  }
+  ["media-rate-change-request"](event) {
+    const { playbackRate, canSetPlaybackRate } = this.$state;
+    if (playbackRate() === event.detail || !canSetPlaybackRate()) return;
+    const provider = this.#$provider();
+    if (!provider?.setPlaybackRate) return;
+    this.#request.queue.enqueue("media-rate-change-request", event);
+    provider.setPlaybackRate(event.detail);
+  }
+  ["media-audio-gain-change-request"](event) {
+    try {
+      this.setAudioGain(event.detail, event);
+    } catch (e) {
+    }
+  }
+  ["media-quality-change-request"](event) {
+    const { qualities, storage, logger } = this.#media;
+    if (qualities.readonly) {
+      return;
+    }
+    this.#request.queue.enqueue("media-quality-change-request", event);
+    const index = event.detail;
+    if (index < 0) {
+      qualities.autoSelect(event);
+      if (event.isOriginTrusted) storage?.setVideoQuality?.(null);
+    } else {
+      const quality = qualities[index];
+      if (quality) {
+        quality.selected = true;
+        if (event.isOriginTrusted) {
+          storage?.setVideoQuality?.({
+            id: quality.id,
+            width: quality.width,
+            height: quality.height,
+            bitrate: quality.bitrate
+          });
+        }
+      }
+    }
+  }
+  ["media-pause-controls-request"](event) {
+    const key = event.type;
+    this.#request.queue.enqueue(key, event);
+    this.controls.pause(event);
+  }
+  ["media-resume-controls-request"](event) {
+    const key = event.type;
+    this.#request.queue.enqueue(key, event);
+    this.controls.resume(event);
+  }
+  ["media-seek-request"](event) {
+    const { canSeek, ended, live, seekableEnd, userBehindLiveEdge } = this.$state, seekTime = event.detail;
+    if (ended()) this.#request.replaying = true;
+    const key = event.type;
+    this.#request.seeking = false;
+    this.#request.queue.delete(key);
+    const boundedTime = boundTime(seekTime, this.$state);
+    if (!Number.isFinite(boundedTime) || !canSeek()) return;
+    this.#request.queue.enqueue(key, event);
+    this.#$provider().setCurrentTime(boundedTime);
+    if (live() && event.isOriginTrusted && Math.abs(seekableEnd() - boundedTime) >= 2) {
+      userBehindLiveEdge.set(true);
+    }
+  }
+  ["media-seeking-request"](event) {
+    const key = event.type;
+    this.#request.queue.enqueue(key, event);
+    this.$state.seeking.set(true);
+    this.#request.seeking = true;
+  }
+  ["media-start-loading"](event) {
+    if (this.$state.canLoad()) return;
+    const key = event.type;
+    this.#request.queue.enqueue(key, event);
+    this.#stateMgr.handle(this.createEvent("can-load"));
+  }
+  ["media-poster-start-loading"](event) {
+    if (this.$state.canLoadPoster()) return;
+    const key = event.type;
+    this.#request.queue.enqueue(key, event);
+    this.#stateMgr.handle(this.createEvent("can-load-poster"));
+  }
+  ["media-text-track-change-request"](event) {
+    const { index, mode } = event.detail, track = this.#media.textTracks[index];
+    if (track) {
+      const key = event.type;
+      this.#request.queue.enqueue(key, event);
+      track.setMode(mode, event);
+    }
+  }
+  ["media-mute-request"](event) {
+    if (this.$state.muted()) return;
+    const key = event.type;
+    this.#request.queue.enqueue(key, event);
+    this.#$provider().setMuted(true);
+  }
+  ["media-unmute-request"](event) {
+    const { muted, volume } = this.$state;
+    if (!muted()) return;
+    const key = event.type;
+    this.#request.queue.enqueue(key, event);
+    this.#media.$provider().setMuted(false);
+    if (volume() === 0) {
+      this.#request.queue.enqueue(key, event);
+      this.#$provider().setVolume(0.25);
+    }
+  }
+  ["media-volume-change-request"](event) {
+    const { muted, volume } = this.$state;
+    const newVolume = event.detail;
+    if (volume() === newVolume) return;
+    const key = event.type;
+    this.#request.queue.enqueue(key, event);
+    this.#$provider().setVolume(newVolume);
+    if (newVolume > 0 && muted()) {
+      this.#request.queue.enqueue(key, event);
+      this.#$provider().setMuted(false);
+    }
+  }
+  #logError(title, error, request) {
+    return;
+  }
+}
+function throwIfNotReadyForPlayback(provider, canPlay) {
+  if (provider && canPlay) return;
+  throw Error(
+    "[vidstack] media not ready"
+  );
+}
+function throwIfFullscreenNotSupported(target, fullscreen) {
+  if (fullscreen?.supported) return;
+  throw Error(
+    "[vidstack] no fullscreen support"
+  );
+}
+function throwIfAutoplayingWithReducedMotion(autoplaying) {
+  if (!prefersReducedMotion() || !autoplaying) return;
+  throw Error(
+    "[vidstack] autoplay blocked"
+  );
+}
+class MediaRequestContext {
+  seeking = false;
+  looping = false;
+  replaying = false;
+  queue = new Queue();
+}
+
+const TRACKED_EVENT = /* @__PURE__ */ new Set([
+  "auto-play",
+  "auto-play-fail",
+  "can-load",
+  "sources-change",
+  "source-change",
+  "load-start",
+  "abort",
+  "error",
+  "loaded-metadata",
+  "loaded-data",
+  "can-play",
+  "play",
+  "play-fail",
+  "pause",
+  "playing",
+  "seeking",
+  "seeked",
+  "waiting"
+]);
+
+class MediaStateManager extends MediaPlayerController {
+  #request;
+  #media;
+  #trackedEvents = /* @__PURE__ */ new Map();
+  #clipEnded = false;
+  #playedIntervals = [];
+  #playedInterval = [-1, -1];
+  #firingWaiting = false;
+  #waitingTrigger;
+  constructor(request, media) {
+    super();
+    this.#request = request;
+    this.#media = media;
+  }
+  onAttach(el) {
+    el.setAttribute("aria-busy", "true");
+    new EventsController(this).add("fullscreen-change", this["fullscreen-change"].bind(this)).add("fullscreen-error", this["fullscreen-error"].bind(this)).add("orientation-change", this["orientation-change"].bind(this));
+  }
+  onConnect(el) {
+    effect(this.#watchCanSetVolume.bind(this));
+    this.#addTextTrackListeners();
+    this.#addQualityListeners();
+    this.#addAudioTrackListeners();
+    this.#resumePlaybackOnConnect();
+    onDispose(this.#pausePlaybackOnDisconnect.bind(this));
+  }
+  onDestroy() {
+    const { audioTracks, qualities, textTracks } = this.#media;
+    audioTracks[ListSymbol.reset]();
+    qualities[ListSymbol.reset]();
+    textTracks[ListSymbol.reset]();
+    this.#stopWatchingQualityResize();
+  }
+  handle(event) {
+    if (!this.scope) return;
+    const type = event.type;
+    untrack(() => this[event.type]?.(event));
+    {
+      if (TRACKED_EVENT.has(type)) this.#trackedEvents.set(type, event);
+      this.dispatch(event);
+    }
+  }
+  #isPlayingOnDisconnect = false;
+  #resumePlaybackOnConnect() {
+    if (!this.#isPlayingOnDisconnect) return;
+    requestAnimationFrame(() => {
+      if (!this.scope) return;
+      this.#media.remote.play(new DOMEvent("dom-connect"));
+    });
+    this.#isPlayingOnDisconnect = false;
+  }
+  #pausePlaybackOnDisconnect() {
+    if (this.#isPlayingOnDisconnect) return;
+    this.#isPlayingOnDisconnect = !this.$state.paused();
+    this.#media.$provider()?.pause();
+  }
+  #resetTracking() {
+    this.#stopWaiting();
+    this.#clipEnded = false;
+    this.#request.replaying = false;
+    this.#request.looping = false;
+    this.#firingWaiting = false;
+    this.#waitingTrigger = void 0;
+    this.#trackedEvents.clear();
+  }
+  #satisfyRequest(request, event) {
+    const requestEvent = this.#request.queue.serve(request);
+    if (!requestEvent) return;
+    event.request = requestEvent;
+    event.triggers.add(requestEvent);
+  }
+  #addTextTrackListeners() {
+    this.#onTextTracksChange();
+    this.#onTextTrackModeChange();
+    const textTracks = this.#media.textTracks;
+    new EventsController(textTracks).add("add", this.#onTextTracksChange.bind(this)).add("remove", this.#onTextTracksChange.bind(this)).add("mode-change", this.#onTextTrackModeChange.bind(this));
+  }
+  #addQualityListeners() {
+    const qualities = this.#media.qualities;
+    new EventsController(qualities).add("add", this.#onQualitiesChange.bind(this)).add("remove", this.#onQualitiesChange.bind(this)).add("change", this.#onQualityChange.bind(this)).add("auto-change", this.#onAutoQualityChange.bind(this)).add("readonly-change", this.#onCanSetQualityChange.bind(this));
+  }
+  #addAudioTrackListeners() {
+    const audioTracks = this.#media.audioTracks;
+    new EventsController(audioTracks).add("add", this.#onAudioTracksChange.bind(this)).add("remove", this.#onAudioTracksChange.bind(this)).add("change", this.#onAudioTrackChange.bind(this));
+  }
+  #onTextTracksChange(event) {
+    const { textTracks } = this.$state;
+    textTracks.set(this.#media.textTracks.toArray());
+    this.dispatch("text-tracks-change", {
+      detail: textTracks(),
+      trigger: event
+    });
+  }
+  #onTextTrackModeChange(event) {
+    if (event) this.#satisfyRequest("media-text-track-change-request", event);
+    const current = this.#media.textTracks.selected, { textTrack } = this.$state;
+    if (textTrack() !== current) {
+      textTrack.set(current);
+      this.dispatch("text-track-change", {
+        detail: current,
+        trigger: event
+      });
+    }
+  }
+  #onAudioTracksChange(event) {
+    const { audioTracks } = this.$state;
+    audioTracks.set(this.#media.audioTracks.toArray());
+    this.dispatch("audio-tracks-change", {
+      detail: audioTracks(),
+      trigger: event
+    });
+  }
+  #onAudioTrackChange(event) {
+    const { audioTrack } = this.$state;
+    audioTrack.set(this.#media.audioTracks.selected);
+    if (event) this.#satisfyRequest("media-audio-track-change-request", event);
+    this.dispatch("audio-track-change", {
+      detail: audioTrack(),
+      trigger: event
+    });
+  }
+  #onQualitiesChange(event) {
+    const { qualities } = this.$state;
+    qualities.set(this.#media.qualities.toArray());
+    this.dispatch("qualities-change", {
+      detail: qualities(),
+      trigger: event
+    });
+  }
+  #onQualityChange(event) {
+    const { quality } = this.$state;
+    quality.set(this.#media.qualities.selected);
+    if (event) this.#satisfyRequest("media-quality-change-request", event);
+    this.dispatch("quality-change", {
+      detail: quality(),
+      trigger: event
+    });
+  }
+  #onAutoQualityChange() {
+    const { qualities } = this.#media, isAuto = qualities.auto;
+    this.$state.autoQuality.set(isAuto);
+    if (!isAuto) this.#stopWatchingQualityResize();
+  }
+  #stopQualityResizeEffect = null;
+  #watchQualityResize() {
+    this.#stopWatchingQualityResize();
+    this.#stopQualityResizeEffect = effect(() => {
+      const { qualities } = this.#media, { mediaWidth, mediaHeight } = this.$state, w = mediaWidth(), h = mediaHeight();
+      if (w === 0 || h === 0) return;
+      let selectedQuality = null, minScore = Infinity;
+      for (const quality of qualities) {
+        const score = Math.abs(quality.width - w) + Math.abs(quality.height - h);
+        if (score < minScore) {
+          minScore = score;
+          selectedQuality = quality;
+        }
+      }
+      if (selectedQuality) {
+        qualities[ListSymbol.select](
+          selectedQuality,
+          true,
+          new DOMEvent("resize", { detail: { width: w, height: h } })
+        );
+      }
+    });
+  }
+  #stopWatchingQualityResize() {
+    this.#stopQualityResizeEffect?.();
+    this.#stopQualityResizeEffect = null;
+  }
+  #onCanSetQualityChange() {
+    this.$state.canSetQuality.set(!this.#media.qualities.readonly);
+  }
+  #watchCanSetVolume() {
+    const { canSetVolume, isGoogleCastConnected } = this.$state;
+    if (isGoogleCastConnected()) {
+      canSetVolume.set(false);
+      return;
+    }
+    canChangeVolume().then(canSetVolume.set);
+  }
+  ["provider-change"](event) {
+    const prevProvider = this.#media.$provider(), newProvider = event.detail;
+    if (prevProvider?.type === newProvider?.type) return;
+    prevProvider?.destroy?.();
+    prevProvider?.scope?.dispose();
+    this.#media.$provider.set(event.detail);
+    if (prevProvider && event.detail === null) {
+      this.#resetMediaState(event);
+    }
+  }
+  ["provider-loader-change"](event) {
+  }
+  ["auto-play"](event) {
+    this.$state.autoPlayError.set(null);
+  }
+  ["auto-play-fail"](event) {
+    this.$state.autoPlayError.set(event.detail);
+    this.#resetTracking();
+  }
+  ["can-load"](event) {
+    this.$state.canLoad.set(true);
+    this.#trackedEvents.set("can-load", event);
+    this.#media.textTracks[TextTrackSymbol.canLoad]();
+    this.#satisfyRequest("media-start-loading", event);
+  }
+  ["can-load-poster"](event) {
+    this.$state.canLoadPoster.set(true);
+    this.#trackedEvents.set("can-load-poster", event);
+    this.#satisfyRequest("media-poster-start-loading", event);
+  }
+  ["media-type-change"](event) {
+    const sourceChangeEvent = this.#trackedEvents.get("source-change");
+    if (sourceChangeEvent) event.triggers.add(sourceChangeEvent);
+    const viewType = this.$state.viewType();
+    this.$state.mediaType.set(event.detail);
+    const providedViewType = this.$state.providedViewType(), currentViewType = providedViewType === "unknown" ? event.detail : providedViewType;
+    if (viewType !== currentViewType) {
+      {
+        setTimeout(() => {
+          requestAnimationFrame(() => {
+            if (!this.scope) return;
+            this.$state.inferredViewType.set(event.detail);
+            this.dispatch("view-type-change", {
+              detail: currentViewType,
+              trigger: event
+            });
+          });
+        }, 0);
+      }
+    }
+  }
+  ["stream-type-change"](event) {
+    const sourceChangeEvent = this.#trackedEvents.get("source-change");
+    if (sourceChangeEvent) event.triggers.add(sourceChangeEvent);
+    const { streamType, inferredStreamType } = this.$state;
+    inferredStreamType.set(event.detail);
+    event.detail = streamType();
+  }
+  ["rate-change"](event) {
+    const { storage } = this.#media, { canPlay } = this.$state;
+    this.$state.playbackRate.set(event.detail);
+    this.#satisfyRequest("media-rate-change-request", event);
+    if (canPlay()) {
+      storage?.setPlaybackRate?.(event.detail);
+    }
+  }
+  ["remote-playback-change"](event) {
+    const { remotePlaybackState, remotePlaybackType } = this.$state, { type, state } = event.detail, isConnected = state === "connected";
+    remotePlaybackType.set(type);
+    remotePlaybackState.set(state);
+    const key = type === "airplay" ? "media-airplay-request" : "media-google-cast-request";
+    if (isConnected) {
+      this.#satisfyRequest(key, event);
+    } else {
+      const requestEvent = this.#request.queue.peek(key);
+      if (requestEvent) {
+        event.request = requestEvent;
+        event.triggers.add(requestEvent);
+      }
+    }
+  }
+  ["sources-change"](event) {
+    const prevSources = this.$state.sources(), newSources = event.detail;
+    this.$state.sources.set(newSources);
+    this.#onSourceQualitiesChange(prevSources, newSources, event);
+  }
+  #onSourceQualitiesChange(prevSources, newSources, trigger) {
+    let { qualities } = this.#media, added = false, removed = false;
+    for (const prevSrc of prevSources) {
+      if (!isVideoQualitySrc(prevSrc)) continue;
+      const exists = newSources.some((s) => s.src === prevSrc.src);
+      if (!exists) {
+        const quality = qualities.getBySrc(prevSrc.src);
+        if (quality) {
+          qualities[ListSymbol.remove](quality, trigger);
+          removed = true;
+        }
+      }
+    }
+    if (removed && !qualities.length) {
+      this.$state.savedState.set(null);
+      qualities[ListSymbol.reset](trigger);
+    }
+    for (const src of newSources) {
+      if (!isVideoQualitySrc(src) || qualities.getBySrc(src.src)) continue;
+      const quality = {
+        id: src.id ?? src.label ?? (src.height ? src.height + "p" : "0p"),
+        width: src.width ?? 0,
+        bitrate: null,
+        codec: null,
+        ...src,
+        selected: false
+      };
+      qualities[ListSymbol.add](quality, trigger);
+      added = true;
+    }
+    if (added && !qualities[QualitySymbol.enableAuto]) {
+      this.#watchQualityResize();
+      qualities[QualitySymbol.enableAuto] = this.#watchQualityResize.bind(this);
+      qualities[QualitySymbol.setAuto](true, trigger);
+    }
+  }
+  ["source-change"](event) {
+    event.isQualityChange = event.originEvent?.type === "quality-change";
+    const source = event.detail;
+    this.#resetMediaState(event, event.isQualityChange);
+    this.#trackedEvents.set(event.type, event);
+    this.$state.source.set(source);
+    this.el?.setAttribute("aria-busy", "true");
+  }
+  #resetMediaState(event, isSourceQualityChange = false) {
+    const { audioTracks, qualities } = this.#media;
+    if (!isSourceQualityChange) {
+      this.#playedIntervals = [];
+      this.#playedInterval = [-1, -1];
+      audioTracks[ListSymbol.reset](event);
+      qualities[ListSymbol.reset](event);
+      softResetMediaState(this.$state, isSourceQualityChange);
+      this.#resetTracking();
+      return;
+    }
+    softResetMediaState(this.$state, isSourceQualityChange);
+    this.#resetTracking();
+  }
+  ["abort"](event) {
+    const sourceChangeEvent = this.#trackedEvents.get("source-change");
+    if (sourceChangeEvent) event.triggers.add(sourceChangeEvent);
+    const canLoadEvent = this.#trackedEvents.get("can-load");
+    if (canLoadEvent && !event.triggers.hasType("can-load")) {
+      event.triggers.add(canLoadEvent);
+    }
+  }
+  ["load-start"](event) {
+    const sourceChangeEvent = this.#trackedEvents.get("source-change");
+    if (sourceChangeEvent) event.triggers.add(sourceChangeEvent);
+  }
+  ["error"](event) {
+    this.$state.error.set(event.detail);
+    const abortEvent = this.#trackedEvents.get("abort");
+    if (abortEvent) event.triggers.add(abortEvent);
+  }
+  ["loaded-metadata"](event) {
+    const loadStartEvent = this.#trackedEvents.get("load-start");
+    if (loadStartEvent) event.triggers.add(loadStartEvent);
+  }
+  ["loaded-data"](event) {
+    const loadStartEvent = this.#trackedEvents.get("load-start");
+    if (loadStartEvent) event.triggers.add(loadStartEvent);
+  }
+  ["can-play"](event) {
+    const loadedMetadata = this.#trackedEvents.get("loaded-metadata");
+    if (loadedMetadata) event.triggers.add(loadedMetadata);
+    this.#onCanPlayDetail(event.detail);
+    this.el?.setAttribute("aria-busy", "false");
+  }
+  ["can-play-through"](event) {
+    this.#onCanPlayDetail(event.detail);
+    const canPlay = this.#trackedEvents.get("can-play");
+    if (canPlay) event.triggers.add(canPlay);
+  }
+  #onCanPlayDetail(detail) {
+    const { seekable, buffered, intrinsicDuration, canPlay } = this.$state;
+    canPlay.set(true);
+    buffered.set(detail.buffered);
+    seekable.set(detail.seekable);
+    const seekableEnd = getTimeRangesEnd(detail.seekable) ?? Infinity;
+    intrinsicDuration.set(seekableEnd);
+  }
+  ["duration-change"](event) {
+    const { live, intrinsicDuration, providedDuration, clipEndTime, ended } = this.$state, time = event.detail;
+    if (!live()) {
+      const duration = !Number.isNaN(time) ? time : 0;
+      intrinsicDuration.set(duration);
+      if (ended()) this.#onEndPrecisionChange(event);
+    }
+    if (providedDuration() > 0 || clipEndTime() > 0) {
+      event.stopImmediatePropagation();
+    }
+  }
+  ["progress"](event) {
+    const { buffered, seekable } = this.$state, { buffered: newBuffered, seekable: newSeekable } = event.detail, newBufferedEnd = getTimeRangesEnd(newBuffered), hasBufferedLengthChanged = newBuffered.length !== buffered().length, hasBufferedEndChanged = newBufferedEnd !== getTimeRangesEnd(buffered()), newSeekableEnd = getTimeRangesEnd(newSeekable), hasSeekableLengthChanged = newSeekable.length !== seekable().length, hasSeekableEndChanged = newSeekableEnd !== getTimeRangesEnd(seekable());
+    if (hasBufferedLengthChanged || hasBufferedEndChanged) {
+      buffered.set(newBuffered);
+    }
+    if (hasSeekableLengthChanged || hasSeekableEndChanged) {
+      seekable.set(newSeekable);
+    }
+  }
+  ["play"](event) {
+    const {
+      paused,
+      autoPlayError,
+      ended,
+      autoPlaying,
+      playsInline,
+      pointer,
+      muted,
+      viewType,
+      live,
+      userBehindLiveEdge
+    } = this.$state;
+    this.#resetPlaybackIfNeeded();
+    if (!paused()) {
+      event.stopImmediatePropagation();
+      return;
+    }
+    event.autoPlay = autoPlaying();
+    const waitingEvent = this.#trackedEvents.get("waiting");
+    if (waitingEvent) event.triggers.add(waitingEvent);
+    this.#satisfyRequest("media-play-request", event);
+    this.#trackedEvents.set("play", event);
+    paused.set(false);
+    autoPlayError.set(null);
+    if (event.autoPlay) {
+      this.handle(
+        this.createEvent("auto-play", {
+          detail: { muted: muted() },
+          trigger: event
+        })
+      );
+      autoPlaying.set(false);
+    }
+    if (ended() || this.#request.replaying) {
+      this.#request.replaying = false;
+      ended.set(false);
+      this.handle(this.createEvent("replay", { trigger: event }));
+    }
+    if (!playsInline() && viewType() === "video" && pointer() === "coarse") {
+      this.#media.remote.enterFullscreen("prefer-media", event);
+    }
+    if (live() && !userBehindLiveEdge()) {
+      this.#media.remote.seekToLiveEdge(event);
+    }
+  }
+  #resetPlaybackIfNeeded(trigger) {
+    const provider = peek(this.#media.$provider);
+    if (!provider) return;
+    const { ended, seekableStart, clipEndTime, currentTime, realCurrentTime, duration } = this.$state;
+    const shouldReset = ended() || realCurrentTime() < seekableStart() || clipEndTime() > 0 && realCurrentTime() >= clipEndTime() || Math.abs(currentTime() - duration()) < 0.1;
+    if (shouldReset) {
+      this.dispatch("media-seek-request", {
+        detail: seekableStart(),
+        trigger
+      });
+    }
+    return shouldReset;
+  }
+  ["play-fail"](event) {
+    const { muted, autoPlaying } = this.$state;
+    const playEvent = this.#trackedEvents.get("play");
+    if (playEvent) event.triggers.add(playEvent);
+    this.#satisfyRequest("media-play-request", event);
+    const { paused, playing } = this.$state;
+    paused.set(true);
+    playing.set(false);
+    this.#resetTracking();
+    this.#trackedEvents.set("play-fail", event);
+    if (event.autoPlay) {
+      this.handle(
+        this.createEvent("auto-play-fail", {
+          detail: {
+            muted: muted(),
+            error: event.detail
+          },
+          trigger: event
+        })
+      );
+      autoPlaying.set(false);
+    }
+  }
+  ["playing"](event) {
+    const playEvent = this.#trackedEvents.get("play"), seekedEvent = this.#trackedEvents.get("seeked");
+    if (playEvent) event.triggers.add(playEvent);
+    else if (seekedEvent) event.triggers.add(seekedEvent);
+    setTimeout(() => this.#resetTracking(), 0);
+    const {
+      paused,
+      playing,
+      live,
+      liveSyncPosition,
+      seekableEnd,
+      started,
+      currentTime,
+      seeking,
+      ended
+    } = this.$state;
+    paused.set(false);
+    playing.set(true);
+    seeking.set(false);
+    ended.set(false);
+    if (this.#request.looping) {
+      this.#request.looping = false;
+      return;
+    }
+    if (live() && !started() && currentTime() === 0) {
+      const end = liveSyncPosition() ?? seekableEnd() - 2;
+      if (Number.isFinite(end)) this.#media.$provider().setCurrentTime(end);
+    }
+    this["started"](event);
+  }
+  ["started"](event) {
+    const { started } = this.$state;
+    if (!started()) {
+      started.set(true);
+      this.handle(this.createEvent("started", { trigger: event }));
+    }
+  }
+  ["pause"](event) {
+    if (!this.el?.isConnected) {
+      this.#isPlayingOnDisconnect = true;
+    }
+    this.#satisfyRequest("media-pause-request", event);
+    const seekedEvent = this.#trackedEvents.get("seeked");
+    if (seekedEvent) event.triggers.add(seekedEvent);
+    const { paused, playing } = this.$state;
+    paused.set(true);
+    playing.set(false);
+    if (this.#clipEnded) {
+      setTimeout(() => {
+        this.handle(this.createEvent("end", { trigger: event }));
+        this.#clipEnded = false;
+      }, 0);
+    }
+    this.#resetTracking();
+  }
+  ["time-change"](event) {
+    if (this.#request.looping) {
+      event.stopImmediatePropagation();
+      return;
+    }
+    let { waiting, played, clipEndTime, realCurrentTime, currentTime } = this.$state, newTime = event.detail, endTime = clipEndTime();
+    realCurrentTime.set(newTime);
+    this.#updatePlayed();
+    waiting.set(false);
+    for (const track of this.#media.textTracks) {
+      track[TextTrackSymbol.updateActiveCues](newTime, event);
+    }
+    if (endTime > 0 && newTime >= endTime) {
+      this.#clipEnded = true;
+      this.dispatch("media-pause-request", { trigger: event });
+    }
+    this.#saveTime();
+    this.dispatch("time-update", {
+      detail: { currentTime: currentTime(), played: played() },
+      trigger: event
+    });
+  }
+  #updatePlayed() {
+    const { currentTime, played, paused } = this.$state;
+    if (paused()) return;
+    this.#playedInterval = updateTimeIntervals(
+      this.#playedIntervals,
+      this.#playedInterval,
+      currentTime()
+    );
+    played.set(new TimeRange(this.#playedIntervals));
+  }
+  // Called to update time again incase duration precision has changed.
+  #onEndPrecisionChange(trigger) {
+    const { clipStartTime, clipEndTime, duration } = this.$state, isClipped = clipStartTime() > 0 || clipEndTime() > 0;
+    if (isClipped) return;
+    this.handle(
+      this.createEvent("time-change", {
+        detail: duration(),
+        trigger
+      })
+    );
+  }
+  #saveTime() {
+    const { storage } = this.#media, { canPlay, realCurrentTime } = this.$state;
+    if (canPlay()) {
+      storage?.setTime?.(realCurrentTime());
+    }
+  }
+  ["audio-gain-change"](event) {
+    const { storage } = this.#media, { canPlay, audioGain } = this.$state;
+    audioGain.set(event.detail);
+    this.#satisfyRequest("media-audio-gain-change-request", event);
+    if (canPlay()) storage?.setAudioGain?.(audioGain());
+  }
+  ["volume-change"](event) {
+    const { storage } = this.#media, { volume, muted, canPlay } = this.$state, detail = event.detail;
+    volume.set(detail.volume);
+    muted.set(detail.muted || detail.volume === 0);
+    this.#satisfyRequest("media-volume-change-request", event);
+    this.#satisfyRequest(detail.muted ? "media-mute-request" : "media-unmute-request", event);
+    if (canPlay()) {
+      storage?.setVolume?.(volume());
+      storage?.setMuted?.(muted());
+    }
+  }
+  ["seeking"] = functionThrottle(
+    (event) => {
+      const { seeking, realCurrentTime, paused } = this.$state;
+      seeking.set(true);
+      realCurrentTime.set(event.detail);
+      this.#satisfyRequest("media-seeking-request", event);
+      if (paused()) {
+        this.#waitingTrigger = event;
+        this.#fireWaiting();
+      }
+      this.#playedInterval = [-1, -1];
+    },
+    150,
+    { leading: true }
+  );
+  ["seeked"](event) {
+    const { seeking, currentTime, realCurrentTime, paused, seekableEnd, ended, live } = this.$state;
+    if (this.#request.seeking) {
+      seeking.set(true);
+      event.stopImmediatePropagation();
+    } else if (seeking()) {
+      const waitingEvent = this.#trackedEvents.get("waiting");
+      if (waitingEvent) event.triggers.add(waitingEvent);
+      const seekingEvent = this.#trackedEvents.get("seeking");
+      if (seekingEvent && !event.triggers.has(seekingEvent)) {
+        event.triggers.add(seekingEvent);
+      }
+      if (paused()) this.#stopWaiting();
+      seeking.set(false);
+      realCurrentTime.set(event.detail);
+      this.#satisfyRequest("media-seek-request", event);
+      const origin = event?.originEvent;
+      if (origin?.isTrusted && !(origin instanceof MessageEvent) && !/seek/.test(origin.type)) {
+        this["started"](event);
+      }
+    }
+    if (!live()) {
+      if (Math.floor(currentTime()) !== Math.floor(seekableEnd())) {
+        ended.set(false);
+      } else {
+        this.end(event);
+      }
+    }
+  }
+  ["waiting"](event) {
+    if (this.#firingWaiting || this.#request.seeking) return;
+    event.stopImmediatePropagation();
+    this.#waitingTrigger = event;
+    this.#fireWaiting();
+  }
+  #fireWaiting = functionDebounce(() => {
+    if (!this.#waitingTrigger) return;
+    this.#firingWaiting = true;
+    const { waiting, playing } = this.$state;
+    waiting.set(true);
+    playing.set(false);
+    const event = this.createEvent("waiting", { trigger: this.#waitingTrigger });
+    this.#trackedEvents.set("waiting", event);
+    this.dispatch(event);
+    this.#waitingTrigger = void 0;
+    this.#firingWaiting = false;
+  }, 300);
+  ["end"](event) {
+    const { loop, ended } = this.$state;
+    if (!loop() && ended()) return;
+    if (loop()) {
+      setTimeout(() => {
+        requestAnimationFrame(() => {
+          this.#resetPlaybackIfNeeded(event);
+          this.dispatch("media-loop-request", { trigger: event });
+        });
+      }, 10);
+      return;
+    }
+    setTimeout(() => this.#onEnded(event), 0);
+  }
+  #onEnded(event) {
+    const { storage } = this.#media, { paused, seeking, ended, duration } = this.$state;
+    this.#onEndPrecisionChange(event);
+    if (!paused()) {
+      this.dispatch("pause", { trigger: event });
+    }
+    if (seeking()) {
+      this.dispatch("seeked", {
+        detail: duration(),
+        trigger: event
+      });
+    }
+    ended.set(true);
+    this.#resetTracking();
+    storage?.setTime?.(duration(), true);
+    this.dispatch("ended", {
+      trigger: event
+    });
+  }
+  #stopWaiting() {
+    this.#fireWaiting.cancel();
+    this.$state.waiting.set(false);
+  }
+  ["fullscreen-change"](event) {
+    const isFullscreen = event.detail;
+    this.$state.fullscreen.set(isFullscreen);
+    this.#satisfyRequest(
+      isFullscreen ? "media-enter-fullscreen-request" : "media-exit-fullscreen-request",
+      event
+    );
+  }
+  ["fullscreen-error"](event) {
+    this.#satisfyRequest("media-enter-fullscreen-request", event);
+    this.#satisfyRequest("media-exit-fullscreen-request", event);
+  }
+  ["orientation-change"](event) {
+    const isLocked = event.detail.lock;
+    this.#satisfyRequest(
+      isLocked ? "media-orientation-lock-request" : "media-orientation-unlock-request",
+      event
+    );
+  }
+  ["picture-in-picture-change"](event) {
+    const isPiP = event.detail;
+    this.$state.pictureInPicture.set(isPiP);
+    this.#satisfyRequest(isPiP ? "media-enter-pip-request" : "media-exit-pip-request", event);
+  }
+  ["picture-in-picture-error"](event) {
+    this.#satisfyRequest("media-enter-pip-request", event);
+    this.#satisfyRequest("media-exit-pip-request", event);
+  }
+  ["title-change"](event) {
+    if (!event.trigger) return;
+    event.stopImmediatePropagation();
+    this.$state.inferredTitle.set(event.detail);
+  }
+  ["poster-change"](event) {
+    if (!event.trigger) return;
+    event.stopImmediatePropagation();
+    this.$state.inferredPoster.set(event.detail);
+  }
+}
+
+class MediaStateSync extends MediaPlayerController {
+  onSetup() {
+    this.#init();
+    const effects = [
+      this.#watchMetadata,
+      this.#watchAutoplay,
+      this.#watchClipStartTime,
+      this.#watchClipEndTime,
+      this.#watchControls,
+      this.#watchCrossOrigin,
+      this.#watchDuration,
+      this.#watchLive,
+      this.#watchLiveEdge,
+      this.#watchLiveTolerance,
+      this.#watchLoop,
+      this.#watchPlaysInline,
+      this.#watchPoster,
+      this.#watchProvidedTypes,
+      this.#watchTitle
+    ];
+    for (const callback of effects) {
+      effect(callback.bind(this));
+    }
+  }
+  #init() {
+    const providedProps = {
+      duration: "providedDuration",
+      loop: "providedLoop",
+      poster: "providedPoster",
+      streamType: "providedStreamType",
+      title: "providedTitle",
+      viewType: "providedViewType"
+    };
+    const skip = /* @__PURE__ */ new Set([
+      "currentTime",
+      "paused",
+      "playbackRate",
+      "volume"
+    ]);
+    for (const prop of Object.keys(this.$props)) {
+      if (skip.has(prop)) continue;
+      this.$state[providedProps[prop] ?? prop]?.set(this.$props[prop]());
+    }
+    this.$state.muted.set(this.$props.muted() || this.$props.volume() === 0);
+  }
+  // Sync "provided" props with internal state. Provided props are used to differentiate from
+  // provider inferred values.
+  #watchProvidedTypes() {
+    const { viewType, streamType, title, poster, loop } = this.$props, $state = this.$state;
+    $state.providedPoster.set(poster());
+    $state.providedStreamType.set(streamType());
+    $state.providedViewType.set(viewType());
+    $state.providedTitle.set(title());
+    $state.providedLoop.set(loop());
+  }
+  #watchLogLevel() {
+    return;
+  }
+  #watchMetadata() {
+    const { artist, artwork } = this.$props;
+    this.$state.artist.set(artist());
+    this.$state.artwork.set(artwork());
+  }
+  #watchTitle() {
+    const { title } = this.$state;
+    this.dispatch("title-change", { detail: title() });
+  }
+  #watchAutoplay() {
+    const autoPlay = this.$props.autoPlay() || this.$props.autoplay();
+    this.$state.autoPlay.set(autoPlay);
+    this.dispatch("auto-play-change", { detail: autoPlay });
+  }
+  #watchLoop() {
+    const loop = this.$state.loop();
+    this.dispatch("loop-change", { detail: loop });
+  }
+  #watchControls() {
+    const controls = this.$props.controls();
+    this.$state.controls.set(controls);
+  }
+  #watchPoster() {
+    const { poster } = this.$state;
+    this.dispatch("poster-change", { detail: poster() });
+  }
+  #watchCrossOrigin() {
+    const crossOrigin = this.$props.crossOrigin() ?? this.$props.crossorigin(), value = crossOrigin === true ? "" : crossOrigin;
+    this.$state.crossOrigin.set(value);
+  }
+  #watchDuration() {
+    const { duration } = this.$props;
+    this.dispatch("media-duration-change-request", {
+      detail: duration()
+    });
+  }
+  #watchPlaysInline() {
+    const inline = this.$props.playsInline() || this.$props.playsinline();
+    this.$state.playsInline.set(inline);
+    this.dispatch("plays-inline-change", { detail: inline });
+  }
+  #watchClipStartTime() {
+    const { clipStartTime } = this.$props;
+    this.dispatch("media-clip-start-change-request", {
+      detail: clipStartTime()
+    });
+  }
+  #watchClipEndTime() {
+    const { clipEndTime } = this.$props;
+    this.dispatch("media-clip-end-change-request", {
+      detail: clipEndTime()
+    });
+  }
+  #watchLive() {
+    this.dispatch("live-change", { detail: this.$state.live() });
+  }
+  #watchLiveTolerance() {
+    this.$state.liveEdgeTolerance.set(this.$props.liveEdgeTolerance());
+    this.$state.minLiveDVRWindow.set(this.$props.minLiveDVRWindow());
+  }
+  #watchLiveEdge() {
+    this.dispatch("live-edge-change", { detail: this.$state.liveEdge() });
+  }
+}
+
+const actions = ["play", "pause", "seekforward", "seekbackward", "seekto"];
+class NavigatorMediaSession extends MediaPlayerController {
+  onConnect() {
+    effect(this.#onMetadataChange.bind(this));
+    effect(this.#onPlaybackStateChange.bind(this));
+    const handleAction = this.#handleAction.bind(this);
+    for (const action of actions) {
+      navigator.mediaSession.setActionHandler(action, handleAction);
+    }
+    onDispose(this.#onDisconnect.bind(this));
+  }
+  #onDisconnect() {
+    for (const action of actions) {
+      navigator.mediaSession.setActionHandler(action, null);
+    }
+  }
+  #onMetadataChange() {
+    const { title, artist, artwork, poster } = this.$state;
+    navigator.mediaSession.metadata = new MediaMetadata({
+      title: title(),
+      artist: artist(),
+      artwork: artwork() ?? [{ src: poster() }]
+    });
+  }
+  #onPlaybackStateChange() {
+    const { canPlay, paused } = this.$state;
+    navigator.mediaSession.playbackState = !canPlay() ? "none" : paused() ? "paused" : "playing";
+  }
+  #handleAction(details) {
+    const trigger = new DOMEvent(`media-session-action`, { detail: details });
+    switch (details.action) {
+      case "play":
+        this.dispatch("media-play-request", { trigger });
+        break;
+      case "pause":
+        this.dispatch("media-pause-request", { trigger });
+        break;
+      case "seekto":
+      case "seekforward":
+      case "seekbackward":
+        this.dispatch("media-seek-request", {
+          detail: isNumber(details.seekTime) ? details.seekTime : this.$state.currentTime() + (details.seekOffset ?? (details.action === "seekforward" ? 10 : -10)),
+          trigger
+        });
+        break;
+    }
+  }
+}
+
+class MediaPlayer extends Component {
+  static props = mediaPlayerProps;
+  static state = mediaState;
+  #media;
+  #stateMgr;
+  #requestMgr;
+  canPlayQueue = new RequestQueue();
+  remoteControl;
+  get #provider() {
+    return this.#media.$provider();
+  }
+  get #props() {
+    return this.$props;
+  }
+  constructor() {
+    super();
+    new MediaStateSync();
+    const context = {
+      player: this,
+      qualities: new VideoQualityList(),
+      audioTracks: new AudioTrackList(),
+      storage: null,
+      $provider: signal(null),
+      $providerSetup: signal(false),
+      $props: this.$props,
+      $state: this.$state
+    };
+    context.remote = this.remoteControl = new MediaRemoteControl(
+      void 0
+    );
+    context.remote.setPlayer(this);
+    context.textTracks = new TextTrackList();
+    context.textTracks[TextTrackSymbol.crossOrigin] = this.$state.crossOrigin;
+    context.textRenderers = new TextRenderers(context);
+    context.ariaKeys = {};
+    this.#media = context;
+    provideContext(mediaContext, context);
+    this.orientation = new ScreenOrientationController();
+    new FocusVisibleController();
+    new MediaKeyboardController(context);
+    const request = new MediaRequestContext();
+    this.#stateMgr = new MediaStateManager(request, context);
+    this.#requestMgr = new MediaRequestManager(this.#stateMgr, request, context);
+    context.delegate = new MediaPlayerDelegate(this.#stateMgr.handle.bind(this.#stateMgr), context);
+    context.notify = context.delegate.notify.bind(context.delegate);
+    if (typeof navigator !== "undefined" && "mediaSession" in navigator) {
+      new NavigatorMediaSession();
+    }
+    new MediaLoadController("load", this.startLoading.bind(this));
+    new MediaLoadController("posterLoad", this.startLoadingPoster.bind(this));
+  }
+  onSetup() {
+    this.#setupMediaAttributes();
+    effect(this.#watchCanPlay.bind(this));
+    effect(this.#watchMuted.bind(this));
+    effect(this.#watchPaused.bind(this));
+    effect(this.#watchVolume.bind(this));
+    effect(this.#watchCurrentTime.bind(this));
+    effect(this.#watchPlaysInline.bind(this));
+    effect(this.#watchPlaybackRate.bind(this));
+  }
+  onAttach(el) {
+    el.setAttribute("data-media-player", "");
+    setAttributeIfEmpty(el, "tabindex", "0");
+    setAttributeIfEmpty(el, "role", "region");
+    effect(this.#watchStorage.bind(this));
+    effect(this.#watchTitle.bind(this));
+    effect(this.#watchOrientation.bind(this));
+    listenEvent(el, "find-media-player", this.#onFindPlayer.bind(this));
+  }
+  onConnect(el) {
+    if (IS_IPHONE) setAttribute(el, "data-iphone", "");
+    const pointerQuery = window.matchMedia("(pointer: coarse)");
+    this.#onPointerChange(pointerQuery);
+    pointerQuery.onchange = this.#onPointerChange.bind(this);
+    const resize = new ResizeObserver(animationFrameThrottle(this.#onResize.bind(this)));
+    resize.observe(el);
+    effect(this.#onResize.bind(this));
+    this.dispatch("media-player-connect", {
+      detail: this,
+      bubbles: true,
+      composed: true
+    });
+    onDispose(() => {
+      resize.disconnect();
+      pointerQuery.onchange = null;
+    });
+  }
+  onDestroy() {
+    this.#media.player = null;
+    this.canPlayQueue.reset();
+  }
+  #skipTitleUpdate = false;
+  #watchTitle() {
+    const el = this.$el, { title, live, viewType, providedTitle } = this.$state, isLive = live(), type = uppercaseFirstChar(viewType()), typeText = type !== "Unknown" ? `${isLive ? "Live " : ""}${type}` : isLive ? "Live" : "Media", currentTitle = title();
+    setAttribute(
+      this.el,
+      "aria-label",
+      `${typeText} Player` + (currentTitle ? ` - ${currentTitle}` : "")
+    );
+    if (el?.hasAttribute("title")) {
+      this.#skipTitleUpdate = true;
+      el?.removeAttribute("title");
+    }
+  }
+  #watchOrientation() {
+    const orientation = this.orientation.landscape ? "landscape" : "portrait";
+    this.$state.orientation.set(orientation);
+    setAttribute(this.el, "data-orientation", orientation);
+    this.#onResize();
+  }
+  #watchCanPlay() {
+    if (this.$state.canPlay() && this.#provider) this.canPlayQueue.start();
+    else this.canPlayQueue.stop();
+  }
+  #setupMediaAttributes() {
+    if (MediaPlayer[MEDIA_ATTRIBUTES]) {
+      this.setAttributes(MediaPlayer[MEDIA_ATTRIBUTES]);
+      return;
+    }
+    const $attrs = {
+      "data-load": function() {
+        return this.$props.load();
+      },
+      "data-captions": function() {
+        const track = this.$state.textTrack();
+        return !!track && isTrackCaptionKind(track);
+      },
+      "data-ios-controls": function() {
+        return this.$state.iOSControls();
+      },
+      "data-controls": function() {
+        return this.controls.showing;
+      },
+      "data-buffering": function() {
+        const { canLoad, canPlay, waiting } = this.$state;
+        return canLoad() && (!canPlay() || waiting());
+      },
+      "data-error": function() {
+        const { error } = this.$state;
+        return !!error();
+      },
+      "data-autoplay-error": function() {
+        const { autoPlayError } = this.$state;
+        return !!autoPlayError();
+      }
+    };
+    const alias = {
+      autoPlay: "autoplay",
+      canAirPlay: "can-airplay",
+      canPictureInPicture: "can-pip",
+      pictureInPicture: "pip",
+      playsInline: "playsinline",
+      remotePlaybackState: "remote-state",
+      remotePlaybackType: "remote-type",
+      isAirPlayConnected: "airplay",
+      isGoogleCastConnected: "google-cast"
+    };
+    for (const prop2 of mediaAttributes) {
+      const attrName = "data-" + (alias[prop2] ?? camelToKebabCase(prop2));
+      $attrs[attrName] = function() {
+        return this.$state[prop2]();
+      };
+    }
+    delete $attrs.title;
+    MediaPlayer[MEDIA_ATTRIBUTES] = $attrs;
+    this.setAttributes($attrs);
+  }
+  #onFindPlayer(event) {
+    event.detail(this);
+  }
+  #onResize() {
+    if (!this.el) return;
+    const width = this.el.clientWidth, height = this.el.clientHeight;
+    this.$state.width.set(width);
+    this.$state.height.set(height);
+    setStyle(this.el, "--player-width", width + "px");
+    setStyle(this.el, "--player-height", height + "px");
+  }
+  #onPointerChange(queryList) {
+    const pointer = queryList.matches ? "coarse" : "fine";
+    setAttribute(this.el, "data-pointer", pointer);
+    this.$state.pointer.set(pointer);
+    this.#onResize();
+  }
+  /**
+   * The current media provider.
+   */
+  get provider() {
+    return this.#provider;
+  }
+  /**
+   * Media controls settings.
+   */
+  get controls() {
+    return this.#requestMgr.controls;
+  }
+  set controls(controls) {
+    this.#props.controls.set(controls);
+  }
+  /**
+   * Controls the screen orientation of the current browser window and dispatches orientation
+   * change events on the player.
+   */
+  orientation;
+  /**
+   * The title of the current media.
+   */
+  get title() {
+    return peek(this.$state.title);
+  }
+  set title(newTitle) {
+    if (this.#skipTitleUpdate) {
+      this.#skipTitleUpdate = false;
+      return;
+    }
+    this.#props.title.set(newTitle);
+  }
+  /**
+   * A list of all `VideoQuality` objects representing the set of available video renditions.
+   *
+   * @see {@link https://vidstack.io/docs/player/api/video-quality}
+   */
+  get qualities() {
+    return this.#media.qualities;
+  }
+  /**
+   * A list of all `AudioTrack` objects representing the set of available audio tracks.
+   *
+   * @see {@link https://vidstack.io/docs/player/api/audio-tracks}
+   */
+  get audioTracks() {
+    return this.#media.audioTracks;
+  }
+  /**
+   * A list of all `TextTrack` objects representing the set of available text tracks.
+   *
+   * @see {@link https://vidstack.io/docs/player/api/text-tracks}
+   */
+  get textTracks() {
+    return this.#media.textTracks;
+  }
+  /**
+   * Contains text renderers which are responsible for loading, parsing, and rendering text
+   * tracks.
+   */
+  get textRenderers() {
+    return this.#media.textRenderers;
+  }
+  get duration() {
+    return this.$state.duration();
+  }
+  set duration(duration) {
+    this.#props.duration.set(duration);
+  }
+  get paused() {
+    return peek(this.$state.paused);
+  }
+  set paused(paused) {
+    this.#queuePausedUpdate(paused);
+  }
+  #watchPaused() {
+    this.#queuePausedUpdate(this.$props.paused());
+  }
+  #queuePausedUpdate(paused) {
+    if (paused) {
+      this.canPlayQueue.enqueue("paused", () => this.#requestMgr.pause());
+    } else this.canPlayQueue.enqueue("paused", () => this.#requestMgr.play());
+  }
+  get muted() {
+    return peek(this.$state.muted);
+  }
+  set muted(muted) {
+    this.#queueMutedUpdate(muted);
+  }
+  #watchMuted() {
+    this.#queueMutedUpdate(this.$props.muted());
+  }
+  #queueMutedUpdate(muted) {
+    this.canPlayQueue.enqueue("muted", () => {
+      if (this.#provider) this.#provider.setMuted(muted);
+    });
+  }
+  get currentTime() {
+    return peek(this.$state.currentTime);
+  }
+  set currentTime(time) {
+    this.#queueCurrentTimeUpdate(time);
+  }
+  #watchCurrentTime() {
+    this.#queueCurrentTimeUpdate(this.$props.currentTime());
+  }
+  #queueCurrentTimeUpdate(time) {
+    this.canPlayQueue.enqueue("currentTime", () => {
+      const { currentTime } = this.$state;
+      if (time === peek(currentTime)) return;
+      peek(() => {
+        if (!this.#provider) return;
+        const boundedTime = boundTime(time, this.$state);
+        if (Number.isFinite(boundedTime)) {
+          this.#provider.setCurrentTime(boundedTime);
+        }
+      });
+    });
+  }
+  get volume() {
+    return peek(this.$state.volume);
+  }
+  set volume(volume) {
+    this.#queueVolumeUpdate(volume);
+  }
+  #watchVolume() {
+    this.#queueVolumeUpdate(this.$props.volume());
+  }
+  #queueVolumeUpdate(volume) {
+    const clampedVolume = clampNumber(0, volume, 1);
+    this.canPlayQueue.enqueue("volume", () => {
+      if (this.#provider) this.#provider.setVolume(clampedVolume);
+    });
+  }
+  get playbackRate() {
+    return peek(this.$state.playbackRate);
+  }
+  set playbackRate(rate) {
+    this.#queuePlaybackRateUpdate(rate);
+  }
+  #watchPlaybackRate() {
+    this.#queuePlaybackRateUpdate(this.$props.playbackRate());
+  }
+  #queuePlaybackRateUpdate(rate) {
+    this.canPlayQueue.enqueue("rate", () => {
+      if (this.#provider) this.#provider.setPlaybackRate?.(rate);
+    });
+  }
+  #watchPlaysInline() {
+    this.#queuePlaysInlineUpdate(this.$props.playsInline());
+  }
+  #queuePlaysInlineUpdate(inline) {
+    this.canPlayQueue.enqueue("playsinline", () => {
+      if (this.#provider) this.#provider.setPlaysInline?.(inline);
+    });
+  }
+  #watchStorage() {
+    let storageValue = this.$props.storage(), storage = isString(storageValue) ? new LocalMediaStorage() : storageValue;
+    if (storage?.onChange) {
+      const { source } = this.$state, playerId = isString(storageValue) ? storageValue : this.el?.id, mediaId = computed(this.#computeMediaId.bind(this));
+      effect(() => storage.onChange(source(), mediaId(), playerId || void 0));
+    }
+    this.#media.storage = storage;
+    this.#media.textTracks.setStorage(storage);
+    onDispose(() => {
+      storage?.onDestroy?.();
+      this.#media.storage = null;
+      this.#media.textTracks.setStorage(null);
+    });
+  }
+  #computeMediaId() {
+    const { clipStartTime, clipEndTime } = this.$props, { source } = this.$state, src = source();
+    return src.src ? `${src.src}:${clipStartTime()}:${clipEndTime()}` : null;
+  }
+  /**
+   * Begins/resumes playback of the media. If this method is called programmatically before the
+   * user has interacted with the player, the promise may be rejected subject to the browser's
+   * autoplay policies. This method will throw if called before media is ready for playback.
+   *
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play}
+   */
+  async play(trigger) {
+    return this.#requestMgr.play(trigger);
+  }
+  /**
+   * Pauses playback of the media. This method will throw if called before media is ready for
+   * playback.
+   *
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause}
+   */
+  async pause(trigger) {
+    return this.#requestMgr.pause(trigger);
+  }
+  /**
+   * Attempts to display the player in fullscreen. The promise will resolve if successful, and
+   * reject if not. This method will throw if any fullscreen API is _not_ currently available.
+   *
+   * @see {@link https://vidstack.io/docs/player/api/fullscreen}
+   */
+  async enterFullscreen(target, trigger) {
+    return this.#requestMgr.enterFullscreen(target, trigger);
+  }
+  /**
+   * Attempts to display the player inline by exiting fullscreen. This method will throw if any
+   * fullscreen API is _not_ currently available.
+   *
+   * @see {@link https://vidstack.io/docs/player/api/fullscreen}
+   */
+  async exitFullscreen(target, trigger) {
+    return this.#requestMgr.exitFullscreen(target, trigger);
+  }
+  /**
+   * Attempts to display the player in picture-in-picture mode. This method will throw if PIP is
+   * not supported. This method will also return a `PictureInPictureWindow` if the current
+   * provider supports it.
+   *
+   * @see {@link https://vidstack.io/docs/player/api/picture-in-picture}
+   */
+  enterPictureInPicture(trigger) {
+    return this.#requestMgr.enterPictureInPicture(trigger);
+  }
+  /**
+   * Attempts to display the player in inline by exiting picture-in-picture mode. This method
+   * will throw if not supported.
+   *
+   * @see {@link https://vidstack.io/docs/player/api/picture-in-picture}
+   */
+  exitPictureInPicture(trigger) {
+    return this.#requestMgr.exitPictureInPicture(trigger);
+  }
+  /**
+   * Sets the current time to the live edge (i.e., `duration`). This is a no-op for non-live
+   * streams and will throw if called before media is ready for playback.
+   *
+   * @see {@link https://vidstack.io/docs/player/api/live}
+   */
+  seekToLiveEdge(trigger) {
+    this.#requestMgr.seekToLiveEdge(trigger);
+  }
+  /**
+   * Called when media can begin loading. Calling this method will trigger the initial provider
+   * loading process. Calling it more than once has no effect.
+   *
+   * @see {@link https://vidstack.io/docs/player/core-concepts/loading#load-strategies}
+   */
+  startLoading(trigger) {
+    this.#media.notify("can-load", void 0, trigger);
+  }
+  /**
+   * Called when the poster image can begin loading. Calling it more than once has no effect.
+   *
+   * @see {@link https://vidstack.io/docs/player/core-concepts/loading#load-strategies}
+   */
+  startLoadingPoster(trigger) {
+    this.#media.notify("can-load-poster", void 0, trigger);
+  }
+  /**
+   * Request Apple AirPlay picker to open.
+   */
+  requestAirPlay(trigger) {
+    return this.#requestMgr.requestAirPlay(trigger);
+  }
+  /**
+   * Request Google Cast device picker to open. The Google Cast framework will be loaded if it
+   * hasn't yet.
+   */
+  requestGoogleCast(trigger) {
+    return this.#requestMgr.requestGoogleCast(trigger);
+  }
+  /**
+   * Set the audio gain, amplifying volume and enabling a maximum volume above 100%.
+   *
+   * @see {@link https://vidstack.io/docs/player/api/audio-gain}
+   */
+  setAudioGain(gain, trigger) {
+    return this.#requestMgr.setAudioGain(gain, trigger);
+  }
+  destroy() {
+    super.destroy();
+    this.#media.remote.setPlayer(null);
+    this.dispatch("destroy");
+  }
+}
+const mediaplayer__proto = MediaPlayer.prototype;
+prop(mediaplayer__proto, "canPlayQueue");
+prop(mediaplayer__proto, "remoteControl");
+prop(mediaplayer__proto, "provider");
+prop(mediaplayer__proto, "controls");
+prop(mediaplayer__proto, "orientation");
+prop(mediaplayer__proto, "title");
+prop(mediaplayer__proto, "qualities");
+prop(mediaplayer__proto, "audioTracks");
+prop(mediaplayer__proto, "textTracks");
+prop(mediaplayer__proto, "textRenderers");
+prop(mediaplayer__proto, "duration");
+prop(mediaplayer__proto, "paused");
+prop(mediaplayer__proto, "muted");
+prop(mediaplayer__proto, "currentTime");
+prop(mediaplayer__proto, "volume");
+prop(mediaplayer__proto, "playbackRate");
+method(mediaplayer__proto, "play");
+method(mediaplayer__proto, "pause");
+method(mediaplayer__proto, "enterFullscreen");
+method(mediaplayer__proto, "exitFullscreen");
+method(mediaplayer__proto, "enterPictureInPicture");
+method(mediaplayer__proto, "exitPictureInPicture");
+method(mediaplayer__proto, "seekToLiveEdge");
+method(mediaplayer__proto, "startLoading");
+method(mediaplayer__proto, "startLoadingPoster");
+method(mediaplayer__proto, "requestAirPlay");
+method(mediaplayer__proto, "requestGoogleCast");
+method(mediaplayer__proto, "setAudioGain");
+
+function resolveStreamTypeFromDASHManifest(manifestSrc, requestInit) {
+  return fetch(manifestSrc, requestInit).then((res) => res.text()).then((manifest) => {
+    return /type="static"/.test(manifest) ? "on-demand" : "live";
+  });
+}
+function resolveStreamTypeFromHLSManifest(manifestSrc, requestInit) {
+  return fetch(manifestSrc, requestInit).then((res) => res.text()).then((manifest) => {
+    const renditionURI = resolveHLSRenditionURI(manifest);
+    if (renditionURI) {
+      return resolveStreamTypeFromHLSManifest(
+        /^https?:/.test(renditionURI) ? renditionURI : new URL(renditionURI, manifestSrc).href,
+        requestInit
+      );
+    }
+    const streamType = /EXT-X-PLAYLIST-TYPE:\s*VOD/.test(manifest) ? "on-demand" : "live";
+    if (streamType === "live" && resolveTargetDuration(manifest) >= 10 && (/#EXT-X-DVR-ENABLED:\s*true/.test(manifest) || manifest.includes("#EXT-X-DISCONTINUITY"))) {
+      return "live:dvr";
+    }
+    return streamType;
+  });
+}
+function resolveHLSRenditionURI(manifest) {
+  const matches = manifest.match(/#EXT-X-STREAM-INF:[^\n]+(\n[^\n]+)*/g);
+  return matches ? matches[0].split("\n")[1].trim() : null;
+}
+function resolveTargetDuration(manifest) {
+  const lines = manifest.split("\n");
+  for (const line of lines) {
+    if (line.startsWith("#EXT-X-TARGETDURATION")) {
+      const duration = parseFloat(line.split(":")[1]);
+      if (!isNaN(duration)) {
+        return duration;
+      }
+    }
+  }
+  return -1;
+}
+
+const sourceTypes = /* @__PURE__ */ new Map();
+class SourceSelection {
+  #initialize = false;
+  #loaders;
+  #domSources;
+  #media;
+  #loader;
+  constructor(domSources, media, loader, customLoaders = []) {
+    this.#domSources = domSources;
+    this.#media = media;
+    this.#loader = loader;
+    const DASH_LOADER = new DASHProviderLoader(), HLS_LOADER = new HLSProviderLoader(), VIDEO_LOADER = new VideoProviderLoader(), AUDIO_LOADER = new AudioProviderLoader(), YOUTUBE_LOADER = new YouTubeProviderLoader(), VIMEO_LOADER = new VimeoProviderLoader(), EMBED_LOADERS = [YOUTUBE_LOADER, VIMEO_LOADER];
+    this.#loaders = computed(() => {
+      const remoteLoader = media.$state.remotePlaybackLoader();
+      const loaders = media.$props.preferNativeHLS() ? [VIDEO_LOADER, AUDIO_LOADER, DASH_LOADER, HLS_LOADER, ...EMBED_LOADERS, ...customLoaders] : [HLS_LOADER, VIDEO_LOADER, AUDIO_LOADER, DASH_LOADER, ...EMBED_LOADERS, ...customLoaders];
+      return remoteLoader ? [remoteLoader, ...loaders] : loaders;
+    });
+    const { $state } = media;
+    $state.sources.set(normalizeSrc(media.$props.src()));
+    for (const src of $state.sources()) {
+      const loader2 = this.#loaders().find((loader3) => loader3.canPlay(src));
+      if (!loader2) continue;
+      const mediaType = loader2.mediaType(src);
+      media.$state.source.set(src);
+      media.$state.mediaType.set(mediaType);
+      media.$state.inferredViewType.set(mediaType);
+      this.#loader.set(loader2);
+      this.#initialize = true;
+      break;
+    }
+  }
+  connect() {
+    const loader = this.#loader();
+    if (this.#initialize) {
+      this.#notifySourceChange(this.#media.$state.source(), loader);
+      this.#notifyLoaderChange(loader);
+      this.#initialize = false;
+    }
+    effect(this.#onSourcesChange.bind(this));
+    effect(this.#onSourceChange.bind(this));
+    effect(this.#onSetup.bind(this));
+    effect(this.#onLoadSource.bind(this));
+    effect(this.#onLoadPoster.bind(this));
+  }
+  #onSourcesChange() {
+    this.#media.notify("sources-change", [
+      ...normalizeSrc(this.#media.$props.src()),
+      ...this.#domSources()
+    ]);
+  }
+  #onSourceChange() {
+    const { $state } = this.#media;
+    const sources = $state.sources(), currentSource = peek($state.source), newSource = this.#findNewSource(currentSource, sources), noMatch = sources[0]?.src && !newSource.src && !newSource.type;
+    if (noMatch) {
+      const { crossOrigin } = $state, credentials = getRequestCredentials(crossOrigin()), abort = new AbortController();
+      Promise.all(
+        sources.map(
+          (source) => isString(source.src) && source.type === "?" ? fetch(source.src, {
+            method: "HEAD",
+            credentials,
+            signal: abort.signal
+          }).then((res) => {
+            source.type = res.headers.get("content-type") || "??";
+            sourceTypes.set(source.src, source.type);
+            return source;
+          }).catch(() => source) : source
+        )
+      ).then((sources2) => {
+        if (abort.signal.aborted) return;
+        const newSource2 = this.#findNewSource(peek($state.source), sources2);
+        tick();
+        if (!newSource2.src) {
+          this.#media.notify("error", {
+            message: "Failed to load resource.",
+            code: 4
+          });
+        }
+      });
+      return () => abort.abort();
+    }
+    tick();
+  }
+  #findNewSource(currentSource, sources) {
+    let newSource = { src: "", type: "" }, newLoader = null, triggerEvent = new DOMEvent("sources-change", { detail: { sources } }), loaders = this.#loaders(), { started, paused, currentTime, quality, savedState } = this.#media.$state;
+    for (const src of sources) {
+      const loader = loaders.find((loader2) => loader2.canPlay(src));
+      if (loader) {
+        newSource = src;
+        newLoader = loader;
+        break;
+      }
+    }
+    if (isVideoQualitySrc(newSource)) {
+      const currentQuality = quality(), sourceQuality = sources.find((s) => s.src === currentQuality?.src);
+      if (peek(started)) {
+        savedState.set({
+          paused: peek(paused),
+          currentTime: peek(currentTime)
+        });
+      } else {
+        savedState.set(null);
+      }
+      if (sourceQuality) {
+        newSource = sourceQuality;
+        triggerEvent = new DOMEvent("quality-change", {
+          detail: { quality: currentQuality }
+        });
+      }
+    }
+    if (!isSameSrc(currentSource, newSource)) {
+      this.#notifySourceChange(newSource, newLoader, triggerEvent);
+    }
+    if (newLoader !== peek(this.#loader)) {
+      this.#notifyLoaderChange(newLoader, triggerEvent);
+    }
+    return newSource;
+  }
+  #notifySourceChange(src, loader, trigger) {
+    this.#media.notify("source-change", src, trigger);
+    this.#media.notify("media-type-change", loader?.mediaType(src) || "unknown", trigger);
+  }
+  #notifyLoaderChange(loader, trigger) {
+    this.#media.$providerSetup.set(false);
+    this.#media.notify("provider-change", null, trigger);
+    loader && peek(() => loader.preconnect?.(this.#media));
+    this.#loader.set(loader);
+    this.#media.notify("provider-loader-change", loader, trigger);
+  }
+  #onSetup() {
+    const provider = this.#media.$provider();
+    if (!provider || peek(this.#media.$providerSetup)) return;
+    if (this.#media.$state.canLoad()) {
+      scoped(() => provider.setup(), provider.scope);
+      this.#media.$providerSetup.set(true);
+      return;
+    }
+    peek(() => provider.preconnect?.());
+  }
+  #onLoadSource() {
+    if (!this.#media.$providerSetup()) return;
+    const provider = this.#media.$provider(), source = this.#media.$state.source(), crossOrigin = peek(this.#media.$state.crossOrigin), preferNativeHLS = peek(this.#media.$props.preferNativeHLS);
+    if (isSameSrc(provider?.currentSrc, source)) {
+      return;
+    }
+    if (this.#media.$state.canLoad()) {
+      const abort = new AbortController();
+      if (isHLSSrc(source)) {
+        if (preferNativeHLS || !isHLSSupported()) {
+          resolveStreamTypeFromHLSManifest(source.src, {
+            credentials: getRequestCredentials(crossOrigin),
+            signal: abort.signal
+          }).then((streamType) => {
+            this.#media.notify("stream-type-change", streamType);
+          }).catch(noop);
+        }
+      } else if (isDASHSrc(source)) {
+        resolveStreamTypeFromDASHManifest(source.src, {
+          credentials: getRequestCredentials(crossOrigin),
+          signal: abort.signal
+        }).then((streamType) => {
+          this.#media.notify("stream-type-change", streamType);
+        }).catch(noop);
+      } else {
+        this.#media.notify("stream-type-change", "on-demand");
+      }
+      peek(() => {
+        const preload = peek(this.#media.$state.preload);
+        return provider?.loadSource(source, preload).catch((error) => {
+        });
+      });
+      return () => abort.abort();
+    }
+    try {
+      isString(source.src) && preconnect(new URL(source.src).origin);
+    } catch (error) {
+    }
+  }
+  #onLoadPoster() {
+    const loader = this.#loader(), { providedPoster, source, canLoadPoster } = this.#media.$state;
+    if (!loader || !loader.loadPoster || !source() || !canLoadPoster() || providedPoster()) return;
+    const abort = new AbortController(), trigger = new DOMEvent("source-change", { detail: source });
+    loader.loadPoster(source(), this.#media, abort).then((url) => {
+      this.#media.notify("poster-change", url || "", trigger);
+    }).catch(() => {
+      this.#media.notify("poster-change", "", trigger);
+    });
+    return () => {
+      abort.abort();
+    };
+  }
+}
+function normalizeSrc(src) {
+  return (isArray(src) ? src : [src]).map((src2) => {
+    if (isString(src2)) {
+      return { src: src2, type: inferType(src2) };
+    } else {
+      return { ...src2, type: inferType(src2.src, src2.type) };
+    }
+  });
+}
+function inferType(src, type) {
+  if (isString(type) && type.length) {
+    return type;
+  } else if (isString(src) && sourceTypes.has(src)) {
+    return sourceTypes.get(src);
+  } else if (!type && isHLSSrc({ src, type: "" })) {
+    return "application/x-mpegurl";
+  } else if (!type && isDASHSrc({ src, type: "" })) {
+    return "application/dash+xml";
+  } else if (!isString(src) || src.startsWith("blob:")) {
+    return "video/object";
+  } else if (src.includes("youtube") || src.includes("youtu.be")) {
+    return "video/youtube";
+  } else if (src.includes("vimeo") && !src.includes("progressive_redirect") && !src.includes(".m3u8")) {
+    return "video/vimeo";
+  }
+  return "?";
+}
+function isSameSrc(a, b) {
+  return a?.src === b?.src && a?.type === b?.type;
+}
+
+class Tracks {
+  #domTracks;
+  #media;
+  #prevTracks = [];
+  constructor(domTracks, media) {
+    this.#domTracks = domTracks;
+    this.#media = media;
+    effect(this.#onTracksChange.bind(this));
+  }
+  #onTracksChange() {
+    const newTracks = this.#domTracks();
+    for (const oldTrack of this.#prevTracks) {
+      if (!newTracks.some((t) => t.id === oldTrack.id)) {
+        const track = oldTrack.id && this.#media.textTracks.getById(oldTrack.id);
+        if (track) this.#media.textTracks.remove(track);
+      }
+    }
+    for (const newTrack of newTracks) {
+      const id = newTrack.id || TextTrack.createId(newTrack);
+      if (!this.#media.textTracks.getById(id)) {
+        newTrack.id = id;
+        this.#media.textTracks.add(newTrack);
+      }
+    }
+    this.#prevTracks = newTracks;
+  }
+}
+
+class MediaProvider extends Component {
+  static props = {
+    loaders: []
+  };
+  static state = new State({
+    loader: null
+  });
+  #media;
+  #sources;
+  #domSources = signal([]);
+  #domTracks = signal([]);
+  #loader = null;
+  onSetup() {
+    this.#media = useMediaContext();
+    this.#sources = new SourceSelection(
+      this.#domSources,
+      this.#media,
+      this.$state.loader,
+      this.$props.loaders()
+    );
+  }
+  onAttach(el) {
+    el.setAttribute("data-media-provider", "");
+  }
+  onConnect(el) {
+    this.#sources.connect();
+    new Tracks(this.#domTracks, this.#media);
+    const resize = new ResizeObserver(animationFrameThrottle(this.#onResize.bind(this)));
+    resize.observe(el);
+    const mutations = new MutationObserver(this.#onMutation.bind(this));
+    mutations.observe(el, { attributes: true, childList: true });
+    this.#onResize();
+    this.#onMutation();
+    onDispose(() => {
+      resize.disconnect();
+      mutations.disconnect();
+    });
+  }
+  #loadRafId = -1;
+  load(target) {
+    target?.setAttribute("aria-hidden", "true");
+    window.cancelAnimationFrame(this.#loadRafId);
+    this.#loadRafId = requestAnimationFrame(() => this.#runLoader(target));
+    onDispose(() => {
+      window.cancelAnimationFrame(this.#loadRafId);
+    });
+  }
+  #runLoader(target) {
+    if (!this.scope) return;
+    const loader = this.$state.loader(), { $provider } = this.#media;
+    if (this.#loader === loader && loader?.target === target && peek($provider)) return;
+    this.#destroyProvider();
+    this.#loader = loader;
+    if (loader) loader.target = target || null;
+    if (!loader || !target) return;
+    loader.load(this.#media).then((provider) => {
+      if (!this.scope) return;
+      if (peek(this.$state.loader) !== loader) return;
+      this.#media.notify("provider-change", provider);
+    });
+  }
+  onDestroy() {
+    this.#loader = null;
+    this.#destroyProvider();
+  }
+  #destroyProvider() {
+    this.#media?.notify("provider-change", null);
+  }
+  #onResize() {
+    if (!this.el) return;
+    const { player, $state } = this.#media, width = this.el.offsetWidth, height = this.el.offsetHeight;
+    if (!player) return;
+    $state.mediaWidth.set(width);
+    $state.mediaHeight.set(height);
+    if (player.el) {
+      setStyle(player.el, "--media-width", width + "px");
+      setStyle(player.el, "--media-height", height + "px");
+    }
+  }
+  #onMutation() {
+    const sources = [], tracks = [], children = this.el.children;
+    for (const el of children) {
+      if (el.hasAttribute("data-vds")) continue;
+      if (el instanceof HTMLSourceElement) {
+        const src = {
+          id: el.id,
+          src: el.src,
+          type: el.type
+        };
+        for (const prop of ["id", "src", "width", "height", "bitrate", "codec"]) {
+          const value = el.getAttribute(`data-${prop}`);
+          if (isString(value)) src[prop] = /id|src|codec/.test(prop) ? value : Number(value);
+        }
+        sources.push(src);
+      } else if (el instanceof HTMLTrackElement) {
+        const track = {
+          src: el.src,
+          kind: el.track.kind,
+          language: el.srclang,
+          label: el.label,
+          default: el.default,
+          type: el.getAttribute("data-type")
+        };
+        tracks.push({
+          id: el.id || TextTrack.createId(track),
+          ...track
+        });
+      }
+    }
+    this.#domSources.set(sources);
+    this.#domTracks.set(tracks);
+    tick();
+  }
+}
+const mediaprovider__proto = MediaProvider.prototype;
+method(mediaprovider__proto, "load");
+
+export { AudioProviderLoader, AudioTrackList, DASHProviderLoader, FullscreenController, HLSProviderLoader, List, LocalMediaStorage, MEDIA_KEY_SHORTCUTS, MediaControls, MediaPlayer, MediaProvider, MediaRemoteControl, ScreenOrientationController, TextRenderers, TextTrackList, VideoProviderLoader, VideoQualityList, VimeoProviderLoader, YouTubeProviderLoader, boundTime, canFullscreen, isAudioProvider, isDASHProvider, isGoogleCastProvider, isHLSProvider, isHTMLAudioElement, isHTMLIFrameElement, isHTMLMediaElement, isHTMLVideoElement, isVideoProvider, isVideoQualitySrc, isVimeoProvider, isYouTubeProvider, mediaState, softResetMediaState };