@hanifhan1f/vidstack-react 1.12.33 → 1.12.35

package/server/chunks/{vidstack-i9a2TQLO.js → vidstack-Dvh6BtYs.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-VGPw_CQP.js';
-import { useColorSchemePreference, useActive, useResizeObserver, useLayoutName, useTransitionActive } from './vidstack-DWfS9vAY.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-DM-5dPT-.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-DqUb8JgU.js';
+import { useColorSchemePreference, useActive, useResizeObserver, useLayoutName, useTransitionActive } from './vidstack-D7sOBYbw.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-CePUWLrW.js';
 import { useMediaState, isTrackCaptionKind, getDownloadFile, isRemotionSrc, IS_SERVER, useMediaContext as useMediaContext$1, sortVideoQualities, Primitive, mediaContext } from './vidstack-Cb_tNfNU.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/server/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-i9a2TQLO.js';
+export { DefaultAudioLayout, DefaultBufferingIndicator, DefaultKeyboardDisplay, DefaultMenuButton, DefaultMenuCheckbox, DefaultMenuItem, DefaultMenuRadioGroup, DefaultMenuSection, DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps, DefaultTooltip, DefaultVideoGestures, DefaultVideoLargeLayout, DefaultVideoLayout, DefaultVideoSmallLayout, createRadioOptions } from '../chunks/vidstack-Dvh6BtYs.js';
 export { defaultLayoutIcons } from './vidstack-default-icons.js';
 import 'react';
 import '../chunks/vidstack-D_bWd66h.js';
-import '../chunks/vidstack-VGPw_CQP.js';
+import '../chunks/vidstack-DqUb8JgU.js';
 import '../chunks/vidstack-Cb_tNfNU.js';
 import '@floating-ui/dom';
-import '../chunks/vidstack-DM-5dPT-.js';
+import '../chunks/vidstack-CePUWLrW.js';
 import 'react-dom';
-import '../chunks/vidstack-DWfS9vAY.js';
+import '../chunks/vidstack-D7sOBYbw.js';
 import '../chunks/vidstack-D-hQD1eE.js';
 import '../chunks/vidstack-CBF7iUqu.js';

package/server/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-i9a2TQLO.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-Dvh6BtYs.js';
 export { defaultLayoutIcons } from './vidstack-default-icons.js';
 import 'react';
 import '../chunks/vidstack-D_bWd66h.js';
-import '../chunks/vidstack-VGPw_CQP.js';
+import '../chunks/vidstack-DqUb8JgU.js';
 import '../chunks/vidstack-Cb_tNfNU.js';
 import '@floating-ui/dom';
-import '../chunks/vidstack-DM-5dPT-.js';
+import '../chunks/vidstack-CePUWLrW.js';
 import 'react-dom';
-import '../chunks/vidstack-DWfS9vAY.js';
+import '../chunks/vidstack-D7sOBYbw.js';
 import '../chunks/vidstack-D-hQD1eE.js';
 import '../chunks/vidstack-CBF7iUqu.js';

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

@@ -3,9 +3,9 @@
 import { useMediaState, Primitive, IS_SERVER, isRemotionSrc, getDownloadFile } from '../chunks/vidstack-Cb_tNfNU.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-DM-5dPT-.js';
-import { useMediaRemote, useVideoQualityOptions, usePlaybackRateOptions } from '../chunks/vidstack-DY51lx0R.js';
-import { useLayoutName, useClassName } from '../chunks/vidstack-DWfS9vAY.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-CePUWLrW.js';
+import { useMediaRemote, useCaptionOptions, useVideoQualityOptions, usePlaybackRateOptions } from '../chunks/vidstack-CSX6ausI.js';
+import { useLayoutName, useClassName } from '../chunks/vidstack-D7sOBYbw.js';
 import { RemotionThumbnail, RemotionPoster, RemotionSliderThumbnail } from '../chunks/vidstack-D-hQD1eE.js';
 export { plyrLayoutIcons } from './vidstack-plyr-icons.js';
 import '@floating-ui/dom';

package/server/vidstack.js

@@ -5,12 +5,12 @@ export { ARIAKeyShortcuts, AUDIO_EXTENSIONS, AUDIO_TYPES, AirPlayButtonInstance,
 import * as React from 'react';
 import { DOMEvent, isString, EventsController, 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-VGPw_CQP.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-VGPw_CQP.js';
-import { useMediaContext as useMediaContext$1 } from './chunks/vidstack-DM-5dPT-.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-DM-5dPT-.js';
+import { createSignal, useScoped } from './chunks/vidstack-DqUb8JgU.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-DqUb8JgU.js';
+import { useMediaContext as useMediaContext$1 } from './chunks/vidstack-CePUWLrW.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-CePUWLrW.js';
 import { Icon } from './chunks/vidstack-CBF7iUqu.js';
-export { DEFAULT_PLAYBACK_RATES, useMediaRemote, usePlaybackRateOptions, useVideoQualityOptions } from './chunks/vidstack-DY51lx0R.js';
+export { DEFAULT_PLAYBACK_RATES, useCaptionOptions, useMediaRemote, usePlaybackRateOptions, useVideoQualityOptions } from './chunks/vidstack-CSX6ausI.js';
 import '@floating-ui/dom';
 import 'react-dom';