@locpd/vidstack 1.12.14

package/prod/chunks/vidstack-Bq6c3Bam.js

@@ -0,0 +1,58 @@
+import { signal, effect, listenEvent, EventsController } from './vidstack-BGSTndAW.js';
+import './vidstack-xMS8dnYq.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/prod/chunks/vidstack-ByLCIBtB.js

@@ -0,0 +1,297 @@
+import { Host, effect, Component, signal, setAttribute, isBoolean, computed, isString, useState } from './vidstack-BGSTndAW.js';
+import { Captions, Gesture, MediaAnnouncer, Controls, ControlsGroup, GoogleCastButton, ToggleButton, Tooltip, TooltipTrigger, TooltipContent, ChaptersRadioGroup, AudioGainRadioGroup, RadioGroup, SliderVideo, AudioGainSlider, SpeedSlider, QualitySlider, SliderChapters } from './vidstack-BPitBBjh.js';
+import { useMediaContext } from './vidstack-DJDnh4xT.js';
+import { watchCueTextChange } from './vidstack-nLyr4NEP.js';
+import { html } from 'lit-html';
+import { requestScopedAnimationFrame, isHTMLElement, cloneTemplateContent, createTemplate, cloneTemplate } from './vidstack-C2US-gSO.js';
+import { LitElement } from './vidstack-CwTj4H1w.js';
+import { MenuPortal, Slider, sliderState } from './vidstack-BoVf5n1M.js';
+import { renderMenuItemsTemplate } from './vidstack-BCeb7ryV.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 };

package/prod/chunks/vidstack-C2US-gSO.js

@@ -0,0 +1,248 @@
+import { autoUpdate, computePosition, flip, shift } from '@floating-ui/dom';
+import { EventsController, isKeyboardClick, isTouchEvent, scoped, getScope, effect, isFunction, setAttribute, setStyle, isDOMNode, onDispose, toggleClass, animationFrameThrottle, signal, listenEvent, computed } from './vidstack-BGSTndAW.js';
+
+function isEventInside(el, event) {
+  const target = event.composedPath()[0];
+  return isDOMNode(target) && el.contains(target);
+}
+const rafJobs = /* @__PURE__ */ new Set();
+{
+  let processJobs = function() {
+    for (const job of rafJobs) {
+      try {
+        job();
+      } catch (e) {
+      }
+    }
+    window.requestAnimationFrame(processJobs);
+  };
+  processJobs();
+}
+function scheduleRafJob(job) {
+  rafJobs.add(job);
+  return () => rafJobs.delete(job);
+}
+function setAttributeIfEmpty(target, name, value) {
+  if (!target.hasAttribute(name)) target.setAttribute(name, value);
+}
+function setARIALabel(target, $label) {
+  if (target.hasAttribute("aria-label") || target.hasAttribute("data-no-label")) return;
+  if (!isFunction($label)) {
+    setAttribute(target, "aria-label", $label);
+    return;
+  }
+  function updateAriaDescription() {
+    setAttribute(target, "aria-label", $label());
+  }
+  effect(updateAriaDescription);
+}
+function isElementVisible(el) {
+  const style = getComputedStyle(el);
+  return style.display !== "none" && parseInt(style.opacity) > 0;
+}
+function checkVisibility(el) {
+  return !!el && ("checkVisibility" in el ? el.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true }) : isElementVisible(el));
+}
+function observeVisibility(el, callback) {
+  return scheduleRafJob(() => callback(checkVisibility(el)));
+}
+function isElementParent(owner, node, test) {
+  while (node) {
+    if (node === owner) {
+      return true;
+    } else if (test?.(node)) {
+      break;
+    } else {
+      node = node.parentElement;
+    }
+  }
+  return false;
+}
+function onPress(target, handler) {
+  return new EventsController(target).add("pointerup", (event) => {
+    if (event.button === 0 && !event.defaultPrevented) handler(event);
+  }).add("keydown", (event) => {
+    if (isKeyboardClick(event)) handler(event);
+  });
+}
+function isTouchPinchEvent(event) {
+  return isTouchEvent(event) && (event.touches.length > 1 || event.changedTouches.length > 1);
+}
+function requestScopedAnimationFrame(callback) {
+  let scope = getScope(), id = window.requestAnimationFrame(() => {
+    scoped(callback, scope);
+    id = -1;
+  });
+  return () => void window.cancelAnimationFrame(id);
+}
+function cloneTemplate(template, length, onCreate) {
+  let current, prev = template, parent = template.parentElement, content = template.content.firstElementChild, elements = [];
+  if (!content && template.firstElementChild) {
+    template.innerHTML = template.firstElementChild.outerHTML;
+    template.firstElementChild.remove();
+    content = template.content.firstElementChild;
+  }
+  for (let i = 0; i < length; i++) {
+    current = document.importNode(content, true);
+    onCreate?.(current, i);
+    parent.insertBefore(current, prev.nextSibling);
+    elements.push(current);
+    prev = current;
+  }
+  onDispose(() => {
+    for (let i = 0; i < elements.length; i++) elements[i].remove();
+  });
+  return elements;
+}
+function createTemplate(content) {
+  const template = document.createElement("template");
+  template.innerHTML = content;
+  return template.content;
+}
+function cloneTemplateContent(content) {
+  const fragment = content.cloneNode(true);
+  return fragment.firstElementChild;
+}
+function autoPlacement(el, trigger, placement, {
+  offsetVarName,
+  xOffset,
+  yOffset,
+  ...options
+}) {
+  if (!el) return;
+  const floatingPlacement = placement.replace(" ", "-").replace("-center", "");
+  setStyle(el, "visibility", !trigger ? "hidden" : null);
+  if (!trigger) return;
+  let isTop = placement.includes("top");
+  const negateX = (x) => placement.includes("left") ? `calc(-1 * ${x})` : x, negateY = (y) => isTop ? `calc(-1 * ${y})` : y;
+  return autoUpdate(trigger, el, () => {
+    computePosition(trigger, el, {
+      placement: floatingPlacement,
+      middleware: [
+        ...options.middleware ?? [],
+        flip({ fallbackAxisSideDirection: "start", crossAxis: false }),
+        shift()
+      ],
+      ...options
+    }).then(({ x, y, middlewareData }) => {
+      const hasFlipped = !!middlewareData.flip?.index;
+      isTop = placement.includes(hasFlipped ? "bottom" : "top");
+      el.setAttribute(
+        "data-placement",
+        hasFlipped ? placement.startsWith("top") ? placement.replace("top", "bottom") : placement.replace("bottom", "top") : placement
+      );
+      Object.assign(el.style, {
+        top: `calc(${y + "px"} + ${negateY(
+          yOffset ? yOffset + "px" : `var(--${offsetVarName}-y-offset, 0px)`
+        )})`,
+        left: `calc(${x + "px"} + ${negateX(
+          xOffset ? xOffset + "px" : `var(--${offsetVarName}-x-offset, 0px)`
+        )})`
+      });
+    });
+  });
+}
+function hasAnimation(el) {
+  const styles = getComputedStyle(el);
+  return styles.animationName !== "none";
+}
+function createSlot(name) {
+  const slot = document.createElement("slot");
+  slot.name = name;
+  return slot;
+}
+function useTransitionActive($el) {
+  const $active = signal(false);
+  effect(() => {
+    const el = $el();
+    if (!el) return;
+    new EventsController(el).add("transitionstart", () => $active.set(true)).add("transitionend", () => $active.set(false));
+  });
+  return $active;
+}
+function useResizeObserver($el, onResize) {
+  function onElementChange() {
+    const el = $el();
+    if (!el) return;
+    onResize();
+    const observer = new ResizeObserver(animationFrameThrottle(onResize));
+    observer.observe(el);
+    return () => observer.disconnect();
+  }
+  effect(onElementChange);
+}
+function useActive($el) {
+  const $isMouseEnter = useMouseEnter($el), $isFocusedIn = useFocusIn($el);
+  let prevMouseEnter = false;
+  return computed(() => {
+    const isMouseEnter = $isMouseEnter();
+    if (prevMouseEnter && !isMouseEnter) return false;
+    prevMouseEnter = isMouseEnter;
+    return isMouseEnter || $isFocusedIn();
+  });
+}
+function useMouseEnter($el) {
+  const $isMouseEnter = signal(false);
+  effect(() => {
+    const el = $el();
+    if (!el) {
+      $isMouseEnter.set(false);
+      return;
+    }
+    new EventsController(el).add("mouseenter", () => $isMouseEnter.set(true)).add("mouseleave", () => $isMouseEnter.set(false));
+  });
+  return $isMouseEnter;
+}
+function useFocusIn($el) {
+  const $isFocusIn = signal(false);
+  effect(() => {
+    const el = $el();
+    if (!el) {
+      $isFocusIn.set(false);
+      return;
+    }
+    new EventsController(el).add("focusin", () => $isFocusIn.set(true)).add("focusout", () => $isFocusIn.set(false));
+  });
+  return $isFocusIn;
+}
+function isHTMLElement(el) {
+  return el instanceof HTMLElement;
+}
+function useColorSchemePreference() {
+  const colorScheme = signal("dark");
+  const media = window.matchMedia("(prefers-color-scheme: light)");
+  function onChange() {
+    colorScheme.set(media.matches ? "light" : "dark");
+  }
+  onChange();
+  listenEvent(media, "change", onChange);
+  return colorScheme;
+}
+function watchColorScheme(el, colorScheme) {
+  effect(() => {
+    const scheme = colorScheme();
+    if (scheme === "system") {
+      const preference = useColorSchemePreference();
+      effect(() => updateColorScheme(preference()));
+      return;
+    }
+    updateColorScheme(scheme);
+  });
+  function updateColorScheme(scheme) {
+    toggleClass(el, "light", scheme === "light");
+    toggleClass(el, "dark", scheme === "dark");
+  }
+}
+
+function ariaBool(value) {
+  return value ? "true" : "false";
+}
+function $ariaBool(signal) {
+  return () => ariaBool(signal());
+}
+function prefersReducedMotion() {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+export { $ariaBool, autoPlacement, cloneTemplate, cloneTemplateContent, createSlot, createTemplate, hasAnimation, isElementParent, isElementVisible, isEventInside, isHTMLElement, isTouchPinchEvent, observeVisibility, onPress, prefersReducedMotion, requestScopedAnimationFrame, setARIALabel, setAttributeIfEmpty, useActive, useResizeObserver, useTransitionActive, watchColorScheme };

package/prod/chunks/vidstack-C9vIqaYT.js

@@ -0,0 +1,10 @@
+function coerceToError(error) {
+  return error instanceof Error ? error : Error(typeof error === "string" ? error : JSON.stringify(error));
+}
+function assert(condition, message) {
+  if (!condition) {
+    throw Error("Assertion failed.");
+  }
+}
+
+export { assert, coerceToError };