@hanifhan1f/vidstack 1.12.13 → 1.12.18

package/server/chunks/vidstack-P_QDjYIl.js

@@ -0,0 +1,56 @@
+import { Icon$32, 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$24, Icon$74, Icon$31, Icon$5 } from './vidstack-B8LynzY5.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$35,
+  "seek-backward": Icon$34,
+  "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,
+  "menu-episodes": Icon$32
+};
+
+export { icons };

package/server/chunks/vidstack-f5-aflD2.js

@@ -0,0 +1,104 @@
+import { Host, effect, computed, setAttribute } from './vidstack-B8LynzY5.js';
+import { MediaProvider, MediaPlayer } from './vidstack-Cv_Art04.js';
+import { useMediaContext } from './vidstack-B4CWj0Hp.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-DsnTqzpL.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/server/chunks/vidstack-krOAtKMi.js

@@ -0,0 +1,32 @@
+const videoIdRE = /(?:https:\/\/)?(?:player\.)?vimeo(?:\.com)?\/(?:video\/)?(\d+)(?:(?:\?hash=|\?h=|\/)(.*))?/;
+const infoCache = /* @__PURE__ */ new Map();
+const pendingFetch = /* @__PURE__ */ new Map();
+function resolveVimeoVideoId(src) {
+  const matches = src.match(videoIdRE);
+  return { videoId: matches?.[1], hash: matches?.[2] };
+}
+async function getVimeoVideoInfo(videoId, abort, videoHash) {
+  if (infoCache.has(videoId)) return infoCache.get(videoId);
+  if (pendingFetch.has(videoId)) return pendingFetch.get(videoId);
+  let oembedSrc = `https://vimeo.com/api/oembed.json?url=https://player.vimeo.com/video/${videoId}`;
+  if (videoHash) {
+    oembedSrc = oembedSrc.concat(`?h=${videoHash}`);
+  }
+  const promise = window.fetch(oembedSrc, {
+    mode: "cors",
+    signal: abort.signal
+  }).then((response) => response.json()).then((data) => {
+    const thumnailRegex = /vimeocdn.com\/video\/(.*)?_/, thumbnailId = data?.thumbnail_url?.match(thumnailRegex)?.[1], poster = thumbnailId ? `https://i.vimeocdn.com/video/${thumbnailId}_1920x1080.webp` : "", info = {
+      title: data?.title ?? "",
+      duration: data?.duration ?? 0,
+      poster,
+      pro: data.account_type !== "basic"
+    };
+    infoCache.set(videoId, info);
+    return info;
+  }).finally(() => pendingFetch.delete(videoId));
+  pendingFetch.set(videoId, promise);
+  return promise;
+}
+
+export { getVimeoVideoInfo, resolveVimeoVideoId };

package/server/define/plyr-layout.js

@@ -0,0 +1,16 @@
+import '../chunks/vidstack-DnkB7eGO.js';
+import '../chunks/vidstack-FHGkN5xj.js';
+import '../chunks/vidstack-BGmwlunt.js';
+import '../chunks/vidstack-B8LynzY5.js';
+import '../chunks/vidstack-B4CWj0Hp.js';
+import '@floating-ui/dom';
+import 'lit-html';
+import '../chunks/vidstack-DbvCOsqU.js';
+import '../chunks/vidstack-CdBfecZT.js';
+import 'lit-html/directives/if-defined.js';
+import 'lit-html/directives/unsafe-svg.js';
+import 'lit-html/async-directive.js';
+import '../chunks/vidstack-CwTj4H1w.js';
+import 'lit-html/directives/unsafe-html.js';
+import '../chunks/vidstack-BOTZD4tC.js';
+import '../chunks/vidstack-C19bj3Wq.js';

package/server/define/vidstack-icons.js

@@ -0,0 +1 @@
+import 'media-icons/element';

package/server/define/vidstack-player-default-layout.js

@@ -0,0 +1,13 @@
+import '../chunks/vidstack-DE4b5Bgx.js';
+import '../chunks/vidstack-B8LynzY5.js';
+import '../chunks/vidstack-B4CWj0Hp.js';
+import '@floating-ui/dom';
+import '../chunks/vidstack-CdBfecZT.js';
+import 'lit-html';
+import 'lit-html/directives/if-defined.js';
+import 'lit-html/directives/unsafe-svg.js';
+import 'lit-html/async-directive.js';
+import '../chunks/vidstack-CwTj4H1w.js';
+import 'lit-html/directives/ref.js';
+import 'lit-html/directives/keyed.js';
+import '../chunks/vidstack-BOTZD4tC.js';

package/server/define/vidstack-player-layouts.js

@@ -0,0 +1,16 @@
+import '../chunks/vidstack-DE4b5Bgx.js';
+import '../chunks/vidstack-FHGkN5xj.js';
+import '../chunks/vidstack-B8LynzY5.js';
+import '../chunks/vidstack-B4CWj0Hp.js';
+import '@floating-ui/dom';
+import '../chunks/vidstack-CdBfecZT.js';
+import 'lit-html';
+import 'lit-html/directives/if-defined.js';
+import 'lit-html/directives/unsafe-svg.js';
+import 'lit-html/async-directive.js';
+import '../chunks/vidstack-CwTj4H1w.js';
+import 'lit-html/directives/ref.js';
+import 'lit-html/directives/keyed.js';
+import '../chunks/vidstack-BOTZD4tC.js';
+import '../chunks/vidstack-DbvCOsqU.js';
+import 'lit-html/directives/unsafe-html.js';

package/server/define/vidstack-player-ui.js

@@ -0,0 +1,11 @@
+import '../chunks/vidstack-CFTkUXGK.js';
+import '../chunks/vidstack-DnkB7eGO.js';
+import '../chunks/vidstack-BGmwlunt.js';
+import '../chunks/vidstack-B8LynzY5.js';
+import '../chunks/vidstack-CQMB7Msg.js';
+import '../chunks/vidstack-B4CWj0Hp.js';
+import '@floating-ui/dom';
+import '../chunks/vidstack-C19bj3Wq.js';
+import '../chunks/vidstack-BOTZD4tC.js';
+import 'lit-html';
+import '../chunks/vidstack-CwTj4H1w.js';

package/server/define/vidstack-player.js

@@ -0,0 +1,6 @@
+import '../chunks/vidstack-f5-aflD2.js';
+import '../chunks/vidstack-B8LynzY5.js';
+import '../chunks/vidstack-Cv_Art04.js';
+import '../chunks/vidstack-B4CWj0Hp.js';
+import '@floating-ui/dom';
+import '../chunks/vidstack-C19bj3Wq.js';

package/server/global/plyr.js

@@ -0,0 +1,322 @@
+import '../chunks/vidstack-f5-aflD2.js';
+import '../chunks/vidstack-DnkB7eGO.js';
+import '../chunks/vidstack-FHGkN5xj.js';
+import '../chunks/vidstack-BGmwlunt.js';
+import { isString, setStyle, createDisposalBin, isBoolean, DOMEvent } from '../chunks/vidstack-B8LynzY5.js';
+import { mediaState, canPlayVideoType } from '../chunks/vidstack-Cv_Art04.js';
+import '@floating-ui/dom';
+import '../chunks/vidstack-B4CWj0Hp.js';
+import 'lit-html';
+import '../chunks/vidstack-DbvCOsqU.js';
+import '../chunks/vidstack-CdBfecZT.js';
+import 'lit-html/directives/if-defined.js';
+import 'lit-html/directives/unsafe-svg.js';
+import 'lit-html/async-directive.js';
+import '../chunks/vidstack-CwTj4H1w.js';
+import 'lit-html/directives/unsafe-html.js';
+import '../chunks/vidstack-BOTZD4tC.js';
+import '../chunks/vidstack-C19bj3Wq.js';
+
+let activePlyr = null, defaults = mediaState.record, eventMap = {
+  ratechange: "rate-change",
+  ready: "can-play",
+  timeupdate: "time-update",
+  volumechange: "volume-change"
+};
+class Plyr {
+  constructor(target, config = {}) {
+    this.target = target;
+    this.config = config;
+    {
+      throw Error("[plyr] can not create player on server.");
+    }
+  }
+  static setup(targets, config) {
+    if (isString(targets)) {
+      targets = document.querySelectorAll(targets);
+    }
+    return [...targets].map((target) => new Plyr(target, config));
+  }
+  static supported(type, provider) {
+    return true;
+  }
+  player;
+  provider;
+  layout;
+  fullscreen = new PlyrFullscreenAdapter(this);
+  // These are only included for type defs, props are defined in constructor.
+  playing = defaults.playing;
+  paused = defaults.paused;
+  ended = defaults.ended;
+  currentTime = defaults.currentTime;
+  seeking = defaults.seeking;
+  duration = defaults.duration;
+  volume = defaults.volume;
+  muted = defaults.muted;
+  loop = defaults.loop;
+  poster = defaults.poster;
+  get type() {
+    return this.player.provider?.type ?? "";
+  }
+  get isHTML5() {
+    return /audio|video|hls/.test(this.type);
+  }
+  get isEmbed() {
+    return /youtube|vimeo/.test(this.type);
+  }
+  get buffered() {
+    const { bufferedEnd, seekableEnd } = this.player.state;
+    return seekableEnd > 0 ? bufferedEnd / seekableEnd : 0;
+  }
+  get stopped() {
+    return this.paused && this.currentTime === 0;
+  }
+  get hasAudio() {
+    if (!this.isHTML5) return true;
+    const media = this.player.provider.media;
+    return Boolean(
+      media.mozHasAudio || media.webkitAudioDecodedByteCount || media.audioTracks?.length || this.player.audioTracks.length
+    );
+  }
+  get speed() {
+    return this.player.playbackRate;
+  }
+  set speed(speed) {
+    this.player.remoteControl.changePlaybackRate(speed);
+  }
+  get currentTrack() {
+    return this.player.textTracks.selectedIndex;
+  }
+  set currentTrack(index) {
+    this.player.remoteControl.changeTextTrackMode(index, "showing");
+  }
+  get pip() {
+    return this.player.state.pictureInPicture;
+  }
+  set pip(isActive) {
+    if (isActive) this.player.enterPictureInPicture();
+    else this.player.exitPictureInPicture();
+  }
+  get quality() {
+    return this.player.state.quality?.height ?? null;
+  }
+  set quality(value) {
+    let qualities = this.player.qualities, index = -1;
+    if (value !== null) {
+      let minScore = Infinity;
+      for (let i = 0; i < qualities.length; i++) {
+        const score = Math.abs(qualities[i].height - value);
+        if (score < minScore) {
+          index = i;
+          minScore = score;
+        }
+      }
+    }
+    this.player.remoteControl.changeQuality(index);
+  }
+  #source = null;
+  get source() {
+    return this.#source;
+  }
+  set source(source) {
+    const {
+      type: viewType = "video",
+      sources = "",
+      title = "",
+      poster = "",
+      thumbnails = "",
+      tracks = []
+    } = source ?? {};
+    this.player.src = sources;
+    this.player.viewType = viewType;
+    this.player.title = title;
+    this.player.poster = poster;
+    this.layout.thumbnails = thumbnails;
+    this.player.textTracks.clear();
+    for (const track of tracks) this.player.textTracks.add(track);
+    this.#source = source;
+  }
+  #ratio = null;
+  get ratio() {
+    return this.#ratio;
+  }
+  set ratio(ratio) {
+    if (ratio) ratio = ratio.replace(/\s*:\s*/, " / ");
+    setStyle(this.player, "aspect-ratio", ratio ?? "unset");
+    this.#ratio = ratio;
+  }
+  get download() {
+    return this.layout.download;
+  }
+  set download(download) {
+    this.layout.download = download;
+  }
+  #disposal = createDisposalBin();
+  #onPlay() {
+    if (activePlyr !== this) activePlyr?.pause();
+    activePlyr = this;
+  }
+  #onReset() {
+    this.currentTime = 0;
+    this.paused = true;
+  }
+  play() {
+    return this.player.play();
+  }
+  pause() {
+    return this.player.pause();
+  }
+  togglePlay(toggle = this.paused) {
+    if (toggle) {
+      return this.player.play();
+    } else {
+      return this.player.pause();
+    }
+  }
+  toggleCaptions(toggle = !this.player.textTracks.selected) {
+    const controller = this.player.remoteControl;
+    if (toggle) {
+      controller.showCaptions();
+    } else {
+      controller.disableCaptions();
+    }
+  }
+  toggleControls(toggle = !this.player.controls.showing) {
+    const controls = this.player.controls;
+    if (toggle) {
+      controls.show();
+    } else {
+      controls.hide();
+    }
+  }
+  restart() {
+    this.currentTime = 0;
+  }
+  stop() {
+    this.pause();
+    this.player.currentTime = 0;
+  }
+  forward(seekTime = this.config.seekTime ?? 10) {
+    this.currentTime += seekTime;
+  }
+  rewind(seekTime = this.config.seekTime ?? 10) {
+    this.currentTime -= seekTime;
+  }
+  increaseVolume(step = 5) {
+    this.volume += step;
+  }
+  decreaseVolume(step = 5) {
+    this.volume -= step;
+  }
+  airplay() {
+    return this.player.requestAirPlay();
+  }
+  on(type, callback) {
+    this.#listen(type, callback);
+  }
+  once(type, callback) {
+    this.#listen(type, callback, { once: true });
+  }
+  off(type, callback) {
+    this.#listen(type, callback, { remove: true });
+  }
+  #listeners = [];
+  #listen(type, callback, options = {}) {
+    let eventType = type, toggle = null;
+    switch (type) {
+      case "captionsenabled":
+      case "captionsdisabled":
+        eventType = "text-track-change";
+        toggle = type === "captionsenabled";
+        break;
+      case "controlsshown":
+      case "controlshidden":
+        eventType = "controls-change";
+        toggle = type === "controlsshown";
+        break;
+      case "enterfullscreen":
+      case "exitfullscreen":
+        eventType = "fullscreen-change";
+        toggle = type === "enterfullscreen";
+        break;
+    }
+    const mappedEventType = eventMap[eventType] ?? eventType;
+    const listener = (event) => {
+      if (isBoolean(toggle) && !!event.detail !== toggle) return;
+      if (mappedEventType !== type) {
+        callback(new DOMEvent(type, { ...event, trigger: event }));
+        return;
+      }
+      callback(event);
+    };
+    if (options.remove) {
+      let index = -1;
+      do {
+        index = this.#listeners.findIndex((t) => t.type === type && t.callback === callback);
+        if (index >= 0) {
+          const { listener: listener2 } = this.#listeners[index];
+          this.player.removeEventListener(mappedEventType, listener2);
+          this.#listeners.splice(index, 1);
+        }
+      } while (index >= 0);
+    } else {
+      this.#listeners.push({ type, callback, listener });
+      this.player.addEventListener(mappedEventType, listener, { once: options.once });
+    }
+  }
+  supports(type) {
+    return !!type && canPlayVideoType();
+  }
+  destroy() {
+    for (const { type, listener } of this.#listeners) {
+      this.player.removeEventListener(eventMap[type] ?? type, listener);
+    }
+    this.#source = null;
+    this.#listeners.length = 0;
+    if (activePlyr === this) activePlyr = null;
+    this.#disposal.empty();
+    this.player.destroy();
+  }
+}
+class PlyrFullscreenAdapter {
+  #plyr;
+  constructor(plyr) {
+    this.#plyr = plyr;
+  }
+  get #player() {
+    return this.#plyr.player;
+  }
+  /**
+   * 	Returns a boolean indicating if the current player has fullscreen enabled.
+   */
+  get enabled() {
+    return this.#player.state.canFullscreen;
+  }
+  /**
+   * Returns a boolean indicating if the current player is in fullscreen mode.
+   */
+  get active() {
+    return this.#player.state.fullscreen;
+  }
+  /**
+   * Request to enter fullscreen.
+   */
+  enter() {
+    return this.#player.requestFullscreen();
+  }
+  /**
+   * Request to exit fullscreen.
+   */
+  exit() {
+    return this.#player.exitFullscreen();
+  }
+  /**
+   * Request to toggle fullscreen.
+   */
+  toggle() {
+    if (this.active) return this.exit();
+    else return this.enter();
+  }
+}
+
+export { Plyr, PlyrFullscreenAdapter };

package/server/global/vidstack-player.js

@@ -0,0 +1,58 @@
+import '../chunks/vidstack-f5-aflD2.js';
+import '@floating-ui/dom';
+import '../chunks/vidstack-B8LynzY5.js';
+import '../chunks/vidstack-Cv_Art04.js';
+import '../chunks/vidstack-B4CWj0Hp.js';
+import '../chunks/vidstack-C19bj3Wq.js';
+
+class VidstackPlayerLayout {
+  constructor(props) {
+    this.props = props;
+  }
+  name = "vidstack";
+  async load() {
+    await import('../define/vidstack-player-default-layout.js');
+    await import('../define/vidstack-player-ui.js');
+  }
+  create() {
+    const layouts = [
+      document.createElement("media-audio-layout"),
+      document.createElement("media-video-layout")
+    ];
+    if (this.props) {
+      for (const [prop, value] of Object.entries(this.props)) {
+        for (const el of layouts) el[prop] = value;
+      }
+    }
+    return layouts;
+  }
+}
+
+class PlyrLayout {
+  constructor(props) {
+    this.props = props;
+  }
+  name = "plyr";
+  async load() {
+    await import('../define/plyr-layout.js');
+  }
+  create() {
+    const layout = document.createElement("media-plyr-layout");
+    if (this.props) {
+      for (const [prop, value] of Object.entries(this.props)) {
+        layout[prop] = value;
+      }
+    }
+    return [layout];
+  }
+}
+
+class VidstackPlayer {
+  static async create({ target, layout, tracks, ...props }) {
+    {
+      throw Error("[vidstack] can not create player on server.");
+    }
+  }
+}
+
+export { PlyrLayout, VidstackPlayer, VidstackPlayerLayout };