@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/dist/src/components/variants/minimal/components/ControlBar.tsx

@@ -0,0 +1,146 @@
+import React, { memo } from "react"
+import { cn } from "../../../../lib/utils"
+import { SeekBar } from "./SeekBar"
+import { PlaybackControls } from "./PlaybackControls"
+import { VolumeControl } from "./VolumeControl"
+import { TimeDisplay } from "./TimeDisplay"
+import { RightControls } from "./RightControls"
+import type { BufferedRange } from "../../../../hooks/useVideoPlayer"
+
+interface ControlBarProps {
+	controlsVisible: boolean
+	currentTime: number
+	duration: number
+	isPlaying: boolean
+	volume: number
+	isMuted: boolean
+	showVolumeSlider: boolean
+	isFullscreen: boolean
+	showSettings: boolean
+	playbackRate: number
+	subtitleSrc?: string
+	subtitlesEnabled: boolean
+	subtitleTracks?: Array<{
+		id: string
+		label: string
+		language?: string
+		src?: string
+	}>
+	currentTrackId?: string | null
+	hasSubtitles?: boolean
+	subtitleLoadError?: Error | null
+	volumeOrientation?: "horizontal" | "vertical"
+	bufferedRanges?: BufferedRange[]
+	isSeeking?: boolean
+	onSeek: (time: number) => void
+	onTogglePlay: () => void
+	onSeekBackward: () => void
+	onSeekForward: () => void
+	onToggleMute: () => void
+	onVolumeChange: (volume: number) => void
+	onShowVolumeSlider: (show: boolean) => void
+	onToggleSubtitles: () => void
+	onSelectSubtitleTrack?: (trackId: string | null) => void
+	onTakeScreenshot: (ctrlKey: boolean) => void
+	onToggleFullscreen: () => void
+	onToggleSettings: () => void
+	onChangePlaybackRate: (rate: number) => void
+}
+
+export const ControlBar = function ControlBar({
+	controlsVisible,
+	currentTime,
+	duration,
+	isPlaying,
+	volume,
+	isMuted,
+	showVolumeSlider,
+	isFullscreen,
+	showSettings,
+	playbackRate,
+	subtitleSrc,
+	subtitlesEnabled,
+	subtitleTracks,
+	currentTrackId,
+	hasSubtitles,
+	subtitleLoadError,
+	volumeOrientation = "horizontal",
+	bufferedRanges,
+	isSeeking,
+	onSeek,
+	onTogglePlay,
+	onSeekBackward,
+	onSeekForward,
+	onToggleMute,
+	onVolumeChange,
+	onShowVolumeSlider,
+	onToggleSubtitles,
+	onSelectSubtitleTrack,
+	onTakeScreenshot,
+	onToggleFullscreen,
+	onToggleSettings,
+	onChangePlaybackRate
+}: ControlBarProps) {
+	return (
+		<div
+			className={cn(
+				"minimal-control-bar",
+				"absolute right-0 bottom-0 left-0 z-40",
+				"px-6 py-3 transition-all duration-200",
+				controlsVisible ? "minimal-controls-visible" : "minimal-controls-hidden"
+			)}
+		>
+			<SeekBar
+				currentTime={currentTime}
+				duration={duration}
+				bufferedRanges={bufferedRanges}
+				isSeeking={isSeeking}
+				onSeek={onSeek}
+			/>
+
+			<div className="flex items-center justify-between">
+				<div className="flex items-center gap-2">
+					<PlaybackControls
+						isPlaying={isPlaying}
+						onTogglePlay={onTogglePlay}
+						onSeekBackward={onSeekBackward}
+						onSeekForward={onSeekForward}
+					/>
+
+					<VolumeControl
+						volume={volume}
+						isMuted={isMuted}
+						showVolumeSlider={showVolumeSlider}
+						onToggleMute={onToggleMute}
+						onVolumeChange={onVolumeChange}
+						onShowVolumeSlider={onShowVolumeSlider}
+						orientation={volumeOrientation}
+					/>
+
+					<TimeDisplay
+						currentTime={currentTime}
+						duration={duration}
+					/>
+				</div>
+
+				<RightControls
+					subtitleSrc={subtitleSrc}
+					subtitlesEnabled={subtitlesEnabled}
+					subtitleTracks={subtitleTracks}
+					currentTrackId={currentTrackId}
+					hasSubtitles={hasSubtitles}
+					subtitleLoadError={subtitleLoadError}
+					isFullscreen={isFullscreen}
+					showSettings={showSettings}
+					playbackRate={playbackRate}
+					onToggleSubtitles={onToggleSubtitles}
+					onSelectSubtitleTrack={onSelectSubtitleTrack}
+					onTakeScreenshot={onTakeScreenshot}
+					onToggleFullscreen={onToggleFullscreen}
+					onToggleSettings={onToggleSettings}
+					onChangePlaybackRate={onChangePlaybackRate}
+				/>
+			</div>
+		</div>
+	)
+}

package/dist/src/components/variants/minimal/components/EnhancedSettingsMenu.d.ts

@@ -0,0 +1,24 @@
+export interface SubtitleTrack {
+    id: string;
+    label: string;
+    language?: string;
+    src?: string;
+}
+interface EnhancedSettingsMenuProps {
+    showSettings: boolean;
+    playbackRate: number;
+    subtitlesEnabled: boolean;
+    subtitleTracks: SubtitleTrack[];
+    currentSubtitleTrack?: string;
+    subtitleFontSize: "small" | "medium" | "large";
+    hasSubtitles: boolean;
+    subtitleLoadError?: boolean;
+    onToggleSettings: () => void;
+    onChangePlaybackRate: (rate: number) => void;
+    onToggleSubtitles: () => void;
+    onSelectSubtitleTrack?: (trackId: string | null) => void;
+    onChangeSubtitleFontSize: (size: "small" | "medium" | "large") => void;
+}
+export declare const EnhancedSettingsMenu: ({ showSettings, playbackRate, subtitlesEnabled, subtitleTracks, currentSubtitleTrack, subtitleFontSize, hasSubtitles, subtitleLoadError, onToggleSettings, onChangePlaybackRate, onToggleSubtitles, onSelectSubtitleTrack, onChangeSubtitleFontSize }: EnhancedSettingsMenuProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EnhancedSettingsMenu.d.ts.map

package/dist/src/components/variants/minimal/components/EnhancedSettingsMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnhancedSettingsMenu.d.ts","sourceRoot":"","sources":["EnhancedSettingsMenu.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,UAAU,yBAAyB;IACjC,YAAY,EAAE,OAAO,CAAA;IACrB,YAAY,EAAE,MAAM,CAAA;IACpB,gBAAgB,EAAE,OAAO,CAAA;IACzB,cAAc,EAAE,aAAa,EAAE,CAAA;IAC/B,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,gBAAgB,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC9C,YAAY,EAAE,OAAO,CAAA;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,oBAAoB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,iBAAiB,EAAE,MAAM,IAAI,CAAA;IAC7B,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACxD,wBAAwB,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,KAAK,IAAI,CAAA;CACvE;AAID,eAAO,MAAM,oBAAoB,GAAiC,uPAc/D,yBAAyB,4CA6T3B,CAAA"}

package/dist/src/components/variants/minimal/components/EnhancedSettingsMenu.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from "react";
+import { cn } from "../../../../lib/utils";
+import { defaultMinimalIcons } from "../../../icons";
+export const EnhancedSettingsMenu = function EnhancedSettingsMenu({ showSettings, playbackRate, subtitlesEnabled, subtitleTracks, currentSubtitleTrack, subtitleFontSize = "medium", hasSubtitles, subtitleLoadError, onToggleSettings, onChangePlaybackRate, onToggleSubtitles, onSelectSubtitleTrack, onChangeSubtitleFontSize }) {
+    const [currentView, setCurrentView] = useState("main");
+    const playbackRates = [0.5, 0.75, 1, 1.25, 1.5, 2];
+    const fontSizes = [
+        { value: "small", label: "Small", size: "12px" },
+        { value: "medium", label: "Medium", size: "16px" },
+        { value: "large", label: "Large", size: "20px" }
+    ];
+    // Reset to main menu when settings close
+    useEffect(() => {
+        if (!showSettings) {
+            setCurrentView("main");
+        }
+    }, [showSettings]);
+    const handleSettingsClick = useCallback((e) => {
+        e.stopPropagation();
+        onToggleSettings();
+    }, [onToggleSettings]);
+    const handleDropdownClick = useCallback((e) => {
+        e.stopPropagation();
+    }, []);
+    const handleBackClick = useCallback(() => {
+        setCurrentView("main");
+    }, []);
+    const handleSelectSpeed = useCallback((rate) => {
+        onChangePlaybackRate(rate);
+        setCurrentView("main");
+    }, [onChangePlaybackRate]);
+    const handleSelectFontSize = useCallback((size) => {
+        onChangeSubtitleFontSize(size);
+        setCurrentView("main");
+    }, [onChangeSubtitleFontSize]);
+    const handleSelectSubtitle = useCallback((trackId) => {
+        if (trackId === null) {
+            // Turn off subtitles
+            if (subtitlesEnabled) {
+                onToggleSubtitles();
+            }
+        }
+        else {
+            // Select track and enable if needed
+            if (!subtitlesEnabled) {
+                onToggleSubtitles();
+            }
+            onSelectSubtitleTrack?.(trackId);
+        }
+        setCurrentView("main");
+    }, [subtitlesEnabled, onToggleSubtitles, onSelectSubtitleTrack]);
+    const renderMainMenu = () => (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-gray-700 border-b px-3 py-2 font-semibold text-gray-400 text-xs uppercase tracking-wider", children: "Settings" }), _jsxs("div", { className: "py-1", children: [_jsxs("button", { className: cn("flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-gray-800", !hasSubtitles && "cursor-not-allowed opacity-50"), onClick: () => hasSubtitles && setCurrentView("subtitles"), disabled: !hasSubtitles, children: [_jsxs("div", { className: "flex items-center gap-2", children: [defaultMinimalIcons.subtitle && _jsx(defaultMinimalIcons.subtitle, { size: 16 }), _jsx("span", { children: "Subtitles" })] }), _jsxs("div", { className: "flex items-center gap-1 text-gray-400 text-xs", children: [!hasSubtitles ? (_jsx("span", { className: "text-gray-500", children: "Unavailable" })) : subtitleLoadError ? (_jsx("span", { className: "text-red-400", children: "Error" })) : subtitlesEnabled ? (_jsx("span", { className: "text-cyan-400", children: "On" })) : (_jsx("span", { children: "Off" })), hasSubtitles && (_jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }))] })] }), hasSubtitles && (_jsxs("button", { className: "flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-gray-800", onClick: () => setCurrentView("fontSize"), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 7h16M4 7v10m0-10l4 10m8-10l4 10m-4-10v10" }) }), _jsx("span", { children: "Font Size" })] }), _jsxs("div", { className: "flex items-center gap-1 text-gray-400 text-xs", children: [_jsx("span", { className: "capitalize", children: subtitleFontSize }), _jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })] })] })), _jsxs("button", { className: "flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-gray-800", onClick: () => setCurrentView("speed"), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }), _jsx("span", { children: "Playback Speed" })] }), _jsxs("div", { className: "flex items-center gap-1 text-gray-400 text-xs", children: [_jsx("span", { children: playbackRate === 1 ? "Normal" : `${playbackRate}x` }), _jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })] })] })] })] }));
+    const renderSubtitlesMenu = () => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between border-gray-700 border-b px-3 py-2", children: [_jsx("button", { onClick: handleBackClick, className: "text-gray-400 transition-colors hover:text-white", children: _jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), _jsx("span", { className: "font-semibold text-gray-300 text-sm", children: "Subtitles" }), _jsx("div", { className: "w-4" })] }), _jsxs("div", { className: "py-1", children: [_jsxs("button", { className: cn("flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-gray-800", !subtitlesEnabled && "bg-cyan-700/20 text-cyan-400"), onClick: () => handleSelectSubtitle(null), children: [_jsx("span", { children: "Off" }), !subtitlesEnabled && (_jsx("svg", { className: "h-4 w-4 text-cyan-400", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" }) }))] }), subtitleTracks.length > 0 ? (subtitleTracks.map((track) => (_jsxs("button", { className: cn("flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-gray-800", subtitlesEnabled && currentSubtitleTrack === track.id && "bg-cyan-700/20 text-cyan-400"), onClick: () => handleSelectSubtitle(track.id), children: [_jsx("span", { children: track.label }), subtitlesEnabled && currentSubtitleTrack === track.id && (_jsx("svg", { className: "h-4 w-4 text-cyan-400", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" }) }))] }, track.id)))) : (_jsxs("button", { className: cn("flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-gray-800", subtitlesEnabled && "bg-cyan-700/20 text-cyan-400"), onClick: () => {
+                            if (!subtitlesEnabled) {
+                                onToggleSubtitles();
+                            }
+                            setCurrentView("main");
+                        }, children: [_jsx("span", { children: "Default" }), subtitlesEnabled && (_jsx("svg", { className: "h-4 w-4 text-cyan-400", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" }) }))] }))] })] }));
+    const renderFontSizeMenu = () => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between border-gray-700 border-b px-3 py-2", children: [_jsx("button", { onClick: handleBackClick, className: "text-gray-400 transition-colors hover:text-white", children: _jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), _jsx("span", { className: "font-semibold text-gray-300 text-sm", children: "Font Size" }), _jsx("div", { className: "w-4" })] }), _jsx("div", { className: "py-1", children: fontSizes.map((size) => (_jsxs("button", { className: cn("flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-gray-800", subtitleFontSize === size.value && "bg-cyan-700/20 text-cyan-400"), onClick: () => handleSelectFontSize(size.value), children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-gray-400", style: { fontSize: size.size }, children: "Aa" }), _jsx("span", { children: size.label })] }), subtitleFontSize === size.value && (_jsx("svg", { className: "h-4 w-4 text-cyan-400", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" }) }))] }, size.value))) })] }));
+    const renderSpeedMenu = () => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between border-gray-700 border-b px-3 py-2", children: [_jsx("button", { onClick: handleBackClick, className: "text-gray-400 transition-colors hover:text-white", children: _jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), _jsx("span", { className: "font-semibold text-gray-300 text-sm", children: "Playback Speed" }), _jsx("div", { className: "w-4" })] }), _jsx("div", { className: "py-1", children: playbackRates.map((rate) => (_jsxs("button", { className: cn("flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-gray-800", playbackRate === rate && "bg-cyan-700/20 text-cyan-400"), onClick: () => handleSelectSpeed(rate), children: [_jsx("span", { children: rate === 1 ? "Normal" : `${rate}x` }), playbackRate === rate && (_jsx("svg", { className: "h-4 w-4 text-cyan-400", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" }) }))] }, rate))) })] }));
+    return (_jsxs("div", { className: "relative", style: { zIndex: showSettings ? 60 : "auto" }, children: [_jsx("button", { className: cn("minimal-btn h-9 w-9", showSettings && "text-cyan-500"), onClick: handleSettingsClick, "aria-label": "Settings", title: "Settings", children: defaultMinimalIcons.settings && _jsx(defaultMinimalIcons.settings, { size: 18 }) }), showSettings && (_jsxs("div", { className: "absolute right-0 mb-2 min-w-[240px] overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-xl", style: {
+                    bottom: "100%",
+                    zIndex: 1000,
+                    maxHeight: "400px",
+                    overflowY: "auto"
+                }, onClick: handleDropdownClick, children: [currentView === "main" && renderMainMenu(), currentView === "subtitles" && renderSubtitlesMenu(), currentView === "fontSize" && renderFontSizeMenu(), currentView === "speed" && renderSpeedMenu()] }))] }));
+};

package/dist/src/components/variants/minimal/components/EnhancedSettingsMenu.tsx

@@ -0,0 +1,361 @@
+import React, { memo, useState, useCallback, useEffect } from "react"
+import { cn } from "../../../../lib/utils"
+import { defaultMinimalIcons } from "../../../icons"
+
+export interface SubtitleTrack {
+  id: string
+  label: string
+  language?: string
+  src?: string
+}
+
+interface EnhancedSettingsMenuProps {
+  showSettings: boolean
+  playbackRate: number
+  subtitlesEnabled: boolean
+  subtitleTracks: SubtitleTrack[]
+  currentSubtitleTrack?: string
+  subtitleFontSize: "small" | "medium" | "large"
+  hasSubtitles: boolean
+  subtitleLoadError?: boolean
+  onToggleSettings: () => void
+  onChangePlaybackRate: (rate: number) => void
+  onToggleSubtitles: () => void
+  onSelectSubtitleTrack?: (trackId: string | null) => void
+  onChangeSubtitleFontSize: (size: "small" | "medium" | "large") => void
+}
+
+type MenuView = "main" | "subtitles" | "fontSize" | "speed"
+
+export const EnhancedSettingsMenu = function EnhancedSettingsMenu({
+  showSettings,
+  playbackRate,
+  subtitlesEnabled,
+  subtitleTracks,
+  currentSubtitleTrack,
+  subtitleFontSize = "medium",
+  hasSubtitles,
+  subtitleLoadError,
+  onToggleSettings,
+  onChangePlaybackRate,
+  onToggleSubtitles,
+  onSelectSubtitleTrack,
+  onChangeSubtitleFontSize
+}: EnhancedSettingsMenuProps) {
+  const [currentView, setCurrentView] = useState<MenuView>("main")
+  const playbackRates = [0.5, 0.75, 1, 1.25, 1.5, 2]
+  const fontSizes = [
+    { value: "small", label: "Small", size: "12px" },
+    { value: "medium", label: "Medium", size: "16px" },
+    { value: "large", label: "Large", size: "20px" }
+  ]
+
+  // Reset to main menu when settings close
+  useEffect(() => {
+    if (!showSettings) {
+      setCurrentView("main")
+    }
+  }, [showSettings])
+
+  const handleSettingsClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
+    onToggleSettings()
+  }, [onToggleSettings])
+
+  const handleDropdownClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
+  }, [])
+
+  const handleBackClick = useCallback(() => {
+    setCurrentView("main")
+  }, [])
+
+  const handleSelectSpeed = useCallback((rate: number) => {
+    onChangePlaybackRate(rate)
+    setCurrentView("main")
+  }, [onChangePlaybackRate])
+
+  const handleSelectFontSize = useCallback((size: "small" | "medium" | "large") => {
+    onChangeSubtitleFontSize(size)
+    setCurrentView("main")
+  }, [onChangeSubtitleFontSize])
+
+  const handleSelectSubtitle = useCallback((trackId: string | null) => {
+    if (trackId === null) {
+      // Turn off subtitles
+      if (subtitlesEnabled) {
+        onToggleSubtitles()
+      }
+    } else {
+      // Select track and enable if needed
+      if (!subtitlesEnabled) {
+        onToggleSubtitles()
+      }
+      onSelectSubtitleTrack?.(trackId)
+    }
+    setCurrentView("main")
+  }, [subtitlesEnabled, onToggleSubtitles, onSelectSubtitleTrack])
+
+  const renderMainMenu = () => (
+    <>
+      <div className="border-gray-700 border-b px-3 py-2 font-semibold text-gray-400 text-xs uppercase tracking-wider">
+        Settings
+      </div>
+      <div className="py-1">
+        {/* Subtitles Option */}
+        <button
+          className={cn(
+            "flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-gray-800",
+            !hasSubtitles && "cursor-not-allowed opacity-50"
+          )}
+          onClick={() => hasSubtitles && setCurrentView("subtitles")}
+          disabled={!hasSubtitles}
+        >
+          <div className="flex items-center gap-2">
+            {defaultMinimalIcons.subtitle && <defaultMinimalIcons.subtitle size={16} />}
+            <span>Subtitles</span>
+          </div>
+          <div className="flex items-center gap-1 text-gray-400 text-xs">
+            {!hasSubtitles ? (
+              <span className="text-gray-500">Unavailable</span>
+            ) : subtitleLoadError ? (
+              <span className="text-red-400">Error</span>
+            ) : subtitlesEnabled ? (
+              <span className="text-cyan-400">On</span>
+            ) : (
+              <span>Off</span>
+            )}
+            {hasSubtitles && (
+              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            )}
+          </div>
+        </button>
+
+        {/* Font Size Option - only show if subtitles are available */}
+        {hasSubtitles && (
+          <button
+            className="flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-gray-800"
+            onClick={() => setCurrentView("fontSize")}
+          >
+            <div className="flex items-center gap-2">
+              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
+                  d="M4 7h16M4 7v10m0-10l4 10m8-10l4 10m-4-10v10" />
+              </svg>
+              <span>Font Size</span>
+            </div>
+            <div className="flex items-center gap-1 text-gray-400 text-xs">
+              <span className="capitalize">{subtitleFontSize}</span>
+              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </div>
+          </button>
+        )}
+
+        {/* Playback Speed Option */}
+        <button
+          className="flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-gray-800"
+          onClick={() => setCurrentView("speed")}
+        >
+          <div className="flex items-center gap-2">
+            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
+                d="M13 10V3L4 14h7v7l9-11h-7z" />
+            </svg>
+            <span>Playback Speed</span>
+          </div>
+          <div className="flex items-center gap-1 text-gray-400 text-xs">
+            <span>{playbackRate === 1 ? "Normal" : `${playbackRate}x`}</span>
+            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
+          </div>
+        </button>
+      </div>
+    </>
+  )
+
+  const renderSubtitlesMenu = () => (
+    <>
+      <div className="flex items-center justify-between border-gray-700 border-b px-3 py-2">
+        <button
+          onClick={handleBackClick}
+          className="text-gray-400 transition-colors hover:text-white"
+        >
+          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+        </button>
+        <span className="font-semibold text-gray-300 text-sm">Subtitles</span>
+        <div className="w-4" />
+      </div>
+      <div className="py-1">
+        {/* Off option */}
+        <button
+          className={cn(
+            "flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-gray-800",
+            !subtitlesEnabled && "bg-cyan-700/20 text-cyan-400"
+          )}
+          onClick={() => handleSelectSubtitle(null)}
+        >
+          <span>Off</span>
+          {!subtitlesEnabled && (
+            <svg className="h-4 w-4 text-cyan-400" fill="currentColor" viewBox="0 0 20 20">
+              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" />
+            </svg>
+          )}
+        </button>
+
+        {/* Subtitle tracks */}
+        {subtitleTracks.length > 0 ? (
+          subtitleTracks.map((track) => (
+            <button
+              key={track.id}
+              className={cn(
+                "flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-gray-800",
+                subtitlesEnabled && currentSubtitleTrack === track.id && "bg-cyan-700/20 text-cyan-400"
+              )}
+              onClick={() => handleSelectSubtitle(track.id)}
+            >
+              <span>{track.label}</span>
+              {subtitlesEnabled && currentSubtitleTrack === track.id && (
+                <svg className="h-4 w-4 text-cyan-400" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" />
+                </svg>
+              )}
+            </button>
+          ))
+        ) : (
+          <button
+            className={cn(
+              "flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-gray-800",
+              subtitlesEnabled && "bg-cyan-700/20 text-cyan-400"
+            )}
+            onClick={() => {
+              if (!subtitlesEnabled) {
+                onToggleSubtitles()
+              }
+              setCurrentView("main")
+            }}
+          >
+            <span>Default</span>
+            {subtitlesEnabled && (
+              <svg className="h-4 w-4 text-cyan-400" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" />
+              </svg>
+            )}
+          </button>
+        )}
+      </div>
+    </>
+  )
+
+  const renderFontSizeMenu = () => (
+    <>
+      <div className="flex items-center justify-between border-gray-700 border-b px-3 py-2">
+        <button
+          onClick={handleBackClick}
+          className="text-gray-400 transition-colors hover:text-white"
+        >
+          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+        </button>
+        <span className="font-semibold text-gray-300 text-sm">Font Size</span>
+        <div className="w-4" />
+      </div>
+      <div className="py-1">
+        {fontSizes.map((size) => (
+          <button
+            key={size.value}
+            className={cn(
+              "flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-gray-800",
+              subtitleFontSize === size.value && "bg-cyan-700/20 text-cyan-400"
+            )}
+            onClick={() => handleSelectFontSize(size.value as "small" | "medium" | "large")}
+          >
+            <div className="flex items-center gap-3">
+              <span className="text-gray-400" style={{ fontSize: size.size }}>Aa</span>
+              <span>{size.label}</span>
+            </div>
+            {subtitleFontSize === size.value && (
+              <svg className="h-4 w-4 text-cyan-400" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" />
+              </svg>
+            )}
+          </button>
+        ))}
+      </div>
+    </>
+  )
+
+  const renderSpeedMenu = () => (
+    <>
+      <div className="flex items-center justify-between border-gray-700 border-b px-3 py-2">
+        <button
+          onClick={handleBackClick}
+          className="text-gray-400 transition-colors hover:text-white"
+        >
+          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+        </button>
+        <span className="font-semibold text-gray-300 text-sm">Playback Speed</span>
+        <div className="w-4" />
+      </div>
+      <div className="py-1">
+        {playbackRates.map((rate) => (
+          <button
+            key={rate}
+            className={cn(
+              "flex w-full items-center justify-between px-3 py-2 text-left text-sm transition-colors hover:bg-gray-800",
+              playbackRate === rate && "bg-cyan-700/20 text-cyan-400"
+            )}
+            onClick={() => handleSelectSpeed(rate)}
+          >
+            <span>{rate === 1 ? "Normal" : `${rate}x`}</span>
+            {playbackRate === rate && (
+              <svg className="h-4 w-4 text-cyan-400" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" />
+              </svg>
+            )}
+          </button>
+        ))}
+      </div>
+    </>
+  )
+
+  return (
+    <div className="relative" style={{ zIndex: showSettings ? 60 : "auto" }}>
+      <button
+        className={cn("minimal-btn h-9 w-9", showSettings && "text-cyan-500")}
+        onClick={handleSettingsClick}
+        aria-label="Settings"
+        title="Settings"
+      >
+        {defaultMinimalIcons.settings && <defaultMinimalIcons.settings size={18} />}
+      </button>
+
+      {showSettings && (
+        <div
+          className="absolute right-0 mb-2 min-w-[240px] overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-xl"
+          style={{
+            bottom: "100%",
+            zIndex: 1000,
+            maxHeight: "400px",
+            overflowY: "auto"
+          }}
+          onClick={handleDropdownClick}
+        >
+          {currentView === "main" && renderMainMenu()}
+          {currentView === "subtitles" && renderSubtitlesMenu()}
+          {currentView === "fontSize" && renderFontSizeMenu()}
+          {currentView === "speed" && renderSpeedMenu()}
+        </div>
+      )}
+    </div>
+  )
+}

package/dist/src/components/variants/minimal/components/PlaybackControls.d.ts

@@ -0,0 +1,9 @@
+interface PlaybackControlsProps {
+    isPlaying: boolean;
+    onTogglePlay: () => void;
+    onSeekBackward: () => void;
+    onSeekForward: () => void;
+}
+export declare const PlaybackControls: ({ isPlaying, onTogglePlay, onSeekBackward, onSeekForward }: PlaybackControlsProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PlaybackControls.d.ts.map

package/dist/src/components/variants/minimal/components/PlaybackControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlaybackControls.d.ts","sourceRoot":"","sources":["PlaybackControls.tsx"],"names":[],"mappings":"AAGA,UAAU,qBAAqB;IAC9B,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,aAAa,EAAE,MAAM,IAAI,CAAA;CACzB;AAED,eAAO,MAAM,gBAAgB,GAA6B,4DAKvD,qBAAqB,4CAmCvB,CAAA"}

package/dist/src/components/variants/minimal/components/PlaybackControls.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defaultMinimalIcons, MinimalBackward10Icon, MinimalForward10Icon } from "../../../icons";
+export const PlaybackControls = function PlaybackControls({ isPlaying, onTogglePlay, onSeekBackward, onSeekForward }) {
+    const PlayIcon = defaultMinimalIcons.play;
+    const PauseIcon = defaultMinimalIcons.pause;
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { className: "minimal-btn size-15", onClick: onTogglePlay, "aria-label": isPlaying ? "Pause" : "Play", children: isPlaying
+                    ? PauseIcon && _jsx(PauseIcon, { size: 32 })
+                    : PlayIcon && _jsx(PlayIcon, { size: 32 }) }), _jsx("button", { className: "minimal-btn h-9 w-9", onClick: onSeekBackward, "aria-label": "Backward 10 seconds", title: "Backward 10s (J)", children: _jsx(MinimalBackward10Icon, { size: 18 }) }), _jsx("button", { className: "minimal-btn h-9 w-9", onClick: onSeekForward, "aria-label": "Forward 10 seconds", title: "Forward 10s (L)", children: _jsx(MinimalForward10Icon, { size: 18 }) })] }));
+};