@geekapps/silo-elements-nextjs 0.1.21 → 0.1.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/VideoPlayer.js +211 -115
  2. package/dist/VideoPlayer.js.map +1 -1
  3. package/dist/index.js +211 -115
  4. package/dist/index.js.map +1 -1
  5. package/dist/styles.css +1 -1
  6. package/package.json +1 -1
package/dist/VideoPlayer.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { useMemo, useRef, useState, useCallback, useEffect } from 'react';
2
2
  import gsap from 'gsap';
3
- import { Play, Pause, FastForward, VolumeX, Volume2, AudioLines, Captions, Settings, Minimize, Maximize } from 'lucide-react';
3
+ import { Play, Rewind, Pause, FastForward, VolumeX, Volume2, Captions, Settings, Minimize, Maximize } from 'lucide-react';
4
4
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
5
5
 
6
6
  var AUTO_QUALITY = {
@@ -8,6 +8,7 @@ var AUTO_QUALITY = {
8
8
  label: "Auto",
9
9
  type: "auto"
10
10
  };
11
+ var PLAYBACK_SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2];
11
12
  function Sources(_props) {
12
13
  return null;
13
14
  }
@@ -58,7 +59,15 @@ function Video({
58
59
  const [selectedQuality, setSelectedQuality] = useState("auto");
59
60
  const [audioTracks, setAudioTracks] = useState([]);
60
61
  const [selectedAudio, setSelectedAudio] = useState(0);
61
- const [openMenu, setOpenMenu] = useState(null);
62
+ const [settingsOpen, setSettingsOpen] = useState(false);
63
+ const [settingsTab, setSettingsTab] = useState("quality");
64
+ const [playbackRate, setPlaybackRate] = useState(1);
65
+ const [subtitleStyle, setSubtitleStyle] = useState({
66
+ track: initialSubtitleMode,
67
+ size: "medium",
68
+ color: "white",
69
+ bg: "semi"
70
+ });
62
71
  const [subtitleMode, setSubtitleMode] = useState(initialSubtitleMode);
63
72
  const [activeCue, setActiveCue] = useState(null);
64
73
  const [storyboardCues, setStoryboardCues] = useState(
@@ -70,6 +79,8 @@ function Video({
70
79
  const [bufferedTime, setBufferedTime] = useState(0);
71
80
  const [isPlaying, setIsPlaying] = useState(false);
72
81
  const [hasPlayed, setHasPlayed] = useState(false);
82
+ const [clickIcon, setClickIcon] = useState(null);
83
+ const clickIconTimerRef = useRef(null);
73
84
  const [isLoading, setIsLoading] = useState(true);
74
85
  const [controlsVisible, setControlsVisible] = useState(true);
75
86
  const [volume, setVolume] = useState(defaultVolume);
@@ -93,6 +104,7 @@ function Video({
93
104
  const video = videoRef.current;
94
105
  if (!video) return;
95
106
  Array.from(video.textTracks).forEach((track) => {
107
+ if (track.kind === "metadata") return;
96
108
  track.mode = mode !== "off" && track.language === mode ? "hidden" : "disabled";
97
109
  });
98
110
  if (mode === "off") setActiveCue(null);
@@ -195,6 +207,11 @@ function Video({
195
207
  applySubtitleMode(subtitleMode);
196
208
  if (subtitleMode === "off") setActiveCue(null);
197
209
  }, [subtitleMode, applySubtitleMode]);
210
+ useEffect(() => {
211
+ const video = videoRef.current;
212
+ if (!video) return;
213
+ video.playbackRate = playbackRate;
214
+ }, [playbackRate]);
198
215
  const subtitleModeRef = useRef(subtitleMode);
199
216
  useEffect(() => {
200
217
  subtitleModeRef.current = subtitleMode;
@@ -208,7 +225,7 @@ function Video({
208
225
  setActiveCue(null);
209
226
  return;
210
227
  }
211
- const track = Array.from(video.textTracks).find((t) => t.language === mode);
228
+ const track = Array.from(video.textTracks).find((t) => t.language === mode && t.kind !== "metadata");
212
229
  if (!track || !track.activeCues || track.activeCues.length === 0) {
213
230
  setActiveCue(null);
214
231
  return;
@@ -218,6 +235,7 @@ function Video({
218
235
  };
219
236
  const bindTracks = () => {
220
237
  Array.from(video.textTracks).forEach((t) => {
238
+ if (t.kind === "metadata") return;
221
239
  t.removeEventListener("cuechange", onCueChange);
222
240
  t.addEventListener("cuechange", onCueChange);
223
241
  });
@@ -311,7 +329,7 @@ function Video({
311
329
  setQualities([AUTO_QUALITY]);
312
330
  setAudioTracks([]);
313
331
  setSelectedAudio(0);
314
- setOpenMenu(null);
332
+ setSettingsOpen(false);
315
333
  video.pause();
316
334
  video.removeAttribute("src");
317
335
  video.load();
@@ -453,11 +471,15 @@ function Video({
453
471
  const video = videoRef.current;
454
472
  if (!video) return;
455
473
  try {
456
- if (video.paused) {
474
+ const wasPaused = video.paused;
475
+ if (wasPaused) {
457
476
  await video.play();
458
477
  } else {
459
478
  video.pause();
460
479
  }
480
+ if (clickIconTimerRef.current) window.clearTimeout(clickIconTimerRef.current);
481
+ setClickIcon(wasPaused ? "play" : "pause");
482
+ clickIconTimerRef.current = window.setTimeout(() => setClickIcon(null), 600);
461
483
  } catch {
462
484
  setError("O navegador bloqueou a reprodu\xE7\xE3o autom\xE1tica.");
463
485
  }
@@ -516,7 +538,7 @@ function Video({
516
538
  }, []);
517
539
  const changeAudio = useCallback((trackId) => {
518
540
  setSelectedAudio(trackId);
519
- setOpenMenu(null);
541
+ setSettingsOpen(false);
520
542
  if (hlsRef.current) {
521
543
  hlsRef.current.audioTrack = trackId;
522
544
  }
@@ -526,7 +548,7 @@ function Video({
526
548
  const option = qualities.find((quality) => quality.id === qualityId);
527
549
  if (!option) return;
528
550
  setSelectedQuality(qualityId);
529
- setOpenMenu(null);
551
+ setSettingsOpen(false);
530
552
  if (option.type === "auto") {
531
553
  if (hlsRef.current) {
532
554
  hlsRef.current.currentLevel = -1;
@@ -656,7 +678,7 @@ function Video({
656
678
  className: "relative w-full overflow-hidden rounded-[14px] bg-black shadow-[0_30px_90px_rgba(15,15,15,0.22)] outline-none ring-1 ring-black/5",
657
679
  style: maxHeight ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight, aspectRatio: "16/9" } : { aspectRatio: "16/9" },
658
680
  children: [
659
- /* @__PURE__ */ jsx(
681
+ /* @__PURE__ */ jsxs(
660
682
  "video",
661
683
  {
662
684
  ref: videoRef,
@@ -664,17 +686,27 @@ function Video({
664
686
  playsInline: true,
665
687
  preload: "metadata",
666
688
  crossOrigin: "anonymous",
667
- children: parsed.subtitles.map((subtitle) => /* @__PURE__ */ jsx(
668
- "track",
669
- {
670
- kind: "subtitles",
671
- src: subtitle.src,
672
- srcLang: subtitle.srclang,
673
- label: subtitle.label,
674
- default: subtitle.default
675
- },
676
- `${activeSource.src}-${subtitle.srclang}`
677
- ))
689
+ children: [
690
+ parsed.subtitles.map((subtitle) => /* @__PURE__ */ jsx(
691
+ "track",
692
+ {
693
+ kind: "subtitles",
694
+ src: subtitle.src,
695
+ srcLang: subtitle.srclang,
696
+ label: subtitle.label,
697
+ default: subtitle.default
698
+ },
699
+ `${activeSource.src}-${subtitle.srclang}`
700
+ )),
701
+ parsed.storyboard?.src && /* @__PURE__ */ jsx(
702
+ "track",
703
+ {
704
+ kind: "metadata",
705
+ label: "thumbnails",
706
+ src: parsed.storyboard.src
707
+ }
708
+ )
709
+ ]
678
710
  }
679
711
  ),
680
712
  poster && !hasPlayed && /* @__PURE__ */ jsx(
@@ -682,7 +714,7 @@ function Video({
682
714
  {
683
715
  src: poster,
684
716
  "aria-hidden": true,
685
- className: "pointer-events-none absolute inset-0 h-full w-full object-cover"
717
+ className: "pointer-events-none absolute inset-0 h-full w-full object-contain bg-black"
686
718
  }
687
719
  ),
688
720
  /* @__PURE__ */ jsx(
@@ -720,6 +752,114 @@ function Video({
720
752
  )
721
753
  ] }),
722
754
  /* @__PURE__ */ jsxs("footer", { onClick: (e) => e.stopPropagation(), className: "relative z-10 px-3 pb-3 text-white @sm:px-5 @sm:pb-5 @lg:px-9 @lg:pb-8", children: [
755
+ settingsOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
756
+ /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: () => setSettingsOpen(false) }),
757
+ /* @__PURE__ */ jsxs("div", { className: "absolute bottom-full right-3 z-50 mb-2 w-52 overflow-hidden rounded-xl border border-white/10 bg-black/90 shadow-2xl backdrop-blur-xl @sm:right-5 @lg:right-9", children: [
758
+ /* @__PURE__ */ jsx("div", { className: "flex border-b border-white/10", children: ["quality", ...parsed.subtitles.length > 0 ? ["subtitles"] : [], ...audioTracks.length > 1 ? ["audio"] : [], "playback"].map((tab) => /* @__PURE__ */ jsx(
759
+ "button",
760
+ {
761
+ type: "button",
762
+ onClick: () => setSettingsTab(tab),
763
+ className: `flex-1 px-3 py-2.5 text-xs font-semibold capitalize transition ${settingsTab === tab ? "text-white border-b-2 border-white -mb-px" : "text-white/50 hover:text-white/80"}`,
764
+ children: tab
765
+ },
766
+ tab
767
+ )) }),
768
+ /* @__PURE__ */ jsxs("div", { className: "max-h-48 overflow-y-auto py-1", children: [
769
+ settingsTab === "quality" && /* @__PURE__ */ jsx(Fragment, { children: [...qualities].reverse().map((quality) => /* @__PURE__ */ jsxs(
770
+ SettingsItem,
771
+ {
772
+ active: selectedQuality === quality.id,
773
+ onClick: () => changeQuality(quality.id),
774
+ children: [
775
+ quality.label,
776
+ quality.id === "auto" && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] text-white/40", children: "ABR" })
777
+ ]
778
+ },
779
+ quality.id
780
+ )) }),
781
+ settingsTab === "subtitles" && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 space-y-3", children: [
782
+ /* @__PURE__ */ jsxs("div", { children: [
783
+ /* @__PURE__ */ jsx("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-white/40", children: "Track" }),
784
+ /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: [{ srclang: "off", label: "Off" }, ...parsed.subtitles].map((s) => /* @__PURE__ */ jsx(
785
+ "button",
786
+ {
787
+ type: "button",
788
+ onClick: () => {
789
+ const next = s.srclang === "off" ? "off" : s.srclang;
790
+ setSubtitleMode(next);
791
+ setSubtitleStyle((st) => ({ ...st, track: next }));
792
+ },
793
+ className: `rounded-md px-2 py-1 text-xs font-medium transition ${subtitleStyle.track === s.srclang ? "bg-white text-black" : "bg-white/10 text-white hover:bg-white/20"}`,
794
+ children: s.label
795
+ },
796
+ s.srclang
797
+ )) })
798
+ ] }),
799
+ /* @__PURE__ */ jsxs("div", { children: [
800
+ /* @__PURE__ */ jsx("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-white/40", children: "Size" }),
801
+ /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: ["small", "medium", "large"].map((s) => /* @__PURE__ */ jsx(
802
+ "button",
803
+ {
804
+ type: "button",
805
+ onClick: () => setSubtitleStyle((st) => ({ ...st, size: s })),
806
+ className: `rounded-md px-2 py-1 text-xs font-medium capitalize transition ${subtitleStyle.size === s ? "bg-white text-black" : "bg-white/10 text-white hover:bg-white/20"}`,
807
+ children: s
808
+ },
809
+ s
810
+ )) })
811
+ ] }),
812
+ /* @__PURE__ */ jsxs("div", { children: [
813
+ /* @__PURE__ */ jsx("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-white/40", children: "Color" }),
814
+ /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [["white", "#fff"], ["yellow", "#facc15"], ["cyan", "#22d3ee"]].map(([c, hex]) => /* @__PURE__ */ jsx(
815
+ "button",
816
+ {
817
+ type: "button",
818
+ onClick: () => setSubtitleStyle((st) => ({ ...st, color: c })),
819
+ className: `size-5 rounded-full ring-2 transition ${subtitleStyle.color === c ? "ring-white" : "ring-transparent"}`,
820
+ style: { backgroundColor: hex }
821
+ },
822
+ c
823
+ )) })
824
+ ] }),
825
+ /* @__PURE__ */ jsxs("div", { children: [
826
+ /* @__PURE__ */ jsx("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-white/40", children: "Background" }),
827
+ /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: [["none", "None"], ["semi", "Semi"], ["solid", "Solid"]].map(([v, label]) => /* @__PURE__ */ jsx(
828
+ "button",
829
+ {
830
+ type: "button",
831
+ onClick: () => setSubtitleStyle((st) => ({ ...st, bg: v })),
832
+ className: `rounded-md px-2 py-1 text-xs font-medium transition ${subtitleStyle.bg === v ? "bg-white text-black" : "bg-white/10 text-white hover:bg-white/20"}`,
833
+ children: label
834
+ },
835
+ v
836
+ )) })
837
+ ] })
838
+ ] }),
839
+ settingsTab === "audio" && audioTracks.length > 1 && /* @__PURE__ */ jsx(Fragment, { children: audioTracks.map((track) => /* @__PURE__ */ jsx(
840
+ SettingsItem,
841
+ {
842
+ active: selectedAudio === track.id,
843
+ onClick: () => changeAudio(track.id),
844
+ children: track.label
845
+ },
846
+ track.id
847
+ )) }),
848
+ settingsTab === "playback" && /* @__PURE__ */ jsx(Fragment, { children: PLAYBACK_SPEEDS.map((speed) => /* @__PURE__ */ jsx(
849
+ SettingsItem,
850
+ {
851
+ active: playbackRate === speed,
852
+ onClick: () => {
853
+ setPlaybackRate(speed);
854
+ setSettingsOpen(false);
855
+ },
856
+ children: speed === 1 ? "Normal" : `${speed}x`
857
+ },
858
+ speed
859
+ )) })
860
+ ] })
861
+ ] })
862
+ ] }),
723
863
  /* @__PURE__ */ jsxs(
724
864
  "div",
725
865
  {
@@ -774,6 +914,16 @@ function Video({
774
914
  ),
775
915
  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 @sm:gap-4 @lg:gap-5", children: [
776
916
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 @sm:gap-4 @lg:gap-5", children: [
917
+ /* @__PURE__ */ jsx(
918
+ "button",
919
+ {
920
+ type: "button",
921
+ onClick: () => seekRelative(-10),
922
+ className: "grid size-6 place-items-center text-white transition hover:scale-105 hover:text-white/80 @sm:size-8",
923
+ "aria-label": "Rewind 10 seconds",
924
+ children: /* @__PURE__ */ jsx(Rewind, { className: "size-5 @sm:size-7" })
925
+ }
926
+ ),
777
927
  /* @__PURE__ */ jsx(
778
928
  "button",
779
929
  {
@@ -789,7 +939,7 @@ function Video({
789
939
  {
790
940
  type: "button",
791
941
  onClick: () => seekRelative(10),
792
- className: "hidden size-6 place-items-center text-white transition hover:scale-105 hover:text-white/80 @sm:grid @sm:size-8",
942
+ className: "grid size-6 place-items-center text-white transition hover:scale-105 hover:text-white/80 @sm:size-8",
793
943
  "aria-label": "Forward 10 seconds",
794
944
  children: /* @__PURE__ */ jsx(FastForward, { className: "size-5 @sm:size-7" })
795
945
  }
@@ -829,91 +979,29 @@ function Video({
829
979
  }
830
980
  ),
831
981
  /* @__PURE__ */ jsx("div", { className: "mx-0.5 hidden h-4 w-px bg-white/20 @md:mx-1 @md:block" }),
832
- audioTracks.length > 1 && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
833
- /* @__PURE__ */ jsx(
834
- "button",
835
- {
836
- type: "button",
837
- onClick: () => setOpenMenu(openMenu === "audio" ? null : "audio"),
838
- className: `grid size-6 place-items-center rounded transition hover:text-white/80 @sm:size-8 ${openMenu === "audio" ? "text-white" : "text-white/60"}`,
839
- "aria-label": "Audio track",
840
- children: /* @__PURE__ */ jsx(AudioLines, { className: "size-4 @sm:size-5" })
841
- }
842
- ),
843
- openMenu === "audio" && /* @__PURE__ */ jsx(PopoverMenu, { onClose: () => setOpenMenu(null), children: audioTracks.map((track) => /* @__PURE__ */ jsx(
844
- PopoverItem,
845
- {
846
- active: selectedAudio === track.id,
847
- onClick: () => changeAudio(track.id),
848
- children: track.label
849
- },
850
- track.id
851
- )) })
852
- ] }),
853
- parsed.subtitles.length > 0 && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
854
- /* @__PURE__ */ jsx(
855
- "button",
856
- {
857
- type: "button",
858
- onClick: () => setOpenMenu(openMenu === "captions" ? null : "captions"),
859
- className: `grid size-6 place-items-center rounded transition hover:text-white/80 @sm:size-8 ${subtitleMode !== "off" || openMenu === "captions" ? "text-white" : "text-white/60"}`,
860
- "aria-label": "Captions",
861
- children: /* @__PURE__ */ jsx(Captions, { className: "size-4 @sm:size-5" })
862
- }
863
- ),
864
- openMenu === "captions" && /* @__PURE__ */ jsxs(PopoverMenu, { onClose: () => setOpenMenu(null), children: [
865
- /* @__PURE__ */ jsx(
866
- PopoverItem,
867
- {
868
- active: subtitleMode === "off",
869
- onClick: () => {
870
- setSubtitleMode("off");
871
- setOpenMenu(null);
872
- },
873
- children: "Off"
874
- }
875
- ),
876
- parsed.subtitles.map((subtitle) => /* @__PURE__ */ jsx(
877
- PopoverItem,
878
- {
879
- active: subtitleMode === subtitle.srclang,
880
- onClick: () => {
881
- setSubtitleMode(subtitle.srclang);
882
- setOpenMenu(null);
883
- },
884
- children: subtitle.label
885
- },
886
- subtitle.srclang
887
- ))
888
- ] })
889
- ] }),
890
- /* @__PURE__ */ jsxs("div", { className: "relative", children: [
891
- /* @__PURE__ */ jsxs(
892
- "button",
893
- {
894
- type: "button",
895
- onClick: () => setOpenMenu(openMenu === "quality" ? null : "quality"),
896
- className: `flex h-6 items-center gap-1 rounded px-1.5 text-xs font-semibold transition hover:text-white/80 @sm:h-8 @sm:px-2 ${openMenu === "quality" ? "text-white" : "text-white/60"}`,
897
- "aria-label": "Quality",
898
- children: [
899
- /* @__PURE__ */ jsx(Settings, { className: "size-3.5 @sm:size-4" }),
900
- /* @__PURE__ */ jsx("span", { className: "hidden @sm:inline", children: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto" })
901
- ]
902
- }
903
- ),
904
- openMenu === "quality" && /* @__PURE__ */ jsx(PopoverMenu, { onClose: () => setOpenMenu(null), children: [...qualities].reverse().map((quality) => /* @__PURE__ */ jsxs(
905
- PopoverItem,
906
- {
907
- active: selectedQuality === quality.id,
908
- onClick: () => changeQuality(quality.id),
909
- children: [
910
- quality.label,
911
- quality.id === "auto" && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] text-white/40", children: "ABR" })
912
- ]
913
- },
914
- quality.id
915
- )) })
916
- ] }),
982
+ parsed.subtitles.length > 0 && /* @__PURE__ */ jsx(
983
+ "button",
984
+ {
985
+ type: "button",
986
+ onClick: () => setSubtitleMode((m) => m === "off" ? parsed.subtitles[0]?.srclang ?? "off" : "off"),
987
+ className: `grid size-6 place-items-center rounded transition hover:text-white/80 @sm:size-8 ${subtitleMode !== "off" ? "text-white" : "text-white/60"}`,
988
+ "aria-label": "Captions",
989
+ children: /* @__PURE__ */ jsx(Captions, { className: "size-4 @sm:size-5" })
990
+ }
991
+ ),
992
+ /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
993
+ "button",
994
+ {
995
+ type: "button",
996
+ onClick: () => setSettingsOpen((v) => !v),
997
+ className: `flex h-6 items-center gap-1 rounded px-1.5 text-xs font-semibold transition hover:text-white/80 @sm:h-8 @sm:px-2 ${settingsOpen ? "text-white" : "text-white/60"}`,
998
+ "aria-label": "Settings",
999
+ children: [
1000
+ /* @__PURE__ */ jsx(Settings, { className: "size-3.5 @sm:size-4" }),
1001
+ /* @__PURE__ */ jsx("span", { className: "hidden @sm:inline", children: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto" })
1002
+ ]
1003
+ }
1004
+ ) }),
917
1005
  /* @__PURE__ */ jsx(
918
1006
  "button",
919
1007
  {
@@ -930,6 +1018,14 @@ function Video({
930
1018
  ]
931
1019
  }
932
1020
  ),
1021
+ /* @__PURE__ */ jsx(
1022
+ "div",
1023
+ {
1024
+ className: "pointer-events-none absolute inset-0 z-50 grid place-items-center",
1025
+ style: { opacity: clickIcon ? 1 : 0, transition: clickIcon ? "opacity 0.08s ease-in" : "opacity 0.45s ease-out" },
1026
+ children: /* @__PURE__ */ jsx("span", { className: "grid size-14 place-items-center rounded-full bg-black/40 text-white backdrop-blur-sm ring-1 ring-white/20 @sm:size-18 @lg:size-22", children: clickIcon === "pause" ? /* @__PURE__ */ jsx(Pause, { className: "size-6 @sm:size-8 @lg:size-10" }) : /* @__PURE__ */ jsx(Play, { className: "ml-1 size-6 @sm:size-8 @lg:size-10" }) })
1027
+ }
1028
+ ),
933
1029
  activeCue && /* @__PURE__ */ jsx(
934
1030
  "div",
935
1031
  {
@@ -937,8 +1033,14 @@ function Video({
937
1033
  children: /* @__PURE__ */ jsx(
938
1034
  "div",
939
1035
  {
940
- className: "max-w-3xl rounded-lg bg-black/75 px-4 py-2 text-center text-sm font-medium leading-snug text-white backdrop-blur-sm @sm:text-base @lg:text-lg",
941
- style: { textShadow: "0 1px 4px rgba(0,0,0,0.9)" },
1036
+ className: "max-w-3xl rounded-lg px-4 py-2 text-center font-medium leading-snug",
1037
+ style: {
1038
+ fontSize: subtitleStyle.size === "small" ? "0.8rem" : subtitleStyle.size === "large" ? "1.25rem" : "1rem",
1039
+ color: subtitleStyle.color === "yellow" ? "#facc15" : subtitleStyle.color === "cyan" ? "#22d3ee" : "#ffffff",
1040
+ backgroundColor: subtitleStyle.bg === "none" ? "transparent" : subtitleStyle.bg === "solid" ? "rgba(0,0,0,0.9)" : "rgba(0,0,0,0.7)",
1041
+ backdropFilter: subtitleStyle.bg === "semi" ? "blur(4px)" : void 0,
1042
+ textShadow: subtitleStyle.bg === "none" ? "0 1px 6px rgba(0,0,0,1), 0 0 12px rgba(0,0,0,0.8)" : "0 1px 3px rgba(0,0,0,0.6)"
1043
+ },
942
1044
  children: activeCue
943
1045
  }
944
1046
  )
@@ -951,13 +1053,7 @@ function Video({
951
1053
  );
952
1054
  }
953
1055
  var VideoPlayer = Video;
954
- function PopoverMenu({ children, onClose }) {
955
- return /* @__PURE__ */ jsxs(Fragment, { children: [
956
- /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: onClose }),
957
- /* @__PURE__ */ jsx("div", { className: "absolute bottom-full right-0 z-50 mb-2 min-w-35 overflow-hidden rounded-xl border border-white/10 bg-black/85 py-1 shadow-2xl backdrop-blur-xl", children })
958
- ] });
959
- }
960
- function PopoverItem({
1056
+ function SettingsItem({
961
1057
  children,
962
1058
  active,
963
1059
  onClick