@hanifhan1f/vidstack-react 1.12.30 → 1.12.31

package/dev/chunks/vidstack-vh0BKYWJ.js

@@ -0,0 +1,84 @@
+"use client"
+
+import * as React from 'react';
+import { listenEvent, EventsController, animationFrameThrottle, effect } from './vidstack-D_bWd66h.js';
+import { useMediaPlayer } from './vidstack-oOGofWSl.js';
+
+function useClassName(el, className) {
+  React.useEffect(() => {
+    if (!el || !className) return;
+    const tokens = className.split(" ");
+    for (const token of tokens) el.classList.add(token);
+    return () => {
+      for (const token of tokens) el.classList.remove(token);
+    };
+  }, [el, className]);
+}
+function useResizeObserver(el, callback) {
+  React.useEffect(() => {
+    if (!el) return;
+    callback();
+    const observer = new ResizeObserver(animationFrameThrottle(callback));
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [el, callback]);
+}
+function useTransitionActive(el) {
+  const [isActive, setIsActive] = React.useState(false);
+  React.useEffect(() => {
+    if (!el) return;
+    const events = new EventsController(el).add("transitionstart", () => setIsActive(true)).add("transitionend", () => setIsActive(false));
+    return () => events.abort();
+  }, [el]);
+  return isActive;
+}
+function useMouseEnter(el) {
+  const [isMouseEnter, setIsMouseEnter] = React.useState(false);
+  React.useEffect(() => {
+    if (!el) return;
+    const events = new EventsController(el).add("mouseenter", () => setIsMouseEnter(true)).add("mouseleave", () => setIsMouseEnter(false));
+    return () => events.abort();
+  }, [el]);
+  return isMouseEnter;
+}
+function useFocusIn(el) {
+  const [isFocusIn, setIsFocusIn] = React.useState(false);
+  React.useEffect(() => {
+    if (!el) return;
+    const events = new EventsController(el).add("focusin", () => setIsFocusIn(true)).add("focusout", () => setIsFocusIn(false));
+    return () => events.abort();
+  }, [el]);
+  return isFocusIn;
+}
+function useActive(el) {
+  const isMouseEnter = useMouseEnter(el), isFocusIn = useFocusIn(el), prevMouseEnter = React.useRef(false);
+  if (prevMouseEnter.current && !isMouseEnter) return false;
+  prevMouseEnter.current = isMouseEnter;
+  return isMouseEnter || isFocusIn;
+}
+function useColorSchemePreference() {
+  const [colorScheme, setColorScheme] = React.useState("dark");
+  React.useEffect(() => {
+    const media = window.matchMedia("(prefers-color-scheme: light)");
+    function onChange() {
+      setColorScheme(media.matches ? "light" : "dark");
+    }
+    onChange();
+    return listenEvent(media, "change", onChange);
+  }, []);
+  return colorScheme;
+}
+
+function useLayoutName(name) {
+  const player = useMediaPlayer();
+  React.useEffect(() => {
+    if (!player) return;
+    return effect(() => {
+      const el = player.$el;
+      el?.setAttribute("data-layout", name);
+      return () => el?.removeAttribute("data-layout");
+    });
+  }, [player]);
+}
+
+export { useActive, useClassName, useColorSchemePreference, useLayoutName, useResizeObserver, useTransitionActive };

package/dev/player/vidstack-default-components.js

@@ -1,15 +1,14 @@
 "use client"
 
-export { DefaultAudioLayout, DefaultBufferingIndicator, DefaultKeyboardDisplay, DefaultMenuButton, DefaultMenuCheckbox, DefaultMenuItem, DefaultMenuRadioGroup, DefaultMenuSection, DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps, DefaultTooltip, DefaultVideoGestures, DefaultVideoLargeLayout, DefaultVideoLayout, DefaultVideoSmallLayout, createRadioOptions } from '../chunks/vidstack-CKsUl4ll.js';
+export { DefaultAudioLayout, DefaultBufferingIndicator, DefaultKeyboardDisplay, DefaultMenuButton, DefaultMenuCheckbox, DefaultMenuItem, DefaultMenuRadioGroup, DefaultMenuSection, DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps, DefaultTooltip, DefaultVideoGestures, DefaultVideoLargeLayout, DefaultVideoLayout, DefaultVideoSmallLayout, createRadioOptions } from '../chunks/vidstack-D2Bi2Td9.js';
 export { defaultLayoutIcons } from './vidstack-default-icons.js';
 import 'react';
-import '../chunks/vidstack-BalWqr4j.js';
-import '../chunks/vidstack-gqKBE4xH.js';
-import '../chunks/vidstack-FuCbl228.js';
-import 'vidstack';
-import '../chunks/vidstack-CqNX679o.js';
+import '../chunks/vidstack-D_bWd66h.js';
+import '../chunks/vidstack-S_S6XDnL.js';
+import '../chunks/vidstack-C5tZAkKo.js';
+import '@floating-ui/dom';
+import '../chunks/vidstack-oOGofWSl.js';
 import 'react-dom';
-import '../chunks/vidstack-DjqYvkVp.js';
-import '../chunks/vidstack-DqaqkU4T.js';
-import 'vidstack/exports/font.ts';
+import '../chunks/vidstack-vh0BKYWJ.js';
+import '../chunks/vidstack-D-hQD1eE.js';
 import '../chunks/vidstack-CBF7iUqu.js';

package/dev/player/vidstack-default-icons.js

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from 'react';
-import { 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$19, Icon$56, Icon$33, Icon$8, Icon$13, Icon$88, Icon$63, Icon$16, Icon$53, Icon$22, Icon$11, Icon$0, Icon$31, Icon$81, Icon$77, Icon$74, Icon$24, Icon$5 } from '../chunks/vidstack-BalWqr4j.js';
+import { 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$19, Icon$56, Icon$33, Icon$8, Icon$13, Icon$88, Icon$63, Icon$16, Icon$53, Icon$22, Icon$11, Icon$0, Icon$31, Icon$81, Icon$77, Icon$74, Icon$24, Icon$5 } from '../chunks/vidstack-D_bWd66h.js';
 import { Icon } from '../chunks/vidstack-CBF7iUqu.js';
 
 function createIcon(paths) {

package/dev/player/vidstack-default-layout.js

@@ -1,15 +1,14 @@
 "use client"
 
-export { DefaultAudioLayout, DefaultBufferingIndicator, DefaultKeyboardDisplay, DefaultLayoutContext, DefaultMenuButton, DefaultMenuCheckbox, DefaultMenuItem, DefaultMenuRadioGroup, DefaultMenuSection, DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps, DefaultTooltip, DefaultVideoGestures, DefaultVideoLargeLayout, DefaultVideoLayout, DefaultVideoSmallLayout, createRadioOptions, i18n, useDefaultLayoutContext, useDefaultLayoutWord } from '../chunks/vidstack-CKsUl4ll.js';
+export { DefaultAudioLayout, DefaultBufferingIndicator, DefaultKeyboardDisplay, DefaultLayoutContext, DefaultMenuButton, DefaultMenuCheckbox, DefaultMenuItem, DefaultMenuRadioGroup, DefaultMenuSection, DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps, DefaultTooltip, DefaultVideoGestures, DefaultVideoLargeLayout, DefaultVideoLayout, DefaultVideoSmallLayout, createRadioOptions, i18n, useDefaultLayoutContext, useDefaultLayoutWord } from '../chunks/vidstack-D2Bi2Td9.js';
 export { defaultLayoutIcons } from './vidstack-default-icons.js';
 import 'react';
-import '../chunks/vidstack-BalWqr4j.js';
-import '../chunks/vidstack-gqKBE4xH.js';
-import '../chunks/vidstack-FuCbl228.js';
-import 'vidstack';
-import '../chunks/vidstack-CqNX679o.js';
+import '../chunks/vidstack-D_bWd66h.js';
+import '../chunks/vidstack-S_S6XDnL.js';
+import '../chunks/vidstack-C5tZAkKo.js';
+import '@floating-ui/dom';
+import '../chunks/vidstack-oOGofWSl.js';
 import 'react-dom';
-import '../chunks/vidstack-DjqYvkVp.js';
-import '../chunks/vidstack-DqaqkU4T.js';
-import 'vidstack/exports/font.ts';
+import '../chunks/vidstack-vh0BKYWJ.js';
+import '../chunks/vidstack-D-hQD1eE.js';
 import '../chunks/vidstack-CBF7iUqu.js';

package/dev/player/vidstack-plyr-layout.js

@@ -1,89 +1,75 @@
 "use client"
 
-import { IS_SERVER, useMediaState, Primitive, isRemotionSrc } from '../chunks/vidstack-FuCbl228.js';
+import { useMediaState, Primitive, IS_SERVER, isRemotionSrc, getDownloadFile } from '../chunks/vidstack-C5tZAkKo.js';
 import * as React from 'react';
-import { isString, isBoolean, uppercaseFirstChar, isUndefined, signal, composeRefs, useSignal, isNumber, listenEvent } from '../chunks/vidstack-BalWqr4j.js';
-import { usePlyrLayoutClasses, isKeyboardEvent, isKeyboardClick } from 'vidstack';
-import { useMediaContext, PlayButton, Root, Img, Gesture, AirPlayButton, CaptionButton, FullscreenButton, PIPButton, SeekButton, Root$1, Value, Preview, Thumbnail, LiveButton, Time, appendParamsToURL, Root$2, Button, Items, useAudioOptions, Root$3, Item, useCaptionOptions, MuteButton, Root$4 } from '../chunks/vidstack-CqNX679o.js';
-import { useMediaRemote, useVideoQualityOptions, usePlaybackRateOptions } from '../chunks/vidstack-PREbBNMG.js';
-import { useLayoutName, useClassName } from '../chunks/vidstack-DjqYvkVp.js';
-import { RemotionThumbnail, RemotionPoster, RemotionSliderThumbnail } from '../chunks/vidstack-DqaqkU4T.js';
+import { effect, createDisposalBin, uppercaseFirstChar, isUndefined, signal, composeRefs, useSignal, isNumber, listenEvent, isString, isKeyboardEvent, isKeyboardClick } from '../chunks/vidstack-D_bWd66h.js';
+import { useMediaContext, PlayButton, Root, Img, Gesture, AirPlayButton, CaptionButton, FullscreenButton, PIPButton, SeekButton, Root$1, Value, Preview, Thumbnail, LiveButton, Time, appendParamsToURL, Root$2, Button, Items, useAudioOptions, Root$3, Item, useCaptionOptions, MuteButton, Root$4 } from '../chunks/vidstack-oOGofWSl.js';
+import { useMediaRemote, useVideoQualityOptions, usePlaybackRateOptions } from '../chunks/vidstack-3rdEWplD.js';
+import { useLayoutName, useClassName } from '../chunks/vidstack-vh0BKYWJ.js';
+import { RemotionThumbnail, RemotionPoster, RemotionSliderThumbnail } from '../chunks/vidstack-D-hQD1eE.js';
 export { plyrLayoutIcons } from './vidstack-plyr-icons.js';
+import '@floating-ui/dom';
 import 'react-dom';
 import '../chunks/vidstack-CBF7iUqu.js';
 
-IS_SERVER ? "" : navigator?.userAgent.toLowerCase() || "";
-function canPlayHLSNatively(video) {
-  if (IS_SERVER) return false;
-  if (!video) video = document.createElement("video");
-  return video.canPlayType("application/vnd.apple.mpegurl").length > 0;
-}
-
-const AUDIO_EXTENSIONS = /\.(m4a|m4b|mp4a|mpga|mp2|mp2a|mp3|m2a|m3a|wav|weba|aac|oga|spx|flac)($|\?)/i;
-const AUDIO_TYPES = /* @__PURE__ */ new Set([
-  "audio/mpeg",
-  "audio/ogg",
-  "audio/3gp",
-  "audio/mp3",
-  "audio/webm",
-  "audio/flac",
-  "audio/m4a",
-  "audio/m4b",
-  "audio/mp4a",
-  "audio/mp4"
-]);
-const VIDEO_EXTENSIONS = /\.(mp4|og[gv]|webm|mov|m4v)(#t=[,\d+]+)?($|\?)/i;
-const VIDEO_TYPES = /* @__PURE__ */ new Set([
-  "video/mp4",
-  "video/webm",
-  "video/3gp",
-  "video/ogg",
-  "video/avi",
-  "video/mpeg"
-]);
-const HLS_VIDEO_EXTENSIONS = /\.(m3u8)($|\?)/i;
-const HLS_VIDEO_TYPES = /* @__PURE__ */ new Set([
-  // Apple sanctioned
-  "application/vnd.apple.mpegurl",
-  // Apple sanctioned for backwards compatibility
-  "audio/mpegurl",
-  // Very common
-  "audio/x-mpegurl",
-  // Very common
-  "application/x-mpegurl",
-  // Included for completeness
-  "video/x-mpegurl",
-  "video/mpegurl",
-  "application/mpegurl"
-]);
-function isAudioSrc({ src, type }) {
-  return isString(src) ? AUDIO_EXTENSIONS.test(src) || AUDIO_TYPES.has(type) || src.startsWith("blob:") && type === "audio/object" : type === "audio/object";
-}
-function isVideoSrc(src) {
-  return isString(src.src) ? VIDEO_EXTENSIONS.test(src.src) || VIDEO_TYPES.has(src.type) || src.src.startsWith("blob:") && src.type === "video/object" || isHLSSrc(src) && (IS_SERVER || canPlayHLSNatively()) : src.type === "video/object";
-}
-function isHLSSrc({ src, type }) {
-  return isString(src) && HLS_VIDEO_EXTENSIONS.test(src) || HLS_VIDEO_TYPES.has(type);
-}
-
-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 usePlyrLayoutClasses(el, media) {
+  const {
+    canAirPlay,
+    canFullscreen,
+    canPictureInPicture,
+    controlsHidden,
+    currentTime,
+    fullscreen,
+    hasCaptions,
+    isAirPlayConnected,
+    paused,
+    pictureInPicture,
+    playing,
+    pointer,
+    poster,
+    textTrack,
+    viewType,
+    waiting
+  } = media.$state;
+  el.classList.add("plyr");
+  el.classList.add("plyr--full-ui");
+  const classes = {
+    "plyr--airplay-active": isAirPlayConnected,
+    "plyr--airplay-supported": canAirPlay,
+    "plyr--fullscreen-active": fullscreen,
+    "plyr--fullscreen-enabled": canFullscreen,
+    "plyr--hide-controls": controlsHidden,
+    "plyr--is-touch": () => pointer() === "coarse",
+    "plyr--loading": waiting,
+    "plyr--paused": paused,
+    "plyr--pip-active": pictureInPicture,
+    "plyr--pip-enabled": canPictureInPicture,
+    "plyr--playing": playing,
+    "plyr__poster-enabled": poster,
+    "plyr--stopped": () => paused() && currentTime() === 0,
+    "plyr--captions-active": textTrack,
+    "plyr--captions-enabled": hasCaptions
   };
+  const disposal = createDisposalBin();
+  for (const token of Object.keys(classes)) {
+    disposal.add(effect(() => void el.classList.toggle(token, !!classes[token]())));
+  }
+  disposal.add(
+    effect(() => {
+      const token = `plyr--${viewType()}`;
+      el.classList.add(token);
+      return () => el.classList.remove(token);
+    }),
+    effect(() => {
+      const { $provider } = media, type = $provider()?.type, token = `plyr--${isHTMLProvider(type) ? "html5" : type}`;
+      el.classList.toggle(token, !!type);
+      return () => el.classList.remove(token);
+    })
+  );
+  return () => disposal.empty();
 }
-function isValidFileDownload({
-  url,
-  src,
-  download
-}) {
-  return isString(url) && (download && download !== true || isAudioSrc(src) || isVideoSrc(src));
+function isHTMLProvider(type) {
+  return type === "audio" || type === "video";
 }
 
 const PlyrLayoutContext = React.createContext({});

package/dev/player/vidstack-remotion.js

@@ -1,12 +1,12 @@
 "use client"
 
 import * as React from 'react';
-import { createDisposalBin, animationFrameThrottle, noop } from '../chunks/vidstack-BalWqr4j.js';
+import { createDisposalBin, animationFrameThrottle, noop } from '../chunks/vidstack-D_bWd66h.js';
 import { Internals, random } from 'remotion';
-import { IS_SERVER, useMediaState, isRemotionSrc, Primitive, useSliderState } from '../chunks/vidstack-FuCbl228.js';
-export { isRemotionProvider } from '../chunks/vidstack-FuCbl228.js';
-import { RemotionThumbnail as RemotionThumbnail$1, RemotionSliderThumbnail as RemotionSliderThumbnail$1, RemotionPoster as RemotionPoster$1 } from '../chunks/vidstack-DqaqkU4T.js';
-import 'vidstack';
+import { IS_SERVER, useMediaState, isRemotionSrc, Primitive, useSliderState } from '../chunks/vidstack-C5tZAkKo.js';
+export { isRemotionProvider } from '../chunks/vidstack-C5tZAkKo.js';
+import { RemotionThumbnail as RemotionThumbnail$1, RemotionSliderThumbnail as RemotionSliderThumbnail$1, RemotionPoster as RemotionPoster$1 } from '../chunks/vidstack-D-hQD1eE.js';
+import '@floating-ui/dom';
 
 class RemotionLayoutEngine {
   #src = null;
@@ -338,7 +338,7 @@ class RemotionProviderLoader {
     return "video";
   }
   async load(ctx) {
-    return new (await import('../chunks/vidstack-D3ZXOE4d.js')).RemotionProvider(this.target, ctx);
+    return new (await import('../chunks/vidstack-DnmOVAbr.js')).RemotionProvider(this.target, ctx);
   }
 }
 

package/dev/vidstack.js

@@ -1,25 +1,136 @@
 "use client"
 
-export * from 'vidstack/exports/core.ts';
-export * from 'vidstack/exports/events.ts';
-export * from 'vidstack/exports/foundation.ts';
-export * from 'vidstack/exports/maverick.ts';
-export * from 'vidstack/exports/providers.ts';
-export * from 'vidstack/exports/utils.ts';
-export { DEFAULT_AUDIO_GAINS, DEFAULT_PLAYBACK_RATES, sliderState } from 'vidstack/exports/components.ts';
-import { Primitive, MediaPlayerInstance, MediaProviderInstance, isRemotionProvider, ToggleButtonInstance, PosterInstance, useMediaState } from './chunks/vidstack-FuCbl228.js';
-export { AirPlayButtonInstance, AudioGainSliderInstance, CaptionButtonInstance, CaptionsInstance, ControlsGroupInstance, ControlsInstance, FullscreenButtonInstance, GestureInstance, GoogleCastButtonInstance, LiveButtonInstance, MediaAnnouncerInstance, MenuButtonInstance, MenuInstance, MenuItemInstance, MenuItemsInstance, MenuPortalInstance, MuteButtonInstance, PIPButtonInstance, PlayButtonInstance, QualitySliderInstance, RadioGroupInstance, RadioInstance, SeekButtonInstance, SliderChaptersInstance, SliderInstance, SliderPreviewInstance, SliderThumbnailInstance, SliderValueInstance, SliderVideoInstance, SpeedSliderInstance, ThumbnailInstance, TimeInstance, TimeSliderInstance, TooltipContentInstance, TooltipInstance, TooltipTriggerInstance, VolumeSliderInstance, useMediaStore, useSliderState, useSliderStore } from './chunks/vidstack-FuCbl228.js';
+import { TextTrackSymbol, RadioGroupController, useMediaContext, menuContext, Primitive, MediaPlayerInstance, MediaProviderInstance, isRemotionProvider, mediaState, TextTrack, ToggleButtonInstance, PosterInstance, useMediaState, ThumbnailsLoader, updateSliderPreviewPlacement } from './chunks/vidstack-C5tZAkKo.js';
+export { ARIAKeyShortcuts, AUDIO_EXTENSIONS, AUDIO_TYPES, AirPlayButtonInstance, AudioGainSliderInstance, AudioProviderLoader, AudioTrackList, CaptionButtonInstance, CaptionsInstance, ControlsGroupInstance, ControlsInstance, DASHProviderLoader, DASH_VIDEO_EXTENSIONS, DASH_VIDEO_TYPES, FullscreenButtonInstance, FullscreenController, GestureInstance, GoogleCastButtonInstance, HLSProviderLoader, HLS_VIDEO_EXTENSIONS, HLS_VIDEO_TYPES, List, LiveButtonInstance, LocalMediaStorage, Logger, MEDIA_KEY_SHORTCUTS, MediaAnnouncerInstance, MediaControls, MediaRemoteControl, MenuButtonInstance, MenuInstance, MenuItemInstance, MenuItemsInstance, MenuPortalInstance, MuteButtonInstance, PIPButtonInstance, PlayButtonInstance, QualitySliderInstance, RadioGroupInstance, RadioInstance, ScreenOrientationController, SeekButtonInstance, SliderChaptersInstance, SliderInstance, SliderPreviewInstance, SliderThumbnailInstance, SliderValueInstance, SliderVideoInstance, SpeedSliderInstance, TextRenderers, TextTrackList, ThumbnailInstance, TimeInstance, TimeRange, TimeSliderInstance, TooltipContentInstance, TooltipInstance, TooltipTriggerInstance, VIDEO_EXTENSIONS, VIDEO_TYPES, VideoProviderLoader, VideoQualityList, VimeoProviderLoader, VolumeSliderInstance, YouTubeProviderLoader, boundTime, canChangeVolume, canFullscreen, canGoogleCastSrc, canOrientScreen, canPlayHLSNatively, canRotateScreen, canUsePictureInPicture, canUseVideoPresentation, findActiveCue, formatSpokenTime, formatTime, getDownloadFile, getTimeRangesEnd, getTimeRangesStart, isAudioProvider, isAudioSrc, isCueActive, isDASHProvider, isDASHSrc, isGoogleCastProvider, isHLSProvider, isHLSSrc, isHTMLAudioElement, isHTMLIFrameElement, isHTMLMediaElement, isHTMLVideoElement, isMediaStream, isTrackCaptionKind, isVideoProvider, isVideoQualitySrc, isVideoSrc, isVimeoProvider, isYouTubeProvider, mediaContext, normalizeTimeIntervals, parseJSONCaptionsFile, sliderState, softResetMediaState, sortVideoQualities, updateTimeIntervals, useMediaStore, useSliderState, useSliderStore, watchActiveTextTrack, watchCueTextChange } from './chunks/vidstack-C5tZAkKo.js';
 import * as React from 'react';
-import { createReactComponent, useStateContext, useSignal, isString, composeRefs, useSignalRecord, effect, useReactScope, signal, EventsController } from './chunks/vidstack-BalWqr4j.js';
-import { createSignal, useScoped } from './chunks/vidstack-gqKBE4xH.js';
-export { audioGainSlider as AudioGainSlider, Captions, ChapterTitle, controls as Controls, GoogleCastButton, MediaAnnouncer, qualitySlider as QualitySlider, speedSlider as SpeedSlider, spinner as Spinner, Title, tooltip as Tooltip, useActiveTextCues, useActiveTextTrack, useChapterOptions, useChapterTitle, useTextCues } from './chunks/vidstack-gqKBE4xH.js';
-import { mediaState, TextTrack, ThumbnailsLoader, updateSliderPreviewPlacement, DEFAULT_AUDIO_GAINS } from 'vidstack';
-import { useMediaContext } from './chunks/vidstack-CqNX679o.js';
-export { AirPlayButton, CaptionButton, FullscreenButton, Gesture, LiveButton, menu as Menu, MuteButton, PIPButton, PlayButton, radioGroup as RadioGroup, SeekButton, slider as Slider, thumbnail as Thumbnail, Time, timeSlider as TimeSlider, volumeSlider as VolumeSlider, useAudioOptions, useCaptionOptions, useMediaPlayer } from './chunks/vidstack-CqNX679o.js';
+import { isString, EventsController, DOMEvent, prop, method, Component, hasProvidedContext, useContext, effect, createReactComponent, useStateContext, useSignal, composeRefs, useSignalRecord, useReactScope, signal } from './chunks/vidstack-D_bWd66h.js';
+export { appendTriggerEvent, findTriggerEvent, hasTriggerEvent, isKeyboardClick, isKeyboardEvent, isPointerEvent, walkTriggerEventChain } from './chunks/vidstack-D_bWd66h.js';
+import { createSignal, useScoped } from './chunks/vidstack-S_S6XDnL.js';
+export { audioGainSlider as AudioGainSlider, Captions, ChapterTitle, controls as Controls, GoogleCastButton, MediaAnnouncer, qualitySlider as QualitySlider, speedSlider as SpeedSlider, spinner as Spinner, Title, tooltip as Tooltip, useActiveTextCues, useActiveTextTrack, useChapterOptions, useChapterTitle, useTextCues } from './chunks/vidstack-S_S6XDnL.js';
+import { useMediaContext as useMediaContext$1 } from './chunks/vidstack-oOGofWSl.js';
+export { AirPlayButton, CaptionButton, FullscreenButton, Gesture, LiveButton, menu as Menu, MuteButton, PIPButton, PlayButton, radioGroup as RadioGroup, SeekButton, slider as Slider, thumbnail as Thumbnail, Time, timeSlider as TimeSlider, volumeSlider as VolumeSlider, useAudioOptions, useCaptionOptions, useMediaPlayer } from './chunks/vidstack-oOGofWSl.js';
 import { Icon } from './chunks/vidstack-CBF7iUqu.js';
-export { useMediaRemote, usePlaybackRateOptions, useVideoQualityOptions } from './chunks/vidstack-PREbBNMG.js';
+export { DEFAULT_PLAYBACK_RATES, useMediaRemote, usePlaybackRateOptions, useVideoQualityOptions } from './chunks/vidstack-3rdEWplD.js';
+import '@floating-ui/dom';
 import 'react-dom';
 
+class LibASSTextRenderer {
+  constructor(loader, config) {
+    this.loader = loader;
+    this.config = config;
+  }
+  priority = 1;
+  #instance = null;
+  #track = null;
+  #typeRE = /(ssa|ass)$/;
+  canRender(track, video) {
+    return !!video && !!track.src && (isString(track.type) && this.#typeRE.test(track.type) || this.#typeRE.test(track.src));
+  }
+  attach(video) {
+    if (!video) return;
+    this.loader().then(async (mod) => {
+      this.#instance = new mod.default({
+        ...this.config,
+        video,
+        subUrl: this.#track?.src || ""
+      });
+      new EventsController(this.#instance).add("ready", () => {
+        const canvas = this.#instance?._canvas;
+        if (canvas) canvas.style.pointerEvents = "none";
+      }).add("error", (event) => {
+        if (!this.#track) return;
+        this.#track[TextTrackSymbol.readyState] = 3;
+        this.#track.dispatchEvent(
+          new DOMEvent("error", {
+            trigger: event,
+            detail: event.error
+          })
+        );
+      });
+    });
+  }
+  changeTrack(track) {
+    if (!track || track.readyState === 3) {
+      this.#freeTrack();
+    } else if (this.#track !== track) {
+      this.#instance?.setTrackByUrl(track.src);
+      this.#track = track;
+    }
+  }
+  detach() {
+    this.#freeTrack();
+  }
+  #freeTrack() {
+    this.#instance?.freeTrack();
+    this.#track = null;
+  }
+}
+
+const DEFAULT_AUDIO_GAINS = [1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4];
+class AudioGainRadioGroup extends Component {
+  static props = {
+    normalLabel: "Disabled",
+    gains: DEFAULT_AUDIO_GAINS
+  };
+  #media;
+  #menu;
+  #controller;
+  get value() {
+    return this.#controller.value;
+  }
+  get disabled() {
+    const { gains } = this.$props, { canSetAudioGain } = this.#media.$state;
+    return !canSetAudioGain() || gains().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 { gains, normalLabel } = this.$props;
+    return gains().map((gain) => ({
+      label: gain === 1 || gain === null ? normalLabel : String(gain * 100) + "%",
+      value: gain.toString()
+    }));
+  }
+  #watchValue() {
+    this.#controller.value = this.#getValue();
+  }
+  #watchHintText() {
+    const { normalLabel } = this.$props, { audioGain } = this.#media.$state, gain = audioGain();
+    this.#menu?.hint.set(gain === 1 || gain == null ? normalLabel() : String(gain * 100) + "%");
+  }
+  #watchControllerDisabled() {
+    this.#menu?.disable(this.disabled);
+  }
+  #getValue() {
+    const { audioGain } = this.#media.$state;
+    return audioGain()?.toString() ?? "1";
+  }
+  #onValueChange(value, trigger) {
+    if (this.disabled) return;
+    const gain = +value;
+    this.#media.remote.changeAudioGain(gain, trigger);
+    this.dispatch("change", { detail: gain, trigger });
+  }
+}
+const audiogainradiogroup__proto = AudioGainRadioGroup.prototype;
+prop(audiogainradiogroup__proto, "value");
+prop(audiogainradiogroup__proto, "disabled");
+method(audiogainradiogroup__proto, "getOptions");
+
 const playerCallbacks = [
   "onAbort",
   "onAudioTrackChange",
@@ -114,10 +225,10 @@ const MediaProvider = React.forwardRef(
 );
 MediaProvider.displayName = "MediaProvider";
 function MediaOutlet({ provider, mediaProps, iframeProps }) {
-  const { sources, crossOrigin, poster, remotePlaybackInfo, nativeControls, viewType } = useStateContext(mediaState), { loader } = provider.$state, { $provider: $$provider, $providerSetup: $$providerSetup } = useMediaContext(), $sources = useSignal(sources), $nativeControls = useSignal(nativeControls), $crossOrigin = useSignal(crossOrigin), $poster = useSignal(poster), $loader = useSignal(loader), $provider = useSignal($$provider), $providerSetup = useSignal($$providerSetup), $remoteInfo = useSignal(remotePlaybackInfo), $mediaType = $loader?.mediaType(), $viewType = useSignal(viewType), isAudioView = $viewType === "audio", isYouTubeEmbed = $loader?.name === "youtube", isVimeoEmbed = $loader?.name === "vimeo", isEmbed = isYouTubeEmbed || isVimeoEmbed, isRemotion = $loader?.name === "remotion", isGoogleCast = $loader?.name === "google-cast", [googleCastIconPaths, setGoogleCastIconPaths] = React.useState(""), [hasMounted, setHasMounted] = React.useState(false);
+  const { sources, crossOrigin, poster, remotePlaybackInfo, nativeControls, viewType } = useStateContext(mediaState), { loader } = provider.$state, { $provider: $$provider, $providerSetup: $$providerSetup } = useMediaContext$1(), $sources = useSignal(sources), $nativeControls = useSignal(nativeControls), $crossOrigin = useSignal(crossOrigin), $poster = useSignal(poster), $loader = useSignal(loader), $provider = useSignal($$provider), $providerSetup = useSignal($$providerSetup), $remoteInfo = useSignal(remotePlaybackInfo), $mediaType = $loader?.mediaType(), $viewType = useSignal(viewType), isAudioView = $viewType === "audio", isYouTubeEmbed = $loader?.name === "youtube", isVimeoEmbed = $loader?.name === "vimeo", isEmbed = isYouTubeEmbed || isVimeoEmbed, isRemotion = $loader?.name === "remotion", isGoogleCast = $loader?.name === "google-cast", [googleCastIconPaths, setGoogleCastIconPaths] = React.useState(""), [hasMounted, setHasMounted] = React.useState(false);
   React.useEffect(() => {
     if (!isGoogleCast || googleCastIconPaths) return;
-    import('./chunks/vidstack-BalWqr4j.js').then(function (n) { return n.chromecast; }).then((mod) => {
+    import('./chunks/vidstack-D_bWd66h.js').then(function (n) { return n.chromecast; }).then((mod) => {
       setGoogleCastIconPaths(mod.default);
     });
   }, [isGoogleCast]);
@@ -181,7 +292,7 @@ function MediaOutlet({ provider, mediaProps, iframeProps }) {
 MediaOutlet.displayName = "MediaOutlet";
 
 function createTextTrack(init) {
-  const media = useMediaContext(), track = React.useMemo(() => new TextTrack(init), Object.values(init));
+  const media = useMediaContext$1(), track = React.useMemo(() => new TextTrack(init), Object.values(init));
   React.useEffect(() => {
     media.textTracks.add(track);
     return () => void media.textTracks.remove(track);
@@ -318,7 +429,7 @@ function useStore(ctor, ref) {
 }
 
 function useMediaProvider() {
-  const [provider, setProvider] = React.useState(null), context = useMediaContext();
+  const [provider, setProvider] = React.useState(null), context = useMediaContext$1();
   if (!context) {
     throw Error(
       "[vidstack] no media context was found - was this called outside of `<MediaPlayer>`?"
@@ -441,7 +552,7 @@ function useAudioGainOptions({
   gains = DEFAULT_AUDIO_GAINS,
   disabledLabel = "disabled"
 } = {}) {
-  const media = useMediaContext(), { audioGain, canSetAudioGain } = media.$state;
+  const media = useMediaContext$1(), { audioGain, canSetAudioGain } = media.$state;
   useSignal(audioGain);
   useSignal(canSetAudioGain);
   return React.useMemo(() => {
@@ -473,4 +584,4 @@ function useAudioGainOptions({
   }, [gains]);
 }
 
-export { caption as Caption, Icon, MediaPlayer, MediaPlayerInstance, MediaProvider, MediaProviderInstance, Poster, PosterInstance, ToggleButton, ToggleButtonInstance, Track, createTextTrack, useActiveThumbnail, useAudioGainOptions, useMediaContext, useMediaProvider, useMediaState, useSliderPreview, useState, useStore, useThumbnails };
+export { caption as Caption, DEFAULT_AUDIO_GAINS, Icon, LibASSTextRenderer, MediaPlayer, MediaPlayerInstance, MediaProvider, MediaProviderInstance, Poster, PosterInstance, TextTrack, ToggleButton, ToggleButtonInstance, Track, createTextTrack, mediaState, useActiveThumbnail, useAudioGainOptions, useMediaContext$1 as useMediaContext, useMediaProvider, useMediaState, useSliderPreview, useState, useStore, useThumbnails };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hanifhan1f/vidstack-react",
   "description": "UI component library for building high-quality, accessible video and audio experiences on the web.",
-  "version": "1.12.30",
+  "version": "1.12.31",
   "license": "MIT",
   "type": "module",
   "types": "index.d.ts",