@hanifhan1f/vidstack-react 1.12.30 → 1.12.31

package/dev/chunks/vidstack-3rdEWplD.js

@@ -0,0 +1,189 @@
+"use client"
+
+import * as React from 'react';
+import { RadioGroupController, useMediaContext, menuContext, MediaRemoteControl, MediaPlayerInstance, sortVideoQualities } from './vidstack-C5tZAkKo.js';
+import { useMediaContext as useMediaContext$1 } from './vidstack-oOGofWSl.js';
+import { prop, method, Component, hasProvidedContext, useContext, effect, useSignal, isString } from './vidstack-D_bWd66h.js';
+
+const DEFAULT_PLAYBACK_RATES = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+class SpeedRadioGroup extends Component {
+  static props = {
+    normalLabel: "Normal",
+    rates: DEFAULT_PLAYBACK_RATES
+  };
+  #media;
+  #menu;
+  #controller;
+  get value() {
+    return this.#controller.value;
+  }
+  get disabled() {
+    const { rates } = this.$props, { canSetPlaybackRate } = this.#media.$state;
+    return !canSetPlaybackRate() || rates().length === 0;
+  }
+  constructor() {
+    super();
+    this.#controller = new RadioGroupController();
+    this.#controller.onValueChange = this.#onValueChange.bind(this);
+  }
+  onSetup() {
+    this.#media = useMediaContext();
+    if (hasProvidedContext(menuContext)) {
+      this.#menu = useContext(menuContext);
+    }
+  }
+  onConnect(el) {
+    effect(this.#watchValue.bind(this));
+    effect(this.#watchHintText.bind(this));
+    effect(this.#watchControllerDisabled.bind(this));
+  }
+  getOptions() {
+    const { rates, normalLabel } = this.$props;
+    return rates().map((rate) => ({
+      label: rate === 1 ? normalLabel : rate + "\xD7",
+      value: rate.toString()
+    }));
+  }
+  #watchValue() {
+    this.#controller.value = this.#getValue();
+  }
+  #watchHintText() {
+    const { normalLabel } = this.$props, { playbackRate } = this.#media.$state, rate = playbackRate();
+    this.#menu?.hint.set(rate === 1 ? normalLabel() : rate + "\xD7");
+  }
+  #watchControllerDisabled() {
+    this.#menu?.disable(this.disabled);
+  }
+  #getValue() {
+    const { playbackRate } = this.#media.$state;
+    return playbackRate().toString();
+  }
+  #onValueChange(value, trigger) {
+    if (this.disabled) return;
+    const rate = +value;
+    this.#media.remote.changePlaybackRate(rate, trigger);
+    this.dispatch("change", { detail: rate, trigger });
+  }
+}
+const speedradiogroup__proto = SpeedRadioGroup.prototype;
+prop(speedradiogroup__proto, "value");
+prop(speedradiogroup__proto, "disabled");
+method(speedradiogroup__proto, "getOptions");
+
+function useMediaRemote(target) {
+  const media = useMediaContext$1(), remote = React.useRef(null);
+  if (!remote.current) {
+    remote.current = new MediaRemoteControl();
+  }
+  React.useEffect(() => {
+    const ref = target && "current" in target ? target.current : target, isPlayerRef = ref instanceof MediaPlayerInstance, player = isPlayerRef ? ref : media?.player;
+    remote.current.setPlayer(player ?? null);
+    remote.current.setTarget(ref ?? null);
+  }, [media, target && "current" in target ? target.current : target]);
+  return remote.current;
+}
+
+function useVideoQualityOptions({
+  auto = true,
+  sort = "descending"
+} = {}) {
+  const media = useMediaContext$1(), { qualities, quality, autoQuality, canSetQuality } = media.$state, $qualities = useSignal(qualities);
+  useSignal(quality);
+  useSignal(autoQuality);
+  useSignal(canSetQuality);
+  return React.useMemo(() => {
+    const sortedQualities = sortVideoQualities($qualities, sort === "descending"), options = sortedQualities.map((q) => {
+      return {
+        quality: q,
+        label: q.height + "p",
+        value: getQualityValue(q),
+        bitrateText: q.bitrate && q.bitrate > 0 ? `${(q.bitrate / 1e6).toFixed(2)} Mbps` : null,
+        get selected() {
+          return q === quality();
+        },
+        get autoSelected() {
+          return autoQuality();
+        },
+        select(trigger) {
+          const index = qualities().indexOf(q);
+          if (index >= 0) media.remote.changeQuality(index, trigger);
+        }
+      };
+    });
+    if (auto) {
+      options.unshift({
+        quality: null,
+        label: isString(auto) ? auto : "Auto",
+        value: "auto",
+        bitrateText: null,
+        get selected() {
+          return autoQuality();
+        },
+        get autoSelected() {
+          return autoQuality();
+        },
+        select(trigger) {
+          media.remote.requestAutoQuality(trigger);
+        }
+      });
+    }
+    Object.defineProperty(options, "disabled", {
+      get() {
+        return !canSetQuality() || $qualities.length <= 1;
+      }
+    });
+    Object.defineProperty(options, "selectedQuality", {
+      get() {
+        return quality();
+      }
+    });
+    Object.defineProperty(options, "selectedValue", {
+      get() {
+        const $quality = quality();
+        return !autoQuality() && $quality ? getQualityValue($quality) : "auto";
+      }
+    });
+    return options;
+  }, [$qualities, sort]);
+}
+function getQualityValue(quality) {
+  return quality.height + "_" + quality.bitrate;
+}
+
+function usePlaybackRateOptions({
+  rates = DEFAULT_PLAYBACK_RATES,
+  normalLabel = "Normal"
+} = {}) {
+  const media = useMediaContext$1(), { playbackRate, canSetPlaybackRate } = media.$state;
+  useSignal(playbackRate);
+  useSignal(canSetPlaybackRate);
+  return React.useMemo(() => {
+    const options = rates.map((opt) => {
+      const label = typeof opt === "number" ? opt === 1 && normalLabel ? normalLabel : opt + "x" : opt.label, rate = typeof opt === "number" ? opt : opt.rate;
+      return {
+        label,
+        value: rate.toString(),
+        rate,
+        get selected() {
+          return playbackRate() === rate;
+        },
+        select(trigger) {
+          media.remote.changePlaybackRate(rate, trigger);
+        }
+      };
+    });
+    Object.defineProperty(options, "disabled", {
+      get() {
+        return !canSetPlaybackRate() || !options.length;
+      }
+    });
+    Object.defineProperty(options, "selectedValue", {
+      get() {
+        return playbackRate().toString();
+      }
+    });
+    return options;
+  }, [rates]);
+}
+
+export { DEFAULT_PLAYBACK_RATES, useMediaRemote, usePlaybackRateOptions, useVideoQualityOptions };

package/dev/chunks/vidstack-BRTBRJ_I.js

@@ -0,0 +1,288 @@
+"use client"
+
+import { createScope, signal, effect, isString, deferredPromise, isObject, isNumber, isBoolean } from './vidstack-D_bWd66h.js';
+import { preconnect, TimeRange } from './vidstack-C5tZAkKo.js';
+import { EmbedProvider } from './vidstack-C56TjAKZ.js';
+import { resolveYouTubeVideoId } from './vidstack-Dm1xEU9Q.js';
+import 'react';
+import '@floating-ui/dom';
+
+const YouTubePlayerState = {
+  Ended: 0,
+  Playing: 1,
+  Paused: 2,
+  Buffering: 3,
+  Cued: 5
+};
+
+class YouTubeProvider extends EmbedProvider {
+  $$PROVIDER_TYPE = "YOUTUBE";
+  scope = createScope();
+  #ctx;
+  #videoId = signal("");
+  #state = -1;
+  #currentSrc = null;
+  #seekingTimer = -1;
+  #invalidPlay = false;
+  #promises = /* @__PURE__ */ new Map();
+  constructor(iframe, ctx) {
+    super(iframe);
+    this.#ctx = ctx;
+  }
+  /**
+   * Sets the player's interface language. The parameter value is an ISO 639-1 two-letter
+   * language code or a fully specified locale. For example, fr and fr-ca are both valid values.
+   * Other language input codes, such as IETF language tags (BCP 47) might also be handled properly.
+   *
+   * The interface language is used for tooltips in the player and also affects the default caption
+   * track. Note that YouTube might select a different caption track language for a particular
+   * user based on the user's individual language preferences and the availability of caption tracks.
+   *
+   * @defaultValue 'en'
+   */
+  language = "en";
+  color = "red";
+  /**
+   * Whether cookies should be enabled on the embed. This is turned off by default to be
+   * GDPR-compliant.
+   *
+   * @defaultValue `false`
+   */
+  cookies = false;
+  get currentSrc() {
+    return this.#currentSrc;
+  }
+  get type() {
+    return "youtube";
+  }
+  get videoId() {
+    return this.#videoId();
+  }
+  preconnect() {
+    preconnect(this.getOrigin());
+  }
+  setup() {
+    super.setup();
+    effect(this.#watchVideoId.bind(this));
+    this.#ctx.notify("provider-setup", this);
+  }
+  destroy() {
+    this.#reset();
+    const message = "provider destroyed";
+    for (const promises of this.#promises.values()) {
+      for (const { reject } of promises) reject(message);
+    }
+    this.#promises.clear();
+  }
+  async play() {
+    return this.#remote("playVideo");
+  }
+  #playFail(message) {
+    this.#getPromise("playVideo")?.reject(message);
+  }
+  async pause() {
+    return this.#remote("pauseVideo");
+  }
+  #pauseFail(message) {
+    this.#getPromise("pauseVideo")?.reject(message);
+  }
+  setMuted(muted) {
+    if (muted) this.#remote("mute");
+    else this.#remote("unMute");
+  }
+  setCurrentTime(time) {
+    this.#remote("seekTo", [time, true]);
+    this.#ctx.notify("seeking", time);
+  }
+  setVolume(volume) {
+    this.#remote("setVolume", volume * 100);
+  }
+  setPlaybackRate(rate) {
+    this.#remote("setPlaybackRate", rate);
+  }
+  async loadSource(src) {
+    if (!isString(src.src)) {
+      this.#currentSrc = null;
+      this.#videoId.set("");
+      return;
+    }
+    const videoId = resolveYouTubeVideoId(src.src);
+    this.#videoId.set(videoId ?? "");
+    this.#currentSrc = src;
+  }
+  getOrigin() {
+    return !this.cookies ? "https://www.youtube-nocookie.com" : "https://www.youtube.com";
+  }
+  #watchVideoId() {
+    this.#reset();
+    const videoId = this.#videoId();
+    if (!videoId) {
+      this.src.set("");
+      return;
+    }
+    this.src.set(`${this.getOrigin()}/embed/${videoId}`);
+    this.#ctx.notify("load-start");
+  }
+  buildParams() {
+    const { keyDisabled } = this.#ctx.$props, { muted, playsInline, nativeControls } = this.#ctx.$state, showControls = nativeControls();
+    return {
+      rel: 0,
+      autoplay: 0,
+      cc_lang_pref: this.language,
+      cc_load_policy: showControls ? 1 : void 0,
+      color: this.color,
+      controls: showControls ? 1 : 0,
+      disablekb: !showControls || keyDisabled() ? 1 : 0,
+      enablejsapi: 1,
+      fs: 1,
+      hl: this.language,
+      iv_load_policy: showControls ? 1 : 3,
+      mute: muted() ? 1 : 0,
+      playsinline: playsInline() ? 1 : 0
+    };
+  }
+  #remote(command, arg) {
+    let promise = deferredPromise(), promises = this.#promises.get(command);
+    if (!promises) this.#promises.set(command, promises = []);
+    promises.push(promise);
+    const args = Array.isArray(arg) ? arg : arg ? [arg] : void 0;
+    this.postMessage({
+      event: "command",
+      func: command,
+      args
+    });
+    return promise.promise;
+  }
+  onLoad() {
+    window.setTimeout(() => this.postMessage({ event: "listening" }), 100);
+  }
+  #onReady(trigger) {
+    this.#ctx.notify("loaded-metadata");
+    this.#ctx.notify("loaded-data");
+    this.#ctx.delegate.ready(void 0, trigger);
+  }
+  #onPause(trigger) {
+    this.#getPromise("pauseVideo")?.resolve();
+    this.#ctx.notify("pause", void 0, trigger);
+  }
+  #onTimeUpdate(time, trigger) {
+    const { duration, realCurrentTime } = this.#ctx.$state, hasEnded = this.#state === YouTubePlayerState.Ended, boundTime = hasEnded ? duration() : time;
+    this.#ctx.notify("time-change", boundTime, trigger);
+    if (!hasEnded && Math.abs(boundTime - realCurrentTime()) > 1) {
+      this.#ctx.notify("seeking", boundTime, trigger);
+    }
+  }
+  #onProgress(buffered, seekable, trigger) {
+    const detail = {
+      buffered: new TimeRange(0, buffered),
+      seekable
+    };
+    this.#ctx.notify("progress", detail, trigger);
+    const { seeking, realCurrentTime } = this.#ctx.$state;
+    if (seeking() && buffered > realCurrentTime()) {
+      this.#onSeeked(trigger);
+    }
+  }
+  #onSeeked(trigger) {
+    const { paused, realCurrentTime } = this.#ctx.$state;
+    window.clearTimeout(this.#seekingTimer);
+    this.#seekingTimer = window.setTimeout(
+      () => {
+        this.#ctx.notify("seeked", realCurrentTime(), trigger);
+        this.#seekingTimer = -1;
+      },
+      paused() ? 100 : 0
+    );
+  }
+  #onEnded(trigger) {
+    const { seeking } = this.#ctx.$state;
+    if (seeking()) this.#onSeeked(trigger);
+    this.#ctx.notify("pause", void 0, trigger);
+    this.#ctx.notify("end", void 0, trigger);
+  }
+  #onStateChange(state, trigger) {
+    const { paused, seeking } = this.#ctx.$state, isPlaying = state === YouTubePlayerState.Playing, isBuffering = state === YouTubePlayerState.Buffering, isPendingPlay = this.#isPending("playVideo"), isPlay = paused() && (isBuffering || isPlaying);
+    if (isBuffering) this.#ctx.notify("waiting", void 0, trigger);
+    if (seeking() && isPlaying) {
+      this.#onSeeked(trigger);
+    }
+    if (this.#invalidPlay && isPlaying) {
+      this.pause();
+      this.#invalidPlay = false;
+      this.setMuted(this.#ctx.$state.muted());
+      return;
+    }
+    if (!isPendingPlay && isPlay) {
+      this.#invalidPlay = true;
+      this.setMuted(true);
+      return;
+    }
+    if (isPlay) {
+      this.#getPromise("playVideo")?.resolve();
+      this.#ctx.notify("play", void 0, trigger);
+    }
+    switch (state) {
+      case YouTubePlayerState.Cued:
+        this.#onReady(trigger);
+        break;
+      case YouTubePlayerState.Playing:
+        this.#ctx.notify("playing", void 0, trigger);
+        break;
+      case YouTubePlayerState.Paused:
+        this.#onPause(trigger);
+        break;
+      case YouTubePlayerState.Ended:
+        this.#onEnded(trigger);
+        break;
+    }
+    this.#state = state;
+  }
+  onMessage({ info }, event) {
+    if (!info) return;
+    const { title, intrinsicDuration, playbackRate } = this.#ctx.$state;
+    if (isObject(info.videoData) && info.videoData.title !== title()) {
+      this.#ctx.notify("title-change", info.videoData.title, event);
+    }
+    if (isNumber(info.duration) && info.duration !== intrinsicDuration()) {
+      if (isNumber(info.videoLoadedFraction)) {
+        const buffered = info.progressState?.loaded ?? info.videoLoadedFraction * info.duration, seekable = new TimeRange(0, info.duration);
+        this.#onProgress(buffered, seekable, event);
+      }
+      this.#ctx.notify("duration-change", info.duration, event);
+    }
+    if (isNumber(info.playbackRate) && info.playbackRate !== playbackRate()) {
+      this.#ctx.notify("rate-change", info.playbackRate, event);
+    }
+    if (info.progressState) {
+      const { current, seekableStart, seekableEnd, loaded, duration } = info.progressState;
+      this.#onTimeUpdate(current, event);
+      this.#onProgress(loaded, new TimeRange(seekableStart, seekableEnd), event);
+      if (duration !== intrinsicDuration()) {
+        this.#ctx.notify("duration-change", duration, event);
+      }
+    }
+    if (isNumber(info.volume) && isBoolean(info.muted) && !this.#invalidPlay) {
+      const detail = {
+        muted: info.muted,
+        volume: info.volume / 100
+      };
+      this.#ctx.notify("volume-change", detail, event);
+    }
+    if (isNumber(info.playerState) && info.playerState !== this.#state) {
+      this.#onStateChange(info.playerState, event);
+    }
+  }
+  #reset() {
+    this.#state = -1;
+    this.#seekingTimer = -1;
+    this.#invalidPlay = false;
+  }
+  #getPromise(command) {
+    return this.#promises.get(command)?.shift();
+  }
+  #isPending(command) {
+    return Boolean(this.#promises.get(command)?.length);
+  }
+}
+
+export { YouTubeProvider };

package/dev/chunks/vidstack-C56TjAKZ.js

@@ -0,0 +1,61 @@
+"use client"
+
+import { appendParamsToURL, IS_SERVER } from './vidstack-C5tZAkKo.js';
+import { signal, listenEvent, effect, peek, isString } from './vidstack-D_bWd66h.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) {
+    if (IS_SERVER) return;
+    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 };