@hanifhan1f/vidstack-react 1.12.26 → 1.12.31

package/dev/chunks/vidstack-Dnoefs4z.js

@@ -0,0 +1,180 @@
+"use client"
+
+import { IS_CHROME, IS_IOS, canGoogleCastSrc, IS_SERVER, loadScript } from './vidstack-C5tZAkKo.js';
+import { listenEvent, peek } from './vidstack-D_bWd66h.js';
+
+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 getCastSessionMedia() {
+  return getCastSession()?.getSessionObj().media[0];
+}
+function hasActiveCastSession(src) {
+  const contentId = getCastSessionMedia()?.media.contentId;
+  return contentId === src?.src;
+}
+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}`;
+  {
+    switch (code) {
+      case chrome.cast.ErrorCode.API_NOT_INITIALIZED:
+        return "The API is not initialized.";
+      case chrome.cast.ErrorCode.CANCEL:
+        return "The operation was canceled by the user";
+      case chrome.cast.ErrorCode.CHANNEL_ERROR:
+        return "A channel to the receiver is not available.";
+      case chrome.cast.ErrorCode.EXTENSION_MISSING:
+        return "The Cast extension is not available.";
+      case chrome.cast.ErrorCode.INVALID_PARAMETER:
+        return "The parameters to the operation were not valid.";
+      case chrome.cast.ErrorCode.RECEIVER_UNAVAILABLE:
+        return "No receiver was compatible with the session request.";
+      case chrome.cast.ErrorCode.SESSION_ERROR:
+        return "A session could not be created, or a session was invalid.";
+      case chrome.cast.ErrorCode.TIMEOUT:
+        return "The operation timed out.";
+      default:
+        return defaultMessage;
+    }
+  }
+}
+function listenCastContextEvent(type, handler) {
+  return listenEvent(getCastContext(), type, handler);
+}
+
+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 && !IS_IOS && canGoogleCastSrc(src);
+  }
+  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) {
+    if (IS_SERVER) {
+      throw Error("[vidstack] can not load google cast provider server-side");
+    }
+    if (!this.#player) {
+      throw Error("[vidstack] google cast player was not initialized");
+    }
+    return new (await import('./vidstack-CaaASbOf.js')).GoogleCastProvider(this.#player, ctx);
+  }
+  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;
+  }
+}
+
+var loader = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  GoogleCastLoader: GoogleCastLoader
+});
+
+export { getCastContext, getCastErrorMessage, getCastSession, getCastSessionMedia, hasActiveCastSession, listenCastContextEvent, loader };

package/dev/chunks/vidstack-DqaqkU4T.js

@@ -0,0 +1,9 @@
+"use client"
+
+import { signal } from './vidstack-BalWqr4j.js';
+
+const RemotionThumbnail = /* @__PURE__ */ signal(null);
+const RemotionSliderThumbnail = /* @__PURE__ */ signal(null);
+const RemotionPoster = /* @__PURE__ */ signal(null);
+
+export { RemotionPoster, RemotionSliderThumbnail, RemotionThumbnail };

package/dev/chunks/vidstack-FuCbl228.js

@@ -0,0 +1,226 @@
+"use client"
+
+import * as React from 'react';
+import { composeRefs, useStateContext, useSignal, useSignalRecord } from './vidstack-BalWqr4j.js';
+import { MediaPlayer, MediaAnnouncer, MediaProvider, Controls, ControlsGroup, Tooltip, TooltipTrigger, TooltipContent, ToggleButton, AirPlayButton, GoogleCastButton, PlayButton, CaptionButton, FullscreenButton, MuteButton, PIPButton, SeekButton, LiveButton, Slider, SliderValue, SliderPreview, VolumeSlider, QualitySlider, AudioGainSlider, SpeedSlider, Thumbnail, TimeSlider, SliderChapters, SliderThumbnail, SliderVideo, RadioGroup, Radio, Menu, MenuButton, MenuItems, MenuItem, Gesture, Captions, Poster, Time, MenuPortal, sliderState, mediaState } from 'vidstack';
+
+class MediaPlayerInstance extends MediaPlayer {
+}
+class MediaProviderInstance extends MediaProvider {
+}
+class MediaAnnouncerInstance extends MediaAnnouncer {
+}
+class ControlsInstance extends Controls {
+}
+class ControlsGroupInstance extends ControlsGroup {
+}
+class ToggleButtonInstance extends ToggleButton {
+}
+class CaptionButtonInstance extends CaptionButton {
+}
+class FullscreenButtonInstance extends FullscreenButton {
+}
+class LiveButtonInstance extends LiveButton {
+}
+class MuteButtonInstance extends MuteButton {
+}
+class PIPButtonInstance extends PIPButton {
+}
+class PlayButtonInstance extends PlayButton {
+}
+class AirPlayButtonInstance extends AirPlayButton {
+}
+class GoogleCastButtonInstance extends GoogleCastButton {
+}
+class SeekButtonInstance extends SeekButton {
+}
+class TooltipInstance extends Tooltip {
+}
+class TooltipTriggerInstance extends TooltipTrigger {
+}
+class TooltipContentInstance extends TooltipContent {
+}
+class SliderInstance extends Slider {
+}
+class TimeSliderInstance extends TimeSlider {
+}
+class VolumeSliderInstance extends VolumeSlider {
+}
+class AudioGainSliderInstance extends AudioGainSlider {
+}
+class SpeedSliderInstance extends SpeedSlider {
+}
+class QualitySliderInstance extends QualitySlider {
+}
+class SliderThumbnailInstance extends SliderThumbnail {
+}
+class SliderValueInstance extends SliderValue {
+}
+class SliderVideoInstance extends SliderVideo {
+}
+class SliderPreviewInstance extends SliderPreview {
+}
+class SliderChaptersInstance extends SliderChapters {
+}
+class MenuInstance extends Menu {
+}
+class MenuButtonInstance extends MenuButton {
+}
+class MenuItemsInstance extends MenuItems {
+}
+class MenuItemInstance extends MenuItem {
+}
+class MenuPortalInstance extends MenuPortal {
+}
+class RadioGroupInstance extends RadioGroup {
+}
+class RadioInstance extends Radio {
+}
+class CaptionsInstance extends Captions {
+}
+class GestureInstance extends Gesture {
+}
+class PosterInstance extends Poster {
+}
+class ThumbnailInstance extends Thumbnail {
+}
+class TimeInstance extends Time {
+}
+
+const Slot = React.forwardRef((props, forwardedRef) => {
+  const { children, ...slotProps } = props;
+  const childrenArray = React.Children.toArray(children);
+  const slottable = childrenArray.find(isSlottable);
+  if (slottable) {
+    const newElement = slottable.props.children;
+    const newChildren = childrenArray.map((child) => {
+      if (child === slottable) {
+        if (React.Children.count(newElement) > 1) return React.Children.only(null);
+        return React.isValidElement(newElement) ? newElement.props.children : null;
+      } else {
+        return child;
+      }
+    });
+    return /* @__PURE__ */ React.createElement(SlotClone, { ...slotProps, ref: forwardedRef }, React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null);
+  }
+  return /* @__PURE__ */ React.createElement(SlotClone, { ...slotProps, ref: forwardedRef }, children);
+});
+Slot.displayName = "Slot";
+const SlotClone = React.forwardRef((props, forwardedRef) => {
+  const { children, ...slotProps } = props;
+  if (React.isValidElement(children)) {
+    return React.cloneElement(children, {
+      ...mergeProps(slotProps, children.props),
+      ref: forwardedRef ? composeRefs(forwardedRef, children.ref) : children.ref
+    });
+  }
+  return React.Children.count(children) > 1 ? React.Children.only(null) : null;
+});
+SlotClone.displayName = "SlotClone";
+const Slottable = ({ children }) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+};
+function isSlottable(child) {
+  return React.isValidElement(child) && child.type === Slottable;
+}
+function mergeProps(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          childPropValue(...args);
+          slotPropValue(...args);
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+
+const NODES = ["button", "div", "span", "img", "video", "audio"];
+const Primitive = NODES.reduce((primitives, node) => {
+  const Node = React.forwardRef((props, forwardedRef) => {
+    const { asChild, ...primitiveProps } = props;
+    const Comp = asChild ? Slot : node;
+    return /* @__PURE__ */ React.createElement(Comp, { ...primitiveProps, ref: forwardedRef });
+  });
+  Node.displayName = `Primitive.${node}`;
+  return { ...primitives, [node]: Node };
+}, {});
+
+function isRemotionProvider(provider) {
+  return provider?.$$PROVIDER_TYPE === "REMOTION";
+}
+function isRemotionSrc(src) {
+  return src?.type === "video/remotion";
+}
+
+const sliderStateRecord = SliderInstance.state.record, initialSliderStore = Object.keys(sliderStateRecord).reduce(
+  (store, prop) => ({
+    ...store,
+    [prop]() {
+      return sliderStateRecord[prop];
+    }
+  }),
+  {}
+);
+function useSliderState(prop, ref) {
+  const $state = useStateContext(sliderState);
+  if (!$state && !ref) {
+    console.warn(
+      `[vidstack] \`useSliderState\` requires \`RefObject<SliderInstance>\` argument if called outside of a slider component`
+    );
+  }
+  return useSignal((ref?.current?.$state || $state || initialSliderStore)[prop]);
+}
+function useSliderStore(ref) {
+  const $state = useStateContext(sliderState);
+  if (!$state && !ref) {
+    console.warn(
+      `[vidstack] \`useSliderStore\` requires \`RefObject<SliderInstance>\` argument if called outside of a slider component`
+    );
+  }
+  return useSignalRecord(ref?.current ? ref.current.$state : $state || initialSliderStore);
+}
+
+const IS_SERVER = typeof document === "undefined";
+
+const mediaStateRecord = MediaPlayerInstance.state.record, initialMediaStore = Object.keys(mediaStateRecord).reduce(
+  (store, prop) => ({
+    ...store,
+    [prop]() {
+      return mediaStateRecord[prop];
+    }
+  }),
+  {}
+);
+function useMediaState(prop, ref) {
+  const $state = useStateContext(mediaState);
+  if (!$state && !ref) {
+    console.warn(
+      `[vidstack] \`useMediaState\` requires \`RefObject<MediaPlayerInstance>\` argument if called outside the \`<MediaPlayer>\` component`
+    );
+  }
+  return useSignal((ref?.current?.$state || $state || initialMediaStore)[prop]);
+}
+function useMediaStore(ref) {
+  const $state = useStateContext(mediaState);
+  if (!$state && !ref) {
+    console.warn(
+      `[vidstack] \`useMediaStore\` requires \`RefObject<MediaPlayerInstance>\` argument if called outside the \`<MediaPlayer>\` component`
+    );
+  }
+  return useSignalRecord(ref?.current ? ref.current.$state : $state || initialMediaStore);
+}
+
+export { AirPlayButtonInstance, AudioGainSliderInstance, CaptionButtonInstance, CaptionsInstance, ControlsGroupInstance, ControlsInstance, FullscreenButtonInstance, GestureInstance, GoogleCastButtonInstance, IS_SERVER, LiveButtonInstance, MediaAnnouncerInstance, MediaPlayerInstance, MediaProviderInstance, MenuButtonInstance, MenuInstance, MenuItemInstance, MenuItemsInstance, MenuPortalInstance, MuteButtonInstance, PIPButtonInstance, PlayButtonInstance, PosterInstance, Primitive, QualitySliderInstance, RadioGroupInstance, RadioInstance, SeekButtonInstance, SliderChaptersInstance, SliderInstance, SliderPreviewInstance, SliderThumbnailInstance, SliderValueInstance, SliderVideoInstance, SpeedSliderInstance, ThumbnailInstance, TimeInstance, TimeSliderInstance, ToggleButtonInstance, TooltipContentInstance, TooltipInstance, TooltipTriggerInstance, VolumeSliderInstance, isRemotionProvider, isRemotionSrc, useMediaState, useMediaStore, useSliderState, useSliderStore };

package/dev/chunks/vidstack-PREbBNMG.js

@@ -0,0 +1,125 @@
+"use client"
+
+import * as React from 'react';
+import { MediaRemoteControl, sortVideoQualities, DEFAULT_PLAYBACK_RATES } from 'vidstack';
+import { MediaPlayerInstance } from './vidstack-FuCbl228.js';
+import { useMediaContext } from './vidstack-CqNX679o.js';
+import { useSignal, isString } from './vidstack-BalWqr4j.js';
+
+function useMediaRemote(target) {
+  const media = useMediaContext(), 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(), { 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(), { 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 { useMediaRemote, usePlaybackRateOptions, useVideoQualityOptions };