@hanifhan1f/vidstack 1.12.19 → 1.12.24

package/dev/chunks/vidstack-CGyAjz8G.js

@@ -0,0 +1,58 @@
+import { signal, effect, listenEvent, EventsController } from './vidstack-C1PwJD_4.js';
+import './vidstack-BnBLcaA5.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-CJCnHmKE.js

@@ -0,0 +1,104 @@
+import { Host, effect, setAttribute, computed } from './vidstack-C1PwJD_4.js';
+import { MediaProvider, MediaPlayer } from './vidstack-0XhA3AD_.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-CzCQJ29U.js

@@ -0,0 +1,107 @@
+import { Component, State, effect, isNull, setAttribute, EventsController } from './vidstack-C1PwJD_4.js';
+import { useMediaContext } from './vidstack-BjxlZzGu.js';
+import { preconnect } from './vidstack-DdTXMZro.js';
+
+class Poster extends Component {
+  static props = {
+    src: null,
+    alt: null,
+    crossOrigin: null
+  };
+  static state = new State({
+    img: null,
+    src: null,
+    alt: null,
+    crossOrigin: null,
+    loading: true,
+    error: null,
+    hidden: false
+  });
+  #media;
+  onSetup() {
+    this.#media = useMediaContext();
+    this.#watchSrc();
+    this.#watchAlt();
+    this.#watchCrossOrigin();
+    this.#watchHidden();
+  }
+  onAttach(el) {
+    el.style.setProperty("pointer-events", "none");
+    effect(this.#watchImg.bind(this));
+    effect(this.#watchSrc.bind(this));
+    effect(this.#watchAlt.bind(this));
+    effect(this.#watchCrossOrigin.bind(this));
+    effect(this.#watchHidden.bind(this));
+    const { started } = this.#media.$state;
+    this.setAttributes({
+      "data-visible": () => !started() && !this.$state.hidden(),
+      "data-loading": this.#isLoading.bind(this),
+      "data-error": this.#hasError.bind(this),
+      "data-hidden": this.$state.hidden
+    });
+  }
+  onConnect(el) {
+    effect(this.#onPreconnect.bind(this));
+    effect(this.#onLoadStart.bind(this));
+  }
+  #hasError() {
+    const { error } = this.$state;
+    return !isNull(error());
+  }
+  #onPreconnect() {
+    const { canLoadPoster, poster } = this.#media.$state;
+    if (!canLoadPoster() && poster()) preconnect(poster(), "preconnect");
+  }
+  #watchHidden() {
+    const { src } = this.$props, { poster, nativeControls } = this.#media.$state;
+    this.el && setAttribute(this.el, "display", nativeControls() ? "none" : null);
+    this.$state.hidden.set(this.#hasError() || !(src() || poster()) || nativeControls());
+  }
+  #isLoading() {
+    const { loading, hidden } = this.$state;
+    return !hidden() && loading();
+  }
+  #watchImg() {
+    const img = this.$state.img();
+    if (!img) return;
+    new EventsController(img).add("load", this.#onLoad.bind(this)).add("error", this.#onError.bind(this));
+    if (img.complete) this.#onLoad();
+  }
+  #prevSrc = "";
+  #watchSrc() {
+    const { poster: defaultPoster } = this.#media.$props, { canLoadPoster, providedPoster, inferredPoster } = this.#media.$state;
+    const src = this.$props.src() || "", poster = src || defaultPoster() || inferredPoster();
+    if (this.#prevSrc === providedPoster()) {
+      providedPoster.set(src);
+    }
+    this.$state.src.set(canLoadPoster() && poster.length ? poster : null);
+    this.#prevSrc = src;
+  }
+  #watchAlt() {
+    const { src } = this.$props, { alt } = this.$state, { poster } = this.#media.$state;
+    alt.set(src() || poster() ? this.$props.alt() : null);
+  }
+  #watchCrossOrigin() {
+    const { crossOrigin: crossOriginProp } = this.$props, { crossOrigin: crossOriginState } = this.$state, { crossOrigin: mediaCrossOrigin, poster: src } = this.#media.$state, crossOrigin = crossOriginProp() !== null ? crossOriginProp() : mediaCrossOrigin();
+    crossOriginState.set(
+      /ytimg\.com|vimeo/.test(src() || "") ? null : crossOrigin === true ? "anonymous" : crossOrigin
+    );
+  }
+  #onLoadStart() {
+    const { loading, error } = this.$state, { canLoadPoster, poster } = this.#media.$state;
+    loading.set(canLoadPoster() && !!poster());
+    error.set(null);
+  }
+  #onLoad() {
+    const { loading, error } = this.$state;
+    loading.set(false);
+    error.set(null);
+  }
+  #onError(event) {
+    const { loading, error } = this.$state;
+    loading.set(false);
+    error.set(event);
+  }
+}
+
+export { Poster };