@hanifhan1f/vidstack-react 1.12.13 → 1.12.14

package/prod/chunks/vidstack-BlPINAXN.js

@@ -0,0 +1,189 @@
+"use client"
+
+import * as React from 'react';
+import { RadioGroupController, useMediaContext, menuContext, MediaRemoteControl, MediaPlayerInstance, sortVideoQualities } from './vidstack-BbPEqH3g.js';
+import { useMediaContext as useMediaContext$1 } from './vidstack-Bh7M8kL6.js';
+import { prop, method, Component, hasProvidedContext, useContext, effect, useSignal, isString } from './vidstack-CZgUA94N.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/prod/chunks/vidstack-C5Rzkyfp.js

@@ -0,0 +1,375 @@
+"use client"
+
+import * as React from 'react';
+import { createReactComponent, composeRefs, listenEvent, useReactScope, scoped, computed, signal, effect, EventsController, useSignal } from './vidstack-CZgUA94N.js';
+import { MediaAnnouncerInstance, Primitive, ControlsInstance, ControlsGroupInstance, TooltipInstance, TooltipTriggerInstance, TooltipContentInstance, GoogleCastButtonInstance, QualitySliderInstance, AudioGainSliderInstance, SpeedSliderInstance, useMediaState, watchActiveTextTrack, CaptionsInstance, formatSpokenTime, formatTime } from './vidstack-BbPEqH3g.js';
+import { sliderCallbacks, Preview, Steps, Thumb, Track as Track$1, TrackFill as TrackFill$1, Value, useMediaContext } from './vidstack-Bh7M8kL6.js';
+
+const MediaAnnouncerBridge = createReactComponent(MediaAnnouncerInstance, {
+  events: ["onChange"]
+});
+const MediaAnnouncer = React.forwardRef(
+  ({ style, children, ...props }, forwardRef) => {
+    return /* @__PURE__ */ React.createElement(MediaAnnouncerBridge, { ...props }, (props2) => /* @__PURE__ */ React.createElement(
+      Primitive.div,
+      {
+        ...props2,
+        style: { display: "contents", ...style },
+        ref: composeRefs(props2.ref, forwardRef)
+      },
+      children
+    ));
+  }
+);
+MediaAnnouncer.displayName = "MediaAnnouncer";
+
+const ControlsBridge = createReactComponent(ControlsInstance);
+const Root$5 = React.forwardRef(({ children, ...props }, forwardRef) => {
+  return /* @__PURE__ */ React.createElement(ControlsBridge, { ...props }, (props2) => /* @__PURE__ */ React.createElement(
+    Primitive.div,
+    {
+      ...props2,
+      ref: composeRefs(props2.ref, forwardRef)
+    },
+    children
+  ));
+});
+Root$5.displayName = "Controls";
+const ControlsGroupBridge = createReactComponent(ControlsGroupInstance);
+const Group = React.forwardRef(({ children, ...props }, forwardRef) => {
+  return /* @__PURE__ */ React.createElement(ControlsGroupBridge, { ...props }, (props2) => /* @__PURE__ */ React.createElement(
+    Primitive.div,
+    {
+      ...props2,
+      ref: composeRefs(props2.ref, forwardRef)
+    },
+    children
+  ));
+});
+Group.displayName = "ControlsGroup";
+
+var controls = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Group: Group,
+  Root: Root$5
+});
+
+const TooltipBridge = createReactComponent(TooltipInstance);
+function Root$4({ children, ...props }) {
+  return /* @__PURE__ */ React.createElement(TooltipBridge, { ...props }, children);
+}
+Root$4.displayName = "Tooltip";
+const TriggerBridge = createReactComponent(TooltipTriggerInstance);
+const Trigger = React.forwardRef(
+  ({ children, ...props }, forwardRef) => {
+    return /* @__PURE__ */ React.createElement(TriggerBridge, { ...props }, (props2) => /* @__PURE__ */ React.createElement(
+      Primitive.button,
+      {
+        ...props2,
+        ref: composeRefs(props2.ref, forwardRef)
+      },
+      children
+    ));
+  }
+);
+Trigger.displayName = "TooltipTrigger";
+const ContentBridge = createReactComponent(TooltipContentInstance);
+const Content = React.forwardRef(
+  ({ children, ...props }, forwardRef) => {
+    return /* @__PURE__ */ React.createElement(ContentBridge, { ...props }, (props2) => /* @__PURE__ */ React.createElement(
+      Primitive.div,
+      {
+        ...props2,
+        ref: composeRefs(props2.ref, forwardRef)
+      },
+      children
+    ));
+  }
+);
+Content.displayName = "TooltipContent";
+
+var tooltip = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Content: Content,
+  Root: Root$4,
+  Trigger: Trigger
+});
+
+const GoogleCastButtonBridge = createReactComponent(GoogleCastButtonInstance, {
+  domEventsRegex: /^onMedia/
+});
+const GoogleCastButton = React.forwardRef(
+  ({ children, ...props }, forwardRef) => {
+    return /* @__PURE__ */ React.createElement(GoogleCastButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React.createElement(
+      Primitive.button,
+      {
+        ...props2,
+        ref: composeRefs(props2.ref, forwardRef)
+      },
+      children
+    ));
+  }
+);
+GoogleCastButton.displayName = "GoogleCastButton";
+
+const QualitySliderBridge = createReactComponent(QualitySliderInstance, {
+  events: sliderCallbacks,
+  domEventsRegex: /^onMedia/
+});
+const Root$3 = React.forwardRef(
+  ({ children, ...props }, forwardRef) => {
+    return /* @__PURE__ */ React.createElement(QualitySliderBridge, { ...props, ref: forwardRef }, (props2) => /* @__PURE__ */ React.createElement(Primitive.div, { ...props2 }, children));
+  }
+);
+Root$3.displayName = "QualitySlider";
+
+var qualitySlider = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Preview: Preview,
+  Root: Root$3,
+  Steps: Steps,
+  Thumb: Thumb,
+  Track: Track$1,
+  TrackFill: TrackFill$1,
+  Value: Value
+});
+
+const AudioGainSliderBridge = createReactComponent(AudioGainSliderInstance, {
+  events: sliderCallbacks,
+  domEventsRegex: /^onMedia/
+});
+const Root$2 = React.forwardRef(
+  ({ children, ...props }, forwardRef) => {
+    return /* @__PURE__ */ React.createElement(AudioGainSliderBridge, { ...props, ref: forwardRef }, (props2) => /* @__PURE__ */ React.createElement(Primitive.div, { ...props2 }, children));
+  }
+);
+Root$2.displayName = "AudioGainSlider";
+
+var audioGainSlider = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Preview: Preview,
+  Root: Root$2,
+  Steps: Steps,
+  Thumb: Thumb,
+  Track: Track$1,
+  TrackFill: TrackFill$1,
+  Value: Value
+});
+
+const SpeedSliderBridge = createReactComponent(SpeedSliderInstance, {
+  events: sliderCallbacks,
+  domEventsRegex: /^onMedia/
+});
+const Root$1 = React.forwardRef(
+  ({ children, ...props }, forwardRef) => {
+    return /* @__PURE__ */ React.createElement(SpeedSliderBridge, { ...props, ref: forwardRef }, (props2) => /* @__PURE__ */ React.createElement(Primitive.div, { ...props2 }, children));
+  }
+);
+Root$1.displayName = "SpeedSlider";
+
+var speedSlider = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Preview: Preview,
+  Root: Root$1,
+  Steps: Steps,
+  Thumb: Thumb,
+  Track: Track$1,
+  TrackFill: TrackFill$1,
+  Value: Value
+});
+
+const Title = React.forwardRef(({ children, ...props }, forwardRef) => {
+  const $title = useMediaState("title");
+  return /* @__PURE__ */ React.createElement(Primitive.span, { ...props, ref: forwardRef }, $title, children);
+});
+Title.displayName = "Title";
+
+function useActiveTextCues(track) {
+  const [activeCues, setActiveCues] = React.useState([]);
+  React.useEffect(() => {
+    if (!track) {
+      setActiveCues([]);
+      return;
+    }
+    function onCuesChange() {
+      if (track) setActiveCues(track.activeCues);
+    }
+    onCuesChange();
+    return listenEvent(track, "cue-change", onCuesChange);
+  }, [track]);
+  return activeCues;
+}
+
+function useActiveTextTrack(kind) {
+  const media = useMediaContext(), [track, setTrack] = React.useState(null);
+  React.useEffect(() => {
+    return watchActiveTextTrack(media.textTracks, kind, setTrack);
+  }, [kind]);
+  return track;
+}
+
+function useChapterTitle() {
+  const $track = useActiveTextTrack("chapters"), $cues = useActiveTextCues($track);
+  return $cues[0]?.text || "";
+}
+
+const ChapterTitle = React.forwardRef(
+  ({ defaultText = "", children, ...props }, forwardRef) => {
+    const $chapterTitle = useChapterTitle();
+    return /* @__PURE__ */ React.createElement(Primitive.span, { ...props, ref: forwardRef }, $chapterTitle || defaultText, children);
+  }
+);
+ChapterTitle.displayName = "ChapterTitle";
+
+const CaptionsBridge = createReactComponent(CaptionsInstance);
+const Captions = React.forwardRef(
+  ({ children, ...props }, forwardRef) => {
+    return /* @__PURE__ */ React.createElement(CaptionsBridge, { ...props, ref: forwardRef }, (props2) => /* @__PURE__ */ React.createElement(Primitive.div, { ...props2 }, children));
+  }
+);
+Captions.displayName = "Captions";
+
+const Root = React.forwardRef(
+  ({ size = 96, children, ...props }, forwardRef) => {
+    return /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        width: size,
+        height: size,
+        fill: "none",
+        viewBox: "0 0 120 120",
+        "aria-hidden": "true",
+        "data-part": "root",
+        ...props,
+        ref: forwardRef
+      },
+      children
+    );
+  }
+);
+const Track = React.forwardRef(
+  ({ width = 8, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
+    "circle",
+    {
+      cx: "60",
+      cy: "60",
+      r: "54",
+      stroke: "currentColor",
+      strokeWidth: width,
+      "data-part": "track",
+      ...props,
+      ref
+    },
+    children
+  )
+);
+const TrackFill = React.forwardRef(
+  ({ width = 8, fillPercent = 50, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
+    "circle",
+    {
+      cx: "60",
+      cy: "60",
+      r: "54",
+      stroke: "currentColor",
+      pathLength: "100",
+      strokeWidth: width,
+      strokeDasharray: 100,
+      strokeDashoffset: 100 - fillPercent,
+      "data-part": "track-fill",
+      ...props,
+      ref
+    },
+    children
+  )
+);
+
+var spinner = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Root: Root,
+  Track: Track,
+  TrackFill: TrackFill
+});
+
+function createSignal(initialValue, deps = []) {
+  const scope = useReactScope();
+  return React.useMemo(() => scoped(() => signal(initialValue), scope), [scope, ...deps]);
+}
+function createComputed(compute, deps = []) {
+  const scope = useReactScope();
+  return React.useMemo(() => scoped(() => computed(compute), scope), [scope, ...deps]);
+}
+function createEffect(compute, deps = []) {
+  const scope = useReactScope();
+  React.useEffect(() => scoped(() => effect(compute), scope), [scope, ...deps]);
+}
+function useScoped(compute) {
+  const scope = useReactScope();
+  return React.useMemo(() => scoped(compute, scope), [scope]);
+}
+
+function useTextCues(track) {
+  const [cues, setCues] = React.useState([]);
+  React.useEffect(() => {
+    if (!track) return;
+    function onCuesChange() {
+      if (track) setCues([...track.cues]);
+    }
+    const events = new EventsController(track).add("add-cue", onCuesChange).add("remove-cue", onCuesChange);
+    onCuesChange();
+    return () => {
+      setCues([]);
+      events.abort();
+    };
+  }, [track]);
+  return cues;
+}
+
+function useChapterOptions() {
+  const media = useMediaContext(), track = useActiveTextTrack("chapters"), cues = useTextCues(track), $startTime = useSignal(media.$state.seekableStart), $endTime = useSignal(media.$state.seekableEnd);
+  useActiveTextCues(track);
+  return React.useMemo(() => {
+    const options = track ? cues.filter((cue) => cue.startTime <= $endTime && cue.endTime >= $startTime).map((cue, i) => {
+      let currentRef = null, stopProgressEffect;
+      return {
+        cue,
+        label: cue.text,
+        value: i.toString(),
+        startTimeText: formatTime(Math.max(0, cue.startTime - $startTime)),
+        durationText: formatSpokenTime(
+          Math.min($endTime, cue.endTime) - Math.max($startTime, cue.startTime)
+        ),
+        get selected() {
+          return cue === track.activeCues[0];
+        },
+        setProgressVar(ref) {
+          if (!ref || cue !== track.activeCues[0]) {
+            stopProgressEffect?.();
+            stopProgressEffect = void 0;
+            ref?.style.setProperty("--progress", "0%");
+            currentRef = null;
+            return;
+          }
+          if (currentRef === ref) return;
+          currentRef = ref;
+          stopProgressEffect?.();
+          stopProgressEffect = effect(() => {
+            const { realCurrentTime } = media.$state, time = realCurrentTime(), cueStartTime = Math.max($startTime, cue.startTime), duration = Math.min($endTime, cue.endTime) - cueStartTime, progress = Math.max(0, time - cueStartTime) / duration * 100;
+            ref.style.setProperty("--progress", progress.toFixed(3) + "%");
+          });
+        },
+        select(trigger) {
+          media.remote.seek(cue.startTime - $startTime, trigger);
+        }
+      };
+    }) : [];
+    Object.defineProperty(options, "selectedValue", {
+      get() {
+        const index = options.findIndex((option) => option.selected);
+        return (index >= 0 ? index : 0).toString();
+      }
+    });
+    return options;
+  }, [cues, $startTime, $endTime]);
+}
+
+export { Captions, ChapterTitle, Content, GoogleCastButton, Group, MediaAnnouncer, Root$4 as Root, Root$2 as Root$1, Root$1 as Root$2, Root$3, Root$5 as Root$4, Root as Root$5, Title, Track, TrackFill, Trigger, audioGainSlider, controls, createComputed, createEffect, createSignal, qualitySlider, speedSlider, spinner, tooltip, useActiveTextCues, useActiveTextTrack, useChapterOptions, useChapterTitle, useScoped, useTextCues };

package/prod/chunks/vidstack-CBF7iUqu.js

@@ -0,0 +1,22 @@
+"use client"
+
+import * as React from 'react';
+
+const Icon = /* @__PURE__ */ React.forwardRef((props, ref) => {
+  const { width, height, size = null, paths, ...restProps } = props;
+  return React.createElement("svg", {
+    viewBox: "0 0 32 32",
+    ...restProps,
+    width: width ?? size,
+    height: height ?? size,
+    fill: "none",
+    "aria-hidden": "true",
+    focusable: "false",
+    xmlns: "http://www.w3.org/2000/svg",
+    ref,
+    dangerouslySetInnerHTML: { __html: paths }
+  });
+});
+Icon.displayName = "VidstackIcon";
+
+export { Icon };