@locpd/vidstack 1.12.14

package/dev/chunks/vidstack-Bcmx8pmK.js

@@ -0,0 +1,224 @@
+import { computed, peek, effect, onDispose, isDOMNode, animationFrameThrottle, isString } from './vidstack-Bu2kfzUd.js';
+import { nothing, render, html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';
+import { directive, AsyncDirective, PartType } from 'lit-html/async-directive.js';
+import { useMediaContext } from './vidstack-DFImIcIL.js';
+
+class SignalDirective extends AsyncDirective {
+  #signal = null;
+  #isAttr = false;
+  #stop = null;
+  constructor(part) {
+    super(part);
+    this.#isAttr = part.type === PartType.ATTRIBUTE || part.type === PartType.BOOLEAN_ATTRIBUTE;
+  }
+  render(signal) {
+    if (signal !== this.#signal) {
+      this.disconnected();
+      this.#signal = signal;
+      if (this.isConnected) this.#watch();
+    }
+    return this.#signal ? this.#resolveValue(peek(this.#signal)) : nothing;
+  }
+  reconnected() {
+    this.#watch();
+  }
+  disconnected() {
+    this.#stop?.();
+    this.#stop = null;
+  }
+  #watch() {
+    if (!this.#signal) return;
+    this.#stop = effect(this.#onValueChange.bind(this));
+  }
+  #resolveValue(value) {
+    return this.#isAttr ? ifDefined(value) : value;
+  }
+  #setValue(value) {
+    this.setValue(this.#resolveValue(value));
+  }
+  #onValueChange() {
+    {
+      try {
+        this.#setValue(this.#signal?.());
+      } catch (error) {
+        if (error instanceof Error && error.message.includes("This `ChildPart` has no `parentNode`")) {
+          const svelteDynamicImportExample = [
+            "{#await import('./Player.svelte') then {default: Player}}",
+            "  <svelte:component this={Player} />",
+            "{/await}"
+          ].join("\n");
+          console.warn(
+            `[vidstack] Failed to render most likely due to a hydration issue with your framework. Dynamically importing the player should resolve the issue.
+
+Svelte Example:
+
+${svelteDynamicImportExample}`
+          );
+        } else {
+          console.error(error);
+        }
+      }
+    }
+  }
+}
+function $signal(compute) {
+  return directive(SignalDirective)(computed(compute));
+}
+
+class SlotObserver {
+  #roots;
+  #callback;
+  elements = /* @__PURE__ */ new Set();
+  constructor(roots, callback) {
+    this.#roots = roots;
+    this.#callback = callback;
+  }
+  connect() {
+    this.#update();
+    const observer = new MutationObserver(this.#onMutation);
+    for (const root of this.#roots) observer.observe(root, { childList: true, subtree: true });
+    onDispose(() => observer.disconnect());
+    onDispose(this.disconnect.bind(this));
+  }
+  disconnect() {
+    this.elements.clear();
+  }
+  assign(template, slot) {
+    if (isDOMNode(template)) {
+      slot.textContent = "";
+      slot.append(template);
+    } else {
+      render(null, slot);
+      render(template, slot);
+    }
+    if (!slot.style.display) {
+      slot.style.display = "contents";
+    }
+    const el = slot.firstElementChild;
+    if (!el) return;
+    const classList = slot.getAttribute("data-class");
+    if (classList) el.classList.add(...classList.split(" "));
+  }
+  #onMutation = animationFrameThrottle(this.#update.bind(this));
+  #update(entries) {
+    if (entries && !entries.some((e) => e.addedNodes.length)) return;
+    let changed = false, slots = this.#roots.flatMap((root) => [...root.querySelectorAll("slot")]);
+    for (const slot of slots) {
+      if (!slot.hasAttribute("name") || this.elements.has(slot)) continue;
+      this.elements.add(slot);
+      changed = true;
+    }
+    if (changed) this.#callback(this.elements);
+  }
+}
+
+let id = 0, slotIdAttr = "data-slot-id";
+class SlotManager {
+  #roots;
+  slots;
+  constructor(roots) {
+    this.#roots = roots;
+    this.slots = new SlotObserver(roots, this.#update.bind(this));
+  }
+  connect() {
+    this.slots.connect();
+    this.#update();
+    const mutations = new MutationObserver(this.#onMutation);
+    for (const root of this.#roots) mutations.observe(root, { childList: true });
+    onDispose(() => mutations.disconnect());
+  }
+  #onMutation = animationFrameThrottle(this.#update.bind(this));
+  #update() {
+    for (const root of this.#roots) {
+      for (const node of root.children) {
+        if (node.nodeType !== 1) continue;
+        const name = node.getAttribute("slot");
+        if (!name) continue;
+        node.style.display = "none";
+        let slotId = node.getAttribute(slotIdAttr);
+        if (!slotId) {
+          node.setAttribute(slotIdAttr, slotId = ++id + "");
+        }
+        for (const slot of this.slots.elements) {
+          if (slot.getAttribute("name") !== name || slot.getAttribute(slotIdAttr) === slotId) {
+            continue;
+          }
+          const clone = document.importNode(node, true);
+          if (name.includes("-icon")) clone.classList.add("vds-icon");
+          clone.style.display = "";
+          clone.removeAttribute("slot");
+          this.slots.assign(clone, slot);
+          slot.setAttribute(slotIdAttr, slotId);
+        }
+      }
+    }
+  }
+}
+
+function Icon({ name, class: _class, state, paths, viewBox = "0 0 32 32" }) {
+  return html`<svg
+    class="${"vds-icon" + (_class ? ` ${_class}` : "")}"
+    viewBox="${viewBox}"
+    fill="none"
+    aria-hidden="true"
+    focusable="false"
+    xmlns="http://www.w3.org/2000/svg"
+    data-icon=${ifDefined(name ?? state)}
+  >
+    ${!isString(paths) ? $signal(paths) : unsafeSVG(paths)}
+  </svg>`;
+}
+
+class IconsLoader {
+  #icons = {};
+  #loaded = false;
+  slots;
+  constructor(roots) {
+    this.slots = new SlotObserver(roots, this.#insertIcons.bind(this));
+  }
+  connect() {
+    this.slots.connect();
+  }
+  load() {
+    this.loadIcons().then((icons) => {
+      this.#icons = icons;
+      this.#loaded = true;
+      this.#insertIcons();
+    });
+  }
+  *#iterate() {
+    for (const iconName of Object.keys(this.#icons)) {
+      const slotName = `${iconName}-icon`;
+      for (const slot of this.slots.elements) {
+        if (slot.name !== slotName) continue;
+        yield { icon: this.#icons[iconName], slot };
+      }
+    }
+  }
+  #insertIcons() {
+    if (!this.#loaded) return;
+    for (const { icon, slot } of this.#iterate()) {
+      this.slots.assign(icon, slot);
+    }
+  }
+}
+
+class LayoutIconsLoader extends IconsLoader {
+  connect() {
+    super.connect();
+    const { player } = useMediaContext();
+    if (!player.el) return;
+    let dispose, observer = new IntersectionObserver((entries) => {
+      if (!entries[0]?.isIntersecting) return;
+      dispose?.();
+      dispose = void 0;
+      this.load();
+    });
+    observer.observe(player.el);
+    dispose = onDispose(() => observer.disconnect());
+  }
+}
+
+export { $signal, Icon, LayoutIconsLoader, SlotManager };

package/dev/chunks/vidstack-Bl4b0Nen.js

@@ -0,0 +1,29 @@
+import { Icon$24, effect } from './vidstack-Bu2kfzUd.js';
+import { cloneTemplateContent, createTemplate } from './vidstack-C_l97D5j.js';
+import '@floating-ui/dom';
+
+const svgTemplate = /* @__PURE__ */ createTemplate(
+  `<svg viewBox="0 0 32 32" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"></svg>`
+);
+function insertContent(container, $state) {
+  const icon = cloneTemplateContent(svgTemplate);
+  icon.innerHTML = Icon$24;
+  container.append(icon);
+  const text = document.createElement("span");
+  text.classList.add("vds-google-cast-info");
+  container.append(text);
+  const deviceName = document.createElement("span");
+  deviceName.classList.add("vds-google-cast-device-name");
+  effect(() => {
+    const { remotePlaybackInfo } = $state, info = remotePlaybackInfo();
+    if (info?.deviceName) {
+      deviceName.textContent = info.deviceName;
+      text.append("Google Cast on ", deviceName);
+    }
+    return () => {
+      text.textContent = "";
+    };
+  });
+}
+
+export { insertContent };

package/dev/chunks/vidstack-Bo5OTJ06.js

@@ -0,0 +1,58 @@
+import { signal, effect, listenEvent, EventsController } from './vidstack-Bu2kfzUd.js';
+import './vidstack-CjhKISI0.js';
+
+class HTMLRemotePlaybackAdapter {
+  #media;
+  #ctx;
+  #state;
+  #supported = signal(false);
+  get supported() {
+    return this.#supported();
+  }
+  constructor(media, ctx) {
+    this.#media = media;
+    this.#ctx = ctx;
+    this.#setup();
+  }
+  #setup() {
+    if (!this.#media?.remote || !this.canPrompt) return;
+    this.#media.remote.watchAvailability((available) => {
+      this.#supported.set(available);
+    }).catch(() => {
+      this.#supported.set(false);
+    });
+    effect(this.#watchSupported.bind(this));
+  }
+  #watchSupported() {
+    if (!this.#supported()) return;
+    const events = ["connecting", "connect", "disconnect"], onStateChange = this.#onStateChange.bind(this);
+    onStateChange();
+    listenEvent(this.#media, "playing", onStateChange);
+    const remoteEvents = new EventsController(this.#media.remote);
+    for (const type of events) {
+      remoteEvents.add(type, onStateChange);
+    }
+  }
+  async prompt() {
+    if (!this.supported) throw Error("Not supported on this platform.");
+    if (this.type === "airplay" && this.#media.webkitShowPlaybackTargetPicker) {
+      return this.#media.webkitShowPlaybackTargetPicker();
+    }
+    return this.#media.remote.prompt();
+  }
+  #onStateChange(event) {
+    const state = this.#media.remote.state;
+    if (state === this.#state) return;
+    const detail = { type: this.type, state };
+    this.#ctx.notify("remote-playback-change", detail, event);
+    this.#state = state;
+  }
+}
+class HTMLAirPlayAdapter extends HTMLRemotePlaybackAdapter {
+  type = "airplay";
+  get canPrompt() {
+    return "WebKitPlaybackTargetAvailabilityEvent" in window;
+  }
+}
+
+export { HTMLAirPlayAdapter };

package/dev/chunks/vidstack-BoAGnlRt.js

@@ -0,0 +1,58 @@
+import { signal, listenEvent, effect, peek, isString } from './vidstack-Bu2kfzUd.js';
+import { appendParamsToURL } from './vidstack-zG6PIeGg.js';
+
+class EmbedProvider {
+  #iframe;
+  src = signal("");
+  /**
+   * Defines which referrer is sent when fetching the resource.
+   *
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy}
+   */
+  referrerPolicy = null;
+  get iframe() {
+    return this.#iframe;
+  }
+  constructor(iframe) {
+    this.#iframe = iframe;
+    iframe.setAttribute("frameBorder", "0");
+    iframe.setAttribute("aria-hidden", "true");
+    iframe.setAttribute(
+      "allow",
+      "autoplay; fullscreen; encrypted-media; picture-in-picture; accelerometer; gyroscope"
+    );
+    if (this.referrerPolicy !== null) {
+      iframe.setAttribute("referrerpolicy", this.referrerPolicy);
+    }
+  }
+  setup() {
+    listenEvent(window, "message", this.#onWindowMessage.bind(this));
+    listenEvent(this.#iframe, "load", this.onLoad.bind(this));
+    effect(this.#watchSrc.bind(this));
+  }
+  #watchSrc() {
+    const src = this.src();
+    if (!src.length) {
+      this.#iframe.setAttribute("src", "");
+      return;
+    }
+    const params = peek(() => this.buildParams());
+    this.#iframe.setAttribute("src", appendParamsToURL(src, params));
+  }
+  postMessage(message, target) {
+    this.#iframe.contentWindow?.postMessage(JSON.stringify(message), target ?? "*");
+  }
+  #onWindowMessage(event) {
+    const origin = this.getOrigin(), isOriginMatch = (event.source === null || event.source === this.#iframe?.contentWindow) && (!isString(origin) || origin === event.origin);
+    if (!isOriginMatch) return;
+    try {
+      const message = JSON.parse(event.data);
+      if (message) this.onMessage(message, event);
+      return;
+    } catch (e) {
+    }
+    if (event.data) this.onMessage(event.data, event);
+  }
+}
+
+export { EmbedProvider };

package/dev/chunks/vidstack-Bpr4fI4n.js

@@ -0,0 +1,7 @@
+const SET_AUTO = Symbol("SET_AUTO_QUALITY" ), ENABLE_AUTO = Symbol("ENABLE_AUTO_QUALITY" );
+const QualitySymbol = {
+  setAuto: SET_AUTO,
+  enableAuto: ENABLE_AUTO
+};
+
+export { QualitySymbol };

package/dev/chunks/vidstack-Bt8MP2DK.js

@@ -0,0 +1,204 @@
+import { Host, effect, setAttribute, isString, useState, BOOLEAN } from './vidstack-Bu2kfzUd.js';
+import { Thumbnail, Time, AirPlayButton, CaptionButton, FullscreenButton, LiveButton, MuteButton, PIPButton, PlayButton, SeekButton, AudioRadioGroup, CaptionsRadioGroup, Menu, MenuButton, MenuItem, MenuItems, SpeedRadioGroup, QualityRadioGroup, Radio, Slider, SliderValue, TimeSlider, SliderPreview, VolumeSlider } from './vidstack-C-ffXlSV.js';
+import { cloneTemplateContent, createTemplate, requestScopedAnimationFrame, cloneTemplate } from './vidstack-C_l97D5j.js';
+import { useMediaContext } from './vidstack-DFImIcIL.js';
+
+const imgTemplate = /* @__PURE__ */ createTemplate(
+  '<img loading="eager" decoding="async" aria-hidden="true">'
+);
+class MediaThumbnailElement extends Host(HTMLElement, Thumbnail) {
+  static tagName = "media-thumbnail";
+  static attrs = {
+    crossOrigin: "crossorigin"
+  };
+  #media;
+  #img = this.#createImg();
+  onSetup() {
+    this.#media = useMediaContext();
+    this.$state.img.set(this.#img);
+  }
+  onConnect() {
+    const { src, crossOrigin } = this.$state;
+    if (this.#img.parentNode !== this) {
+      this.prepend(this.#img);
+    }
+    effect(() => {
+      setAttribute(this.#img, "src", src());
+      setAttribute(this.#img, "crossorigin", crossOrigin());
+    });
+  }
+  #createImg() {
+    return cloneTemplateContent(imgTemplate);
+  }
+}
+
+class MediaTimeElement extends Host(HTMLElement, Time) {
+  static tagName = "media-time";
+  onConnect() {
+    effect(() => {
+      this.textContent = this.$state.timeText();
+    });
+  }
+}
+
+class MediaAirPlayButtonElement extends Host(HTMLElement, AirPlayButton) {
+  static tagName = "media-airplay-button";
+}
+
+class MediaCaptionButtonElement extends Host(HTMLElement, CaptionButton) {
+  static tagName = "media-caption-button";
+}
+
+class MediaFullscreenButtonElement extends Host(HTMLElement, FullscreenButton) {
+  static tagName = "media-fullscreen-button";
+}
+
+class MediaLiveButtonElement extends Host(HTMLElement, LiveButton) {
+  static tagName = "media-live-button";
+}
+
+class MediaMuteButtonElement extends Host(HTMLElement, MuteButton) {
+  static tagName = "media-mute-button";
+}
+
+class MediaPIPButtonElement extends Host(HTMLElement, PIPButton) {
+  static tagName = "media-pip-button";
+}
+
+class MediaPlayButtonElement extends Host(HTMLElement, PlayButton) {
+  static tagName = "media-play-button";
+}
+
+class MediaSeekButtonElement extends Host(HTMLElement, SeekButton) {
+  static tagName = "media-seek-button";
+}
+
+function renderMenuItemsTemplate(el, onCreate) {
+  requestScopedAnimationFrame(() => {
+    if (!el.connectScope) return;
+    const template = el.querySelector("template");
+    if (!template) return;
+    effect(() => {
+      if (!template.content.firstElementChild?.localName && !template.firstElementChild) {
+        throw Error("[vidstack] menu items template requires root element");
+      }
+      const options = el.getOptions();
+      cloneTemplate(template, options.length, (radio, i) => {
+        const { label, value } = options[i], labelEl = radio.querySelector(`[data-part="label"]`);
+        radio.setAttribute("value", value);
+        if (labelEl) {
+          if (isString(label)) {
+            labelEl.textContent = label;
+          } else {
+            effect(() => {
+              labelEl.textContent = label();
+            });
+          }
+        }
+        onCreate?.(radio, options[i], i);
+      });
+    });
+  });
+}
+
+class MediaAudioRadioGroupElement extends Host(HTMLElement, AudioRadioGroup) {
+  static tagName = "media-audio-radio-group";
+  onConnect() {
+    renderMenuItemsTemplate(this);
+  }
+}
+
+class MediaCaptionsRadioGroupElement extends Host(HTMLElement, CaptionsRadioGroup) {
+  static tagName = "media-captions-radio-group";
+  onConnect() {
+    renderMenuItemsTemplate(this);
+  }
+}
+
+class MediaMenuElement extends Host(HTMLElement, Menu) {
+  static tagName = "media-menu";
+}
+
+class MediaMenuButtonElement extends Host(HTMLElement, MenuButton) {
+  static tagName = "media-menu-button";
+}
+
+class MediaMenuItemElement extends Host(HTMLElement, MenuItem) {
+  static tagName = "media-menu-item";
+}
+
+class MediaMenuItemsElement extends Host(HTMLElement, MenuItems) {
+  static tagName = "media-menu-items";
+}
+
+class MediaSpeedRadioGroupElement extends Host(HTMLElement, SpeedRadioGroup) {
+  static tagName = "media-speed-radio-group";
+  onConnect() {
+    renderMenuItemsTemplate(this);
+  }
+}
+
+class MediaQualityRadioGroupElement extends Host(HTMLElement, QualityRadioGroup) {
+  static tagName = "media-quality-radio-group";
+  onConnect() {
+    renderMenuItemsTemplate(this, (el, option) => {
+      const bitrate = option.bitrate, bitrateEl = el.querySelector('[data-part="bitrate"]');
+      if (bitrate && bitrateEl) {
+        effect(() => {
+          bitrateEl.textContent = bitrate() || "";
+        });
+      }
+    });
+  }
+}
+
+class MediaRadioElement extends Host(HTMLElement, Radio) {
+  static tagName = "media-radio";
+}
+
+class MediaSliderThumbnailElement extends MediaThumbnailElement {
+  static tagName = "media-slider-thumbnail";
+  #media;
+  #slider;
+  onSetup() {
+    super.onSetup();
+    this.#media = useMediaContext();
+    this.#slider = useState(Slider.state);
+  }
+  onConnect() {
+    super.onConnect();
+    effect(this.#watchTime.bind(this));
+  }
+  #watchTime() {
+    const { duration, clipStartTime } = this.#media.$state;
+    this.time = clipStartTime() + this.#slider.pointerRate() * duration();
+  }
+}
+
+class MediaSliderValueElement extends Host(HTMLElement, SliderValue) {
+  static tagName = "media-slider-value";
+  static attrs = {
+    padMinutes: {
+      converter: BOOLEAN
+    }
+  };
+  onConnect() {
+    effect(() => {
+      this.textContent = this.getValueText();
+    });
+  }
+}
+
+class MediaTimeSliderElement extends Host(HTMLElement, TimeSlider) {
+  static tagName = "media-time-slider";
+}
+
+class MediaSliderPreviewElement extends Host(HTMLElement, SliderPreview) {
+  static tagName = "media-slider-preview";
+}
+
+class MediaVolumeSliderElement extends Host(HTMLElement, VolumeSlider) {
+  static tagName = "media-volume-slider";
+}
+
+export { MediaAirPlayButtonElement, MediaAudioRadioGroupElement, MediaCaptionButtonElement, MediaCaptionsRadioGroupElement, MediaFullscreenButtonElement, MediaLiveButtonElement, MediaMenuButtonElement, MediaMenuElement, MediaMenuItemElement, MediaMenuItemsElement, MediaMuteButtonElement, MediaPIPButtonElement, MediaPlayButtonElement, MediaQualityRadioGroupElement, MediaRadioElement, MediaSeekButtonElement, MediaSliderPreviewElement, MediaSliderThumbnailElement, MediaSliderValueElement, MediaSpeedRadioGroupElement, MediaThumbnailElement, MediaTimeElement, MediaTimeSliderElement, MediaVolumeSliderElement, renderMenuItemsTemplate };