@hanifhan1f/vidstack 1.12.19 → 1.12.25

package/prod/chunks/vidstack-DMDDSV3t.js

@@ -0,0 +1,104 @@
+import { Host, effect, computed, setAttribute } from './vidstack-BNpgCJJ1.js';
+import { MediaProvider, MediaPlayer } from './vidstack-BAqdCFIm.js';
+import { useMediaContext } from './vidstack-tt3O1zL6.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-Oq65llxr.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/prod/chunks/vidstack-DXfGRhxZ.js

@@ -0,0 +1,201 @@
+import { Host, effect, setAttribute, isString, useState, BOOLEAN } from './vidstack-BNpgCJJ1.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-DDePVDjt.js';
+import { cloneTemplateContent, createTemplate, requestScopedAnimationFrame, cloneTemplate } from './vidstack-DB9WDRL5.js';
+import { useMediaContext } from './vidstack-tt3O1zL6.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(() => {
+      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 };

package/prod/chunks/vidstack-Dg71uhRc.js

@@ -0,0 +1,58 @@
+import { signal, listenEvent, effect, peek, isString } from './vidstack-BNpgCJJ1.js';
+import { appendParamsToURL } from './vidstack-KShKSmYu.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/prod/chunks/vidstack-DlLwMLBL.js

@@ -0,0 +1,33 @@
+import { Host, effect, setAttribute } from './vidstack-BNpgCJJ1.js';
+import { Poster } from './vidstack-C4PTiuot.js';
+import './vidstack-tt3O1zL6.js';
+import './vidstack-KShKSmYu.js';
+import './vidstack-wTTCvdqe.js';
+
+class MediaPosterElement extends Host(HTMLElement, Poster) {
+  static tagName = "media-poster";
+  static attrs = {
+    crossOrigin: "crossorigin"
+  };
+  #img = document.createElement("img");
+  onSetup() {
+    this.$state.img.set(this.#img);
+  }
+  onConnect() {
+    const { src, alt, crossOrigin } = this.$state;
+    effect(() => {
+      const { loading, hidden } = this.$state;
+      this.#img.style.display = loading() || hidden() ? "none" : "";
+    });
+    effect(() => {
+      setAttribute(this.#img, "alt", alt());
+      setAttribute(this.#img, "crossorigin", crossOrigin());
+      setAttribute(this.#img, "src", src());
+    });
+    if (this.#img.parentNode !== this) {
+      this.prepend(this.#img);
+    }
+  }
+}
+
+export { MediaPosterElement };

package/prod/chunks/vidstack-DnRxQoqP.js

@@ -0,0 +1,104 @@
+import { Host, effect, computed, setAttribute } from './vidstack-BNpgCJJ1.js';
+import { MediaProvider, MediaPlayer } from './vidstack-C-yd_bAJ.js';
+import { useMediaContext } from './vidstack-tt3O1zL6.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-Oq65llxr.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/prod/chunks/vidstack-KShKSmYu.js

@@ -0,0 +1,66 @@
+import { isNull, isString, deferredPromise, isBoolean } from './vidstack-BNpgCJJ1.js';
+import { isAudioSrc, isVideoSrc } from './vidstack-wTTCvdqe.js';
+
+function appendParamsToURL(baseUrl, params) {
+  const url = new URL(baseUrl);
+  for (const key of Object.keys(params)) {
+    url.searchParams.set(key, params[key] + "");
+  }
+  return url.toString();
+}
+function preconnect(url, rel = "preconnect") {
+  const exists = document.querySelector(`link[href="${url}"]`);
+  if (!isNull(exists)) return true;
+  const link = document.createElement("link");
+  link.rel = rel;
+  link.href = url;
+  link.crossOrigin = "true";
+  document.head.append(link);
+  return true;
+}
+const pendingRequests = {};
+function loadScript(src) {
+  if (pendingRequests[src]) return pendingRequests[src].promise;
+  const promise = deferredPromise(), exists = document.querySelector(`script[src="${src}"]`);
+  if (!isNull(exists)) {
+    promise.resolve();
+    return promise.promise;
+  }
+  pendingRequests[src] = promise;
+  const script = document.createElement("script");
+  script.src = src;
+  script.onload = () => {
+    promise.resolve();
+    delete pendingRequests[src];
+  };
+  script.onerror = () => {
+    promise.reject();
+    delete pendingRequests[src];
+  };
+  setTimeout(() => document.head.append(script), 0);
+  return promise.promise;
+}
+function getRequestCredentials(crossOrigin) {
+  return crossOrigin === "use-credentials" ? "include" : isString(crossOrigin) ? "same-origin" : void 0;
+}
+function getDownloadFile({
+  title,
+  src,
+  download
+}) {
+  const url = isBoolean(download) || download === "" ? src.src : isString(download) ? download : download?.url;
+  if (!isValidFileDownload({ url, src, download })) return null;
+  return {
+    url,
+    name: !isBoolean(download) && !isString(download) && download?.filename || title.toLowerCase() || "media"
+  };
+}
+function isValidFileDownload({
+  url,
+  src,
+  download
+}) {
+  return isString(url) && (download && download !== true || isAudioSrc(src) || isVideoSrc(src));
+}
+
+export { appendParamsToURL, getDownloadFile, getRequestCredentials, loadScript, preconnect };