@hanifhan1f/vidstack-react 1.12.33 → 1.12.35

package/dev/chunks/{vidstack-3rdEWplD.js → vidstack-B-DU-_xu.js}

@@ -1,8 +1,8 @@
 "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 { RadioGroupController, useMediaContext, menuContext, MediaRemoteControl, MediaPlayerInstance, isTrackCaptionKind, sortVideoQualities } from './vidstack-C5tZAkKo.js';
+import { useMediaContext as useMediaContext$1 } from './vidstack-CjLj3q5w.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];
@@ -83,6 +83,58 @@ function useMediaRemote(target) {
   return remote.current;
 }
 
+function useCaptionOptions({ off = true } = {}) {
+  const media = useMediaContext$1(), { textTracks, textTrack } = media.$state, $textTracks = useSignal(textTracks);
+  useSignal(textTrack);
+  return React.useMemo(() => {
+    const captionTracks = $textTracks.filter(isTrackCaptionKind), options = captionTracks.map((track) => ({
+      track,
+      label: track.label,
+      value: getTrackValue(track),
+      get selected() {
+        return textTrack() === track;
+      },
+      select(trigger) {
+        const index = textTracks().indexOf(track);
+        if (index >= 0) media.remote.changeTextTrackMode(index, "showing", trigger);
+      }
+    }));
+    if (off) {
+      options.unshift({
+        track: null,
+        label: isString(off) ? off : "Off",
+        value: "off",
+        get selected() {
+          return !textTrack();
+        },
+        select(trigger) {
+          media.remote.toggleCaptions(trigger);
+        }
+      });
+    }
+    Object.defineProperty(options, "disabled", {
+      get() {
+        return !captionTracks.length;
+      }
+    });
+    Object.defineProperty(options, "selectedTrack", {
+      get() {
+        return textTrack();
+      }
+    });
+    Object.defineProperty(options, "selectedValue", {
+      get() {
+        const track = textTrack();
+        return track ? getTrackValue(track) : "off";
+      }
+    });
+    return options;
+  }, [$textTracks]);
+}
+function getTrackValue(track) {
+  return track.id + ":" + track.kind + "-" + track.label.toLowerCase();
+}
+
 function useVideoQualityOptions({
   auto = true,
   sort = "descending"
@@ -186,4 +238,4 @@ function usePlaybackRateOptions({
   }, [rates]);
 }
 
-export { DEFAULT_PLAYBACK_RATES, useMediaRemote, usePlaybackRateOptions, useVideoQualityOptions };
+export { DEFAULT_PLAYBACK_RATES, useCaptionOptions, useMediaRemote, usePlaybackRateOptions, useVideoQualityOptions };

package/dev/chunks/{vidstack-CniPzPQc.js → vidstack-C3VHrHPf.js}

@@ -2,9 +2,9 @@
 
 import * as React from 'react';
 import { useSignal, composeRefs, isBoolean, uppercaseFirstChar, isUndefined, isString, signal, camelToKebabCase, onDispose, scoped, keysOf, effect, isArray, isKeyboardClick, listenEvent, toggleClass, useContext } from './vidstack-D_bWd66h.js';
-import { createComputed, createSignal, MediaAnnouncer, Root, Trigger, Content, GoogleCastButton, Captions, useChapterOptions, Root$1 as Root$5, Root$2 as Root$6, Root$3 as Root$7, useScoped, Root$4 as Root$a, Group, useChapterTitle, createEffect, useActiveTextTrack, ChapterTitle as ChapterTitle$1, Title, Root$5 as Root$b, Track as Track$1, TrackFill as TrackFill$1 } from './vidstack-S_S6XDnL.js';
-import { useColorSchemePreference, useActive, useResizeObserver, useLayoutName, useTransitionActive } from './vidstack-vh0BKYWJ.js';
-import { useMediaContext, MuteButton, SeekButton, LiveButton, PlayButton, CaptionButton, appendParamsToURL, PIPButton, FullscreenButton, AirPlayButton, Items, Root$3 as Root$1, Item, Root as Root$2, Img, Root$2 as Root$3, Button, Portal, Track, TrackFill, Thumb, Steps, useMediaPlayer, Root$5 as Root$4, useAudioOptions, useCaptionOptions, Root$4 as Root$8, Preview, Value, Root$1 as Root$9, Chapters, Progress, Thumbnail, ChapterTitle, Time, Gesture } from './vidstack-oOGofWSl.js';
+import { createComputed, createSignal, MediaAnnouncer, Root, Trigger, Content, GoogleCastButton, Captions, useChapterOptions, Root$1 as Root$5, Root$2 as Root$6, Root$3 as Root$7, useScoped, Root$4 as Root$a, Group, useChapterTitle, createEffect, useActiveTextTrack, ChapterTitle as ChapterTitle$1, Title, Root$5 as Root$b, Track as Track$1, TrackFill as TrackFill$1 } from './vidstack-t48GJbb5.js';
+import { useColorSchemePreference, useActive, useResizeObserver, useLayoutName, useTransitionActive } from './vidstack-DpWioszb.js';
+import { useMediaContext, MuteButton, SeekButton, LiveButton, PlayButton, CaptionButton, appendParamsToURL, PIPButton, FullscreenButton, AirPlayButton, Items, Root$3 as Root$1, Item, Root as Root$2, Img, Root$2 as Root$3, Button, Portal, Track, TrackFill, Thumb, Steps, useMediaPlayer, Root$5 as Root$4, useAudioOptions, Root$4 as Root$8, Preview, Value, Root$1 as Root$9, Chapters, Progress, Thumbnail, ChapterTitle, Time, Gesture } from './vidstack-CjLj3q5w.js';
 import { useMediaState, isTrackCaptionKind, getDownloadFile, isRemotionSrc, IS_SERVER, useMediaContext as useMediaContext$1, sortVideoQualities, Primitive, mediaContext } from './vidstack-C5tZAkKo.js';
 import { flushSync } from 'react-dom';
 import { RemotionThumbnail, RemotionSliderThumbnail } from './vidstack-D-hQD1eE.js';
@@ -862,35 +862,175 @@ function DefaultAudioTracksMenu() {
 }
 DefaultAudioTracksMenu.displayName = "DefaultAudioTracksMenu";
 
+const LANG_FLAGS = {
+  en: "gb",
+  eng: "gb",
+  english: "gb",
+  id: "id",
+  ind: "id",
+  indonesian: "id",
+  ja: "jp",
+  jpn: "jp",
+  japanese: "jp",
+  ko: "kr",
+  kor: "kr",
+  korean: "kr",
+  zh: "cn",
+  zho: "cn",
+  chi: "cn",
+  chinese: "cn",
+  es: "es",
+  spa: "es",
+  spanish: "es",
+  fr: "fr",
+  fra: "fr",
+  french: "fr",
+  de: "de",
+  deu: "de",
+  ger: "de",
+  german: "de",
+  pt: "br",
+  por: "br",
+  portuguese: "br",
+  ru: "ru",
+  rus: "ru",
+  russian: "ru",
+  ar: "sa",
+  ara: "sa",
+  arabic: "sa",
+  hi: "in",
+  hin: "in",
+  hindi: "in",
+  th: "th",
+  tha: "th",
+  thai: "th",
+  vi: "vn",
+  vie: "vn",
+  vietnamese: "vn",
+  it: "it",
+  ita: "it",
+  italian: "it",
+  tr: "tr",
+  tur: "tr",
+  turkish: "tr",
+  pl: "pl",
+  pol: "pl",
+  polish: "pl",
+  nl: "nl",
+  nld: "nl",
+  dutch: "nl",
+  ms: "my",
+  msa: "my",
+  malay: "my"
+};
+function getFlagCode(label) {
+  const lower = label.toLowerCase().replace(/\s\d+$/, "").trim();
+  if (LANG_FLAGS[lower]) return LANG_FLAGS[lower];
+  for (const [key, code] of Object.entries(LANG_FLAGS)) {
+    if (lower.startsWith(key) || lower.includes(key)) return code;
+  }
+  return null;
+}
 function DefaultCaptionMenu({ slots }) {
-  const { icons: Icons } = useDefaultLayoutContext(), label = useDefaultLayoutWord("Captions"), offText = useDefaultLayoutWord("Off"), options = useCaptionOptions({ off: offText }), hint = options.selectedTrack?.label ?? offText;
-  if (options.disabled) return null;
+  const { icons: Icons } = useDefaultLayoutContext(), label = useDefaultLayoutWord("Captions"), offText = useDefaultLayoutWord("Off"), media = useMediaContext(), hasCaptions = useMediaState("hasCaptions"), textTracks = useMediaState("textTracks"), activeTrack = useMediaState("textTrack");
+  if (!hasCaptions) return null;
+  const tracks = textTracks.filter(isTrackCaptionKind);
+  const grouped = /* @__PURE__ */ new Map();
+  for (const track of tracks) {
+    const normalizedLabel = track.label.replace(/\s\d+$/, "").trim();
+    if (!grouped.has(normalizedLabel)) {
+      grouped.set(normalizedLabel, []);
+    }
+    grouped.get(normalizedLabel).push(track);
+  }
+  const priorities = ["indonesian", "english", "japanese", "korean", "chinese"];
+  const getPriority = (lbl) => {
+    const lower = lbl.toLowerCase();
+    const pIndex = priorities.findIndex((p) => lower.includes(p));
+    return pIndex !== -1 ? pIndex : 999;
+  };
+  const sortedGroups = Array.from(grouped.entries()).sort((a, b) => {
+    const pa = getPriority(a[0]);
+    const pb = getPriority(b[0]);
+    if (pa !== pb) return pa - pb;
+    return a[0].localeCompare(b[0]);
+  });
+  const isOff = tracks.every((t) => t.mode !== "showing");
+  const onOffSelect = (e) => {
+    const selected = media.textTracks.selected;
+    if (selected) {
+      const idx = media.textTracks.indexOf(selected);
+      media.remote.changeTextTrackMode(idx, "disabled", e);
+    }
+  };
   return /* @__PURE__ */ React.createElement(Root$3, { className: "vds-captions-menu vds-menu" }, /* @__PURE__ */ React.createElement(
     DefaultMenuButton,
     {
       label,
-      hint,
-      disabled: options.disabled,
+      hint: activeTrack?.label ?? offText,
+      disabled: false,
       Icon: Icons.Menu.Captions
     }
   ), /* @__PURE__ */ React.createElement(Items, { className: "vds-menu-items" }, slot(slots, "captionsMenuItemsStart", null), /* @__PURE__ */ React.createElement(
     Root$1,
     {
       className: "vds-captions-radio-group vds-radio-group",
-      value: options.selectedValue
+      value: isOff ? "off" : "none"
     },
-    options.map(({ label: label2, value, select }) => /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(
       Item,
       {
         className: "vds-caption-radio vds-radio",
-        value,
-        onSelect: select,
-        key: value
+        value: "off",
+        onSelect: onOffSelect
       },
       /* @__PURE__ */ React.createElement(Icons.Menu.RadioCheck, { className: "vds-icon" }),
-      /* @__PURE__ */ React.createElement("span", { className: "vds-radio-label" }, label2)
-    ))
-  ), slot(slots, "captionsMenuItemsEnd", null)));
+      /* @__PURE__ */ React.createElement("span", { className: "vds-radio-label" }, offText)
+    )
+  ), sortedGroups.map(([groupLabel, groupTracks]) => {
+    const flagCode = getFlagCode(groupLabel);
+    const activeIndex = groupTracks.findIndex((t) => t === activeTrack);
+    return /* @__PURE__ */ React.createElement(Root$3, { key: groupLabel, className: "vds-captions-group-menu vds-menu" }, /* @__PURE__ */ React.createElement(Button, { className: "vds-menu-item" }, /* @__PURE__ */ React.createElement(Icons.Menu.ArrowLeft, { className: "vds-menu-close-icon vds-icon" }), /* @__PURE__ */ React.createElement("span", { className: "vds-menu-item-label", style: { display: "flex", alignItems: "center", gap: "8px" } }, flagCode ? /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: `fi fi-${flagCode}`,
+        style: {
+          fontSize: "1.25em",
+          borderRadius: "2px",
+          width: "1.33em",
+          height: "1em",
+          display: "inline-block",
+          backgroundImage: `url('https://cdnjs.cloudflare.com/ajax/libs/flag-icons/7.1.0/flags/4x3/${flagCode}.svg')`,
+          backgroundSize: "cover",
+          backgroundPosition: "center"
+        }
+      }
+    ) : null, /* @__PURE__ */ React.createElement("span", null, groupLabel)), /* @__PURE__ */ React.createElement("span", { className: "vds-menu-item-hint" }, activeIndex !== -1 ? `${activeIndex + 1}/${groupTracks.length}` : ""), /* @__PURE__ */ React.createElement(Icons.Menu.ArrowRight, { className: "vds-menu-open-icon vds-icon" })), /* @__PURE__ */ React.createElement(Items, { className: "vds-menu-items" }, /* @__PURE__ */ React.createElement(
+      Root$1,
+      {
+        className: "vds-captions-radio-group vds-radio-group",
+        value: String(activeIndex)
+      },
+      groupTracks.map((track, idx) => {
+        const displayLabel = groupTracks.length > 1 ? `${groupLabel} ${idx + 1}` : groupLabel;
+        const onSelect = (e) => {
+          const globalIdx = media.textTracks.indexOf(track);
+          media.remote.changeTextTrackMode(globalIdx, "showing", e);
+        };
+        return /* @__PURE__ */ React.createElement(
+          Item,
+          {
+            key: idx,
+            className: "vds-caption-radio vds-radio",
+            value: String(idx),
+            onSelect
+          },
+          /* @__PURE__ */ React.createElement(Icons.Menu.RadioCheck, { className: "vds-icon" }),
+          /* @__PURE__ */ React.createElement("span", { className: "vds-radio-label" }, displayLabel)
+        );
+      })
+    )));
+  }), slot(slots, "captionsMenuItemsEnd", null)));
 }
 DefaultCaptionMenu.displayName = "DefaultCaptionMenu";
 

package/dev/chunks/{vidstack-BOPSNTgH.js → vidstack-CjLj3q5w.js}

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { useReactContext, createReactComponent, composeRefs, useSignal, noop, useStateContext, signal, effect, isString } from './vidstack-D_bWd66h.js';
-import { mediaContext, AirPlayButtonInstance, Primitive, PlayButtonInstance, CaptionButtonInstance, FullscreenButtonInstance, MuteButtonInstance, PIPButtonInstance, SeekButtonInstance, LiveButtonInstance, SliderValueInstance, SliderInstance, SliderPreviewInstance, useSliderState, VolumeSliderInstance, IS_SERVER, ThumbnailInstance, TimeSliderInstance, SliderChaptersInstance, SliderThumbnailInstance, SliderVideoInstance, mediaState, RadioGroupInstance, RadioInstance, MenuInstance, MenuButtonInstance, useMediaState, MenuItemsInstance, MenuItemInstance, GestureInstance, TimeInstance, isTrackCaptionKind } from './vidstack-BXgKy_7V.js';
+import { mediaContext, AirPlayButtonInstance, Primitive, PlayButtonInstance, CaptionButtonInstance, FullscreenButtonInstance, MuteButtonInstance, PIPButtonInstance, SeekButtonInstance, LiveButtonInstance, SliderValueInstance, SliderInstance, SliderPreviewInstance, useSliderState, VolumeSliderInstance, IS_SERVER, ThumbnailInstance, TimeSliderInstance, SliderChaptersInstance, SliderThumbnailInstance, SliderVideoInstance, mediaState, RadioGroupInstance, RadioInstance, MenuInstance, MenuButtonInstance, useMediaState, MenuItemsInstance, MenuItemInstance, GestureInstance, TimeInstance } from './vidstack-C5tZAkKo.js';
 import { createPortal } from 'react-dom';
 
 function useMediaContext() {
@@ -581,7 +581,7 @@ function useAudioOptions() {
     const options = $audioTracks.map((track) => ({
       track,
       label: track.label,
-      value: getTrackValue$1(track),
+      value: getTrackValue(track),
       get selected() {
         return audioTrack() === track;
       },
@@ -603,66 +603,14 @@ function useAudioOptions() {
     Object.defineProperty(options, "selectedValue", {
       get() {
         const track = audioTrack();
-        return track ? getTrackValue$1(track) : void 0;
+        return track ? getTrackValue(track) : void 0;
       }
     });
     return options;
   }, [$audioTracks]);
 }
-function getTrackValue$1(track) {
-  return track.label.toLowerCase();
-}
-
-function useCaptionOptions({ off = true } = {}) {
-  const media = useMediaContext(), { textTracks, textTrack } = media.$state, $textTracks = useSignal(textTracks);
-  useSignal(textTrack);
-  return React.useMemo(() => {
-    const captionTracks = $textTracks.filter(isTrackCaptionKind), options = captionTracks.map((track) => ({
-      track,
-      label: track.label,
-      value: getTrackValue(track),
-      get selected() {
-        return textTrack() === track;
-      },
-      select(trigger) {
-        const index = textTracks().indexOf(track);
-        if (index >= 0) media.remote.changeTextTrackMode(index, "showing", trigger);
-      }
-    }));
-    if (off) {
-      options.unshift({
-        track: null,
-        label: isString(off) ? off : "Off",
-        value: "off",
-        get selected() {
-          return !textTrack();
-        },
-        select(trigger) {
-          media.remote.toggleCaptions(trigger);
-        }
-      });
-    }
-    Object.defineProperty(options, "disabled", {
-      get() {
-        return !captionTracks.length;
-      }
-    });
-    Object.defineProperty(options, "selectedTrack", {
-      get() {
-        return textTrack();
-      }
-    });
-    Object.defineProperty(options, "selectedValue", {
-      get() {
-        const track = textTrack();
-        return track ? getTrackValue(track) : "off";
-      }
-    });
-    return options;
-  }, [$textTracks]);
-}
 function getTrackValue(track) {
-  return track.id + ":" + track.kind + "-" + track.label.toLowerCase();
+  return track.label.toLowerCase();
 }
 
-export { AirPlayButton, Button, CaptionButton, ChapterTitle, Chapters, FullscreenButton, Gesture, Img, Item$1 as Item, Items, LiveButton, MuteButton, PIPButton, PlayButton, Portal, Preview, Progress, Root$3 as Root, Root$2 as Root$1, Root as Root$2, Root$1 as Root$3, Root$4, Root$5, SeekButton, Steps, Thumb, Thumbnail, Time, Track, TrackFill, Value, appendParamsToURL, menu, radioGroup, slider, sliderCallbacks, thumbnail, timeSlider, useAudioOptions, useCaptionOptions, useMediaContext, useMediaPlayer, volumeSlider };
+export { AirPlayButton, Button, CaptionButton, ChapterTitle, Chapters, FullscreenButton, Gesture, Img, Item$1 as Item, Items, LiveButton, MuteButton, PIPButton, PlayButton, Portal, Preview, Progress, Root$3 as Root, Root$2 as Root$1, Root as Root$2, Root$1 as Root$3, Root$4, Root$5, SeekButton, Steps, Thumb, Thumbnail, Time, Track, TrackFill, Value, appendParamsToURL, menu, radioGroup, slider, sliderCallbacks, thumbnail, timeSlider, useAudioOptions, useMediaContext, useMediaPlayer, volumeSlider };

package/dev/chunks/{vidstack-BNwnoM-l.js → vidstack-DpWioszb.js}

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { listenEvent, EventsController, animationFrameThrottle, effect } from './vidstack-D_bWd66h.js';
-import { useMediaPlayer } from './vidstack-BOPSNTgH.js';
+import { useMediaPlayer } from './vidstack-CjLj3q5w.js';
 
 function useClassName(el, className) {
   React.useEffect(() => {

package/dev/chunks/{vidstack-S_S6XDnL.js → vidstack-t48GJbb5.js}

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { createReactComponent, composeRefs, listenEvent, useReactScope, scoped, computed, signal, effect, EventsController, useSignal } from './vidstack-D_bWd66h.js';
 import { MediaAnnouncerInstance, Primitive, ControlsInstance, ControlsGroupInstance, TooltipInstance, TooltipTriggerInstance, TooltipContentInstance, GoogleCastButtonInstance, QualitySliderInstance, AudioGainSliderInstance, SpeedSliderInstance, useMediaState, watchActiveTextTrack, CaptionsInstance, formatSpokenTime, formatTime } from './vidstack-C5tZAkKo.js';
-import { sliderCallbacks, Preview, Steps, Thumb, Track as Track$1, TrackFill as TrackFill$1, Value, useMediaContext } from './vidstack-oOGofWSl.js';
+import { sliderCallbacks, Preview, Steps, Thumb, Track as Track$1, TrackFill as TrackFill$1, Value, useMediaContext } from './vidstack-CjLj3q5w.js';
 
 const MediaAnnouncerBridge = createReactComponent(MediaAnnouncerInstance, {
   events: ["onChange"]

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

@@ -1,14 +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-CniPzPQc.js';
+export { DefaultAudioLayout, DefaultBufferingIndicator, DefaultKeyboardDisplay, DefaultMenuButton, DefaultMenuCheckbox, DefaultMenuItem, DefaultMenuRadioGroup, DefaultMenuSection, DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps, DefaultTooltip, DefaultVideoGestures, DefaultVideoLargeLayout, DefaultVideoLayout, DefaultVideoSmallLayout, createRadioOptions } from '../chunks/vidstack-C3VHrHPf.js';
 export { defaultLayoutIcons } from './vidstack-default-icons.js';
 import 'react';
 import '../chunks/vidstack-D_bWd66h.js';
-import '../chunks/vidstack-S_S6XDnL.js';
+import '../chunks/vidstack-t48GJbb5.js';
 import '../chunks/vidstack-C5tZAkKo.js';
 import '@floating-ui/dom';
-import '../chunks/vidstack-oOGofWSl.js';
+import '../chunks/vidstack-CjLj3q5w.js';
 import 'react-dom';
-import '../chunks/vidstack-vh0BKYWJ.js';
+import '../chunks/vidstack-DpWioszb.js';
 import '../chunks/vidstack-D-hQD1eE.js';
 import '../chunks/vidstack-CBF7iUqu.js';

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

@@ -1,14 +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-CniPzPQc.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-C3VHrHPf.js';
 export { defaultLayoutIcons } from './vidstack-default-icons.js';
 import 'react';
 import '../chunks/vidstack-D_bWd66h.js';
-import '../chunks/vidstack-S_S6XDnL.js';
+import '../chunks/vidstack-t48GJbb5.js';
 import '../chunks/vidstack-C5tZAkKo.js';
 import '@floating-ui/dom';
-import '../chunks/vidstack-oOGofWSl.js';
+import '../chunks/vidstack-CjLj3q5w.js';
 import 'react-dom';
-import '../chunks/vidstack-vh0BKYWJ.js';
+import '../chunks/vidstack-DpWioszb.js';
 import '../chunks/vidstack-D-hQD1eE.js';
 import '../chunks/vidstack-CBF7iUqu.js';

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

@@ -3,9 +3,9 @@
 import { useMediaState, Primitive, IS_SERVER, isRemotionSrc, getDownloadFile } from '../chunks/vidstack-C5tZAkKo.js';
 import * as React from 'react';
 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 { 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, MuteButton, Root$4 } from '../chunks/vidstack-CjLj3q5w.js';
+import { useMediaRemote, useCaptionOptions, useVideoQualityOptions, usePlaybackRateOptions } from '../chunks/vidstack-B-DU-_xu.js';
+import { useLayoutName, useClassName } from '../chunks/vidstack-DpWioszb.js';
 import { RemotionThumbnail, RemotionPoster, RemotionSliderThumbnail } from '../chunks/vidstack-D-hQD1eE.js';
 export { plyrLayoutIcons } from './vidstack-plyr-icons.js';
 import '@floating-ui/dom';

package/dev/vidstack.js

@@ -5,12 +5,12 @@ export { ARIAKeyShortcuts, AUDIO_EXTENSIONS, AUDIO_TYPES, AirPlayButtonInstance,
 import * as React from 'react';
 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 { createSignal, useScoped } from './chunks/vidstack-t48GJbb5.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-t48GJbb5.js';
+import { useMediaContext as useMediaContext$1 } from './chunks/vidstack-CjLj3q5w.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, useMediaPlayer } from './chunks/vidstack-CjLj3q5w.js';
 import { Icon } from './chunks/vidstack-CBF7iUqu.js';
-export { DEFAULT_PLAYBACK_RATES, useMediaRemote, usePlaybackRateOptions, useVideoQualityOptions } from './chunks/vidstack-3rdEWplD.js';
+export { DEFAULT_PLAYBACK_RATES, useCaptionOptions, useMediaRemote, usePlaybackRateOptions, useVideoQualityOptions } from './chunks/vidstack-B-DU-_xu.js';
 import '@floating-ui/dom';
 import 'react-dom';
 

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.33",
+  "version": "1.12.35",
   "license": "MIT",
   "type": "module",
   "types": "index.d.ts",

package/player/layouts/default.d.ts

@@ -1994,6 +1994,7 @@ interface VideoSrcMeta {
     bitrate?: number;
     framerate?: number;
     codec?: string;
+    label?: string;
 }
 interface HLSSrc {
     src: string;
@@ -2013,7 +2014,7 @@ interface VimeoSrc {
     src: string;
     type: 'video/vimeo';
 }
-declare function isVideoQualitySrc(src: Src): src is SetRequired<VideoSrc, 'width' | 'height'>;
+declare function isVideoQualitySrc(src: Src): src is SetRequired<VideoSrc, 'height' | 'label'>;
 
 /**
  * A simple facade for dispatching media requests to the nearest media player element.
@@ -2456,6 +2457,7 @@ interface VideoQuality extends SelectListItem {
     readonly height: number;
     readonly bitrate: number | null;
     readonly codec: string | null;
+    readonly label?: string;
 }
 
 declare class MediaPlayerDelegate {
@@ -10790,6 +10792,12 @@ interface DefaultLayoutEpisode {
     runtime?: number;
     episodeNumber?: number;
     seasonNumber?: number;
+    /** Highlights this row as the episode currently playing (e.g. in fullscreen episode list). */
+    isActive?: boolean;
+    /** Watch progress 0–100 for a progress bar on the thumbnail. */
+    progressPercent?: number;
+    /** Approximate whole minutes remaining (used when not the active playing row). */
+    timeLeft?: number;
 }
 
 declare const DefaultLayoutContext: React.Context<DefaultLayoutContext>;

package/prod/chunks/{vidstack-BlPINAXN.js → vidstack-BI5-IK9v.js}

@@ -1,8 +1,8 @@
 "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 { RadioGroupController, useMediaContext, menuContext, MediaRemoteControl, MediaPlayerInstance, isTrackCaptionKind, sortVideoQualities } from './vidstack-C48MQkXV.js';
+import { useMediaContext as useMediaContext$1 } from './vidstack-DKWmxvB4.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];
@@ -83,6 +83,58 @@ function useMediaRemote(target) {
   return remote.current;
 }
 
+function useCaptionOptions({ off = true } = {}) {
+  const media = useMediaContext$1(), { textTracks, textTrack } = media.$state, $textTracks = useSignal(textTracks);
+  useSignal(textTrack);
+  return React.useMemo(() => {
+    const captionTracks = $textTracks.filter(isTrackCaptionKind), options = captionTracks.map((track) => ({
+      track,
+      label: track.label,
+      value: getTrackValue(track),
+      get selected() {
+        return textTrack() === track;
+      },
+      select(trigger) {
+        const index = textTracks().indexOf(track);
+        if (index >= 0) media.remote.changeTextTrackMode(index, "showing", trigger);
+      }
+    }));
+    if (off) {
+      options.unshift({
+        track: null,
+        label: isString(off) ? off : "Off",
+        value: "off",
+        get selected() {
+          return !textTrack();
+        },
+        select(trigger) {
+          media.remote.toggleCaptions(trigger);
+        }
+      });
+    }
+    Object.defineProperty(options, "disabled", {
+      get() {
+        return !captionTracks.length;
+      }
+    });
+    Object.defineProperty(options, "selectedTrack", {
+      get() {
+        return textTrack();
+      }
+    });
+    Object.defineProperty(options, "selectedValue", {
+      get() {
+        const track = textTrack();
+        return track ? getTrackValue(track) : "off";
+      }
+    });
+    return options;
+  }, [$textTracks]);
+}
+function getTrackValue(track) {
+  return track.id + ":" + track.kind + "-" + track.label.toLowerCase();
+}
+
 function useVideoQualityOptions({
   auto = true,
   sort = "descending"
@@ -186,4 +238,4 @@ function usePlaybackRateOptions({
   }, [rates]);
 }
 
-export { DEFAULT_PLAYBACK_RATES, useMediaRemote, usePlaybackRateOptions, useVideoQualityOptions };
+export { DEFAULT_PLAYBACK_RATES, useCaptionOptions, useMediaRemote, usePlaybackRateOptions, useVideoQualityOptions };