@hanifhan1f/vidstack 1.12.26 → 1.12.27

package/dev/chunks/vidstack-D-sqb6YI.js

@@ -0,0 +1,308 @@
+import { listenEvent, scoped, isString, getScope, EventsTarget, DOMEvent, isArray, isNumber } from './vidstack-C1PwJD_4.js';
+import { getRequestCredentials } from './vidstack-DdTXMZro.js';
+
+const CROSS_ORIGIN = Symbol("TEXT_TRACK_CROSS_ORIGIN" ), READY_STATE = Symbol("TEXT_TRACK_READY_STATE" ), UPDATE_ACTIVE_CUES = Symbol("TEXT_TRACK_UPDATE_ACTIVE_CUES" ), CAN_LOAD = Symbol("TEXT_TRACK_CAN_LOAD" ), ON_MODE_CHANGE = Symbol("TEXT_TRACK_ON_MODE_CHANGE" ), NATIVE = Symbol("TEXT_TRACK_NATIVE" ), NATIVE_HLS = Symbol("TEXT_TRACK_NATIVE_HLS" );
+const TextTrackSymbol = {
+  crossOrigin: CROSS_ORIGIN,
+  readyState: READY_STATE,
+  updateActiveCues: UPDATE_ACTIVE_CUES,
+  canLoad: CAN_LOAD,
+  onModeChange: ON_MODE_CHANGE,
+  native: NATIVE,
+  nativeHLS: NATIVE_HLS
+};
+
+function findActiveCue(cues, time) {
+  for (let i = 0, len = cues.length; i < len; i++) {
+    if (isCueActive(cues[i], time)) return cues[i];
+  }
+  return null;
+}
+function isCueActive(cue, time) {
+  return time >= cue.startTime && time < cue.endTime;
+}
+function watchActiveTextTrack(tracks, kind, onChange) {
+  let currentTrack = null, scope = getScope();
+  function onModeChange() {
+    const kinds = isString(kind) ? [kind] : kind, track = tracks.toArray().find((track2) => kinds.includes(track2.kind) && track2.mode === "showing");
+    if (track === currentTrack) return;
+    if (!track) {
+      onChange(null);
+      currentTrack = null;
+      return;
+    }
+    if (track.readyState == 2) {
+      onChange(track);
+    } else {
+      onChange(null);
+      scoped(() => {
+        const off = listenEvent(
+          track,
+          "load",
+          () => {
+            onChange(track);
+            off();
+          },
+          { once: true }
+        );
+      }, scope);
+    }
+    currentTrack = track;
+  }
+  onModeChange();
+  return listenEvent(tracks, "mode-change", onModeChange);
+}
+function watchCueTextChange(tracks, kind, callback) {
+  watchActiveTextTrack(tracks, kind, (track) => {
+    if (!track) {
+      callback("");
+      return;
+    }
+    const onCueChange = () => {
+      const activeCue = track?.activeCues[0];
+      callback(activeCue?.text || "");
+    };
+    onCueChange();
+    listenEvent(track, "cue-change", onCueChange);
+  });
+}
+
+class TextTrack extends EventsTarget {
+  static createId(track) {
+    return `vds-${track.type}-${track.kind}-${track.src ?? track.label ?? "?"}`;
+  }
+  src;
+  content;
+  type;
+  encoding;
+  id = "";
+  label = "";
+  language = "";
+  kind;
+  default = false;
+  #canLoad = false;
+  #currentTime = 0;
+  #mode = "disabled";
+  #metadata = {};
+  #regions = [];
+  #cues = [];
+  #activeCues = [];
+  #cueIds = /* @__PURE__ */ new Set();
+  /** @internal */
+  [TextTrackSymbol.readyState] = 0;
+  /** @internal */
+  [TextTrackSymbol.crossOrigin];
+  /** @internal */
+  [TextTrackSymbol.onModeChange] = null;
+  /** @internal */
+  [TextTrackSymbol.native] = null;
+  get metadata() {
+    return this.#metadata;
+  }
+  get regions() {
+    return this.#regions;
+  }
+  get cues() {
+    return this.#cues;
+  }
+  get activeCues() {
+    return this.#activeCues;
+  }
+  /**
+   * - 0: Not Loading
+   * - 1: Loading
+   * - 2: Ready
+   * - 3: Error
+   */
+  get readyState() {
+    return this[TextTrackSymbol.readyState];
+  }
+  get mode() {
+    return this.#mode;
+  }
+  set mode(mode) {
+    this.setMode(mode);
+  }
+  constructor(init) {
+    super();
+    for (const prop of Object.keys(init)) this[prop] = init[prop];
+    if (!this.type) this.type = "vtt";
+    if (init.content) {
+      this.#parseContent(init);
+    } else if (!init.src) {
+      this[TextTrackSymbol.readyState] = 2;
+    }
+    if (isTrackCaptionKind(this) && !this.label) {
+      console.warn(`[vidstack] captions text track created without label: \`${this.src}\``);
+    }
+  }
+  addCue(cue, trigger) {
+    if (cue.id) {
+      if (this.#cueIds.has(cue.id)) return;
+      this.#cueIds.add(cue.id);
+    }
+    let i = 0, length = this.#cues.length;
+    for (i = 0; i < length; i++) if (cue.endTime <= this.#cues[i].startTime) break;
+    if (i === length) this.#cues.push(cue);
+    else this.#cues.splice(i, 0, cue);
+    if (!(cue instanceof TextTrackCue)) {
+      this[TextTrackSymbol.native]?.track.addCue(cue);
+    }
+    this.dispatchEvent(new DOMEvent("add-cue", { detail: cue, trigger }));
+    if (isCueActive(cue, this.#currentTime)) {
+      this[TextTrackSymbol.updateActiveCues](this.#currentTime, trigger);
+    }
+  }
+  removeCue(cue, trigger) {
+    const index = this.#cues.indexOf(cue);
+    if (index >= 0) {
+      const isActive = this.#activeCues.includes(cue);
+      if (cue.id) this.#cueIds.delete(cue.id);
+      this.#cues.splice(index, 1);
+      this[TextTrackSymbol.native]?.track.removeCue(cue);
+      this.dispatchEvent(new DOMEvent("remove-cue", { detail: cue, trigger }));
+      if (isActive) {
+        this[TextTrackSymbol.updateActiveCues](this.#currentTime, trigger);
+      }
+    }
+  }
+  setMode(mode, trigger) {
+    if (this.#mode === mode) return;
+    this.#mode = mode;
+    if (mode === "disabled") {
+      this.#activeCues = [];
+      this.#activeCuesChanged();
+    } else if (this.readyState === 2) {
+      this[TextTrackSymbol.updateActiveCues](this.#currentTime, trigger);
+    } else {
+      this.#load();
+    }
+    this.dispatchEvent(new DOMEvent("mode-change", { detail: this, trigger }));
+    this[TextTrackSymbol.onModeChange]?.();
+  }
+  /** @internal */
+  [TextTrackSymbol.updateActiveCues](currentTime, trigger) {
+    this.#currentTime = currentTime;
+    if (this.mode === "disabled" || !this.#cues.length) return;
+    const activeCues = [];
+    for (let i = 0, length = this.#cues.length; i < length; i++) {
+      const cue = this.#cues[i];
+      if (isCueActive(cue, currentTime)) activeCues.push(cue);
+    }
+    let changed = activeCues.length !== this.#activeCues.length;
+    if (!changed) {
+      for (let i = 0; i < activeCues.length; i++) {
+        if (!this.#activeCues.includes(activeCues[i])) {
+          changed = true;
+          break;
+        }
+      }
+    }
+    this.#activeCues = activeCues;
+    if (changed) this.#activeCuesChanged(trigger);
+  }
+  /** @internal */
+  [TextTrackSymbol.canLoad]() {
+    this.#canLoad = true;
+    if (this.#mode !== "disabled") this.#load();
+  }
+  #parseContent(init) {
+    import('media-captions').then(({ parseText, VTTCue, VTTRegion }) => {
+      if (!isString(init.content) || init.type === "json") {
+        this.#parseJSON(init.content, VTTCue, VTTRegion);
+        if (this.readyState !== 3) this.#ready();
+      } else {
+        const content = init.content.split("\n").map((line) => line.trim()).join("\n").trim();
+        parseText(content, { type: init.type }).then(({ cues, regions }) => {
+          this.#cues = cues;
+          this.#regions = regions;
+          this.#ready();
+        });
+      }
+    });
+  }
+  async #load() {
+    if (!this.#canLoad || this[TextTrackSymbol.readyState] > 0) return;
+    this[TextTrackSymbol.readyState] = 1;
+    this.dispatchEvent(new DOMEvent("load-start"));
+    if (!this.src) {
+      this.#ready();
+      return;
+    }
+    try {
+      const { parseResponse, VTTCue, VTTRegion } = await import('media-captions'), crossOrigin = this[TextTrackSymbol.crossOrigin]?.();
+      const response = fetch(this.src, {
+        headers: this.type === "json" ? { "Content-Type": "application/json" } : void 0,
+        credentials: getRequestCredentials(crossOrigin)
+      });
+      if (this.type === "json") {
+        this.#parseJSON(await (await response).text(), VTTCue, VTTRegion);
+      } else {
+        const { errors, metadata, regions, cues } = await parseResponse(response, {
+          type: this.type,
+          encoding: this.encoding
+        });
+        if (errors[0]?.code === 0) {
+          throw errors[0];
+        } else {
+          this.#metadata = metadata;
+          this.#regions = regions;
+          this.#cues = cues;
+        }
+      }
+      this.#ready();
+    } catch (error) {
+      this.#error(error);
+    }
+  }
+  #ready() {
+    this[TextTrackSymbol.readyState] = 2;
+    if (!this.src || this.type !== "vtt") {
+      const native = this[TextTrackSymbol.native];
+      if (native && !native.managed) {
+        for (const cue of this.#cues) native.track.addCue(cue);
+      }
+    }
+    const loadEvent = new DOMEvent("load");
+    this[TextTrackSymbol.updateActiveCues](this.#currentTime, loadEvent);
+    this.dispatchEvent(loadEvent);
+  }
+  #error(error) {
+    this[TextTrackSymbol.readyState] = 3;
+    this.dispatchEvent(new DOMEvent("error", { detail: error }));
+  }
+  #parseJSON(json, VTTCue, VTTRegion) {
+    try {
+      const { regions, cues } = parseJSONCaptionsFile(json, VTTCue, VTTRegion);
+      this.#regions = regions;
+      this.#cues = cues;
+    } catch (error) {
+      {
+        console.error(`[vidstack] failed to parse JSON captions at: \`${this.src}\`
+
+`, error);
+      }
+      this.#error(error);
+    }
+  }
+  #activeCuesChanged(trigger) {
+    this.dispatchEvent(new DOMEvent("cue-change", { trigger }));
+  }
+}
+const captionRE = /captions|subtitles/;
+function isTrackCaptionKind(track) {
+  return captionRE.test(track.kind);
+}
+function parseJSONCaptionsFile(json, Cue, Region) {
+  const content = isString(json) ? JSON.parse(json) : json;
+  let regions = [], cues = [];
+  if (content.regions && Region) {
+    regions = content.regions.map((region) => Object.assign(new Region(), region));
+  }
+  if (content.cues || isArray(content)) {
+    cues = (isArray(content) ? content : content.cues).filter((content2) => isNumber(content2.startTime) && isNumber(content2.endTime)).map((cue) => Object.assign(new Cue(0, 0, ""), cue));
+  }
+  return { regions, cues };
+}
+
+export { TextTrack, TextTrackSymbol, findActiveCue, isCueActive, isTrackCaptionKind, parseJSONCaptionsFile, watchActiveTextTrack, watchCueTextChange };

package/dev/chunks/vidstack-Dco6kA4h.js

@@ -0,0 +1,104 @@
+import { Host, effect, setAttribute, computed } from './vidstack-C1PwJD_4.js';
+import { MediaProvider, MediaPlayer } from './vidstack-zJT-7ncH.js';
+import { useMediaContext } from './vidstack-BjxlZzGu.js';
+
+class MediaProviderElement extends Host(HTMLElement, MediaProvider) {
+  static tagName = "media-provider";
+  #media;
+  #target = null;
+  #blocker = null;
+  onSetup() {
+    this.#media = useMediaContext();
+    this.setAttribute("keep-alive", "");
+  }
+  onDestroy() {
+    this.#blocker?.remove();
+    this.#blocker = null;
+    this.#target?.remove();
+    this.#target = null;
+  }
+  onConnect() {
+    effect(() => {
+      const loader = this.$state.loader(), isYouTubeEmbed = loader?.name === "youtube", isVimeoEmbed = loader?.name === "vimeo", isEmbed = isYouTubeEmbed || isVimeoEmbed, isGoogleCast = loader?.name === "google-cast";
+      const target = loader ? isGoogleCast ? this.#createGoogleCastContainer() : isEmbed ? this.#createIFrame() : loader.mediaType() === "audio" ? this.#createAudio() : this.#createVideo() : null;
+      if (this.#target !== target) {
+        const parent = this.#target?.parentElement ?? this;
+        this.#target?.remove();
+        this.#target = target;
+        if (target) parent.prepend(target);
+        if (isEmbed && target) {
+          effect(() => {
+            const { nativeControls, viewType } = this.#media.$state, showNativeControls = nativeControls(), isAudioView = viewType() === "audio", showBlocker = !showNativeControls && !isAudioView;
+            if (showBlocker) {
+              this.#blocker = this.querySelector(".vds-blocker");
+              if (!this.#blocker) {
+                this.#blocker = document.createElement("div");
+                this.#blocker.classList.add("vds-blocker");
+                target.after(this.#blocker);
+              }
+            } else {
+              this.#blocker?.remove();
+              this.#blocker = null;
+            }
+            setAttribute(target, "data-no-controls", !showNativeControls);
+          });
+        }
+      }
+      if (isYouTubeEmbed) target?.classList.add("vds-youtube");
+      else if (isVimeoEmbed) target?.classList.add("vds-vimeo");
+      if (!isEmbed) {
+        this.#blocker?.remove();
+        this.#blocker = null;
+      }
+      this.load(target);
+    });
+  }
+  #createAudio() {
+    const audio = this.#target instanceof HTMLAudioElement ? this.#target : document.createElement("audio");
+    const { controls, crossOrigin } = this.#media.$state;
+    effect(() => {
+      setAttribute(audio, "controls", controls());
+      setAttribute(audio, "crossorigin", crossOrigin());
+    });
+    return audio;
+  }
+  #createVideo() {
+    const video = this.#target instanceof HTMLVideoElement ? this.#target : document.createElement("video");
+    const { crossOrigin, poster, nativeControls } = this.#media.$state, $controls = computed(() => nativeControls() ? "true" : null), $poster = computed(() => poster() && nativeControls() ? poster() : null);
+    effect(() => {
+      setAttribute(video, "controls", $controls());
+      setAttribute(video, "crossorigin", crossOrigin());
+      setAttribute(video, "poster", $poster());
+    });
+    return video;
+  }
+  #createIFrame() {
+    const iframe = this.#target instanceof HTMLIFrameElement ? this.#target : document.createElement("iframe"), { nativeControls } = this.#media.$state;
+    effect(() => setAttribute(iframe, "tabindex", !nativeControls() ? -1 : null));
+    return iframe;
+  }
+  #createGoogleCastContainer() {
+    if (this.#target?.classList.contains("vds-google-cast")) {
+      return this.#target;
+    }
+    const container = document.createElement("div");
+    container.classList.add("vds-google-cast");
+    import('./vidstack-Bf6x4gWe.js').then(({ insertContent }) => {
+      insertContent(container, this.#media.$state);
+    });
+    return container;
+  }
+}
+
+class MediaPlayerElement extends Host(HTMLElement, MediaPlayer) {
+  static tagName = "media-player";
+  static attrs = {
+    autoPlay: "autoplay",
+    crossOrigin: "crossorigin",
+    playsInline: "playsinline",
+    preferNativeHLS: "prefer-native-hls",
+    minLiveDVRWindow: "min-live-dvr-window"
+  };
+}
+
+export { MediaPlayerElement, MediaProviderElement };

package/dev/chunks/vidstack-DpS0Kt4b.js

@@ -0,0 +1,297 @@
+import { Host, effect, Component, signal, setAttribute, isBoolean, computed, isString, useState } from './vidstack-C1PwJD_4.js';
+import { Captions, Gesture, MediaAnnouncer, Controls, ControlsGroup, GoogleCastButton, ToggleButton, Tooltip, TooltipTrigger, TooltipContent, ChaptersRadioGroup, AudioGainRadioGroup, RadioGroup, SliderVideo, AudioGainSlider, SpeedSlider, QualitySlider, SliderChapters } from './vidstack--aukHYxl.js';
+import { useMediaContext } from './vidstack-BjxlZzGu.js';
+import { watchCueTextChange } from './vidstack-D-sqb6YI.js';
+import { html } from 'lit-html';
+import { requestScopedAnimationFrame, isHTMLElement, cloneTemplateContent, createTemplate, cloneTemplate } from './vidstack-C0SWkbs7.js';
+import { LitElement } from './vidstack-CwTj4H1w.js';
+import { MenuPortal, Slider, sliderState } from './vidstack-Crz0ROkT.js';
+import { renderMenuItemsTemplate } from './vidstack-BoLIUOyq.js';
+
+class MediaCaptionsElement extends Host(HTMLElement, Captions) {
+  static tagName = "media-captions";
+}
+
+class MediaGestureElement extends Host(HTMLElement, Gesture) {
+  static tagName = "media-gesture";
+}
+
+class MediaAnnouncerElement extends Host(HTMLElement, MediaAnnouncer) {
+  static tagName = "media-announcer";
+}
+
+class MediaControlsElement extends Host(HTMLElement, Controls) {
+  static tagName = "media-controls";
+}
+
+class MediaControlsGroupElement extends Host(HTMLElement, ControlsGroup) {
+  static tagName = "media-controls-group";
+}
+
+class Title extends Component {
+}
+class MediaTitleElement extends Host(HTMLElement, Title) {
+  static tagName = "media-title";
+  #media;
+  onSetup() {
+    this.#media = useMediaContext();
+  }
+  onConnect() {
+    effect(this.#watchTitle.bind(this));
+  }
+  #watchTitle() {
+    const { title } = this.#media.$state;
+    this.textContent = title();
+  }
+}
+
+class ChapterTitle extends Component {
+  static props = {
+    defaultText: ""
+  };
+}
+class MediaChapterTitleElement extends Host(HTMLElement, ChapterTitle) {
+  static tagName = "media-chapter-title";
+  #media;
+  #chapterTitle;
+  onSetup() {
+    this.#media = useMediaContext();
+    this.#chapterTitle = signal("");
+  }
+  onConnect() {
+    const tracks = this.#media.textTracks;
+    watchCueTextChange(tracks, "chapters", this.#chapterTitle.set);
+    effect(this.#watchChapterTitle.bind(this));
+  }
+  #watchChapterTitle() {
+    const { defaultText } = this.$props;
+    this.textContent = this.#chapterTitle() || defaultText();
+  }
+}
+
+class Spinner extends Component {
+  static props = {
+    size: 96,
+    trackWidth: 8,
+    fillPercent: 50
+  };
+  onConnect(el) {
+    requestScopedAnimationFrame(() => {
+      if (!this.connectScope) return;
+      const root = el.querySelector("svg"), track = root.firstElementChild, trackFill = track.nextElementSibling;
+      effect(this.#update.bind(this, root, track, trackFill));
+    });
+  }
+  #update(root, track, trackFill) {
+    const { size, trackWidth, fillPercent } = this.$props;
+    setAttribute(root, "width", size());
+    setAttribute(root, "height", size());
+    setAttribute(track, "stroke-width", trackWidth());
+    setAttribute(trackFill, "stroke-width", trackWidth());
+    setAttribute(trackFill, "stroke-dashoffset", 100 - fillPercent());
+  }
+}
+class MediaSpinnerElement extends Host(LitElement, Spinner) {
+  static tagName = "media-spinner";
+  render() {
+    return html`
+      <svg fill="none" viewBox="0 0 120 120" aria-hidden="true" data-part="root">
+        <circle cx="60" cy="60" r="54" stroke="currentColor" data-part="track"></circle>
+        <circle
+          cx="60"
+          cy="60"
+          r="54"
+          stroke="currentColor"
+          pathLength="100"
+          stroke-dasharray="100"
+          data-part="track-fill"
+        ></circle>
+      </svg>
+    `;
+  }
+}
+
+class MediaLayout extends Component {
+  static props = {
+    when: false
+  };
+}
+class MediaLayoutElement extends Host(HTMLElement, MediaLayout) {
+  static tagName = "media-layout";
+  #media;
+  onSetup() {
+    this.#media = useMediaContext();
+  }
+  onConnect() {
+    effect(this.#watchWhen.bind(this));
+  }
+  #watchWhen() {
+    const root = this.firstElementChild, isTemplate = root?.localName === "template", when = this.$props.when(), matches = isBoolean(when) ? when : computed(() => when(this.#media.player.state))();
+    if (!matches) {
+      if (isTemplate) {
+        this.textContent = "";
+        this.appendChild(root);
+      } else if (isHTMLElement(root)) {
+        root.style.display = "none";
+      }
+      return;
+    }
+    if (isTemplate) {
+      this.append(root.content.cloneNode(true));
+    } else if (isHTMLElement(root)) {
+      root.style.display = "";
+    }
+  }
+}
+
+class MediaGoogleCastButtonElement extends Host(HTMLElement, GoogleCastButton) {
+  static tagName = "media-google-cast-button";
+}
+
+class MediaToggleButtonElement extends Host(HTMLElement, ToggleButton) {
+  static tagName = "media-toggle-button";
+}
+
+class MediaTooltipElement extends Host(HTMLElement, Tooltip) {
+  static tagName = "media-tooltip";
+}
+
+class MediaTooltipTriggerElement extends Host(HTMLElement, TooltipTrigger) {
+  static tagName = "media-tooltip-trigger";
+  onConnect() {
+    this.style.display = "contents";
+  }
+}
+
+class MediaTooltipContentElement extends Host(HTMLElement, TooltipContent) {
+  static tagName = "media-tooltip-content";
+}
+
+class MediaMenuPortalElement extends Host(HTMLElement, MenuPortal) {
+  static tagName = "media-menu-portal";
+  static attrs = {
+    disabled: {
+      converter(value) {
+        if (isString(value)) return value;
+        return value !== null;
+      }
+    }
+  };
+}
+
+class MediaChaptersRadioGroupElement extends Host(HTMLElement, ChaptersRadioGroup) {
+  static tagName = "media-chapters-radio-group";
+  onConnect() {
+    renderMenuItemsTemplate(this, (el, option) => {
+      const { cue, startTime, duration } = option, thumbnailEl = el.querySelector(".vds-thumbnail,media-thumbnail"), startEl = el.querySelector('[data-part="start-time"]'), durationEl = el.querySelector('[data-part="duration"]');
+      if (startEl) startEl.textContent = startTime;
+      if (durationEl) durationEl.textContent = duration;
+      if (thumbnailEl) {
+        thumbnailEl.setAttribute("time", cue.startTime + "");
+        effect(() => {
+          const thumbnails = this.$props.thumbnails();
+          if ("src" in thumbnailEl) {
+            thumbnailEl.src = thumbnails;
+          } else if (isString(thumbnails)) {
+            thumbnailEl.setAttribute("src", thumbnails);
+          }
+        });
+      }
+    });
+  }
+}
+
+class MediaAudioGainRadioGroupElement extends Host(HTMLElement, AudioGainRadioGroup) {
+  static tagName = "media-audio-gain-radio-group";
+  onConnect() {
+    renderMenuItemsTemplate(this);
+  }
+}
+
+class MediaRadioGroupElement extends Host(HTMLElement, RadioGroup) {
+  static tagName = "media-radio-group";
+}
+
+class MediaSliderElement extends Host(HTMLElement, Slider) {
+  static tagName = "media-slider";
+}
+
+const videoTemplate = /* @__PURE__ */ createTemplate(
+  `<video muted playsinline preload="none" style="max-width: unset;"></video>`
+);
+class MediaSliderVideoElement extends Host(HTMLElement, SliderVideo) {
+  static tagName = "media-slider-video";
+  #media;
+  #video = this.#createVideo();
+  onSetup() {
+    this.#media = useMediaContext();
+    this.$state.video.set(this.#video);
+  }
+  onConnect() {
+    const { canLoad } = this.#media.$state, { src, crossOrigin } = this.$state;
+    if (this.#video.parentNode !== this) {
+      this.prepend(this.#video);
+    }
+    effect(() => {
+      setAttribute(this.#video, "crossorigin", crossOrigin());
+      setAttribute(this.#video, "preload", canLoad() ? "auto" : "none");
+      setAttribute(this.#video, "src", src());
+    });
+  }
+  #createVideo() {
+    return cloneTemplateContent(videoTemplate);
+  }
+}
+
+class MediaAudioGainSliderElement extends Host(HTMLElement, AudioGainSlider) {
+  static tagName = "media-audio-gain-slider";
+}
+
+class MediaSpeedSliderElement extends Host(HTMLElement, SpeedSlider) {
+  static tagName = "media-speed-slider";
+}
+
+class MediaQualitySliderElement extends Host(HTMLElement, QualitySlider) {
+  static tagName = "media-quality-slider";
+}
+
+class MediaSliderChaptersElement extends Host(HTMLElement, SliderChapters) {
+  static tagName = "media-slider-chapters";
+  #template = null;
+  onConnect() {
+    requestScopedAnimationFrame(() => {
+      if (!this.connectScope) return;
+      const template = this.querySelector("template");
+      if (template) {
+        this.#template = template;
+        effect(this.#renderTemplate.bind(this));
+      }
+    });
+  }
+  #renderTemplate() {
+    if (!this.#template) return;
+    const elements = cloneTemplate(this.#template, this.cues.length || 1);
+    this.setRefs(elements);
+  }
+}
+
+class SliderSteps extends Component {
+}
+class MediaSliderStepsElement extends Host(HTMLElement, SliderSteps) {
+  static tagName = "media-slider-steps";
+  #template = null;
+  onConnect(el) {
+    requestScopedAnimationFrame(() => {
+      if (!this.connectScope) return;
+      this.#template = el.querySelector("template");
+      if (this.#template) effect(this.#render.bind(this));
+    });
+  }
+  #render() {
+    if (!this.#template) return;
+    const { min, max, step } = useState(sliderState), steps = (max() - min()) / step();
+    cloneTemplate(this.#template, Math.floor(steps) + 1);
+  }
+}
+
+export { MediaAnnouncerElement, MediaAudioGainRadioGroupElement, MediaAudioGainSliderElement, MediaCaptionsElement, MediaChapterTitleElement, MediaChaptersRadioGroupElement, MediaControlsElement, MediaControlsGroupElement, MediaGestureElement, MediaGoogleCastButtonElement, MediaLayoutElement, MediaMenuPortalElement, MediaQualitySliderElement, MediaRadioGroupElement, MediaSliderChaptersElement, MediaSliderElement, MediaSliderStepsElement, MediaSliderVideoElement, MediaSpeedSliderElement, MediaSpinnerElement, MediaTitleElement, MediaToggleButtonElement, MediaTooltipContentElement, MediaTooltipElement, MediaTooltipTriggerElement };