@therealtinhtute/baroiplayer 1.0.8 → 1.1.0

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

@@ -3,359 +3,410 @@ import { cn } from "../../../../lib/utils"
 import { defaultMinimalIcons } from "../../../icons"
 
 export interface SubtitleTrack {
-  id: string
-  label: string
-  language?: string
-  src?: string
+	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
+	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
+	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" }
-  ]
+	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])
+	// Reset to main menu when settings close
+	useEffect(() => {
+		if (!showSettings) {
+			setCurrentView("main")
+		}
+	}, [showSettings])
 
-  const handleSettingsClick = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation()
-    onToggleSettings()
-  }, [onToggleSettings])
+	const handleSettingsClick = useCallback(
+		(e: React.MouseEvent) => {
+			e.stopPropagation()
+			onToggleSettings()
+		},
+		[onToggleSettings]
+	)
 
-  const handleDropdownClick = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation()
-  }, [])
+	const handleDropdownClick = useCallback((e: React.MouseEvent) => {
+		e.stopPropagation()
+	}, [])
 
-  const handleBackClick = useCallback(() => {
-    setCurrentView("main")
-  }, [])
+	const handleBackClick = useCallback(() => {
+		setCurrentView("main")
+	}, [])
 
-  const handleSelectSpeed = useCallback((rate: number) => {
-    onChangePlaybackRate(rate)
-    setCurrentView("main")
-  }, [onChangePlaybackRate])
+	const handleSelectSpeed = useCallback(
+		(rate: number) => {
+			onChangePlaybackRate(rate)
+			setCurrentView("main")
+		},
+		[onChangePlaybackRate]
+	)
 
-  const handleSelectFontSize = useCallback((size: "small" | "medium" | "large") => {
-    onChangeSubtitleFontSize(size)
-    setCurrentView("main")
-  }, [onChangeSubtitleFontSize])
+	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 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>
+	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>
-        )}
+				{/* 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>
-    </>
-  )
+				{/* 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>
+	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>
-    </>
-  )
+				{/* 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 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>
-    </>
-  )
+	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>
+	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>
-  )
+			{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>
+	)
 }