@geekapps/silo-elements-nextjs 0.1.24 → 0.2.26

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { MediaUploader } from './MediaUploader.js';
 export { Source, SourceProps, Sources, SourcesProps, Storyboard, StoryboardFrame, StoryboardFrameProps, StoryboardProps, Subtitle, SubtitleProps, Subtitles, SubtitlesProps, Video, VideoPlayer, VideoSourceType } from './VideoPlayer.js';
 export { DropZone } from './components/DropZone.js';
 export { ProgressBar } from './components/ProgressBar.js';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { CSSProperties, ReactNode } from 'react';
 import { ImageUploadOptions, VideoUploadOptions } from '@geekapps/silo-nextjs';
 export { BatchFileState, BatchUploadOptions, BatchUploadState, FileUploadStatus, ImageUploadOptions, MultipartUploadState, SiloProvider, VideoUploadOptions, useBatchUpload, useFileStatus, useMultipartUpload, useSignedUrl, useSiloClient } from '@geekapps/silo-nextjs';
@@ -17,14 +17,14 @@ interface ImageOptionsProps {
     onChange: (opts: ImageUploadOptions) => void;
     style?: CSSProperties;
 }
-declare function ImageOptions({ value, onChange, style }: ImageOptionsProps): react_jsx_runtime.JSX.Element;
+declare function ImageOptions({ value, onChange, style }: ImageOptionsProps): react.JSX.Element;
 
 interface VideoOptionsProps {
     value: VideoUploadOptions;
     onChange: (opts: VideoUploadOptions) => void;
     style?: CSSProperties;
 }
-declare function VideoOptions({ value, onChange, style }: VideoOptionsProps): react_jsx_runtime.JSX.Element;
+declare function VideoOptions({ value, onChange, style }: VideoOptionsProps): react.JSX.Element;
 
 interface AvatarProps {
     /** Silo file key for the avatar image */
@@ -41,7 +41,7 @@ interface AvatarProps {
     style?: CSSProperties;
     alt?: string;
 }
-declare function Avatar({ fileKey, bucket, initials, size, shape, className, style, alt, }: AvatarProps): react_jsx_runtime.JSX.Element;
+declare function Avatar({ fileKey, bucket, initials, size, shape, className, style, alt, }: AvatarProps): react.JSX.Element;
 
 interface ThumbnailProps {
     /** Silo file key */
@@ -64,7 +64,7 @@ interface ThumbnailProps {
     style?: CSSProperties;
     alt?: string;
 }
-declare function Thumbnail({ fileKey, bucket, mimeType, width, height, fit, borderRadius, placeholder, className, style, alt, }: ThumbnailProps): react_jsx_runtime.JSX.Element;
+declare function Thumbnail({ fileKey, bucket, mimeType, width, height, fit, borderRadius, placeholder, className, style, alt, }: ThumbnailProps): react.JSX.Element;
 
 interface BackgroundProps {
     /** Silo file key for the background image */
@@ -81,7 +81,7 @@ interface BackgroundProps {
     className?: string;
     style?: CSSProperties;
 }
-declare function Background({ fileKey, bucket, size, position, overlay, children, className, style, }: BackgroundProps): react_jsx_runtime.JSX.Element;
+declare function Background({ fileKey, bucket, size, position, overlay, children, className, style, }: BackgroundProps): react.JSX.Element;
 
 interface FileIconProps {
     /** MIME type of the file */
@@ -99,7 +99,7 @@ interface FileIconProps {
     className?: string;
     style?: CSSProperties;
 }
-declare function FileIcon({ mimeType, name, size, iconSize, showName, showSize, className, style, }: FileIconProps): react_jsx_runtime.JSX.Element;
+declare function FileIcon({ mimeType, name, size, iconSize, showName, showSize, className, style, }: FileIconProps): react.JSX.Element;
 
 interface FileCardProps {
     fileId: string;
@@ -113,7 +113,7 @@ interface FileCardProps {
     className?: string;
     style?: CSSProperties;
 }
-declare function FileCard({ fileId, pollInterval, actions, onPreview, onCopyUrl, onDelete, className, style, }: FileCardProps): react_jsx_runtime.JSX.Element | null;
+declare function FileCard({ fileId, pollInterval, actions, onPreview, onCopyUrl, onDelete, className, style, }: FileCardProps): react.JSX.Element | null;
 
 interface FilePreviewProps {
     fileId: string | null;
@@ -121,6 +121,6 @@ interface FilePreviewProps {
     /** Poll interval while processing (ms, default: 3000) */
     pollInterval?: number;
 }
-declare function FilePreview({ fileId, onClose, pollInterval }: FilePreviewProps): react_jsx_runtime.JSX.Element | null;
+declare function FilePreview({ fileId, onClose, pollInterval }: FilePreviewProps): react.JSX.Element | null;
 
 export { Avatar, type AvatarProps, Background, type BackgroundProps, FileCard, type FileCardProps, FileIcon, type FileIconProps, FilePreview, type FilePreviewProps, ImageOptions, Thumbnail, type ThumbnailProps, VideoOptions };

package/dist/index.js

@@ -1260,7 +1260,7 @@ function Video({
   const [audioTracks, setAudioTracks] = useState([]);
   const [selectedAudio, setSelectedAudio] = useState(0);
   const [settingsOpen, setSettingsOpen] = useState(false);
-  const [settingsTab, setSettingsTab] = useState("quality");
+  const [settingsTab, setSettingsTab] = useState("root");
   const [playbackRate, setPlaybackRate] = useState(1);
   const [subtitleStyle, setSubtitleStyle] = useState({
     track: initialSubtitleMode,
@@ -1286,6 +1286,7 @@ function Video({
   const [volume, setVolume] = useState(defaultVolume);
   const [isMuted, setIsMuted] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
+  const [playerHeight, setPlayerHeight] = useState(0);
   const [error, setError] = useState(null);
   const activeSource = parsed.sources[sourceIndex] ?? parsed.sources[0] ?? null;
   const progressPercent = duration ? currentTime / duration * 100 : 0;
@@ -1466,6 +1467,16 @@ function Video({
       video?.removeEventListener("webkitendfullscreen", onFullscreenChange);
     };
   }, []);
+  useEffect(() => {
+    const player = playerRef.current;
+    if (!player) return;
+    const ro = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setPlayerHeight(entry.contentRect.height);
+    });
+    ro.observe(player);
+    return () => ro.disconnect();
+  }, []);
   useEffect(() => {
     let cancelled = false;
     async function loadStoryboard() {
@@ -1937,8 +1948,8 @@ function Video({
                   /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-linear-to-t from-black/80 to-transparent" }),
                   /* @__PURE__ */ jsxs("header", { onClick: (e) => e.stopPropagation(), className: "relative z-10 flex items-start justify-between gap-4 px-4 pt-4 text-white @sm:px-7 @sm:pt-7 @lg:px-9 @lg:pt-8", children: [
                     /* @__PURE__ */ jsxs("div", { children: [
-                      title && /* @__PURE__ */ jsx("h1", { className: "text-sm font-bold tracking-wide @sm:text-base @md:text-lg @lg:text-xl", style: { textShadow: "0 1px 6px rgba(0,0,0,0.6)" }, children: title }),
-                      description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs font-medium text-white/85 @sm:text-sm", children: description })
+                      title && isFullscreen && /* @__PURE__ */ jsx("h1", { className: "text-sm font-bold tracking-wide @sm:text-base @md:text-lg @lg:text-xl", style: { textShadow: "0 1px 6px rgba(0,0,0,0.6)" }, children: title }),
+                      description && isFullscreen && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs font-medium text-white/85 @sm:text-sm", children: description })
                     ] }),
                     parsed.sources.length > 1 && /* @__PURE__ */ jsx(
                       "select",
@@ -1954,111 +1965,143 @@ function Video({
                   /* @__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: [
                     settingsOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
                       /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: () => setSettingsOpen(false) }),
-                      /* @__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: [
-                        /* @__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(
-                          "button",
+                      /* @__PURE__ */ jsxs("div", { className: "absolute bottom-full right-3 z-50 mb-2 w-56 overflow-hidden rounded-xl border border-white/10 bg-black/90 shadow-2xl backdrop-blur-xl @sm:right-5 @lg:right-9", children: [
+                        /* @__PURE__ */ jsxs(
+                          "div",
                           {
-                            type: "button",
-                            onClick: () => setSettingsTab(tab),
-                            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"}`,
-                            children: tab
-                          },
-                          tab
-                        )) }),
-                        /* @__PURE__ */ jsxs("div", { className: "max-h-48 overflow-y-auto py-1", children: [
-                          settingsTab === "quality" && /* @__PURE__ */ jsx(Fragment, { children: [...qualities].reverse().map((quality) => /* @__PURE__ */ jsxs(
-                            SettingsItem,
-                            {
-                              active: selectedQuality === quality.id,
-                              onClick: () => changeQuality(quality.id),
-                              children: [
-                                quality.label,
-                                quality.id === "auto" && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] text-white/40", children: "ABR" })
-                              ]
+                            style: {
+                              display: settingsTab === "root" ? "block" : "none",
+                              animation: settingsTab === "root" ? "settingsSlideIn 0.18s ease" : void 0
                             },
-                            quality.id
-                          )) }),
-                          settingsTab === "subtitles" && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 space-y-3", children: [
-                            /* @__PURE__ */ jsxs("div", { children: [
-                              /* @__PURE__ */ jsx("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-white/40", children: "Track" }),
-                              /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: [{ srclang: "off", label: "Off" }, ...parsed.subtitles].map((s) => /* @__PURE__ */ jsx(
-                                "button",
-                                {
-                                  type: "button",
-                                  onClick: () => {
-                                    const next = s.srclang === "off" ? "off" : s.srclang;
-                                    setSubtitleMode(next);
-                                    setSubtitleStyle((st) => ({ ...st, track: next }));
-                                  },
-                                  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"}`,
-                                  children: s.label
-                                },
-                                s.srclang
-                              )) })
-                            ] }),
-                            /* @__PURE__ */ jsxs("div", { children: [
-                              /* @__PURE__ */ jsx("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-white/40", children: "Size" }),
-                              /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: ["small", "medium", "large"].map((s) => /* @__PURE__ */ jsx(
-                                "button",
-                                {
-                                  type: "button",
-                                  onClick: () => setSubtitleStyle((st) => ({ ...st, size: s })),
-                                  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"}`,
-                                  children: s
-                                },
-                                s
-                              )) })
-                            ] }),
-                            /* @__PURE__ */ jsxs("div", { children: [
-                              /* @__PURE__ */ jsx("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-white/40", children: "Color" }),
-                              /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [["white", "#fff"], ["yellow", "#facc15"], ["cyan", "#22d3ee"]].map(([c, hex]) => /* @__PURE__ */ jsx(
+                            children: [
+                              /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-[10px] font-semibold uppercase tracking-wider text-white/35", children: "Settings" }),
+                              [
+                                { id: "quality", label: "Quality", value: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto" },
+                                ...parsed.subtitles.length > 0 ? [{ id: "subtitles", label: "Subtitles / CC", value: subtitleStyle.track === "off" ? "Off" : parsed.subtitles.find((s) => s.srclang === subtitleStyle.track)?.label ?? subtitleStyle.track }] : [],
+                                ...audioTracks.length > 1 ? [{ id: "audio", label: "Audio", value: audioTracks.find((t) => t.id === selectedAudio)?.label ?? "" }] : [],
+                                { id: "playback", label: "Speed", value: playbackRate === 1 ? "Normal" : `${playbackRate}x` }
+                              ].map((item) => /* @__PURE__ */ jsxs(
                                 "button",
                                 {
                                   type: "button",
-                                  onClick: () => setSubtitleStyle((st) => ({ ...st, color: c })),
-                                  className: `size-5 rounded-full ring-2 transition ${subtitleStyle.color === c ? "ring-white" : "ring-transparent"}`,
-                                  style: { backgroundColor: hex }
+                                  onClick: () => setSettingsTab(item.id),
+                                  className: "flex w-full items-center justify-between gap-3 px-4 py-2.5 text-left text-sm font-medium text-white/80 transition hover:bg-white/10 hover:text-white",
+                                  children: [
+                                    /* @__PURE__ */ jsx("span", { children: item.label }),
+                                    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs text-white/40", children: [
+                                      item.value,
+                                      /* @__PURE__ */ jsx("svg", { className: "size-3.5 opacity-50", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                                    ] })
+                                  ]
                                 },
-                                c
-                              )) })
-                            ] }),
-                            /* @__PURE__ */ jsxs("div", { children: [
-                              /* @__PURE__ */ jsx("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wider text-white/40", children: "Background" }),
-                              /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: [["none", "None"], ["semi", "Semi"], ["solid", "Solid"]].map(([v, label]) => /* @__PURE__ */ jsx(
+                                item.id
+                              ))
+                            ]
+                          },
+                          "root"
+                        ),
+                        ["quality", "subtitles", "audio", "playback"].map((tab) => /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            style: {
+                              display: settingsTab === tab ? "block" : "none",
+                              animation: settingsTab === tab ? "settingsSlideIn 0.18s ease" : void 0
+                            },
+                            children: [
+                              /* @__PURE__ */ jsxs(
                                 "button",
                                 {
                                   type: "button",
-                                  onClick: () => setSubtitleStyle((st) => ({ ...st, bg: v })),
-                                  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"}`,
-                                  children: label
-                                },
-                                v
-                              )) })
-                            ] })
-                          ] }),
-                          settingsTab === "audio" && audioTracks.length > 1 && /* @__PURE__ */ jsx(Fragment, { children: audioTracks.map((track) => /* @__PURE__ */ jsx(
-                            SettingsItem,
-                            {
-                              active: selectedAudio === track.id,
-                              onClick: () => changeAudio(track.id),
-                              children: track.label
-                            },
-                            track.id
-                          )) }),
-                          settingsTab === "playback" && /* @__PURE__ */ jsx(Fragment, { children: PLAYBACK_SPEEDS.map((speed) => /* @__PURE__ */ jsx(
-                            SettingsItem,
-                            {
-                              active: playbackRate === speed,
-                              onClick: () => {
-                                setPlaybackRate(speed);
-                                setSettingsOpen(false);
-                              },
-                              children: speed === 1 ? "Normal" : `${speed}x`
-                            },
-                            speed
-                          )) })
-                        ] })
-                      ] })
+                                  onClick: () => setSettingsTab("root"),
+                                  className: "flex w-full items-center gap-2 border-b border-white/10 px-3 py-2.5 text-xs font-semibold text-white/60 transition hover:text-white",
+                                  children: [
+                                    /* @__PURE__ */ jsx("svg", { className: "size-3.5", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M10 4L6 8l4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+                                    tab === "quality" ? "Quality" : tab === "subtitles" ? "Subtitles / CC" : tab === "audio" ? "Audio" : "Speed"
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ jsxs("div", { className: "max-h-52 overflow-y-auto py-1", children: [
+                                tab === "quality" && [...qualities].reverse().map((quality) => /* @__PURE__ */ jsxs(SettingsItem, { active: selectedQuality === quality.id, onClick: () => {
+                                  changeQuality(quality.id);
+                                  setSettingsTab("root");
+                                }, children: [
+                                  quality.label,
+                                  quality.id === "auto" && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] text-white/40", children: "ABR" })
+                                ] }, quality.id)),
+                                tab === "subtitles" && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 space-y-3", children: [
+                                  /* @__PURE__ */ jsxs("div", { children: [
+                                    /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-white/35", children: "Track" }),
+                                    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: [{ srclang: "off", label: "Off" }, ...parsed.subtitles].map((s) => /* @__PURE__ */ jsx(
+                                      "button",
+                                      {
+                                        type: "button",
+                                        onClick: () => {
+                                          const next = s.srclang === "off" ? "off" : s.srclang;
+                                          setSubtitleMode(next);
+                                          setSubtitleStyle((st) => ({ ...st, track: next }));
+                                        },
+                                        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"}`,
+                                        children: s.label
+                                      },
+                                      s.srclang
+                                    )) })
+                                  ] }),
+                                  /* @__PURE__ */ jsxs("div", { children: [
+                                    /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-white/35", children: "Size" }),
+                                    /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: ["small", "medium", "large", "xlarge"].map((s) => /* @__PURE__ */ jsx(
+                                      "button",
+                                      {
+                                        type: "button",
+                                        onClick: () => setSubtitleStyle((st) => ({ ...st, size: s })),
+                                        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"}`,
+                                        children: s === "xlarge" ? "XL" : s.charAt(0).toUpperCase() + s.slice(1)
+                                      },
+                                      s
+                                    )) })
+                                  ] }),
+                                  /* @__PURE__ */ jsxs("div", { children: [
+                                    /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-white/35", children: "Color" }),
+                                    /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [["white", "#fff"], ["yellow", "#facc15"], ["cyan", "#22d3ee"]].map(([c, hex]) => /* @__PURE__ */ jsx(
+                                      "button",
+                                      {
+                                        type: "button",
+                                        onClick: () => setSubtitleStyle((st) => ({ ...st, color: c })),
+                                        className: `size-5 rounded-full ring-2 transition ${subtitleStyle.color === c ? "ring-white" : "ring-transparent"}`,
+                                        style: { backgroundColor: hex }
+                                      },
+                                      c
+                                    )) })
+                                  ] }),
+                                  /* @__PURE__ */ jsxs("div", { children: [
+                                    /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-white/35", children: "Background" }),
+                                    /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: [["none", "None"], ["semi", "Semi"], ["solid", "Solid"]].map(([v, label]) => /* @__PURE__ */ jsx(
+                                      "button",
+                                      {
+                                        type: "button",
+                                        onClick: () => setSubtitleStyle((st) => ({ ...st, bg: v })),
+                                        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"}`,
+                                        children: label
+                                      },
+                                      v
+                                    )) })
+                                  ] })
+                                ] }),
+                                tab === "audio" && audioTracks.map((track) => /* @__PURE__ */ jsx(SettingsItem, { active: selectedAudio === track.id, onClick: () => {
+                                  changeAudio(track.id);
+                                  setSettingsTab("root");
+                                }, children: track.label }, track.id)),
+                                tab === "playback" && PLAYBACK_SPEEDS.map((speed) => /* @__PURE__ */ jsx(SettingsItem, { active: playbackRate === speed, onClick: () => {
+                                  setPlaybackRate(speed);
+                                  setSettingsOpen(false);
+                                  setSettingsTab("root");
+                                }, children: speed === 1 ? "Normal" : `${speed}x` }, speed))
+                              ] })
+                            ]
+                          },
+                          tab
+                        ))
+                      ] }),
+                      /* @__PURE__ */ jsx("style", { children: `@keyframes settingsSlideIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}` })
                     ] }),
                     /* @__PURE__ */ jsxs(
                       "div",
@@ -2193,7 +2236,10 @@ function Video({
                           "button",
                           {
                             type: "button",
-                            onClick: () => setSettingsOpen((v) => !v),
+                            onClick: () => {
+                              setSettingsOpen((v) => !v);
+                              setSettingsTab("root");
+                            },
                             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"}`,
                             "aria-label": "Settings",
                             children: [
@@ -2233,13 +2279,19 @@ function Video({
                 children: /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: "max-w-3xl rounded-lg px-4 py-2 text-center font-medium leading-snug",
+                    className: "max-w-[80%] rounded-lg px-4 py-1.5 text-center font-medium leading-snug",
                     style: {
-                      fontSize: subtitleStyle.size === "small" ? "0.8rem" : subtitleStyle.size === "large" ? "1.25rem" : "1rem",
+                      fontSize: (() => {
+                        const base = Math.max(12, Math.min(playerHeight * 0.028, 32));
+                        if (subtitleStyle.size === "small") return `${base * 0.75}px`;
+                        if (subtitleStyle.size === "large") return `${base * 1.35}px`;
+                        if (subtitleStyle.size === "xlarge") return `${base * 1.8}px`;
+                        return `${base}px`;
+                      })(),
                       color: subtitleStyle.color === "yellow" ? "#facc15" : subtitleStyle.color === "cyan" ? "#22d3ee" : "#ffffff",
-                      backgroundColor: subtitleStyle.bg === "none" ? "transparent" : subtitleStyle.bg === "solid" ? "rgba(0,0,0,0.9)" : "rgba(0,0,0,0.7)",
-                      backdropFilter: subtitleStyle.bg === "semi" ? "blur(4px)" : void 0,
-                      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)"
+                      backgroundColor: subtitleStyle.bg === "none" ? "transparent" : subtitleStyle.bg === "solid" ? "rgba(0,0,0,0.9)" : "rgba(0,0,0,0.55)",
+                      backdropFilter: subtitleStyle.bg === "semi" ? "blur(6px)" : void 0,
+                      textShadow: subtitleStyle.bg === "none" ? "0 1px 8px rgba(0,0,0,1), 0 0 16px rgba(0,0,0,0.9)" : "0 1px 3px rgba(0,0,0,0.5)"
                     },
                     children: activeCue
                   }