@therealtinhtute/baroiplayer 1.0.0

package/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/src/components/variants/minimal/components/PlaybackControls.tsx

@@ -0,0 +1,51 @@
+import React, { memo } from "react"
+import { defaultMinimalIcons, MinimalBackward10Icon, MinimalForward10Icon } from "../../../icons"
+
+interface PlaybackControlsProps {
+	isPlaying: boolean
+	onTogglePlay: () => void
+	onSeekBackward: () => void
+	onSeekForward: () => void
+}
+
+export const PlaybackControls = function PlaybackControls({
+	isPlaying,
+	onTogglePlay,
+	onSeekBackward,
+	onSeekForward
+}: PlaybackControlsProps) {
+	const PlayIcon = defaultMinimalIcons.play
+	const PauseIcon = defaultMinimalIcons.pause
+
+	return (
+		<div className="flex items-center gap-2">
+			<button
+				className="minimal-btn size-15"
+				onClick={onTogglePlay}
+				aria-label={isPlaying ? "Pause" : "Play"}
+			>
+				{isPlaying
+					? PauseIcon && <PauseIcon size={32} />
+					: PlayIcon && <PlayIcon size={32} />}
+			</button>
+
+			<button
+				className="minimal-btn h-9 w-9"
+				onClick={onSeekBackward}
+				aria-label="Backward 10 seconds"
+				title="Backward 10s (J)"
+			>
+				<MinimalBackward10Icon size={18} />
+			</button>
+
+			<button
+				className="minimal-btn h-9 w-9"
+				onClick={onSeekForward}
+				aria-label="Forward 10 seconds"
+				title="Forward 10s (L)"
+			>
+				<MinimalForward10Icon size={18} />
+			</button>
+		</div>
+	)
+}

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

@@ -0,0 +1,173 @@
+import React, { memo, useState, useRef, useEffect } from "react"
+import { cn } from "../../../../lib/utils"
+import {
+	MinimalSubtitleIcon,
+	MinimalScreenshotIcon,
+	defaultMinimalIcons
+} from "../../../icons"
+import { SettingsDropdown } from "./SettingsDropdown"
+
+interface RightControlsProps {
+	subtitleSrc?: string
+	subtitlesEnabled: boolean
+	subtitleTracks?: Array<{
+		id: string
+		label: string
+		language?: string
+		src?: string
+	}>
+	currentTrackId?: string | null
+	hasSubtitles?: boolean
+	subtitleLoadError?: Error | null
+	isFullscreen: boolean
+	showSettings: boolean
+	playbackRate: number
+	onToggleSubtitles: () => void
+	onSelectSubtitleTrack?: (trackId: string | null) => void
+	onTakeScreenshot: (ctrlKey: boolean) => void
+	onToggleFullscreen: () => void
+	onToggleSettings: () => void
+	onChangePlaybackRate: (rate: number) => void
+}
+
+export const RightControls = function RightControls({
+	subtitleSrc,
+	subtitlesEnabled,
+	subtitleTracks,
+	currentTrackId,
+	hasSubtitles,
+	subtitleLoadError,
+	isFullscreen,
+	showSettings,
+	playbackRate,
+	onToggleSubtitles,
+	onSelectSubtitleTrack,
+	onTakeScreenshot,
+	onToggleFullscreen,
+	onToggleSettings,
+	onChangePlaybackRate
+}: RightControlsProps) {
+	const [showSubtitleMenu, setShowSubtitleMenu] = useState(false)
+	const subtitleMenuRef = useRef<HTMLDivElement>(null)
+	const FullscreenIcon = defaultMinimalIcons.fullscreen
+	const ExitFullscreenIcon = defaultMinimalIcons.exitFullscreen
+
+	// Close subtitle menu when clicking outside
+	useEffect(() => {
+		const handleClickOutside = (event: MouseEvent) => {
+			if (subtitleMenuRef.current && !subtitleMenuRef.current.contains(event.target as Node)) {
+				setShowSubtitleMenu(false)
+			}
+		}
+
+		if (showSubtitleMenu) {
+			document.addEventListener("mousedown", handleClickOutside)
+			return () => document.removeEventListener("mousedown", handleClickOutside)
+		}
+	}, [showSubtitleMenu])
+
+	const handleSubtitleClick = () => {
+		if (subtitleTracks && subtitleTracks.length > 0) {
+			setShowSubtitleMenu(!showSubtitleMenu)
+		} else {
+			onToggleSubtitles()
+		}
+	}
+
+	return (
+		<div className="flex items-center gap-2">
+			{/* Subtitle Button with Dropdown */}
+			{hasSubtitles && (
+				<div className="relative" ref={subtitleMenuRef}>
+					<button
+						className={cn(
+							"minimal-btn h-9 w-9",
+							subtitlesEnabled && "text-cyan-500",
+							subtitleLoadError && "text-red-500"
+						)}
+						onClick={handleSubtitleClick}
+						aria-label="Subtitles"
+						title={subtitleLoadError ? "Subtitle Error" : "Subtitles (C)"}
+					>
+						<MinimalSubtitleIcon size={18} />
+					</button>
+
+					{/* Subtitle Track Selection Menu */}
+					{showSubtitleMenu && subtitleTracks && subtitleTracks.length > 0 && (
+						<div className="absolute right-0 bottom-full mb-2 w-48 rounded-md bg-gray-900/95 py-2 shadow-lg backdrop-blur-sm">
+							<div className="px-3 py-1 font-semibold text-gray-400 text-xs">Subtitles</div>
+							
+							{/* Off Option */}
+							<button
+								className={cn(
+									"flex w-full items-center px-3 py-1.5 text-gray-300 text-sm hover:bg-gray-800",
+									!subtitlesEnabled && "bg-gray-800 text-cyan-500"
+								)}
+								onClick={() => {
+									onSelectSubtitleTrack?.(null)
+									setShowSubtitleMenu(false)
+								}}
+							>
+								Off
+							</button>
+
+							{/* Track Options */}
+							{subtitleTracks.map((track) => (
+								<button
+									key={track.id}
+									className={cn(
+										"flex w-full items-center px-3 py-1.5 text-gray-300 text-sm hover:bg-gray-800",
+										currentTrackId === track.id && "bg-gray-800 text-cyan-500"
+									)}
+									onClick={() => {
+										onSelectSubtitleTrack?.(track.id)
+										setShowSubtitleMenu(false)
+									}}
+								>
+									<span>{track.label}</span>
+									{track.language && (
+										<span className="ml-2 text-gray-500 text-xs">({track.language})</span>
+									)}
+								</button>
+							))}
+
+							{/* Error Message */}
+							{subtitleLoadError && (
+								<div className="mt-2 border-gray-800 border-t px-3 py-2">
+									<p className="text-red-400 text-xs">Failed to load subtitles</p>
+								</div>
+							)}
+						</div>
+					)}
+				</div>
+			)}
+
+			<button
+				className="minimal-btn h-9 w-9"
+				onClick={(e) => onTakeScreenshot(e.ctrlKey || e.metaKey)}
+				aria-label="Take Screenshot"
+				title="Screenshot (S) - Ctrl+Click to copy"
+			>
+				<MinimalScreenshotIcon size={18} />
+			</button>
+
+			<SettingsDropdown
+				showSettings={showSettings}
+				playbackRate={playbackRate}
+				onToggleSettings={onToggleSettings}
+				onChangePlaybackRate={onChangePlaybackRate}
+			/>
+
+			<button
+				className="minimal-btn h-9 w-9"
+				onClick={onToggleFullscreen}
+				aria-label={isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
+				title="Fullscreen (F)"
+			>
+				{isFullscreen
+					? ExitFullscreenIcon && <ExitFullscreenIcon size={18} />
+					: FullscreenIcon && <FullscreenIcon size={18} />}
+			</button>
+		</div>
+	)
+}