@hanifhan1f/vidstack 1.12.25 → 1.12.27

package/dev/chunks/vidstack-Crz0ROkT.js

@@ -0,0 +1,3009 @@
+import { ViewController, onDispose, isArray, isString, isNull, effect, peek, listenEvent, ariaBool, isWriteSignal, Component, State, createContext, hasProvidedContext, useContext, EventsController, isNumber, functionThrottle, signal, provideContext, animationFrameThrottle, isObject, method, useState, computed, setAttribute, r, wasEnterKeyPressed, setStyle, isKeyboardEvent, tick, prop, scoped } from './vidstack-C1PwJD_4.js';
+import { useMediaContext } from './vidstack-BjxlZzGu.js';
+import { hasAnimation, setAttributeIfEmpty, onPress, $ariaBool, setARIALabel, isTouchPinchEvent, observeVisibility, isHTMLElement, isElementParent, isEventInside, isElementVisible, requestScopedAnimationFrame, autoPlacement } from './vidstack-C0SWkbs7.js';
+import { isTrackCaptionKind, watchActiveTextTrack } from './vidstack-D-sqb6YI.js';
+import { FocusVisibleController } from './vidstack-Bur7I7Vy.js';
+import { clampNumber, round, getNumberOfDecimalPlaces } from './vidstack-Dihypf8P.js';
+import { assert } from './vidstack-DbBJlz7I.js';
+import { getRequestCredentials } from './vidstack-DdTXMZro.js';
+import { sortVideoQualities } from './vidstack-BTM4ERc7.js';
+
+class ARIAKeyShortcuts extends ViewController {
+  #shortcut;
+  constructor(shortcut) {
+    super();
+    this.#shortcut = shortcut;
+  }
+  onAttach(el) {
+    const { $props, ariaKeys } = useMediaContext(), keys = el.getAttribute("aria-keyshortcuts");
+    if (keys) {
+      ariaKeys[this.#shortcut] = keys;
+      {
+        onDispose(() => {
+          delete ariaKeys[this.#shortcut];
+        });
+      }
+      return;
+    }
+    const shortcuts = $props.keyShortcuts()[this.#shortcut];
+    if (shortcuts) {
+      const keys2 = isArray(shortcuts) ? shortcuts.join(" ") : isString(shortcuts) ? shortcuts : shortcuts?.keys;
+      el.setAttribute("aria-keyshortcuts", isArray(keys2) ? keys2.join(" ") : keys2);
+    }
+  }
+}
+
+function padNumberWithZeroes(num, expectedLength) {
+  const str = String(num);
+  const actualLength = str.length;
+  const shouldPad = actualLength < expectedLength;
+  if (shouldPad) {
+    const padLength = expectedLength - actualLength;
+    const padding = `0`.repeat(padLength);
+    return `${padding}${num}`;
+  }
+  return str;
+}
+function parseTime(duration) {
+  const hours = Math.trunc(duration / 3600);
+  const minutes = Math.trunc(duration % 3600 / 60);
+  const seconds = Math.trunc(duration % 60);
+  const fraction = Number((duration - Math.trunc(duration)).toPrecision(3));
+  return {
+    hours,
+    minutes,
+    seconds,
+    fraction
+  };
+}
+function formatTime(duration, { padHrs = null, padMins = null, showHrs = false, showMs = false } = {}) {
+  const { hours, minutes, seconds, fraction } = parseTime(duration), paddedHours = padHrs ? padNumberWithZeroes(hours, 2) : hours, paddedMinutes = padMins || isNull(padMins) && duration >= 3600 ? padNumberWithZeroes(minutes, 2) : minutes, paddedSeconds = padNumberWithZeroes(seconds, 2), paddedMs = showMs && fraction > 0 ? `.${String(fraction).replace(/^0?\./, "")}` : "", time = `${paddedMinutes}:${paddedSeconds}${paddedMs}`;
+  return hours > 0 || showHrs ? `${paddedHours}:${time}` : time;
+}
+function formatSpokenTime(duration) {
+  const spokenParts = [];
+  const { hours, minutes, seconds } = parseTime(duration);
+  if (hours > 0) {
+    spokenParts.push(`${hours} hour`);
+  }
+  if (minutes > 0) {
+    spokenParts.push(`${minutes} min`);
+  }
+  if (seconds > 0 || spokenParts.length === 0) {
+    spokenParts.push(`${seconds} sec`);
+  }
+  return spokenParts.join(" ");
+}
+
+class Popper extends ViewController {
+  #delegate;
+  constructor(delegate) {
+    super();
+    this.#delegate = delegate;
+    effect(this.#watchTrigger.bind(this));
+  }
+  onDestroy() {
+    this.#stopAnimationEndListener?.();
+    this.#stopAnimationEndListener = null;
+  }
+  #watchTrigger() {
+    const trigger = this.#delegate.trigger();
+    if (!trigger) {
+      this.hide();
+      return;
+    }
+    const show = this.show.bind(this), hide = this.hide.bind(this);
+    this.#delegate.listen(trigger, show, hide);
+  }
+  #showTimerId = -1;
+  #hideRafId = -1;
+  #stopAnimationEndListener = null;
+  show(trigger) {
+    this.#cancelShowing();
+    window.cancelAnimationFrame(this.#hideRafId);
+    this.#hideRafId = -1;
+    this.#stopAnimationEndListener?.();
+    this.#stopAnimationEndListener = null;
+    this.#showTimerId = window.setTimeout(() => {
+      this.#showTimerId = -1;
+      const content = this.#delegate.content();
+      if (content) content.style.removeProperty("display");
+      peek(() => this.#delegate.onChange(true, trigger));
+    }, this.#delegate.showDelay?.() ?? 0);
+  }
+  hide(trigger) {
+    this.#cancelShowing();
+    peek(() => this.#delegate.onChange(false, trigger));
+    this.#hideRafId = requestAnimationFrame(() => {
+      this.#cancelShowing();
+      this.#hideRafId = -1;
+      const content = this.#delegate.content();
+      if (content) {
+        const onHide = () => {
+          content.style.display = "none";
+          this.#stopAnimationEndListener = null;
+        };
+        const isAnimated = hasAnimation(content);
+        if (isAnimated) {
+          this.#stopAnimationEndListener?.();
+          const stop = listenEvent(content, "animationend", onHide, { once: true });
+          this.#stopAnimationEndListener = stop;
+        } else {
+          onHide();
+        }
+      }
+    });
+  }
+  #cancelShowing() {
+    window.clearTimeout(this.#showTimerId);
+    this.#showTimerId = -1;
+  }
+}
+
+class ToggleButtonController extends ViewController {
+  static props = {
+    disabled: false
+  };
+  #delegate;
+  constructor(delegate) {
+    super();
+    this.#delegate = delegate;
+    new FocusVisibleController();
+    if (delegate.keyShortcut) {
+      new ARIAKeyShortcuts(delegate.keyShortcut);
+    }
+  }
+  onSetup() {
+    const { disabled } = this.$props;
+    this.setAttributes({
+      "data-pressed": this.#delegate.isPresssed,
+      "aria-pressed": this.#isARIAPressed.bind(this),
+      "aria-disabled": () => disabled() ? "true" : null
+    });
+  }
+  onAttach(el) {
+    setAttributeIfEmpty(el, "tabindex", "0");
+    setAttributeIfEmpty(el, "role", "button");
+    setAttributeIfEmpty(el, "type", "button");
+  }
+  onConnect(el) {
+    const events = onPress(el, this.#onMaybePress.bind(this));
+    for (const type of ["click", "touchstart"]) {
+      events.add(type, this.#onInteraction.bind(this), {
+        passive: true
+      });
+    }
+  }
+  #isARIAPressed() {
+    return ariaBool(this.#delegate.isPresssed());
+  }
+  #onPressed(event) {
+    if (isWriteSignal(this.#delegate.isPresssed)) {
+      this.#delegate.isPresssed.set((p) => !p);
+    }
+  }
+  #onMaybePress(event) {
+    const disabled = this.$props.disabled() || this.el.hasAttribute("data-disabled");
+    if (disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      return;
+    }
+    event.preventDefault();
+    (this.#delegate.onPress ?? this.#onPressed).call(this, event);
+  }
+  #onInteraction(event) {
+    if (this.$props.disabled()) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+}
+
+class AirPlayButton extends Component {
+  static props = ToggleButtonController.props;
+  #media;
+  constructor() {
+    super();
+    new ToggleButtonController({
+      isPresssed: this.#isPressed.bind(this),
+      onPress: this.#onPress.bind(this)
+    });
+  }
+  onSetup() {
+    this.#media = useMediaContext();
+    const { canAirPlay, isAirPlayConnected } = this.#media.$state;
+    this.setAttributes({
+      "data-active": isAirPlayConnected,
+      "data-supported": canAirPlay,
+      "data-state": this.#getState.bind(this),
+      "aria-hidden": $ariaBool(() => !canAirPlay())
+    });
+  }
+  onAttach(el) {
+    el.setAttribute("data-media-tooltip", "airplay");
+    setARIALabel(el, this.#getDefaultLabel.bind(this));
+  }
+  #onPress(event) {
+    const remote = this.#media.remote;
+    remote.requestAirPlay(event);
+  }
+  #isPressed() {
+    const { remotePlaybackType, remotePlaybackState } = this.#media.$state;
+    return remotePlaybackType() === "airplay" && remotePlaybackState() !== "disconnected";
+  }
+  #getState() {
+    const { remotePlaybackType, remotePlaybackState } = this.#media.$state;
+    return remotePlaybackType() === "airplay" && remotePlaybackState();
+  }
+  #getDefaultLabel() {
+    const { remotePlaybackState } = this.#media.$state;
+    return `AirPlay ${remotePlaybackState()}`;
+  }
+}
+
+class PlayButton extends Component {
+  static props = ToggleButtonController.props;
+  #media;
+  constructor() {
+    super();
+    new ToggleButtonController({
+      isPresssed: this.#isPressed.bind(this),
+      keyShortcut: "togglePaused",
+      onPress: this.#onPress.bind(this)
+    });
+  }
+  onSetup() {
+    this.#media = useMediaContext();
+    const { paused, ended } = this.#media.$state;
+    this.setAttributes({
+      "data-paused": paused,
+      "data-ended": ended
+    });
+  }
+  onAttach(el) {
+    el.setAttribute("data-media-tooltip", "play");
+    setARIALabel(el, "Play");
+  }
+  #onPress(event) {
+    const remote = this.#media.remote;
+    this.#isPressed() ? remote.pause(event) : remote.play(event);
+  }
+  #isPressed() {
+    const { paused } = this.#media.$state;
+    return !paused();
+  }
+}
+
+class CaptionButton extends Component {
+  static props = ToggleButtonController.props;
+  #media;
+  constructor() {
+    super();
+    new ToggleButtonController({
+      isPresssed: this.#isPressed.bind(this),
+      keyShortcut: "toggleCaptions",
+      onPress: this.#onPress.bind(this)
+    });
+  }
+  onSetup() {
+    this.#media = useMediaContext();
+    this.setAttributes({
+      "data-active": this.#isPressed.bind(this),
+      "data-supported": () => !this.#isHidden(),
+      "aria-hidden": $ariaBool(this.#isHidden.bind(this))
+    });
+  }
+  onAttach(el) {
+    el.setAttribute("data-media-tooltip", "caption");
+    setARIALabel(el, "Captions");
+  }
+  #onPress(event) {
+    this.#media.remote.toggleCaptions(event);
+  }
+  #isPressed() {
+    const { textTrack } = this.#media.$state, track = textTrack();
+    return !!track && isTrackCaptionKind(track);
+  }
+  #isHidden() {
+    const { hasCaptions } = this.#media.$state;
+    return !hasCaptions();
+  }
+}
+
+class FullscreenButton extends Component {
+  static props = {
+    ...ToggleButtonController.props,
+    target: "prefer-media"
+  };
+  #media;
+  constructor() {
+    super();
+    new ToggleButtonController({
+      isPresssed: this.#isPressed.bind(this),
+      keyShortcut: "toggleFullscreen",
+      onPress: this.#onPress.bind(this)
+    });
+  }
+  onSetup() {
+    this.#media = useMediaContext();
+    const { fullscreen } = this.#media.$state, isSupported = this.#isSupported.bind(this);
+    this.setAttributes({
+      "data-active": fullscreen,
+      "data-supported": isSupported,
+      "aria-hidden": $ariaBool(() => !isSupported())
+    });
+  }
+  onAttach(el) {
+    el.setAttribute("data-media-tooltip", "fullscreen");
+    setARIALabel(el, "Fullscreen");
+  }
+  #onPress(event) {
+    const remote = this.#media.remote, target = this.$props.target();
+    this.#isPressed() ? remote.exitFullscreen(target, event) : remote.enterFullscreen(target, event);
+  }
+  #isPressed() {
+    const { fullscreen } = this.#media.$state;
+    return fullscreen();
+  }
+  #isSupported() {
+    const { canFullscreen } = this.#media.$state;
+    return canFullscreen();
+  }
+}
+
+class MuteButton extends Component {
+  static props = ToggleButtonController.props;
+  #media;
+  constructor() {
+    super();
+    new ToggleButtonController({
+      isPresssed: this.#isPressed.bind(this),
+      keyShortcut: "toggleMuted",
+      onPress: this.#onPress.bind(this)
+    });
+  }
+  onSetup() {
+    this.#media = useMediaContext();
+    this.setAttributes({
+      "data-muted": this.#isPressed.bind(this),
+      "data-state": this.#getState.bind(this)
+    });
+  }
+  onAttach(el) {
+    el.setAttribute("data-media-mute-button", "");
+    el.setAttribute("data-media-tooltip", "mute");
+    setARIALabel(el, "Mute");
+  }
+  #onPress(event) {
+    const remote = this.#media.remote;
+    this.#isPressed() ? remote.unmute(event) : remote.mute(event);
+  }
+  #isPressed() {
+    const { muted, volume } = this.#media.$state;
+    return muted() || volume() === 0;
+  }
+  #getState() {
+    const { muted, volume } = this.#media.$state, $volume = volume();
+    if (muted() || $volume === 0) return "muted";
+    else if ($volume >= 0.5) return "high";
+    else if ($volume < 0.5) return "low";
+  }
+}
+
+class PIPButton extends Component {
+  static props = ToggleButtonController.props;
+  #media;
+  constructor() {
+    super();
+    new ToggleButtonController({
+      isPresssed: this.#isPressed.bind(this),
+      keyShortcut: "togglePictureInPicture",
+      onPress: this.#onPress.bind(this)
+    });
+  }
+  onSetup() {
+    this.#media = useMediaContext();
+    const { pictureInPicture } = this.#media.$state, isSupported = this.#isSupported.bind(this);
+    this.setAttributes({
+      "data-active": pictureInPicture,
+      "data-supported": isSupported,
+      "aria-hidden": $ariaBool(() => !isSupported())
+    });
+  }
+  onAttach(el) {
+    el.setAttribute("data-media-tooltip", "pip");
+    setARIALabel(el, "PiP");
+  }
+  #onPress(event) {
+    const remote = this.#media.remote;
+    this.#isPressed() ? remote.exitPictureInPicture(event) : remote.enterPictureInPicture(event);
+  }
+  #isPressed() {
+    const { pictureInPicture } = this.#media.$state;
+    return pictureInPicture();
+  }
+  #isSupported() {
+    const { canPictureInPicture } = this.#media.$state;
+    return canPictureInPicture();
+  }
+}
+
+class SeekButton extends Component {
+  static props = {
+    disabled: false,
+    seconds: 30
+  };
+  #media;
+  constructor() {
+    super();
+    new FocusVisibleController();
+  }
+  onSetup() {
+    this.#media = useMediaContext();
+    const { seeking } = this.#media.$state, { seconds } = this.$props, isSupported = this.#isSupported.bind(this);
+    this.setAttributes({
+      seconds,
+      "data-seeking": seeking,
+      "data-supported": isSupported,
+      "aria-hidden": $ariaBool(() => !isSupported())
+    });
+  }
+  onAttach(el) {
+    setAttributeIfEmpty(el, "tabindex", "0");
+    setAttributeIfEmpty(el, "role", "button");
+    setAttributeIfEmpty(el, "type", "button");
+    el.setAttribute("data-media-tooltip", "seek");
+    setARIALabel(el, this.#getDefaultLabel.bind(this));
+  }
+  onConnect(el) {
+    onPress(el, this.#onPress.bind(this));
+  }
+  #isSupported() {
+    const { canSeek } = this.#media.$state;
+    return canSeek();
+  }
+  #getDefaultLabel() {
+    const { seconds } = this.$props;
+    return `Seek ${seconds() > 0 ? "forward" : "backward"} ${seconds()} seconds`;
+  }
+  #onPress(event) {
+    const { seconds, disabled } = this.$props;
+    if (disabled()) return;
+    const { currentTime } = this.#media.$state, seekTo = currentTime() + seconds();
+    this.#media.remote.seek(seekTo, event);
+  }
+}
+
+class LiveButton extends Component {
+  static props = {
+    disabled: false
+  };
+  #media;
+  constructor() {
+    super();
+    new FocusVisibleController();
+  }
+  onSetup() {
+    this.#media = useMediaContext();
+    const { disabled } = this.$props, { live, liveEdge } = this.#media.$state, isHidden = () => !live();
+    this.setAttributes({
+      "data-edge": liveEdge,
+      "data-hidden": isHidden,
+      "aria-disabled": $ariaBool(() => disabled() || liveEdge()),
+      "aria-hidden": $ariaBool(isHidden)
+    });
+  }
+  onAttach(el) {
+    setAttributeIfEmpty(el, "tabindex", "0");
+    setAttributeIfEmpty(el, "role", "button");
+    setAttributeIfEmpty(el, "type", "button");
+    el.setAttribute("data-media-tooltip", "live");
+  }
+  onConnect(el) {
+    onPress(el, this.#onPress.bind(this));
+  }
+  #onPress(event) {
+    const { disabled } = this.$props, { liveEdge } = this.#media.$state;
+    if (disabled() || liveEdge()) return;
+    this.#media.remote.seekToLiveEdge(event);
+  }
+}
+
+const sliderState = new State({
+  min: 0,
+  max: 100,
+  value: 0,
+  step: 1,
+  pointerValue: 0,
+  focused: false,
+  dragging: false,
+  pointing: false,
+  hidden: false,
+  get active() {
+    return this.dragging || this.focused || this.pointing;
+  },
+  get fillRate() {
+    return calcRate(this.min, this.max, this.value);
+  },
+  get fillPercent() {
+    return this.fillRate * 100;
+  },
+  get pointerRate() {
+    return calcRate(this.min, this.max, this.pointerValue);
+  },
+  get pointerPercent() {
+    return this.pointerRate * 100;
+  }
+});
+function calcRate(min, max, value) {
+  const range = max - min, offset = value - min;
+  return range > 0 ? offset / range : 0;
+}
+
+class IntersectionObserverController extends ViewController {
+  #init;
+  #observer;
+  constructor(init) {
+    super();
+    this.#init = init;
+  }
+  onConnect(el) {
+    this.#observer = new IntersectionObserver((entries) => {
+      this.#init.callback?.(entries, this.#observer);
+    }, this.#init);
+    this.#observer.observe(el);
+    onDispose(this.#onDisconnect.bind(this));
+  }
+  /**
+   * Disconnect any active intersection observers.
+   */
+  #onDisconnect() {
+    this.#observer?.disconnect();
+    this.#observer = void 0;
+  }
+}
+
+const sliderContext = createContext();
+const sliderObserverContext = createContext();
+
+function getClampedValue(min, max, value, step) {
+  return clampNumber(min, round(value, getNumberOfDecimalPlaces(step)), max);
+}
+function getValueFromRate(min, max, rate, step) {
+  const boundRate = clampNumber(0, rate, 1), range = max - min, fill = range * boundRate, stepRatio = fill / step, steps = step * Math.round(stepRatio);
+  return min + steps;
+}
+
+const SliderKeyDirection = {
+  Left: -1,
+  ArrowLeft: -1,
+  Up: 1,
+  ArrowUp: 1,
+  Right: 1,
+  ArrowRight: 1,
+  Down: -1,
+  ArrowDown: -1
+};
+class SliderEventsController extends ViewController {
+  #delegate;
+  #media;
+  #observer;
+  constructor(delegate, media) {
+    super();
+    this.#delegate = delegate;
+    this.#media = media;
+  }
+  onSetup() {
+    if (hasProvidedContext(sliderObserverContext)) {
+      this.#observer = useContext(sliderObserverContext);
+    }
+  }
+  onConnect(el) {
+    effect(this.#attachEventListeners.bind(this, el));
+    effect(this.#attachPointerListeners.bind(this, el));
+    if (this.#delegate.swipeGesture) effect(this.#watchSwipeGesture.bind(this));
+  }
+  #watchSwipeGesture() {
+    const { pointer } = this.#media.$state;
+    if (pointer() !== "coarse" || !this.#delegate.swipeGesture()) {
+      this.#provider = null;
+      return;
+    }
+    this.#provider = this.#media.player.el?.querySelector(
+      "media-provider,[data-media-provider]"
+    );
+    if (!this.#provider) return;
+    new EventsController(this.#provider).add("touchstart", this.#onTouchStart.bind(this), {
+      passive: true
+    }).add("touchmove", this.#onTouchMove.bind(this), { passive: false });
+  }
+  #provider = null;
+  #touch = null;
+  #touchStartValue = null;
+  #onTouchStart(event) {
+    this.#touch = event.touches[0];
+  }
+  #onTouchMove(event) {
+    if (isNull(this.#touch) || isTouchPinchEvent(event)) return;
+    const touch = event.touches[0], xDiff = touch.clientX - this.#touch.clientX, yDiff = touch.clientY - this.#touch.clientY, isDragging = this.$state.dragging();
+    if (!isDragging && Math.abs(yDiff) > 5) {
+      return;
+    }
+    if (isDragging) return;
+    event.preventDefault();
+    if (Math.abs(xDiff) > 20) {
+      this.#touch = touch;
+      this.#touchStartValue = this.$state.value();
+      this.#onStartDragging(this.#touchStartValue, event);
+    }
+  }
+  #attachEventListeners(el) {
+    const { hidden } = this.$props;
+    listenEvent(el, "focus", this.#onFocus.bind(this));
+    if (hidden() || this.#delegate.isDisabled()) return;
+    new EventsController(el).add("keyup", this.#onKeyUp.bind(this)).add("keydown", this.#onKeyDown.bind(this)).add("pointerenter", this.#onPointerEnter.bind(this)).add("pointermove", this.#onPointerMove.bind(this)).add("pointerleave", this.#onPointerLeave.bind(this)).add("pointerdown", this.#onPointerDown.bind(this));
+  }
+  #attachPointerListeners(el) {
+    if (this.#delegate.isDisabled() || !this.$state.dragging()) return;
+    new EventsController(document).add("pointerup", this.#onDocumentPointerUp.bind(this), { capture: true }).add("pointermove", this.#onDocumentPointerMove.bind(this)).add("touchmove", this.#onDocumentTouchMove.bind(this), {
+      passive: false
+    });
+  }
+  #onFocus() {
+    this.#updatePointerValue(this.$state.value());
+  }
+  #updateValue(newValue, trigger) {
+    const { value, min, max, dragging } = this.$state;
+    const clampedValue = Math.max(min(), Math.min(newValue, max()));
+    value.set(clampedValue);
+    const event = this.createEvent("value-change", { detail: clampedValue, trigger });
+    this.dispatch(event);
+    this.#delegate.onValueChange?.(event);
+    if (dragging()) {
+      const event2 = this.createEvent("drag-value-change", { detail: clampedValue, trigger });
+      this.dispatch(event2);
+      this.#delegate.onDragValueChange?.(event2);
+    }
+  }
+  #updatePointerValue(value, trigger) {
+    const { pointerValue, dragging } = this.$state;
+    pointerValue.set(value);
+    this.dispatch("pointer-value-change", { detail: value, trigger });
+    if (dragging()) {
+      this.#updateValue(value, trigger);
+    }
+  }
+  #getPointerValue(event) {
+    let thumbPositionRate, rect = this.el.getBoundingClientRect(), { min, max } = this.$state;
+    if (this.$props.orientation() === "vertical") {
+      const { bottom: trackBottom, height: trackHeight } = rect;
+      thumbPositionRate = (trackBottom - event.clientY) / trackHeight;
+    } else {
+      if (this.#touch && isNumber(this.#touchStartValue)) {
+        const { width } = this.#provider.getBoundingClientRect(), rate = (event.clientX - this.#touch.clientX) / width, range = max() - min(), diff = range * Math.abs(rate);
+        thumbPositionRate = (rate < 0 ? this.#touchStartValue - diff : this.#touchStartValue + diff) / range;
+      } else {
+        const { left: trackLeft, width: trackWidth } = rect;
+        thumbPositionRate = (event.clientX - trackLeft) / trackWidth;
+      }
+    }
+    return Math.max(
+      min(),
+      Math.min(
+        max(),
+        this.#delegate.roundValue(
+          getValueFromRate(min(), max(), thumbPositionRate, this.#delegate.getStep())
+        )
+      )
+    );
+  }
+  #onPointerEnter(event) {
+    this.$state.pointing.set(true);
+  }
+  #onPointerMove(event) {
+    const { dragging } = this.$state;
+    if (dragging()) return;
+    this.#updatePointerValue(this.#getPointerValue(event), event);
+  }
+  #onPointerLeave(event) {
+    this.$state.pointing.set(false);
+  }
+  #onPointerDown(event) {
+    if (event.button !== 0) return;
+    const value = this.#getPointerValue(event);
+    this.#onStartDragging(value, event);
+    this.#updatePointerValue(value, event);
+  }
+  #onStartDragging(value, trigger) {
+    const { dragging } = this.$state;
+    if (dragging()) return;
+    dragging.set(true);
+    this.#media.remote.pauseControls(trigger);
+    const event = this.createEvent("drag-start", { detail: value, trigger });
+    this.dispatch(event);
+    this.#delegate.onDragStart?.(event);
+    this.#observer?.onDragStart?.();
+  }
+  #onStopDragging(value, trigger) {
+    const { dragging } = this.$state;
+    if (!dragging()) return;
+    dragging.set(false);
+    this.#media.remote.resumeControls(trigger);
+    const event = this.createEvent("drag-end", { detail: value, trigger });
+    this.dispatch(event);
+    this.#delegate.onDragEnd?.(event);
+    this.#touch = null;
+    this.#touchStartValue = null;
+    this.#observer?.onDragEnd?.();
+  }
+  // -------------------------------------------------------------------------------------------
+  // Keyboard Events
+  // -------------------------------------------------------------------------------------------
+  #lastDownKey;
+  #repeatedKeys = false;
+  #onKeyDown(event) {
+    const isValidKey = Object.keys(SliderKeyDirection).includes(event.key);
+    if (!isValidKey) return;
+    const { key } = event, jumpValue = this.#calcJumpValue(event);
+    if (!isNull(jumpValue)) {
+      this.#updatePointerValue(jumpValue, event);
+      this.#updateValue(jumpValue, event);
+      return;
+    }
+    const newValue = this.#calcNewKeyValue(event);
+    if (!this.#repeatedKeys) {
+      this.#repeatedKeys = key === this.#lastDownKey;
+      if (!this.$state.dragging() && this.#repeatedKeys) {
+        this.#onStartDragging(newValue, event);
+      }
+    }
+    this.#updatePointerValue(newValue, event);
+    this.#lastDownKey = key;
+  }
+  #onKeyUp(event) {
+    const isValidKey = Object.keys(SliderKeyDirection).includes(event.key);
+    if (!isValidKey || !isNull(this.#calcJumpValue(event))) return;
+    const newValue = this.#repeatedKeys ? this.$state.pointerValue() : this.#calcNewKeyValue(event);
+    this.#updateValue(newValue, event);
+    this.#onStopDragging(newValue, event);
+    this.#lastDownKey = "";
+    this.#repeatedKeys = false;
+  }
+  #calcJumpValue(event) {
+    let key = event.key, { min, max } = this.$state;
+    if (key === "Home" || key === "PageUp") {
+      return min();
+    } else if (key === "End" || key === "PageDown") {
+      return max();
+    } else if (!event.metaKey && /^[0-9]$/.test(key)) {
+      return (max() - min()) / 10 * Number(key);
+    }
+    return null;
+  }
+  #calcNewKeyValue(event) {
+    const { key, shiftKey } = event;
+    event.preventDefault();
+    event.stopPropagation();
+    const { shiftKeyMultiplier } = this.$props;
+    const { min, max, value, pointerValue } = this.$state, step = this.#delegate.getStep(), keyStep = this.#delegate.getKeyStep();
+    const modifiedStep = !shiftKey ? keyStep : keyStep * shiftKeyMultiplier(), direction = Number(SliderKeyDirection[key]), diff = modifiedStep * direction, currentValue = this.#repeatedKeys ? pointerValue() : this.#delegate.getValue?.() ?? value(), steps = (currentValue + diff) / step;
+    return Math.max(min(), Math.min(max(), Number((step * steps).toFixed(3))));
+  }
+  // -------------------------------------------------------------------------------------------
+  // Document (Pointer Events)
+  // -------------------------------------------------------------------------------------------
+  #onDocumentPointerUp(event) {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    const value = this.#getPointerValue(event);
+    this.#updatePointerValue(value, event);
+    this.#onStopDragging(value, event);
+  }
+  #onDocumentTouchMove(event) {
+    event.preventDefault();
+  }
+  #onDocumentPointerMove = functionThrottle(
+    (event) => {
+      this.#updatePointerValue(this.#getPointerValue(event), event);
+    },
+    20,
+    { leading: true }
+  );
+}
+
+const sliderValueFormatContext = createContext(() => ({}));
+
+class SliderController extends ViewController {
+  static props = {
+    hidden: false,
+    disabled: false,
+    step: 1,
+    keyStep: 1,
+    orientation: "horizontal",
+    shiftKeyMultiplier: 5
+  };
+  #media;
+  #delegate;
+  #isVisible = signal(true);
+  #isIntersecting = signal(true);
+  constructor(delegate) {
+    super();
+    this.#delegate = delegate;
+  }
+  onSetup() {
+    this.#media = useMediaContext();
+    const focus = new FocusVisibleController();
+    focus.attach(this);
+    this.$state.focused = focus.focused.bind(focus);
+    if (!hasProvidedContext(sliderValueFormatContext)) {
+      provideContext(sliderValueFormatContext, {
+        default: "value"
+      });
+    }
+    provideContext(sliderContext, {
+      orientation: this.$props.orientation,
+      disabled: this.#delegate.isDisabled,
+      preview: signal(null)
+    });
+    effect(this.#watchValue.bind(this));
+    effect(this.#watchStep.bind(this));
+    effect(this.#watchDisabled.bind(this));
+    this.#setupAttrs();
+    new SliderEventsController(this.#delegate, this.#media).attach(this);
+    new IntersectionObserverController({
+      callback: this.#onIntersectionChange.bind(this)
+    }).attach(this);
+  }
+  onAttach(el) {
+    setAttributeIfEmpty(el, "role", "slider");
+    setAttributeIfEmpty(el, "tabindex", "0");
+    setAttributeIfEmpty(el, "autocomplete", "off");
+    effect(this.#watchCSSVars.bind(this));
+  }
+  onConnect(el) {
+    onDispose(observeVisibility(el, this.#isVisible.set));
+    effect(this.#watchHidden.bind(this));
+  }
+  #onIntersectionChange(entries) {
+    this.#isIntersecting.set(entries[0].isIntersecting);
+  }
+  // -------------------------------------------------------------------------------------------
+  // Watch
+  // -------------------------------------------------------------------------------------------
+  #watchHidden() {
+    const { hidden } = this.$props;
+    this.$state.hidden.set(hidden() || !this.#isVisible() || !this.#isIntersecting.bind(this));
+  }
+  #watchValue() {
+    const { dragging, value, min, max } = this.$state;
+    if (peek(dragging)) return;
+    value.set(getClampedValue(min(), max(), value(), this.#delegate.getStep()));
+  }
+  #watchStep() {
+    this.$state.step.set(this.#delegate.getStep());
+  }
+  #watchDisabled() {
+    if (!this.#delegate.isDisabled()) return;
+    const { dragging, pointing } = this.$state;
+    dragging.set(false);
+    pointing.set(false);
+  }
+  // -------------------------------------------------------------------------------------------
+  // ARIA
+  // -------------------------------------------------------------------------------------------
+  #getARIADisabled() {
+    return ariaBool(this.#delegate.isDisabled());
+  }
+  // -------------------------------------------------------------------------------------------
+  // Attributes
+  // -------------------------------------------------------------------------------------------
+  #setupAttrs() {
+    const { orientation } = this.$props, { dragging, active, pointing } = this.$state;
+    this.setAttributes({
+      "data-dragging": dragging,
+      "data-pointing": pointing,
+      "data-active": active,
+      "aria-disabled": this.#getARIADisabled.bind(this),
+      "aria-valuemin": this.#delegate.aria.valueMin ?? this.$state.min,
+      "aria-valuemax": this.#delegate.aria.valueMax ?? this.$state.max,
+      "aria-valuenow": this.#delegate.aria.valueNow,
+      "aria-valuetext": this.#delegate.aria.valueText,
+      "aria-orientation": orientation
+    });
+  }
+  #watchCSSVars() {
+    const { fillPercent, pointerPercent } = this.$state;
+    this.#updateSliderVars(round(fillPercent(), 3), round(pointerPercent(), 3));
+  }
+  #updateSliderVars = animationFrameThrottle((fillPercent, pointerPercent) => {
+    this.el?.style.setProperty("--slider-fill", fillPercent + "%");
+    this.el?.style.setProperty("--slider-pointer", pointerPercent + "%");
+  });
+}
+
+class Slider extends Component {
+  static props = {
+    ...SliderController.props,
+    min: 0,
+    max: 100,
+    value: 0
+  };
+  static state = sliderState;
+  constructor() {
+    super();
+    new SliderController({
+      getStep: this.$props.step,
+      getKeyStep: this.$props.keyStep,
+      roundValue: Math.round,
+      isDisabled: this.$props.disabled,
+      aria: {
+        valueNow: this.#getARIAValueNow.bind(this),
+        valueText: this.#getARIAValueText.bind(this)
+      }
+    });
+  }
+  onSetup() {
+    effect(this.#watchValue.bind(this));
+    effect(this.#watchMinMax.bind(this));
+  }
+  // -------------------------------------------------------------------------------------------
+  // Props
+  // -------------------------------------------------------------------------------------------
+  #getARIAValueNow() {
+    const { value } = this.$state;
+    return Math.round(value());
+  }
+  #getARIAValueText() {
+    const { value, max } = this.$state;
+    return round(value() / max() * 100, 2) + "%";
+  }
+  // -------------------------------------------------------------------------------------------
+  // Watch
+  // -------------------------------------------------------------------------------------------
+  #watchValue() {
+    const { value } = this.$props;
+    this.$state.value.set(value());
+  }
+  #watchMinMax() {
+    const { min, max } = this.$props;
+    this.$state.min.set(min());
+    this.$state.max.set(max());
+  }
+}
+
+const cache = /* @__PURE__ */ new Map(), pending = /* @__PURE__ */ new Map(), warned = /* @__PURE__ */ new Set() ;
+class ThumbnailsLoader {
+  #media;
+  #src;
+  #crossOrigin;
+  $images = signal([]);
+  static create(src, crossOrigin) {
+    const media = useMediaContext();
+    return new ThumbnailsLoader(src, crossOrigin, media);
+  }
+  constructor(src, crossOrigin, media) {
+    this.#src = src;
+    this.#crossOrigin = crossOrigin;
+    this.#media = media;
+    effect(this.#onLoadCues.bind(this));
+  }
+  #onLoadCues() {
+    const { canLoad } = this.#media.$state;
+    if (!canLoad()) return;
+    const src = this.#src();
+    if (!src) return;
+    if (isString(src) && cache.has(src)) {
+      const cues = cache.get(src);
+      cache.delete(src);
+      cache.set(src, cues);
+      if (cache.size > 99) {
+        const firstKey = cache.keys().next().value;
+        cache.delete(firstKey);
+      }
+      this.$images.set(cache.get(src));
+    } else if (isString(src)) {
+      const crossOrigin = this.#crossOrigin(), currentKey = src + "::" + crossOrigin;
+      if (!pending.has(currentKey)) {
+        const promise = new Promise(async (resolve, reject) => {
+          try {
+            const response = await fetch(src, {
+              credentials: getRequestCredentials(crossOrigin)
+            }), isJSON = response.headers.get("content-type") === "application/json";
+            if (isJSON) {
+              const json = await response.json();
+              if (isArray(json)) {
+                if (json[0] && "text" in json[0]) {
+                  resolve(this.#processVTTCues(json));
+                } else {
+                  for (let i = 0; i < json.length; i++) {
+                    const image = json[i];
+                    assert(isObject(image), `Item not an object at index ${i}`);
+                    assert(
+                      "url" in image && isString(image.url),
+                      `Invalid or missing \`url\` property at index ${i}`
+                    );
+                    assert(
+                      "startTime" in image && isNumber(image.startTime),
+                      `Invalid or missing \`startTime\` property at index ${i}`
+                    );
+                  }
+                  resolve(json);
+                }
+              } else {
+                resolve(this.#processStoryboard(json));
+              }
+              return;
+            }
+            import('media-captions').then(async ({ parseResponse }) => {
+              try {
+                const { cues } = await parseResponse(response);
+                resolve(this.#processVTTCues(cues));
+              } catch (e) {
+                reject(e);
+              }
+            });
+          } catch (e) {
+            reject(e);
+          }
+        }).then((images) => {
+          cache.set(currentKey, images);
+          return images;
+        }).catch((error) => {
+          this.#onError(src, error);
+        }).finally(() => {
+          if (isString(currentKey)) pending.delete(currentKey);
+        });
+        pending.set(currentKey, promise);
+      }
+      pending.get(currentKey)?.then((images) => {
+        this.$images.set(images || []);
+      });
+    } else if (isArray(src)) {
+      try {
+        this.$images.set(this.#processImages(src));
+      } catch (error) {
+        this.#onError(src, error);
+      }
+    } else {
+      try {
+        this.$images.set(this.#processStoryboard(src));
+      } catch (error) {
+        this.#onError(src, error);
+      }
+    }
+    return () => {
+      this.$images.set([]);
+    };
+  }
+  #processImages(images) {
+    const baseURL = this.#resolveBaseUrl();
+    return images.map((img, i) => {
+      assert(
+        img.url && isString(img.url),
+        `Invalid or missing \`url\` property at index ${i}`
+      );
+      assert(
+        "startTime" in img && isNumber(img.startTime),
+        `Invalid or missing \`startTime\` property at index ${i}`
+      );
+      return {
+        ...img,
+        url: isString(img.url) ? this.#resolveURL(img.url, baseURL) : img.url
+      };
+    });
+  }
+  #processStoryboard(board) {
+    assert(isString(board.url), "Missing `url` in storyboard object");
+    assert(isArray(board.tiles) && board.tiles?.length, `Empty tiles in storyboard`);
+    const url = new URL(board.url), images = [];
+    const tileWidth = "tile_width" in board ? board.tile_width : board.tileWidth, tileHeight = "tile_height" in board ? board.tile_height : board.tileHeight;
+    for (const tile of board.tiles) {
+      images.push({
+        url,
+        startTime: "start" in tile ? tile.start : tile.startTime,
+        width: tileWidth,
+        height: tileHeight,
+        coords: { x: tile.x, y: tile.y }
+      });
+    }
+    return images;
+  }
+  #processVTTCues(cues) {
+    for (let i = 0; i < cues.length; i++) {
+      const cue = cues[i];
+      assert(
+        "startTime" in cue && isNumber(cue.startTime),
+        `Invalid or missing \`startTime\` property at index ${i}`
+      );
+      assert(
+        "text" in cue && isString(cue.text),
+        `Invalid or missing \`text\` property at index ${i}`
+      );
+    }
+    const images = [], baseURL = this.#resolveBaseUrl();
+    for (const cue of cues) {
+      const [url, hash] = cue.text.split("#"), data = this.#resolveData(hash);
+      images.push({
+        url: this.#resolveURL(url, baseURL),
+        startTime: cue.startTime,
+        endTime: cue.endTime,
+        width: data?.w,
+        height: data?.h,
+        coords: data && isNumber(data.x) && isNumber(data.y) ? { x: data.x, y: data.y } : void 0
+      });
+    }
+    return images;
+  }
+  #resolveBaseUrl() {
+    let baseURL = peek(this.#src);
+    if (!isString(baseURL) || !/^https?:/.test(baseURL)) {
+      return location.href;
+    }
+    return baseURL;
+  }
+  #resolveURL(src, baseURL) {
+    return /^https?:/.test(src) ? new URL(src) : new URL(src, baseURL);
+  }
+  #resolveData(hash) {
+    if (!hash) return {};
+    const [hashProps, values] = hash.split("="), hashValues = values?.split(","), data = {};
+    if (!hashProps || !hashValues) {
+      return null;
+    }
+    for (let i = 0; i < hashProps.length; i++) {
+      const value = +hashValues[i];
+      if (!isNaN(value)) data[hashProps[i]] = value;
+    }
+    return data;
+  }
+  #onError(src, error) {
+    if (warned?.has(src)) return;
+    this.#media.logger?.errorGroup("[vidstack] failed to load thumbnails").labelledLog("Src", src).labelledLog("Error", error).dispatch();
+    warned?.add(src);
+  }
+}
+
+class Thumbnail extends Component {
+  static props = {
+    src: null,
+    time: 0,
+    crossOrigin: null
+  };
+  static state = new State({
+    src: "",
+    img: null,
+    thumbnails: [],
+    activeThumbnail: null,
+    crossOrigin: null,
+    loading: false,
+    error: null,
+    hidden: false
+  });
+  media;
+  #loader;
+  #styleResets = [];
+  onSetup() {
+    this.media = useMediaContext();
+    this.#loader = ThumbnailsLoader.create(this.$props.src, this.$state.crossOrigin);
+    this.#watchCrossOrigin();
+    this.setAttributes({
+      "data-loading": this.#isLoading.bind(this),
+      "data-error": this.#hasError.bind(this),
+      "data-hidden": this.$state.hidden,
+      "aria-hidden": $ariaBool(this.$state.hidden)
+    });
+  }
+  onConnect(el) {
+    effect(this.#watchImg.bind(this));
+    effect(this.#watchHidden.bind(this));
+    effect(this.#watchCrossOrigin.bind(this));
+    effect(this.#onLoadStart.bind(this));
+    effect(this.#onFindActiveThumbnail.bind(this));
+    effect(this.#resize.bind(this));
+  }
+  #watchImg() {
+    const img = this.$state.img();
+    if (!img) return;
+    new EventsController(img).add("load", this.#onLoaded.bind(this)).add("error", this.#onError.bind(this));
+  }
+  #watchCrossOrigin() {
+    const { crossOrigin: crossOriginProp } = this.$props, { crossOrigin: crossOriginState } = this.$state, { crossOrigin: mediaCrossOrigin } = this.media.$state, crossOrigin = crossOriginProp() !== null ? crossOriginProp() : mediaCrossOrigin();
+    crossOriginState.set(crossOrigin === true ? "anonymous" : crossOrigin);
+  }
+  #onLoadStart() {
+    const { src, loading, error } = this.$state;
+    if (src()) {
+      loading.set(true);
+      error.set(null);
+    }
+    return () => {
+      this.#resetStyles();
+      loading.set(false);
+      error.set(null);
+    };
+  }
+  #onLoaded() {
+    const { loading, error } = this.$state;
+    this.#resize();
+    loading.set(false);
+    error.set(null);
+  }
+  #onError(event) {
+    const { loading, error } = this.$state;
+    loading.set(false);
+    error.set(event);
+  }
+  #isLoading() {
+    const { loading, hidden } = this.$state;
+    return !hidden() && loading();
+  }
+  #hasError() {
+    const { error } = this.$state;
+    return !isNull(error());
+  }
+  #watchHidden() {
+    const { hidden } = this.$state, { duration } = this.media.$state, images = this.#loader.$images();
+    hidden.set(this.#hasError() || !Number.isFinite(duration()) || images.length === 0);
+  }
+  getTime() {
+    return this.$props.time();
+  }
+  #onFindActiveThumbnail() {
+    let images = this.#loader.$images();
+    if (!images.length) return;
+    let time = this.getTime(), { src, activeThumbnail } = this.$state, activeIndex = -1, activeImage = null;
+    for (let i = images.length - 1; i >= 0; i--) {
+      const image = images[i];
+      if (time >= image.startTime && (!image.endTime || time < image.endTime)) {
+        activeIndex = i;
+        break;
+      }
+    }
+    if (images[activeIndex]) {
+      activeImage = images[activeIndex];
+    }
+    activeThumbnail.set(activeImage);
+    src.set(activeImage?.url.href || "");
+  }
+  #resize() {
+    if (!this.scope || this.$state.hidden()) return;
+    const rootEl = this.el, imgEl = this.$state.img(), thumbnail = this.$state.activeThumbnail();
+    if (!imgEl || !thumbnail || !rootEl) return;
+    let width = thumbnail.width ?? imgEl.naturalWidth, height = thumbnail?.height ?? imgEl.naturalHeight, {
+      maxWidth,
+      maxHeight,
+      minWidth,
+      minHeight,
+      width: elWidth,
+      height: elHeight
+    } = getComputedStyle(this.el);
+    if (minWidth === "100%") minWidth = parseFloat(elWidth) + "";
+    if (minHeight === "100%") minHeight = parseFloat(elHeight) + "";
+    let minRatio = Math.max(parseInt(minWidth) / width, parseInt(minHeight) / height), maxRatio = Math.min(
+      Math.max(parseInt(minWidth), parseInt(maxWidth)) / width,
+      Math.max(parseInt(minHeight), parseInt(maxHeight)) / height
+    ), scale = !isNaN(maxRatio) && maxRatio < 1 ? maxRatio : minRatio > 1 ? minRatio : 1;
+    this.#style(rootEl, "--thumbnail-width", `${width * scale}px`);
+    this.#style(rootEl, "--thumbnail-height", `${height * scale}px`);
+    this.#style(rootEl, "--thumbnail-aspect-ratio", String(round(width / height, 5)));
+    this.#style(imgEl, "width", `${imgEl.naturalWidth * scale}px`);
+    this.#style(imgEl, "height", `${imgEl.naturalHeight * scale}px`);
+    this.#style(
+      imgEl,
+      "transform",
+      thumbnail.coords ? `translate(-${thumbnail.coords.x * scale}px, -${thumbnail.coords.y * scale}px)` : ""
+    );
+    this.#style(imgEl, "max-width", "none");
+  }
+  #style(el, name, value) {
+    el.style.setProperty(name, value);
+    this.#styleResets.push(() => el.style.removeProperty(name));
+  }
+  #resetStyles() {
+    for (const reset of this.#styleResets) reset();
+    this.#styleResets = [];
+  }
+}
+
+class SliderValue extends Component {
+  static props = {
+    type: "pointer",
+    format: null,
+    showHours: false,
+    showMs: false,
+    padHours: null,
+    padMinutes: null,
+    decimalPlaces: 2
+  };
+  #format;
+  #text;
+  #slider;
+  onSetup() {
+    this.#slider = useState(Slider.state);
+    this.#format = useContext(sliderValueFormatContext);
+    this.#text = computed(this.getValueText.bind(this));
+  }
+  /**
+   * Returns the current value formatted as text based on prop settings.
+   */
+  getValueText() {
+    const {
+      type,
+      format: $format,
+      decimalPlaces,
+      padHours,
+      padMinutes,
+      showHours,
+      showMs
+    } = this.$props, { value: sliderValue, pointerValue, min, max } = this.#slider, format = $format?.() ?? this.#format.default;
+    const value = type() === "current" ? sliderValue() : pointerValue();
+    if (format === "percent") {
+      const range = max() - min();
+      const percent = value / range * 100;
+      return (this.#format.percent ?? round)(percent, decimalPlaces()) + "%";
+    } else if (format === "time") {
+      return (this.#format.time ?? formatTime)(value, {
+        padHrs: padHours(),
+        padMins: padMinutes(),
+        showHrs: showHours(),
+        showMs: showMs()
+      });
+    } else {
+      return (this.#format.value?.(value) ?? value.toFixed(2)) + "";
+    }
+  }
+}
+const slidervalue__proto = SliderValue.prototype;
+method(slidervalue__proto, "getValueText");
+
+class SliderPreview extends Component {
+  static props = {
+    offset: 0,
+    noClamp: false
+  };
+  #slider;
+  onSetup() {
+    this.#slider = useContext(sliderContext);
+    const { active } = useState(Slider.state);
+    this.setAttributes({
+      "data-visible": active
+    });
+  }
+  onAttach(el) {
+    Object.assign(el.style, {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "max-content"
+    });
+  }
+  onConnect(el) {
+    const { preview } = this.#slider;
+    preview.set(el);
+    onDispose(() => preview.set(null));
+    effect(this.#updatePlacement.bind(this));
+    const resize = new ResizeObserver(this.#updatePlacement.bind(this));
+    resize.observe(el);
+    onDispose(() => resize.disconnect());
+  }
+  #updatePlacement = animationFrameThrottle(() => {
+    const { disabled, orientation } = this.#slider;
+    if (disabled()) return;
+    const el = this.el, { offset, noClamp } = this.$props;
+    if (!el) return;
+    updateSliderPreviewPlacement(el, {
+      clamp: !noClamp(),
+      offset: offset(),
+      orientation: orientation()
+    });
+  });
+}
+function updateSliderPreviewPlacement(el, {
+  clamp,
+  offset,
+  orientation
+}) {
+  const computedStyle = getComputedStyle(el), width = parseFloat(computedStyle.width), height = parseFloat(computedStyle.height), styles = {
+    top: null,
+    right: null,
+    bottom: null,
+    left: null
+  };
+  styles[orientation === "horizontal" ? "bottom" : "left"] = `calc(100% + var(--media-slider-preview-offset, ${offset}px))`;
+  if (orientation === "horizontal") {
+    const widthHalf = width / 2;
+    if (!clamp) {
+      styles.left = `calc(var(--slider-pointer) - ${widthHalf}px)`;
+    } else {
+      const leftClamp = `max(0px, calc(var(--slider-pointer) - ${widthHalf}px))`, rightClamp = `calc(100% - ${width}px)`;
+      styles.left = `min(${leftClamp}, ${rightClamp})`;
+    }
+  } else {
+    const heightHalf = height / 2;
+    if (!clamp) {
+      styles.bottom = `calc(var(--slider-pointer) - ${heightHalf}px)`;
+    } else {
+      const topClamp = `max(${heightHalf}px, calc(var(--slider-pointer) - ${heightHalf}px))`, bottomClamp = `calc(100% - ${height}px)`;
+      styles.bottom = `min(${topClamp}, ${bottomClamp})`;
+    }
+  }
+  Object.assign(el.style, styles);
+}
+
+class VolumeSlider extends Component {
+  static props = {
+    ...SliderController.props,
+    keyStep: 5,
+    shiftKeyMultiplier: 2
+  };
+  static state = sliderState;
+  #media;
+  onSetup() {
+    this.#media = useMediaContext();
+    const { audioGain } = this.#media.$state;
+    provideContext(sliderValueFormatContext, {
+      default: "percent",
+      value(value) {
+        return (value * (audioGain() ?? 1)).toFixed(2);
+      },
+      percent(value) {
+        return Math.round(value * (audioGain() ?? 1));
+      }
+    });
+    new SliderController({
+      getStep: this.$props.step,
+      getKeyStep: this.$props.keyStep,
+      roundValue: Math.round,
+      isDisabled: this.#isDisabled.bind(this),
+      aria: {
+        valueMax: this.#getARIAValueMax.bind(this),
+        valueNow: this.#getARIAValueNow.bind(this),
+        valueText: this.#getARIAValueText.bind(this)
+      },
+      onDragValueChange: this.#onDragValueChange.bind(this),
+      onValueChange: this.#onValueChange.bind(this)
+    }).attach(this);
+    effect(this.#watchVolume.bind(this));
+  }
+  onAttach(el) {
+    el.setAttribute("data-media-volume-slider", "");
+    setAttributeIfEmpty(el, "aria-label", "Volume");
+    const { canSetVolume } = this.#media.$state;
+    this.setAttributes({
+      "data-supported": canSetVolume,
+      "aria-hidden": $ariaBool(() => !canSetVolume())
+    });
+  }
+  #getARIAValueNow() {
+    const { value } = this.$state, { audioGain } = this.#media.$state;
+    return Math.round(value() * (audioGain() ?? 1));
+  }
+  #getARIAValueText() {
+    const { value, max } = this.$state, { audioGain } = this.#media.$state;
+    return round(value() / max() * (audioGain() ?? 1) * 100, 2) + "%";
+  }
+  #getARIAValueMax() {
+    const { audioGain } = this.#media.$state;
+    return this.$state.max() * (audioGain() ?? 1);
+  }
+  #isDisabled() {
+    const { disabled } = this.$props, { canSetVolume } = this.#media.$state;
+    return disabled() || !canSetVolume();
+  }
+  #watchVolume() {
+    const { muted, volume } = this.#media.$state;
+    const newValue = muted() ? 0 : volume() * 100;
+    this.$state.value.set(newValue);
+    this.dispatch("value-change", { detail: newValue });
+  }
+  #throttleVolumeChange = functionThrottle(this.#onVolumeChange.bind(this), 25);
+  #onVolumeChange(event) {
+    if (!event.trigger) return;
+    const mediaVolume = round(event.detail / 100, 3);
+    this.#media.remote.changeVolume(mediaVolume, event);
+  }
+  #onValueChange(event) {
+    this.#throttleVolumeChange(event);
+  }
+  #onDragValueChange(event) {
+    this.#throttleVolumeChange(event);
+  }
+}
+
+class TimeSlider extends Component {
+  static props = {
+    ...SliderController.props,
+    step: 0.1,
+    keyStep: 5,
+    shiftKeyMultiplier: 2,
+    pauseWhileDragging: false,
+    noSwipeGesture: false,
+    seekingRequestThrottle: 100
+  };
+  static state = sliderState;
+  #media;
+  #dispatchSeeking;
+  #chapter = signal(null);
+  constructor() {
+    super();
+    const { noSwipeGesture } = this.$props;
+    new SliderController({
+      swipeGesture: () => !noSwipeGesture(),
+      getValue: this.#getValue.bind(this),
+      getStep: this.#getStep.bind(this),
+      getKeyStep: this.#getKeyStep.bind(this),
+      roundValue: this.#roundValue,
+      isDisabled: this.#isDisabled.bind(this),
+      aria: {
+        valueNow: this.#getARIAValueNow.bind(this),
+        valueText: this.#getARIAValueText.bind(this)
+      },
+      onDragStart: this.#onDragStart.bind(this),
+      onDragValueChange: this.#onDragValueChange.bind(this),
+      onDragEnd: this.#onDragEnd.bind(this),
+      onValueChange: this.#onValueChange.bind(this)
+    });
+  }
+  onSetup() {
+    this.#media = useMediaContext();
+    provideContext(sliderValueFormatContext, {
+      default: "time",
+      value: this.#formatValue.bind(this),
+      time: this.#formatTime.bind(this)
+    });
+    this.setAttributes({
+      "data-chapters": this.#hasChapters.bind(this)
+    });
+    this.setStyles({
+      "--slider-progress": this.#calcBufferedPercent.bind(this)
+    });
+    effect(this.#watchCurrentTime.bind(this));
+    effect(this.#watchSeekingThrottle.bind(this));
+  }
+  onAttach(el) {
+    el.setAttribute("data-media-time-slider", "");
+    setAttributeIfEmpty(el, "aria-label", "Seek");
+  }
+  onConnect(el) {
+    effect(this.#watchPreviewing.bind(this));
+    watchActiveTextTrack(this.#media.textTracks, "chapters", this.#chapter.set);
+  }
+  #calcBufferedPercent() {
+    const { bufferedEnd, duration } = this.#media.$state;
+    return round(Math.min(bufferedEnd() / Math.max(duration(), 1), 1) * 100, 3) + "%";
+  }
+  #hasChapters() {
+    const { duration } = this.#media.$state;
+    return this.#chapter()?.cues.length && Number.isFinite(duration()) && duration() > 0;
+  }
+  #watchSeekingThrottle() {
+    this.#dispatchSeeking = functionThrottle(
+      this.#seeking.bind(this),
+      this.$props.seekingRequestThrottle()
+    );
+  }
+  #watchCurrentTime() {
+    if (this.$state.hidden()) return;
+    const { value, dragging } = this.$state, newValue = this.#getValue();
+    if (!peek(dragging)) {
+      value.set(newValue);
+      this.dispatch("value-change", { detail: newValue });
+    }
+  }
+  #watchPreviewing() {
+    const player = this.#media.player.el, { preview } = useContext(sliderContext);
+    player && preview() && setAttribute(player, "data-preview", this.$state.active());
+  }
+  #seeking(time, event) {
+    this.#media.remote.seeking(time, event);
+  }
+  #seek(time, percent, event) {
+    this.#dispatchSeeking.cancel();
+    const { live } = this.#media.$state;
+    if (live() && percent >= 99) {
+      this.#media.remote.seekToLiveEdge(event);
+      return;
+    }
+    this.#media.remote.seek(time, event);
+  }
+  #playingBeforeDragStart = false;
+  #onDragStart(event) {
+    const { pauseWhileDragging } = this.$props;
+    if (pauseWhileDragging()) {
+      const { paused } = this.#media.$state;
+      this.#playingBeforeDragStart = !paused();
+      this.#media.remote.pause(event);
+    }
+  }
+  #onDragValueChange(event) {
+    this.#dispatchSeeking(this.#percentToTime(event.detail), event);
+  }
+  #onDragEnd(event) {
+    const { seeking } = this.#media.$state;
+    if (!peek(seeking)) this.#seeking(this.#percentToTime(event.detail), event);
+    const percent = event.detail;
+    this.#seek(this.#percentToTime(percent), percent, event);
+    const { pauseWhileDragging } = this.$props;
+    if (pauseWhileDragging() && this.#playingBeforeDragStart) {
+      this.#media.remote.play(event);
+      this.#playingBeforeDragStart = false;
+    }
+  }
+  #onValueChange(event) {
+    const { dragging } = this.$state;
+    if (dragging() || !event.trigger) return;
+    this.#onDragEnd(event);
+  }
+  // -------------------------------------------------------------------------------------------
+  // Props
+  // -------------------------------------------------------------------------------------------
+  #getValue() {
+    const { currentTime } = this.#media.$state;
+    return this.#timeToPercent(currentTime());
+  }
+  #getStep() {
+    const value = this.$props.step() / this.#media.$state.duration() * 100;
+    return Number.isFinite(value) ? value : 1;
+  }
+  #getKeyStep() {
+    const value = this.$props.keyStep() / this.#media.$state.duration() * 100;
+    return Number.isFinite(value) ? value : 1;
+  }
+  #roundValue(value) {
+    return round(value, 3);
+  }
+  #isDisabled() {
+    const { disabled } = this.$props, { canSeek } = this.#media.$state;
+    return disabled() || !canSeek();
+  }
+  // -------------------------------------------------------------------------------------------
+  // ARIA
+  // -------------------------------------------------------------------------------------------
+  #getARIAValueNow() {
+    const { value } = this.$state;
+    return Math.round(value());
+  }
+  #getARIAValueText() {
+    const time = this.#percentToTime(this.$state.value()), { duration } = this.#media.$state;
+    return Number.isFinite(time) ? `${formatSpokenTime(time)} out of ${formatSpokenTime(duration())}` : "live";
+  }
+  // -------------------------------------------------------------------------------------------
+  // Format
+  // -------------------------------------------------------------------------------------------
+  #percentToTime(percent) {
+    const { duration } = this.#media.$state;
+    return round(percent / 100 * duration(), 5);
+  }
+  #timeToPercent(time) {
+    const { liveEdge, duration } = this.#media.$state, rate = Math.max(0, Math.min(1, liveEdge() ? 1 : Math.min(time, duration()) / duration()));
+    return Number.isNaN(rate) ? 0 : Number.isFinite(rate) ? rate * 100 : 100;
+  }
+  #formatValue(percent) {
+    const time = this.#percentToTime(percent), { live, duration } = this.#media.$state;
+    return Number.isFinite(time) ? (live() ? time - duration() : time).toFixed(0) : "LIVE";
+  }
+  #formatTime(percent, options) {
+    const time = this.#percentToTime(percent), { live, duration } = this.#media.$state, value = live() ? time - duration() : time;
+    return Number.isFinite(time) ? `${value < 0 ? "-" : ""}${formatTime(Math.abs(value), options)}` : "LIVE";
+  }
+}
+
+const menuContext = createContext();
+
+function scrollIntoView(el, options) {
+  const scrolls = r(el, options);
+  for (const { el: el2, top, left } of scrolls) {
+    el2.scroll({ top, left, behavior: options.behavior });
+  }
+}
+function scrollIntoCenter(el, options = {}) {
+  scrollIntoView(el, {
+    scrollMode: "if-needed",
+    block: "center",
+    inline: "center",
+    ...options
+  });
+}
+
+const FOCUSABLE_ELEMENTS_SELECTOR = /* @__PURE__ */ [
+  "a[href]",
+  "[tabindex]",
+  "input",
+  "select",
+  "button"
+].map((selector) => `${selector}:not([aria-hidden='true'])`).join(",");
+const VALID_KEYS = /* @__PURE__ */ new Set([
+  "Escape",
+  "Tab",
+  "ArrowUp",
+  "ArrowDown",
+  "Home",
+  "PageUp",
+  "End",
+  "PageDown",
+  "Enter",
+  " "
+]);
+class MenuFocusController {
+  #index = -1;
+  #el = null;
+  #elements = [];
+  #delegate;
+  get items() {
+    return this.#elements;
+  }
+  constructor(delegate) {
+    this.#delegate = delegate;
+  }
+  attachMenu(el) {
+    listenEvent(el, "focus", this.#onFocus.bind(this));
+    this.#el = el;
+    onDispose(() => {
+      this.#el = null;
+    });
+  }
+  listen() {
+    if (!this.#el) return;
+    this.update();
+    new EventsController(this.#el).add("keyup", this.#onKeyUp.bind(this)).add("keydown", this.#onKeyDown.bind(this));
+    onDispose(() => {
+      this.#index = -1;
+      this.#elements = [];
+    });
+  }
+  update() {
+    this.#index = 0;
+    this.#elements = this.#getFocusableElements();
+  }
+  scroll(index = this.#findActiveIndex()) {
+    const element = this.#elements[index];
+    if (element) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          scrollIntoCenter(element, {
+            behavior: "smooth",
+            boundary: (el) => {
+              return !el.hasAttribute("data-root");
+            }
+          });
+        });
+      });
+    }
+  }
+  focusActive(scroll = true) {
+    const index = this.#findActiveIndex();
+    this.#focusAt(index >= 0 ? index : 0, scroll);
+  }
+  #focusAt(index, scroll = true) {
+    this.#index = index;
+    if (this.#elements[index]) {
+      this.#elements[index].focus({ preventScroll: true });
+      if (scroll) this.scroll(index);
+    } else {
+      this.#el?.focus({ preventScroll: true });
+    }
+  }
+  #findActiveIndex() {
+    return this.#elements.findIndex(
+      (el) => document.activeElement === el || el.getAttribute("role") === "menuitemradio" && el.getAttribute("aria-checked") === "true"
+    );
+  }
+  #onFocus() {
+    if (this.#index >= 0) return;
+    this.update();
+    this.focusActive();
+  }
+  #validateKeyEvent(event) {
+    const el = event.target;
+    if (wasEnterKeyPressed(event) && el instanceof Element) {
+      const role = el.getAttribute("role");
+      return !/a|input|select|button/.test(el.localName) && !role;
+    }
+    return VALID_KEYS.has(event.key);
+  }
+  #onKeyUp(event) {
+    if (!this.#validateKeyEvent(event)) return;
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  #onKeyDown(event) {
+    if (!this.#validateKeyEvent(event)) return;
+    event.stopPropagation();
+    event.preventDefault();
+    switch (event.key) {
+      case "Escape":
+        this.#delegate.closeMenu(event);
+        break;
+      case "Tab":
+        this.#focusAt(this.#nextIndex(event.shiftKey ? -1 : 1));
+        break;
+      case "ArrowUp":
+        this.#focusAt(this.#nextIndex(-1));
+        break;
+      case "ArrowDown":
+        this.#focusAt(this.#nextIndex(1));
+        break;
+      case "Home":
+      case "PageUp":
+        this.#focusAt(0);
+        break;
+      case "End":
+      case "PageDown":
+        this.#focusAt(this.#elements.length - 1);
+        break;
+    }
+  }
+  #nextIndex(delta) {
+    let index = this.#index;
+    do {
+      index = (index + delta + this.#elements.length) % this.#elements.length;
+    } while (this.#elements[index]?.offsetParent === null);
+    return index;
+  }
+  #getFocusableElements() {
+    if (!this.#el) return [];
+    const focusableElements = this.#el.querySelectorAll(FOCUSABLE_ELEMENTS_SELECTOR), elements = [];
+    const is = (node) => {
+      return node.getAttribute("role") === "menu";
+    };
+    for (const el of focusableElements) {
+      if (isHTMLElement(el) && el.offsetParent !== null && // does not have display: none
+      isElementParent(this.#el, el, is)) {
+        elements.push(el);
+      }
+    }
+    return elements;
+  }
+}
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = __getOwnPropDesc(target, key) ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+let idCount = 0;
+class Menu extends Component {
+  static props = {
+    showDelay: 0
+  };
+  #media;
+  #menuId;
+  #menuButtonId;
+  #expanded = signal(false);
+  #disabled = signal(false);
+  #trigger = signal(null);
+  #content = signal(null);
+  #parentMenu;
+  #submenus = /* @__PURE__ */ new Set();
+  #menuObserver = null;
+  #popper;
+  #focus;
+  #isSliderActive = false;
+  #isTriggerDisabled = signal(false);
+  #transitionCallbacks = /* @__PURE__ */ new Set();
+  get triggerElement() {
+    return this.#trigger();
+  }
+  get contentElement() {
+    return this.#content();
+  }
+  get isSubmenu() {
+    return !!this.#parentMenu;
+  }
+  constructor() {
+    super();
+    const { showDelay } = this.$props;
+    this.#popper = new Popper({
+      trigger: this.#trigger,
+      content: this.#content,
+      showDelay,
+      listen: (trigger, show, hide) => {
+        onPress(trigger, (event) => {
+          if (this.#expanded()) hide(event);
+          else show(event);
+        });
+        const closeTarget = this.#getCloseTarget();
+        if (closeTarget) {
+          onPress(closeTarget, (event) => {
+            event.stopPropagation();
+            hide(event);
+          });
+        }
+      },
+      onChange: this.#onExpandedChange.bind(this)
+    });
+  }
+  onSetup() {
+    this.#media = useMediaContext();
+    const currentIdCount = ++idCount;
+    this.#menuId = `media-menu-${currentIdCount}`;
+    this.#menuButtonId = `media-menu-button-${currentIdCount}`;
+    this.#focus = new MenuFocusController({
+      closeMenu: this.close.bind(this)
+    });
+    if (hasProvidedContext(menuContext)) {
+      this.#parentMenu = useContext(menuContext);
+    }
+    this.#observeSliders();
+    this.setAttributes({
+      "data-open": this.#expanded,
+      "data-root": !this.isSubmenu,
+      "data-submenu": this.isSubmenu,
+      "data-disabled": this.#isDisabled.bind(this)
+    });
+    provideContext(menuContext, {
+      button: this.#trigger,
+      content: this.#content,
+      expanded: this.#expanded,
+      hint: signal(""),
+      submenu: !!this.#parentMenu,
+      disable: this.#disable.bind(this),
+      attachMenuButton: this.#attachMenuButton.bind(this),
+      attachMenuItems: this.#attachMenuItems.bind(this),
+      attachObserver: this.#attachObserver.bind(this),
+      disableMenuButton: this.#disableMenuButton.bind(this),
+      addSubmenu: this.#addSubmenu.bind(this),
+      onTransitionEvent: (callback) => {
+        this.#transitionCallbacks.add(callback);
+        onDispose(() => {
+          this.#transitionCallbacks.delete(callback);
+        });
+      }
+    });
+  }
+  onAttach(el) {
+    el.style.setProperty("display", "contents");
+  }
+  onConnect(el) {
+    effect(this.#watchExpanded.bind(this));
+    if (this.isSubmenu) {
+      this.#parentMenu?.addSubmenu(this);
+    }
+  }
+  onDestroy() {
+    this.#trigger.set(null);
+    this.#content.set(null);
+    this.#menuObserver = null;
+    this.#transitionCallbacks.clear();
+  }
+  #observeSliders() {
+    let sliderActiveTimer = -1, parentSliderObserver = hasProvidedContext(sliderObserverContext) ? useContext(sliderObserverContext) : null;
+    provideContext(sliderObserverContext, {
+      onDragStart: () => {
+        parentSliderObserver?.onDragStart?.();
+        window.clearTimeout(sliderActiveTimer);
+        sliderActiveTimer = -1;
+        this.#isSliderActive = true;
+      },
+      onDragEnd: () => {
+        parentSliderObserver?.onDragEnd?.();
+        sliderActiveTimer = window.setTimeout(() => {
+          this.#isSliderActive = false;
+          sliderActiveTimer = -1;
+        }, 300);
+      }
+    });
+  }
+  #watchExpanded() {
+    const expanded = this.#isExpanded();
+    if (!this.isSubmenu) this.#onResize();
+    this.#updateMenuItemsHidden(expanded);
+    if (!expanded) return;
+    effect(() => {
+      const { height } = this.#media.$state, content = this.#content();
+      content && setStyle(content, "--player-height", height() + "px");
+    });
+    this.#focus.listen();
+    this.listen("pointerup", this.#onPointerUp.bind(this));
+    listenEvent(window, "pointerup", this.#onWindowPointerUp.bind(this));
+  }
+  #attachMenuButton(button) {
+    const el = button.el, isMenuItem = this.isSubmenu, isARIADisabled = $ariaBool(this.#isDisabled.bind(this));
+    setAttributeIfEmpty(el, "tabindex", isMenuItem ? "-1" : "0");
+    setAttributeIfEmpty(el, "role", isMenuItem ? "menuitem" : "button");
+    setAttribute(el, "id", this.#menuButtonId);
+    setAttribute(el, "aria-haspopup", "menu");
+    setAttribute(el, "aria-expanded", "false");
+    setAttribute(el, "data-root", !this.isSubmenu);
+    setAttribute(el, "data-submenu", this.isSubmenu);
+    const watchAttrs = () => {
+      setAttribute(el, "data-open", this.#expanded());
+      setAttribute(el, "aria-disabled", isARIADisabled());
+    };
+    effect(watchAttrs);
+    this.#trigger.set(el);
+    onDispose(() => {
+      this.#trigger.set(null);
+    });
+  }
+  #attachMenuItems(items) {
+    const el = items.el;
+    el.style.setProperty("display", "none");
+    setAttribute(el, "id", this.#menuId);
+    setAttributeIfEmpty(el, "role", "menu");
+    setAttributeIfEmpty(el, "tabindex", "-1");
+    setAttribute(el, "data-root", !this.isSubmenu);
+    setAttribute(el, "data-submenu", this.isSubmenu);
+    this.#content.set(el);
+    onDispose(() => this.#content.set(null));
+    const watchAttrs = () => setAttribute(el, "data-open", this.#expanded());
+    effect(watchAttrs);
+    this.#focus.attachMenu(el);
+    this.#updateMenuItemsHidden(false);
+    const onTransition = this.#onResizeTransition.bind(this);
+    if (!this.isSubmenu) {
+      items.listen("transitionstart", onTransition);
+      items.listen("transitionend", onTransition);
+      items.listen("animationend", this.#onResize);
+      items.listen("vds-menu-resize", this.#onResize);
+    } else {
+      this.#parentMenu?.onTransitionEvent(onTransition);
+    }
+  }
+  #attachObserver(observer) {
+    this.#menuObserver = observer;
+  }
+  #updateMenuItemsHidden(expanded) {
+    const content = peek(this.#content);
+    if (content) setAttribute(content, "aria-hidden", ariaBool(!expanded));
+  }
+  #disableMenuButton(disabled) {
+    this.#isTriggerDisabled.set(disabled);
+  }
+  #wasKeyboardExpand = false;
+  #onExpandedChange(isExpanded, event) {
+    this.#wasKeyboardExpand = isKeyboardEvent(event);
+    event?.stopPropagation();
+    if (this.#expanded() === isExpanded) return;
+    if (this.#isDisabled()) {
+      if (isExpanded) this.#popper.hide(event);
+      return;
+    }
+    this.el?.dispatchEvent(
+      new Event("vds-menu-resize", {
+        bubbles: true,
+        composed: true
+      })
+    );
+    const trigger = this.#trigger(), content = this.#content();
+    if (trigger) {
+      setAttribute(trigger, "aria-controls", isExpanded && this.#menuId);
+      setAttribute(trigger, "aria-expanded", ariaBool(isExpanded));
+    }
+    if (content) setAttribute(content, "aria-labelledby", isExpanded && this.#menuButtonId);
+    this.#expanded.set(isExpanded);
+    this.#toggleMediaControls(event);
+    tick();
+    if (this.#wasKeyboardExpand) {
+      if (isExpanded) content?.focus();
+      else trigger?.focus();
+      for (const el of [this.el, content]) {
+        el && el.setAttribute("data-keyboard", "");
+      }
+    } else {
+      for (const el of [this.el, content]) {
+        el && el.removeAttribute("data-keyboard");
+      }
+    }
+    this.dispatch(isExpanded ? "open" : "close", { trigger: event });
+    if (isExpanded) {
+      if (!this.isSubmenu && this.#media.activeMenu !== this) {
+        this.#media.activeMenu?.close(event);
+        this.#media.activeMenu = this;
+      }
+      this.#menuObserver?.onOpen?.(event);
+    } else {
+      if (this.isSubmenu) {
+        for (const el of this.#submenus) el.close(event);
+      } else {
+        this.#media.activeMenu = null;
+      }
+      this.#menuObserver?.onClose?.(event);
+    }
+    if (isExpanded) {
+      requestAnimationFrame(this.#updateFocus.bind(this));
+    }
+  }
+  #updateFocus() {
+    if (this.#isTransitionActive || this.#isSubmenuOpen) return;
+    this.#focus.update();
+    requestAnimationFrame(() => {
+      if (this.#wasKeyboardExpand) {
+        this.#focus.focusActive();
+      } else {
+        this.#focus.scroll();
+      }
+    });
+  }
+  #isExpanded() {
+    return !this.#isDisabled() && this.#expanded();
+  }
+  #isDisabled() {
+    return this.#disabled() || this.#isTriggerDisabled();
+  }
+  #disable(disabled) {
+    this.#disabled.set(disabled);
+  }
+  #onPointerUp(event) {
+    const content = this.#content();
+    if (this.#isSliderActive || content && isEventInside(content, event)) {
+      return;
+    }
+    event.stopPropagation();
+  }
+  #onWindowPointerUp(event) {
+    const content = this.#content();
+    if (this.#isSliderActive || content && isEventInside(content, event)) {
+      return;
+    }
+    this.close(event);
+  }
+  #getCloseTarget() {
+    const target = this.el?.querySelector('[data-part="close-target"]');
+    return this.el && target && isElementParent(this.el, target, (node) => node.getAttribute("role") === "menu") ? target : null;
+  }
+  #toggleMediaControls(trigger) {
+    if (this.isSubmenu) return;
+    if (this.#expanded()) this.#media.remote.pauseControls(trigger);
+    else this.#media.remote.resumeControls(trigger);
+  }
+  #addSubmenu(menu) {
+    this.#submenus.add(menu);
+    new EventsController(menu).add("open", this.#onSubmenuOpenBind).add("close", this.#onSubmenuCloseBind);
+    onDispose(this.#removeSubmenuBind);
+  }
+  #removeSubmenuBind = this.#removeSubmenu.bind(this);
+  #removeSubmenu(menu) {
+    this.#submenus.delete(menu);
+  }
+  #isSubmenuOpen = false;
+  #onSubmenuOpenBind = this.#onSubmenuOpen.bind(this);
+  #onSubmenuOpen(event) {
+    this.#isSubmenuOpen = true;
+    const content = this.#content();
+    if (this.isSubmenu) {
+      this.triggerElement?.setAttribute("aria-hidden", "true");
+    }
+    for (const target of this.#submenus) {
+      if (target !== event.target) {
+        for (const el of [target.el, target.triggerElement]) {
+          el?.setAttribute("aria-hidden", "true");
+        }
+      }
+    }
+    if (content) {
+      const el = event.target.el;
+      for (const child of content.children) {
+        if (child.contains(el)) {
+          child.setAttribute("data-open", "");
+        } else if (child !== el) {
+          child.setAttribute("data-hidden", "");
+        }
+      }
+    }
+  }
+  #onSubmenuCloseBind = this.#onSubmenuClose.bind(this);
+  #onSubmenuClose(event) {
+    this.#isSubmenuOpen = false;
+    const content = this.#content();
+    if (this.isSubmenu) {
+      this.triggerElement?.setAttribute("aria-hidden", "false");
+    }
+    for (const target of this.#submenus) {
+      for (const el of [target.el, target.triggerElement]) {
+        el?.setAttribute("aria-hidden", "false");
+      }
+    }
+    if (content) {
+      for (const child of content.children) {
+        child.removeAttribute("data-open");
+        child.removeAttribute("data-hidden");
+      }
+    }
+  }
+  #onResize = animationFrameThrottle(() => {
+    const content = peek(this.#content);
+    if (!content || false) return;
+    let height = 0, styles = getComputedStyle(content), children = [...content.children];
+    for (const prop2 of ["paddingTop", "paddingBottom", "borderTopWidth", "borderBottomWidth"]) {
+      height += parseFloat(styles[prop2]) || 0;
+    }
+    for (const child of children) {
+      if (isHTMLElement(child) && child.style.display === "contents") {
+        children.push(...child.children);
+      } else if (child.nodeType === 3) {
+        height += parseFloat(getComputedStyle(child).fontSize);
+      } else if (isHTMLElement(child)) {
+        if (!isElementVisible(child)) continue;
+        const style = getComputedStyle(child);
+        height += child.offsetHeight + (parseFloat(style.marginTop) || 0) + (parseFloat(style.marginBottom) || 0);
+      }
+    }
+    setStyle(content, "--menu-height", height + "px");
+  });
+  #isTransitionActive = false;
+  #onResizeTransition(event) {
+    const content = this.#content();
+    if (content && event.propertyName === "height") {
+      this.#isTransitionActive = event.type === "transitionstart";
+      setAttribute(content, "data-transition", this.#isTransitionActive ? "height" : null);
+      if (this.#expanded()) this.#updateFocus();
+    }
+    for (const callback of this.#transitionCallbacks) callback(event);
+  }
+  open(trigger) {
+    if (peek(this.#expanded)) return;
+    this.#popper.show(trigger);
+    tick();
+  }
+  close(trigger) {
+    if (!peek(this.#expanded)) return;
+    this.#popper.hide(trigger);
+    tick();
+  }
+}
+__decorateClass([
+  prop
+], Menu.prototype, "triggerElement");
+__decorateClass([
+  prop
+], Menu.prototype, "contentElement");
+__decorateClass([
+  prop
+], Menu.prototype, "isSubmenu");
+__decorateClass([
+  method
+], Menu.prototype, "open");
+__decorateClass([
+  method
+], Menu.prototype, "close");
+
+class MenuButton extends Component {
+  static props = {
+    disabled: false
+  };
+  #menu;
+  #hintEl = signal(null);
+  get expanded() {
+    return this.#menu?.expanded() ?? false;
+  }
+  constructor() {
+    super();
+    new FocusVisibleController();
+  }
+  onSetup() {
+    this.#menu = useContext(menuContext);
+  }
+  onAttach(el) {
+    this.#menu.attachMenuButton(this);
+    effect(this.#watchDisabled.bind(this));
+    setAttributeIfEmpty(el, "type", "button");
+  }
+  onConnect(el) {
+    effect(this.#watchHintEl.bind(this));
+    this.#onMutation();
+    const mutations = new MutationObserver(this.#onMutation.bind(this));
+    mutations.observe(el, { attributeFilter: ["data-part"], childList: true, subtree: true });
+    onDispose(() => mutations.disconnect());
+    onPress(el, (trigger) => {
+      this.dispatch("select", { trigger });
+    });
+  }
+  #watchDisabled() {
+    this.#menu.disableMenuButton(this.$props.disabled());
+  }
+  #watchHintEl() {
+    const el = this.#hintEl();
+    if (!el) return;
+    effect(() => {
+      const text = this.#menu.hint();
+      if (text) el.textContent = text;
+    });
+  }
+  #onMutation() {
+    const hintEl = this.el?.querySelector('[data-part="hint"]');
+    this.#hintEl.set(hintEl ?? null);
+  }
+}
+const menubutton__proto = MenuButton.prototype;
+prop(menubutton__proto, "expanded");
+
+class MenuItem extends MenuButton {
+}
+
+class MenuPortal extends Component {
+  static props = {
+    container: null,
+    disabled: false
+  };
+  #target = null;
+  #media;
+  onSetup() {
+    this.#media = useMediaContext();
+    provideContext(menuPortalContext, {
+      attach: this.#attachElement.bind(this)
+    });
+  }
+  onAttach(el) {
+    el.style.setProperty("display", "contents");
+  }
+  // Need this so connect scope is defined.
+  onConnect(el) {
+  }
+  onDestroy() {
+    this.#target?.remove();
+    this.#target = null;
+  }
+  #attachElement(el) {
+    this.#portal(false);
+    this.#target = el;
+    requestScopedAnimationFrame(() => {
+      requestScopedAnimationFrame(() => {
+        if (!this.connectScope) return;
+        effect(this.#watchDisabled.bind(this));
+      });
+    });
+  }
+  #watchDisabled() {
+    const { fullscreen } = this.#media.$state, { disabled } = this.$props;
+    this.#portal(disabled() === "fullscreen" ? !fullscreen() : !disabled());
+  }
+  #portal(shouldPortal) {
+    if (!this.#target) return;
+    let container = this.#getContainer(this.$props.container());
+    if (!container) return;
+    const isPortalled = this.#target.parentElement === container;
+    setAttribute(this.#target, "data-portal", shouldPortal);
+    if (shouldPortal) {
+      if (!isPortalled) {
+        this.#target.remove();
+        container.append(this.#target);
+      }
+    } else if (isPortalled && this.#target.parentElement === container) {
+      this.#target.remove();
+      this.el?.append(this.#target);
+    }
+  }
+  #getContainer(selector) {
+    if (isHTMLElement(selector)) return selector;
+    return selector ? document.querySelector(selector) : document.body;
+  }
+}
+const menuPortalContext = createContext();
+
+class MenuItems extends Component {
+  static props = {
+    placement: null,
+    offset: 0,
+    alignOffset: 0
+  };
+  #menu;
+  constructor() {
+    super();
+    new FocusVisibleController();
+    const { placement } = this.$props;
+    this.setAttributes({
+      "data-placement": placement
+    });
+  }
+  onAttach(el) {
+    this.#menu = useContext(menuContext);
+    this.#menu.attachMenuItems(this);
+    if (hasProvidedContext(menuPortalContext)) {
+      const portal = useContext(menuPortalContext);
+      if (portal) {
+        provideContext(menuPortalContext, null);
+        portal.attach(el);
+        onDispose(() => portal.attach(null));
+      }
+    }
+  }
+  onConnect(el) {
+    effect(this.#watchPlacement.bind(this));
+  }
+  #watchPlacement() {
+    const { expanded } = this.#menu;
+    if (!this.el || !expanded()) return;
+    const placement = this.$props.placement();
+    if (!placement) return;
+    Object.assign(this.el.style, {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "max-content"
+    });
+    const { offset: mainOffset, alignOffset } = this.$props;
+    onDispose(
+      autoPlacement(this.el, this.#getButton(), placement, {
+        offsetVarName: "media-menu",
+        xOffset: alignOffset(),
+        yOffset: mainOffset()
+      })
+    );
+    onDispose(this.#hide.bind(this));
+  }
+  #hide() {
+    if (!this.el) return;
+    this.el.removeAttribute("style");
+    this.el.style.display = "none";
+  }
+  #getButton() {
+    return this.#menu.button();
+  }
+}
+
+const radioControllerContext = createContext();
+
+class RadioGroupController extends ViewController {
+  #group = /* @__PURE__ */ new Set();
+  #value = signal("");
+  #controller = null;
+  onValueChange;
+  get values() {
+    return Array.from(this.#group).map((radio) => radio.value());
+  }
+  get value() {
+    return this.#value();
+  }
+  set value(value) {
+    this.#onChange(value);
+  }
+  onSetup() {
+    provideContext(radioControllerContext, {
+      add: this.#addRadio.bind(this),
+      remove: this.#removeRadio.bind(this)
+    });
+  }
+  onAttach(el) {
+    const isMenuItem = hasProvidedContext(menuContext);
+    if (!isMenuItem) setAttributeIfEmpty(el, "role", "radiogroup");
+    this.setAttributes({ value: this.#value });
+  }
+  onDestroy() {
+    this.#group.clear();
+  }
+  #addRadio(radio) {
+    if (this.#group.has(radio)) return;
+    this.#group.add(radio);
+    radio.onCheck = this.#onChangeBind;
+    radio.check(radio.value() === this.#value());
+  }
+  #removeRadio(radio) {
+    radio.onCheck = null;
+    this.#group.delete(radio);
+  }
+  #onChangeBind = this.#onChange.bind(this);
+  #onChange(newValue, trigger) {
+    const currentValue = peek(this.#value);
+    if (!newValue || newValue === currentValue) return;
+    const currentRadio = this.#findRadio(currentValue), newRadio = this.#findRadio(newValue);
+    currentRadio?.check(false, trigger);
+    newRadio?.check(true, trigger);
+    this.#value.set(newValue);
+    this.onValueChange?.(newValue, trigger);
+  }
+  #findRadio(newValue) {
+    for (const radio of this.#group) {
+      if (newValue === peek(radio.value)) return radio;
+    }
+    return null;
+  }
+}
+
+class Radio extends Component {
+  static props = {
+    value: ""
+  };
+  #checked = signal(false);
+  #controller = {
+    value: this.$props.value,
+    check: this.#check.bind(this),
+    onCheck: null
+  };
+  /**
+   * Whether this radio is currently checked.
+   */
+  get checked() {
+    return this.#checked();
+  }
+  constructor() {
+    super();
+    new FocusVisibleController();
+  }
+  onSetup() {
+    this.setAttributes({
+      value: this.$props.value,
+      "data-checked": this.#checked,
+      "aria-checked": $ariaBool(this.#checked)
+    });
+  }
+  onAttach(el) {
+    const isMenuItem = hasProvidedContext(menuContext);
+    setAttributeIfEmpty(el, "tabindex", isMenuItem ? "-1" : "0");
+    setAttributeIfEmpty(el, "role", isMenuItem ? "menuitemradio" : "radio");
+    effect(this.#watchValue.bind(this));
+  }
+  onConnect(el) {
+    this.#addToGroup();
+    onPress(el, this.#onPress.bind(this));
+    onDispose(this.#onDisconnect.bind(this));
+  }
+  #onDisconnect() {
+    scoped(() => {
+      const group = useContext(radioControllerContext);
+      group.remove(this.#controller);
+    }, this.connectScope);
+  }
+  #addToGroup() {
+    const group = useContext(radioControllerContext);
+    group.add(this.#controller);
+  }
+  #watchValue() {
+    const { value } = this.$props, newValue = value();
+    if (peek(this.#checked)) {
+      this.#controller.onCheck?.(newValue);
+    }
+  }
+  #onPress(event) {
+    if (peek(this.#checked)) return;
+    this.#onChange(true, event);
+    this.#onSelect(event);
+    this.#controller.onCheck?.(peek(this.$props.value), event);
+  }
+  #check(value, trigger) {
+    if (peek(this.#checked) === value) return;
+    this.#onChange(value, trigger);
+  }
+  #onChange(value, trigger) {
+    this.#checked.set(value);
+    this.dispatch("change", { detail: value, trigger });
+  }
+  #onSelect(trigger) {
+    this.dispatch("select", { trigger });
+  }
+}
+const radio__proto = Radio.prototype;
+prop(radio__proto, "checked");
+
+class AudioRadioGroup extends Component {
+  static props = {
+    emptyLabel: "Default"
+  };
+  #menu;
+  #media;
+  #controller;
+  get value() {
+    return this.#controller.value;
+  }
+  get disabled() {
+    const { audioTracks } = this.#media.$state;
+    return audioTracks().length <= 1;
+  }
+  constructor() {
+    super();
+    this.#controller = new RadioGroupController();
+    this.#controller.onValueChange = this.#onValueChange.bind(this);
+  }
+  onSetup() {
+    this.#media = useMediaContext();
+    if (hasProvidedContext(menuContext)) {
+      this.#menu = useContext(menuContext);
+    }
+  }
+  onConnect(el) {
+    effect(this.#watchValue.bind(this));
+    effect(this.#watchControllerDisabled.bind(this));
+    effect(this.#watchHintText.bind(this));
+  }
+  getOptions() {
+    const { audioTracks } = this.#media.$state;
+    return audioTracks().map((track) => ({
+      track,
+      label: track.label,
+      value: track.label.toLowerCase()
+    }));
+  }
+  #watchValue() {
+    this.#controller.value = this.#getValue();
+  }
+  #watchHintText() {
+    const { emptyLabel } = this.$props, { audioTrack } = this.#media.$state, track = audioTrack();
+    this.#menu?.hint.set(track?.label ?? emptyLabel());
+  }
+  #watchControllerDisabled() {
+    this.#menu?.disable(this.disabled);
+  }
+  #getValue() {
+    const { audioTrack } = this.#media.$state;
+    const track = audioTrack();
+    return track ? track.label.toLowerCase() : "";
+  }
+  #onValueChange(value, trigger) {
+    if (this.disabled) return;
+    const index = this.#media.audioTracks.toArray().findIndex((track) => track.label.toLowerCase() === value);
+    if (index >= 0) {
+      const track = this.#media.audioTracks[index];
+      this.#media.remote.changeAudioTrack(index, trigger);
+      this.dispatch("change", { detail: track, trigger });
+    }
+  }
+}
+const audioradiogroup__proto = AudioRadioGroup.prototype;
+prop(audioradiogroup__proto, "value");
+prop(audioradiogroup__proto, "disabled");
+method(audioradiogroup__proto, "getOptions");
+
+class CaptionsRadioGroup extends Component {
+  static props = {
+    offLabel: "Off"
+  };
+  #media;
+  #menu;
+  #controller;
+  get value() {
+    return this.#controller.value;
+  }
+  get disabled() {
+    const { hasCaptions } = this.#media.$state;
+    return !hasCaptions();
+  }
+  constructor() {
+    super();
+    this.#controller = new RadioGroupController();
+    this.#controller.onValueChange = this.#onValueChange.bind(this);
+  }
+  onSetup() {
+    this.#media = useMediaContext();
+    if (hasProvidedContext(menuContext)) {
+      this.#menu = useContext(menuContext);
+    }
+  }
+  onConnect(el) {
+    super.onConnect?.(el);
+    effect(this.#watchValue.bind(this));
+    effect(this.#watchControllerDisabled.bind(this));
+    effect(this.#watchHintText.bind(this));
+  }
+  getOptions() {
+    const { offLabel } = this.$props, { textTracks } = this.#media.$state;
+    const tracks = textTracks().filter(isTrackCaptionKind);
+    const priorities = ["indonesian", "english", "japanese", "korean", "chinese"];
+    const getPriority = (label) => {
+      const lower = label.toLowerCase();
+      const pIndex = priorities.findIndex((p) => lower.includes(p));
+      return pIndex !== -1 ? pIndex : 999;
+    };
+    const sortedTracks = [...tracks].sort((a, b) => {
+      const pa = getPriority(a.label);
+      const pb = getPriority(b.label);
+      if (pa !== pb) return pa - pb;
+      return a.label.localeCompare(b.label);
+    });
+    const labelCounts = /* @__PURE__ */ new Map();
+    const trackOptions = sortedTracks.map((track) => {
+      const count = (labelCounts.get(track.label) || 0) + 1;
+      labelCounts.set(track.label, count);
+      const total = sortedTracks.filter((t) => t.label === track.label).length;
+      let displayLabel = track.label;
+      if (total > 1) {
+        displayLabel = `${track.label} ${count}`;
+      }
+      return {
+        track,
+        label: displayLabel,
+        value: this.#getTrackValue(track)
+      };
+    });
+    return [
+      { value: "off", label: offLabel },
+      ...trackOptions
+    ];
+  }
+  #watchValue() {
+    this.#controller.value = this.#getValue();
+  }
+  #watchHintText() {
+    const { offLabel } = this.$props, { textTrack } = this.#media.$state, track = textTrack();
+    this.#menu?.hint.set(
+      track && isTrackCaptionKind(track) && track.mode === "showing" ? track.label : offLabel()
+    );
+  }
+  #watchControllerDisabled() {
+    this.#menu?.disable(this.disabled);
+  }
+  #getValue() {
+    const { textTrack } = this.#media.$state, track = textTrack();
+    return track && isTrackCaptionKind(track) && track.mode === "showing" ? this.#getTrackValue(track) : "off";
+  }
+  #onValueChange(value, trigger) {
+    if (this.disabled) return;
+    if (value === "off") {
+      const track = this.#media.textTracks.selected;
+      if (track) {
+        const index2 = this.#media.textTracks.indexOf(track);
+        this.#media.remote.changeTextTrackMode(index2, "disabled", trigger);
+        this.dispatch("change", { detail: null, trigger });
+      }
+      return;
+    }
+    const index = this.#media.textTracks.toArray().findIndex((track) => this.#getTrackValue(track) === value);
+    if (index >= 0) {
+      const track = this.#media.textTracks[index];
+      this.#media.remote.changeTextTrackMode(index, "showing", trigger);
+      this.dispatch("change", { detail: track, trigger });
+    }
+  }
+  #getTrackValue(track) {
+    return track.id + ":" + track.kind + "-" + track.label.toLowerCase();
+  }
+}
+const captionsradiogroup__proto = CaptionsRadioGroup.prototype;
+prop(captionsradiogroup__proto, "value");
+prop(captionsradiogroup__proto, "disabled");
+method(captionsradiogroup__proto, "getOptions");
+
+const DEFAULT_PLAYBACK_RATES = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+class SpeedRadioGroup extends Component {
+  static props = {
+    normalLabel: "Normal",
+    rates: DEFAULT_PLAYBACK_RATES
+  };
+  #media;
+  #menu;
+  #controller;
+  get value() {
+    return this.#controller.value;
+  }
+  get disabled() {
+    const { rates } = this.$props, { canSetPlaybackRate } = this.#media.$state;
+    return !canSetPlaybackRate() || rates().length === 0;
+  }
+  constructor() {
+    super();
+    this.#controller = new RadioGroupController();
+    this.#controller.onValueChange = this.#onValueChange.bind(this);
+  }
+  onSetup() {
+    this.#media = useMediaContext();
+    if (hasProvidedContext(menuContext)) {
+      this.#menu = useContext(menuContext);
+    }
+  }
+  onConnect(el) {
+    effect(this.#watchValue.bind(this));
+    effect(this.#watchHintText.bind(this));
+    effect(this.#watchControllerDisabled.bind(this));
+  }
+  getOptions() {
+    const { rates, normalLabel } = this.$props;
+    return rates().map((rate) => ({
+      label: rate === 1 ? normalLabel : rate + "\xD7",
+      value: rate.toString()
+    }));
+  }
+  #watchValue() {
+    this.#controller.value = this.#getValue();
+  }
+  #watchHintText() {
+    const { normalLabel } = this.$props, { playbackRate } = this.#media.$state, rate = playbackRate();
+    this.#menu?.hint.set(rate === 1 ? normalLabel() : rate + "\xD7");
+  }
+  #watchControllerDisabled() {
+    this.#menu?.disable(this.disabled);
+  }
+  #getValue() {
+    const { playbackRate } = this.#media.$state;
+    return playbackRate().toString();
+  }
+  #onValueChange(value, trigger) {
+    if (this.disabled) return;
+    const rate = +value;
+    this.#media.remote.changePlaybackRate(rate, trigger);
+    this.dispatch("change", { detail: rate, trigger });
+  }
+}
+const speedradiogroup__proto = SpeedRadioGroup.prototype;
+prop(speedradiogroup__proto, "value");
+prop(speedradiogroup__proto, "disabled");
+method(speedradiogroup__proto, "getOptions");
+
+class QualityRadioGroup extends Component {
+  static props = {
+    autoLabel: "Auto",
+    hideBitrate: false,
+    sort: "descending"
+  };
+  #media;
+  #menu;
+  #controller;
+  get value() {
+    return this.#controller.value;
+  }
+  get disabled() {
+    const { canSetQuality, qualities } = this.#media.$state;
+    return !canSetQuality() || qualities().length <= 1;
+  }
+  #sortedQualities = computed(() => {
+    const { sort } = this.$props, { qualities } = this.#media.$state;
+    return sortVideoQualities(qualities(), sort() === "descending");
+  });
+  constructor() {
+    super();
+    this.#controller = new RadioGroupController();
+    this.#controller.onValueChange = this.#onValueChange.bind(this);
+  }
+  onSetup() {
+    this.#media = useMediaContext();
+    if (hasProvidedContext(menuContext)) {
+      this.#menu = useContext(menuContext);
+    }
+  }
+  onConnect(el) {
+    effect(this.#watchValue.bind(this));
+    effect(this.#watchControllerDisabled.bind(this));
+    effect(this.#watchHintText.bind(this));
+  }
+  getOptions() {
+    const { autoLabel, hideBitrate } = this.$props;
+    return [
+      { value: "auto", label: autoLabel },
+      ...this.#sortedQualities().map((quality) => {
+        const bitrate = quality.bitrate && quality.bitrate >= 0 ? `${round(quality.bitrate / 1e6, 2)} Mbps` : null;
+        return {
+          quality,
+          label: quality.label ?? (quality.height ? quality.height + "p" : "Unknown"),
+          value: this.#getQualityId(quality),
+          bitrate: () => !hideBitrate() ? bitrate : null
+        };
+      })
+    ];
+  }
+  #watchValue() {
+    this.#controller.value = this.#getValue();
+  }
+  #watchHintText() {
+    const { autoLabel } = this.$props, { autoQuality, quality } = this.#media.$state, q = quality(), qualityText = q ? q.label ?? (q.height ? q.height + "p" : "") : "";
+    this.#menu?.hint.set(
+      !autoQuality() ? qualityText : autoLabel() + (qualityText ? ` (${qualityText})` : "")
+    );
+  }
+  #watchControllerDisabled() {
+    this.#menu?.disable(this.disabled);
+  }
+  #onValueChange(value, trigger) {
+    if (this.disabled) return;
+    if (value === "auto") {
+      this.#media.remote.changeQuality(-1, trigger);
+      this.dispatch("change", { detail: "auto", trigger });
+      return;
+    }
+    const { qualities } = this.#media.$state, index = peek(qualities).findIndex((quality) => this.#getQualityId(quality) === value);
+    if (index >= 0) {
+      const quality = peek(qualities)[index];
+      this.#media.remote.changeQuality(index, trigger);
+      this.dispatch("change", { detail: quality, trigger });
+    }
+  }
+  #getValue() {
+    const { quality, autoQuality } = this.#media.$state;
+    if (autoQuality()) return "auto";
+    const currentQuality = quality();
+    return currentQuality ? this.#getQualityId(currentQuality) : "auto";
+  }
+  #getQualityId(quality) {
+    return quality.id;
+  }
+}
+const qualityradiogroup__proto = QualityRadioGroup.prototype;
+prop(qualityradiogroup__proto, "value");
+prop(qualityradiogroup__proto, "disabled");
+method(qualityradiogroup__proto, "getOptions");
+
+class Time extends Component {
+  static props = {
+    type: "current",
+    showHours: false,
+    padHours: null,
+    padMinutes: null,
+    remainder: false,
+    toggle: false,
+    hidden: false
+  };
+  static state = new State({
+    timeText: "",
+    hidden: false
+  });
+  #media;
+  #invert = signal(null);
+  #isVisible = signal(true);
+  #isIntersecting = signal(true);
+  onSetup() {
+    this.#media = useMediaContext();
+    this.#watchTime();
+    const { type } = this.$props;
+    this.setAttributes({
+      "data-type": type,
+      "data-remainder": this.#shouldInvert.bind(this)
+    });
+    new IntersectionObserverController({
+      callback: this.#onIntersectionChange.bind(this)
+    }).attach(this);
+  }
+  onAttach(el) {
+    if (!el.hasAttribute("role")) effect(this.#watchRole.bind(this));
+    effect(this.#watchTime.bind(this));
+  }
+  onConnect(el) {
+    onDispose(observeVisibility(el, this.#isVisible.set));
+    effect(this.#watchHidden.bind(this));
+    effect(this.#watchToggle.bind(this));
+  }
+  #onIntersectionChange(entries) {
+    this.#isIntersecting.set(entries[0].isIntersecting);
+  }
+  #watchHidden() {
+    const { hidden } = this.$props;
+    this.$state.hidden.set(hidden() || !this.#isVisible() || !this.#isIntersecting());
+  }
+  #watchToggle() {
+    if (!this.$props.toggle()) {
+      this.#invert.set(null);
+      return;
+    }
+    if (this.el) {
+      onPress(this.el, this.#onToggle.bind(this));
+    }
+  }
+  #watchTime() {
+    const { hidden, timeText } = this.$state, { duration } = this.#media.$state;
+    if (hidden()) return;
+    const { type, padHours, padMinutes, showHours } = this.$props, seconds = this.#getSeconds(type()), $duration = duration(), shouldInvert = this.#shouldInvert();
+    if (!Number.isFinite(seconds + $duration)) {
+      timeText.set("LIVE");
+      return;
+    }
+    const time = shouldInvert ? Math.max(0, $duration - seconds) : seconds, formattedTime = formatTime(time, {
+      padHrs: padHours(),
+      padMins: padMinutes(),
+      showHrs: showHours()
+    });
+    timeText.set((shouldInvert ? "-" : "") + formattedTime);
+  }
+  #watchRole() {
+    if (!this.el) return;
+    const { toggle } = this.$props;
+    setAttribute(this.el, "role", toggle() ? "timer" : null);
+    setAttribute(this.el, "tabindex", toggle() ? 0 : null);
+  }
+  #getSeconds(type) {
+    const { bufferedEnd, duration, currentTime } = this.#media.$state;
+    switch (type) {
+      case "buffered":
+        return bufferedEnd();
+      case "duration":
+        return duration();
+      default:
+        return currentTime();
+    }
+  }
+  #shouldInvert() {
+    return this.$props.remainder() && this.#invert() !== false;
+  }
+  #onToggle(event) {
+    event.preventDefault();
+    if (this.#invert() === null) {
+      this.#invert.set(!this.$props.remainder());
+      return;
+    }
+    this.#invert.set((v) => !v);
+  }
+}
+
+export { ARIAKeyShortcuts, AirPlayButton, AudioRadioGroup, CaptionButton, CaptionsRadioGroup, DEFAULT_PLAYBACK_RATES, FullscreenButton, LiveButton, Menu, MenuButton, MenuItem, MenuItems, MenuPortal, MuteButton, PIPButton, PlayButton, Popper, QualityRadioGroup, Radio, RadioGroupController, SeekButton, Slider, SliderController, SliderPreview, SliderValue, SpeedRadioGroup, Thumbnail, ThumbnailsLoader, Time, TimeSlider, ToggleButtonController, VolumeSlider, formatSpokenTime, formatTime, menuContext, menuPortalContext, sliderContext, sliderState, sliderValueFormatContext, updateSliderPreviewPlacement };