@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

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

@@ -1,412 +0,0 @@
-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

@@ -1,46 +0,0 @@
-import React, { memo } from "react"
-import { MinimalBackward10Icon, MinimalForward10Icon, defaultMinimalIcons } 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

@@ -1,164 +0,0 @@
-import React, { memo, useState, useRef, useEffect } from "react"
-import { cn } from "../../../../lib/utils"
-import { MinimalScreenshotIcon, MinimalSubtitleIcon, 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>
-	)
-}