@locpd/vidstack 1.12.14

package/server/chunks/vidstack-BvWwluXZ.js

@@ -0,0 +1,205 @@
+import { computed, peek, effect, onDispose, isDOMNode, animationFrameThrottle, isString } from './vidstack-Wn3NH5Sg.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-DLU3cjcp.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() {
+    {
+      this.#setValue(this.#signal?.());
+    }
+  }
+}
+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/server/chunks/vidstack-C-413dj2.js

@@ -0,0 +1,8 @@
+function ariaBool(value) {
+  return value ? "true" : "false";
+}
+function $ariaBool(signal) {
+  return () => ariaBool(signal());
+}
+
+export { $ariaBool };

package/server/chunks/vidstack-C26K8z_-.js

@@ -0,0 +1,55 @@
+import { Icon$34, Icon$35, Icon$27, Icon$26, Icon$60, Icon$61, Icon$39, Icon$40, Icon$105, Icon$104, Icon$54, Icon$59, Icon$62, Icon$56, Icon$33, Icon$8, Icon$13, Icon$19, Icon$63, Icon$53, Icon$0, Icon$22, Icon$11, Icon$88, Icon$16, Icon$77, Icon$81, Icon$24, Icon$74, Icon$31, Icon$5 } from './vidstack-Wn3NH5Sg.js';
+
+const icons = {
+  airplay: Icon$5,
+  download: Icon$31,
+  play: Icon$62,
+  pause: Icon$59,
+  replay: Icon$74,
+  mute: Icon$54,
+  "google-cast": Icon$24,
+  "volume-low": Icon$105,
+  "volume-high": Icon$104,
+  "cc-on": Icon$26,
+  "cc-off": Icon$27,
+  "pip-enter": Icon$61,
+  "pip-exit": Icon$60,
+  "fs-enter": Icon$40,
+  "fs-exit": Icon$39,
+  "seek-forward": Icon$81,
+  "seek-backward": Icon$77,
+  "menu-chapters": Icon$16,
+  "menu-settings": Icon$88,
+  "menu-arrow-left": Icon$11,
+  "menu-arrow-right": Icon$22,
+  "menu-accessibility": Icon$0,
+  "menu-audio": Icon$53,
+  "menu-audio-boost-up": Icon$104,
+  "menu-audio-boost-down": Icon$105,
+  "menu-playback": Icon$63,
+  "menu-speed-up": Icon$35,
+  "menu-speed-down": Icon$34,
+  "menu-captions": Icon$27,
+  "menu-quality-up": Icon$13,
+  "menu-quality-down": Icon$8,
+  "menu-radio-check": Icon$19,
+  "menu-font-size-up": Icon$13,
+  "menu-font-size-down": Icon$8,
+  "menu-opacity-up": Icon$33,
+  "menu-opacity-down": Icon$56,
+  "kb-play": Icon$62,
+  "kb-pause": Icon$59,
+  "kb-mute": Icon$54,
+  "kb-volume-up": Icon$104,
+  "kb-volume-down": Icon$105,
+  "kb-fs-enter": Icon$40,
+  "kb-fs-exit": Icon$39,
+  "kb-pip-enter": Icon$61,
+  "kb-pip-exit": Icon$60,
+  "kb-cc-on": Icon$26,
+  "kb-cc-off": Icon$27,
+  "kb-seek-forward": Icon$35,
+  "kb-seek-backward": Icon$34
+};
+
+export { icons };

package/server/chunks/vidstack-CJJiksDz.js

@@ -0,0 +1,107 @@
+import { createContext, useContext, Component, provideContext, signal, effect, createDisposalBin } from './vidstack-Wn3NH5Sg.js';
+import { useMediaContext } from './vidstack-DLU3cjcp.js';
+
+const plyrLayoutContext = createContext();
+function usePlyrLayoutContext() {
+  return useContext(plyrLayoutContext);
+}
+
+const plyrLayoutProps = {
+  clickToPlay: true,
+  clickToFullscreen: true,
+  controls: [
+    "play-large",
+    "play",
+    "progress",
+    "current-time",
+    "mute+volume",
+    "captions",
+    "settings",
+    "pip",
+    "airplay",
+    "fullscreen"
+  ],
+  customIcons: false,
+  displayDuration: false,
+  download: null,
+  markers: null,
+  invertTime: true,
+  thumbnails: null,
+  toggleTime: true,
+  translations: null,
+  seekTime: 10,
+  speed: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 4]
+};
+
+class PlyrLayout extends Component {
+  static props = plyrLayoutProps;
+  #media;
+  onSetup() {
+    this.#media = useMediaContext();
+    provideContext(plyrLayoutContext, {
+      ...this.$props,
+      previewTime: signal(0)
+    });
+  }
+}
+function usePlyrLayoutClasses(el, media) {
+  const {
+    canAirPlay,
+    canFullscreen,
+    canPictureInPicture,
+    controlsHidden,
+    currentTime,
+    fullscreen,
+    hasCaptions,
+    isAirPlayConnected,
+    paused,
+    pictureInPicture,
+    playing,
+    pointer,
+    poster,
+    textTrack,
+    viewType,
+    waiting
+  } = media.$state;
+  el.classList.add("plyr");
+  el.classList.add("plyr--full-ui");
+  const classes = {
+    "plyr--airplay-active": isAirPlayConnected,
+    "plyr--airplay-supported": canAirPlay,
+    "plyr--fullscreen-active": fullscreen,
+    "plyr--fullscreen-enabled": canFullscreen,
+    "plyr--hide-controls": controlsHidden,
+    "plyr--is-touch": () => pointer() === "coarse",
+    "plyr--loading": waiting,
+    "plyr--paused": paused,
+    "plyr--pip-active": pictureInPicture,
+    "plyr--pip-enabled": canPictureInPicture,
+    "plyr--playing": playing,
+    "plyr__poster-enabled": poster,
+    "plyr--stopped": () => paused() && currentTime() === 0,
+    "plyr--captions-active": textTrack,
+    "plyr--captions-enabled": hasCaptions
+  };
+  const disposal = createDisposalBin();
+  for (const token of Object.keys(classes)) {
+    disposal.add(effect(() => void el.classList.toggle(token, !!classes[token]())));
+  }
+  disposal.add(
+    effect(() => {
+      const token = `plyr--${viewType()}`;
+      el.classList.add(token);
+      return () => el.classList.remove(token);
+    }),
+    effect(() => {
+      const { $provider } = media, type = $provider()?.type, token = `plyr--${isHTMLProvider(type) ? "html5" : type}`;
+      el.classList.toggle(token, !!type);
+      return () => el.classList.remove(token);
+    })
+  );
+  return () => disposal.empty();
+}
+function isHTMLProvider(type) {
+  return type === "audio" || type === "video";
+}
+
+export { PlyrLayout, usePlyrLayoutClasses, usePlyrLayoutContext };

package/server/chunks/vidstack-CUNv52x1.js

@@ -0,0 +1,141 @@
+import { IS_CHROME } from './vidstack-BvLV0SMz.js';
+import { loadScript } from './vidstack-DLU3cjcp.js';
+import { peek } from './vidstack-Wn3NH5Sg.js';
+import './vidstack-B7iHmv7_.js';
+import '@floating-ui/dom';
+
+function getCastFrameworkURL() {
+  return "https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1";
+}
+function hasLoadedCastFramework() {
+  return !!window.cast?.framework;
+}
+function isCastAvailable() {
+  return !!window.chrome?.cast?.isAvailable;
+}
+function isCastConnected() {
+  return getCastContext().getCastState() === cast.framework.CastState.CONNECTED;
+}
+function getCastContext() {
+  return window.cast.framework.CastContext.getInstance();
+}
+function getCastSession() {
+  return getCastContext().getCurrentSession();
+}
+function getDefaultCastOptions() {
+  return {
+    language: "en-US",
+    autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED,
+    receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID,
+    resumeSavedSession: true,
+    androidReceiverCompatible: true
+  };
+}
+function getCastErrorMessage(code) {
+  const defaultMessage = `Google Cast Error Code: ${code}`;
+  return defaultMessage;
+}
+
+class GoogleCastLoader {
+  name = "google-cast";
+  target;
+  #player;
+  /**
+   * @see {@link https://developers.google.com/cast/docs/reference/web_sender/cast.framework.CastContext}
+   */
+  get cast() {
+    return getCastContext();
+  }
+  mediaType() {
+    return "video";
+  }
+  canPlay(src) {
+    return IS_CHROME;
+  }
+  async prompt(ctx) {
+    let loadEvent, openEvent, errorEvent;
+    try {
+      loadEvent = await this.#loadCastFramework(ctx);
+      if (!this.#player) {
+        this.#player = new cast.framework.RemotePlayer();
+        new cast.framework.RemotePlayerController(this.#player);
+      }
+      openEvent = ctx.player.createEvent("google-cast-prompt-open", {
+        trigger: loadEvent
+      });
+      ctx.player.dispatchEvent(openEvent);
+      this.#notifyRemoteStateChange(ctx, "connecting", openEvent);
+      await this.#showPrompt(peek(ctx.$props.googleCast));
+      ctx.$state.remotePlaybackInfo.set({
+        deviceName: getCastSession()?.getCastDevice().friendlyName
+      });
+      if (isCastConnected()) this.#notifyRemoteStateChange(ctx, "connected", openEvent);
+    } catch (code) {
+      const error = code instanceof Error ? code : this.#createError(
+        (code + "").toUpperCase(),
+        "Prompt failed."
+      );
+      errorEvent = ctx.player.createEvent("google-cast-prompt-error", {
+        detail: error,
+        trigger: openEvent ?? loadEvent,
+        cancelable: true
+      });
+      ctx.player.dispatch(errorEvent);
+      this.#notifyRemoteStateChange(
+        ctx,
+        isCastConnected() ? "connected" : "disconnected",
+        errorEvent
+      );
+      throw error;
+    } finally {
+      ctx.player.dispatch("google-cast-prompt-close", {
+        trigger: errorEvent ?? openEvent ?? loadEvent
+      });
+    }
+  }
+  async load(ctx) {
+    {
+      throw Error("[vidstack] can not load google cast provider server-side");
+    }
+  }
+  async #loadCastFramework(ctx) {
+    if (hasLoadedCastFramework()) return;
+    const loadStartEvent = ctx.player.createEvent("google-cast-load-start");
+    ctx.player.dispatch(loadStartEvent);
+    await loadScript(getCastFrameworkURL());
+    await customElements.whenDefined("google-cast-launcher");
+    const loadedEvent = ctx.player.createEvent("google-cast-loaded", { trigger: loadStartEvent });
+    ctx.player.dispatch(loadedEvent);
+    if (!isCastAvailable()) {
+      throw this.#createError("CAST_NOT_AVAILABLE", "Google Cast not available on this platform.");
+    }
+    return loadedEvent;
+  }
+  async #showPrompt(options) {
+    this.#setOptions(options);
+    const errorCode = await this.cast.requestSession();
+    if (errorCode) {
+      throw this.#createError(
+        errorCode.toUpperCase(),
+        getCastErrorMessage(errorCode)
+      );
+    }
+  }
+  #setOptions(options) {
+    this.cast?.setOptions({
+      ...getDefaultCastOptions(),
+      ...options
+    });
+  }
+  #notifyRemoteStateChange(ctx, state, trigger) {
+    const detail = { type: "google-cast", state };
+    ctx.notify("remote-playback-change", detail, trigger);
+  }
+  #createError(code, message) {
+    const error = Error(message);
+    error.code = code;
+    return error;
+  }
+}
+
+export { GoogleCastLoader };