@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/src/components/enhanced/enhanced-controls.tsx

@@ -1,597 +0,0 @@
-"use client"
-
-import React from "react"
-import { MediaActionTypes, useMediaDispatch, useMediaSelector } from "../../context/media-context"
-import { formatTime } from "../../lib/format-time"
-import { cn } from "../../lib/utils"
-
-// Enhanced play button with better animations
-export const EnhancedPlayButton = function EnhancedPlayButton({
-	className,
-	size = "md"
-}: {
-	className?: string
-	size?: "sm" | "md" | "lg" | "xl"
-}) {
-	const dispatch = useMediaDispatch()
-	const isPlaying = useMediaSelector((state) => state.isPlaying)
-	const isLoading = useMediaSelector((state) => state.isLoading)
-
-	const sizeClasses = {
-		sm: "h-8 w-8",
-		md: "h-10 w-10",
-		lg: "h-12 w-12",
-		xl: "h-16 w-16"
-	}
-
-	const iconSizes = {
-		sm: "h-4 w-4",
-		md: "h-5 w-5",
-		lg: "h-6 w-6",
-		xl: "h-8 w-8"
-	}
-
-	const handleClick = React.useCallback(() => {
-		dispatch({
-			type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
-		})
-	}, [dispatch, isPlaying])
-
-	return (
-		<button
-			type="button"
-			onClick={handleClick}
-			disabled={isLoading}
-			className={cn(
-				"group relative flex items-center justify-center rounded-full bg-white/10 backdrop-blur-sm",
-				"border border-white/20 text-white transition-all duration-200",
-				"hover:scale-105 hover:bg-white/20 active:scale-95",
-				"focus:outline-none focus:ring-2 focus:ring-white/50",
-				"disabled:cursor-not-allowed disabled:opacity-50",
-				sizeClasses[size],
-				className
-			)}
-			aria-label={isPlaying ? "Pause" : "Play"}>
-			{isLoading ? (
-				<div
-					className={cn(
-						"animate-spin rounded-full border-2 border-white/30 border-t-white",
-						iconSizes[size]
-					)}
-				/>
-			) : (
-				<div className={cn("transition-transform duration-200", iconSizes[size])}>
-					{isPlaying ? (
-						<svg viewBox="0 0 24 24" fill="currentColor" className="h-full w-full">
-							<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
-						</svg>
-					) : (
-						<svg viewBox="0 0 24 24" fill="currentColor" className="ml-0.5 h-full w-full">
-							<path d="M8 5v14l11-7z" />
-						</svg>
-					)}
-				</div>
-			)}
-		</button>
-	)
-}
-
-// Enhanced seek bar with preview and better touch support
-export const EnhancedSeekBar = function EnhancedSeekBar({
-	className
-}: {
-	className?: string
-}) {
-	const dispatch = useMediaDispatch()
-	const currentTime = useMediaSelector((state) => state.currentTime)
-	const duration = useMediaSelector((state) => state.duration)
-	const buffered = useMediaSelector((state) => state.buffered)
-	const previewTime = useMediaSelector((state) => state.previewTime)
-
-	const [isDragging, setIsDragging] = React.useState(false)
-	const [hoverTime, setHoverTime] = React.useState<number | null>(null)
-	const progressRef = React.useRef<HTMLDivElement>(null)
-
-	const progress = duration > 0 ? (currentTime / duration) * 100 : 0
-	const previewProgress =
-		duration > 0 && previewTime !== null ? (previewTime / duration) * 100 : null
-
-	// Calculate buffered ranges
-	const bufferedRanges = React.useMemo(() => {
-		if (!buffered || duration === 0) return []
-		const ranges = []
-		for (let i = 0; i < buffered.length; i++) {
-			ranges.push({
-				start: (buffered.start(i) / duration) * 100,
-				end: (buffered.end(i) / duration) * 100
-			})
-		}
-		return ranges
-	}, [buffered, duration])
-
-	const getTimeFromPosition = React.useCallback(
-		(clientX: number) => {
-			if (!progressRef.current) return 0
-			const rect = progressRef.current.getBoundingClientRect()
-			const position = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width))
-			return position * duration
-		},
-		[duration]
-	)
-
-	const handleMouseMove = React.useCallback(
-		(e: React.MouseEvent) => {
-			if (!isDragging) {
-				const time = getTimeFromPosition(e.clientX)
-				setHoverTime(time)
-				dispatch({ type: MediaActionTypes.PREVIEW_TIME, detail: time })
-			}
-		},
-		[isDragging, getTimeFromPosition, dispatch]
-	)
-
-	const handleMouseLeave = React.useCallback(() => {
-		if (!isDragging) {
-			setHoverTime(null)
-			dispatch({ type: MediaActionTypes.CLEAR_PREVIEW })
-		}
-	}, [isDragging, dispatch])
-
-	const handleMouseDown = React.useCallback(
-		(e: React.MouseEvent) => {
-			setIsDragging(true)
-			const time = getTimeFromPosition(e.clientX)
-			dispatch({ type: MediaActionTypes.SEEK, detail: time })
-		},
-		[getTimeFromPosition, dispatch]
-	)
-
-	const handleTouchStart = React.useCallback(
-		(e: React.TouchEvent) => {
-			setIsDragging(true)
-			const time = getTimeFromPosition(e.touches[0]?.clientX || 0)
-			dispatch({ type: MediaActionTypes.SEEK, detail: time })
-		},
-		[getTimeFromPosition, dispatch]
-	)
-
-	React.useEffect(() => {
-		const handleMouseMove = (e: MouseEvent) => {
-			if (isDragging) {
-				const time = getTimeFromPosition(e.clientX)
-				dispatch({ type: MediaActionTypes.SEEK, detail: time })
-			}
-		}
-
-		const handleMouseUp = () => {
-			setIsDragging(false)
-			setHoverTime(null)
-			dispatch({ type: MediaActionTypes.CLEAR_PREVIEW })
-		}
-
-		const handleTouchMove = (e: TouchEvent) => {
-			if (isDragging) {
-				const time = getTimeFromPosition(e.touches[0]?.clientX || 0)
-				dispatch({ type: MediaActionTypes.SEEK, detail: time })
-			}
-		}
-
-		if (isDragging) {
-			document.addEventListener("mousemove", handleMouseMove)
-			document.addEventListener("mouseup", handleMouseUp)
-			document.addEventListener("touchmove", handleTouchMove)
-			document.addEventListener("touchend", handleMouseUp)
-		}
-
-		return () => {
-			document.removeEventListener("mousemove", handleMouseMove)
-			document.removeEventListener("mouseup", handleMouseUp)
-			document.removeEventListener("touchmove", handleTouchMove)
-			document.removeEventListener("touchend", handleMouseUp)
-		}
-	}, [isDragging, getTimeFromPosition, dispatch])
-
-	return (
-		<div className={cn("group relative flex items-center", className)}>
-			{/* Time preview tooltip */}
-			{(hoverTime !== null || previewTime !== null) && (
-				<div
-					className="pointer-events-none absolute bottom-full mb-2 rounded bg-black/80 px-2 py-1 text-white text-xs"
-					style={{
-						left: `${previewProgress || ((hoverTime || 0) / duration) * 100}%`,
-						transform: "translateX(-50%)"
-					}}>
-					{formatTime(hoverTime || previewTime || 0)}
-				</div>
-			)}
-
-			<div
-				ref={progressRef}
-				className="relative h-2 w-full cursor-pointer rounded-full bg-white/20 transition-all duration-200 group-hover:h-3"
-				onMouseMove={handleMouseMove}
-				onMouseLeave={handleMouseLeave}
-				onMouseDown={handleMouseDown}
-				onTouchStart={handleTouchStart}>
-				{/* Buffered ranges */}
-				{bufferedRanges.map((range, index) => (
-					<div
-						key={index}
-						className="absolute top-0 h-full rounded-full bg-white/30"
-						style={{
-							left: `${range.start}%`,
-							width: `${range.end - range.start}%`
-						}}
-					/>
-				))}
-
-				{/* Progress bar */}
-				<div
-					className="absolute top-0 h-full rounded-full bg-primary transition-all duration-100"
-					style={{ width: `${progress}%` }}
-				/>
-
-				{/* Preview indicator */}
-				{previewProgress !== null && (
-					<div
-						className="absolute top-0 h-full w-1 rounded-full bg-white/80"
-						style={{ left: `${previewProgress}%` }}
-					/>
-				)}
-
-				{/* Thumb */}
-				<div
-					className="-translate-y-1/2 absolute top-1/2 h-4 w-4 rounded-full border-2 border-white bg-primary opacity-0 shadow-lg transition-all duration-200 group-hover:opacity-100"
-					style={{ left: `${progress}%`, transform: "translateX(-50%) translateY(-50%)" }}
-				/>
-			</div>
-		</div>
-	)
-}
-
-// Enhanced volume control with better UX
-export const EnhancedVolumeControl = function EnhancedVolumeControl({
-	className
-}: {
-	className?: string
-}) {
-	const dispatch = useMediaDispatch()
-	const volume = useMediaSelector((state) => state.volume)
-	const isMuted = useMediaSelector((state) => state.isMuted)
-
-	const [showSlider, setShowSlider] = React.useState(false)
-
-	const handleToggleMute = React.useCallback(() => {
-		dispatch({ type: MediaActionTypes.TOGGLE_MUTE })
-	}, [dispatch])
-
-	const handleVolumeChange = React.useCallback(
-		(newVolume: number) => {
-			dispatch({ type: MediaActionTypes.SET_VOLUME, detail: newVolume })
-		},
-		[dispatch]
-	)
-
-	const VolumeIcon = React.useMemo(() => {
-		if (isMuted || volume === 0) {
-			return (
-				<svg viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5">
-					<path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" />
-				</svg>
-			)
-		} else if (volume < 0.5) {
-			return (
-				<svg viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5">
-					<path d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z" />
-				</svg>
-			)
-		} else {
-			return (
-				<svg viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5">
-					<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" />
-				</svg>
-			)
-		}
-	}, [isMuted, volume])
-
-	return (
-		<div
-			className={cn("relative flex items-center", className)}
-			onMouseEnter={() => setShowSlider(true)}
-			onMouseLeave={() => setShowSlider(false)}>
-			<button
-				type="button"
-				onClick={handleToggleMute}
-				className="flex h-10 w-10 items-center justify-center rounded-full text-white transition-colors hover:bg-white/10"
-				aria-label={isMuted ? "Unmute" : "Mute"}>
-				{VolumeIcon}
-			</button>
-
-			{/* Volume slider */}
-			<div
-				className={cn(
-					"absolute left-full ml-2 flex items-center transition-all duration-200",
-					showSlider ? "translate-x-0 opacity-100" : "-translate-x-2 pointer-events-none opacity-0"
-				)}>
-				<input
-					type="range"
-					min="0"
-					max="1"
-					step="0.01"
-					value={isMuted ? 0 : volume}
-					onChange={(e) => handleVolumeChange(parseFloat(e.target.value))}
-					className="slider h-1 w-20 cursor-pointer appearance-none rounded-lg bg-white/20"
-				/>
-			</div>
-		</div>
-	)
-}
-
-// Enhanced backward skip button
-export const EnhancedBackwardButton = function EnhancedBackwardButton({
-	className,
-	size = "md",
-	skipTime = 10
-}: {
-	className?: string
-	size?: "sm" | "md" | "lg"
-	skipTime?: number
-}) {
-	const dispatch = useMediaDispatch()
-	const currentTime = useMediaSelector((state) => state.currentTime)
-
-	const sizeClasses = {
-		sm: "h-8 w-8",
-		md: "h-10 w-10",
-		lg: "h-12 w-12"
-	}
-
-	const iconSizes = {
-		sm: "h-4 w-4",
-		md: "h-5 w-5",
-		lg: "h-6 w-6"
-	}
-
-	const handleClick = React.useCallback(() => {
-		const newTime = Math.max(0, currentTime - skipTime)
-		dispatch({ type: MediaActionTypes.SEEK, detail: newTime })
-	}, [dispatch, currentTime, skipTime])
-
-	return (
-		<button
-			type="button"
-			onClick={handleClick}
-			className={cn(
-				"group relative flex items-center justify-center rounded-full bg-white/10 backdrop-blur-sm",
-				"border border-white/20 text-white transition-all duration-200",
-				"hover:scale-105 hover:bg-white/20 active:scale-95",
-				"focus:outline-none focus:ring-2 focus:ring-white/50",
-				sizeClasses[size],
-				className
-			)}
-			aria-label={`Backward ${skipTime} seconds`}
-			title={`Backward ${skipTime}s`}>
-			<div className={cn("flex items-center transition-transform duration-200", iconSizes[size])}>
-				<svg viewBox="0 0 24 24" fill="currentColor" className="h-full w-full">
-					<path d="M7 6c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1s-1-.45-1-1V7c0-.55.45-1 1-1zM15.5 7.5c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v9c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-9z" />
-					<path d="M5.5 12l7-4.5v9l-7-4.5z" opacity="0.8" />
-				</svg>
-				{skipTime && <span className="-bottom-1 absolute font-bold text-[10px]">{skipTime}</span>}
-			</div>
-		</button>
-	)
-}
-
-// Enhanced forward skip button
-export const EnhancedForwardButton = function EnhancedForwardButton({
-	className,
-	size = "md",
-	skipTime = 10
-}: {
-	className?: string
-	size?: "sm" | "md" | "lg"
-	skipTime?: number
-}) {
-	const dispatch = useMediaDispatch()
-	const currentTime = useMediaSelector((state) => state.currentTime)
-	const duration = useMediaSelector((state) => state.duration)
-
-	const sizeClasses = {
-		sm: "h-8 w-8",
-		md: "h-10 w-10",
-		lg: "h-12 w-12"
-	}
-
-	const iconSizes = {
-		sm: "h-4 w-4",
-		md: "h-5 w-5",
-		lg: "h-6 w-6"
-	}
-
-	const handleClick = React.useCallback(() => {
-		const newTime = Math.min(duration, currentTime + skipTime)
-		dispatch({ type: MediaActionTypes.SEEK, detail: newTime })
-	}, [dispatch, currentTime, duration, skipTime])
-
-	return (
-		<button
-			type="button"
-			onClick={handleClick}
-			className={cn(
-				"group relative flex items-center justify-center rounded-full bg-white/10 backdrop-blur-sm",
-				"border border-white/20 text-white transition-all duration-200",
-				"hover:scale-105 hover:bg-white/20 active:scale-95",
-				"focus:outline-none focus:ring-2 focus:ring-white/50",
-				sizeClasses[size],
-				className
-			)}
-			aria-label={`Forward ${skipTime} seconds`}
-			title={`Forward ${skipTime}s`}>
-			<div className={cn("flex items-center transition-transform duration-200", iconSizes[size])}>
-				<svg viewBox="0 0 24 24" fill="currentColor" className="h-full w-full">
-					<path d="M17 6c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1s-1-.45-1-1V7c0-.55.45-1 1-1zM8.5 7.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v9c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5v-9z" />
-					<path d="M18.5 12l-7-4.5v9l7-4.5z" opacity="0.8" />
-				</svg>
-				{skipTime && <span className="-bottom-1 absolute font-bold text-[10px]">{skipTime}</span>}
-			</div>
-		</button>
-	)
-}
-
-// Enhanced time display
-export const EnhancedTimeDisplay = function EnhancedTimeDisplay({
-	variant = "current",
-	className
-}: {
-	variant?: "current" | "duration" | "remaining"
-	className?: string
-}) {
-	const currentTime = useMediaSelector((state) => state.currentTime)
-	const duration = useMediaSelector((state) => state.duration)
-
-	const displayTime = React.useMemo(() => {
-		switch (variant) {
-			case "current":
-				return formatTime(currentTime)
-			case "duration":
-				return formatTime(duration)
-			case "remaining":
-				return `-${formatTime(duration - currentTime)}`
-			default:
-				return formatTime(currentTime)
-		}
-	}, [variant, currentTime, duration])
-
-	return (
-		<div className={cn("font-mono text-sm text-white tabular-nums", className)}>{displayTime}</div>
-	)
-}
-
-// Performance indicator component
-export const PerformanceIndicator = function PerformanceIndicator({
-	metrics,
-	className
-}: {
-	metrics?: {
-		fps?: number
-		bufferHealth?: number
-		quality?: number
-		bandwidth?: number
-	}
-	className?: string
-}) {
-	if (!metrics || process.env.NODE_ENV !== "development") {
-		return null
-	}
-
-	const getPerformanceColor = (fps: number) => {
-		if (fps >= 50) return "text-green-400"
-		if (fps >= 30) return "text-yellow-400"
-		return "text-red-400"
-	}
-
-	const getBufferColor = (health: number) => {
-		if (health >= 5) return "text-green-400"
-		if (health >= 2) return "text-yellow-400"
-		return "text-red-400"
-	}
-
-	return (
-		<div className={cn("flex items-center gap-3 font-mono text-xs", className)}>
-			{metrics.fps !== undefined && (
-				<div className={cn("flex items-center gap-1", getPerformanceColor(metrics.fps))}>
-					<div className="h-2 w-2 rounded-full bg-current" />
-					<span>{metrics.fps} FPS</span>
-				</div>
-			)}
-			{metrics.bufferHealth !== undefined && (
-				<div className={cn("flex items-center gap-1", getBufferColor(metrics.bufferHealth))}>
-					<div className="h-2 w-2 rounded-full bg-current" />
-					<span>{metrics.bufferHealth.toFixed(1)}s</span>
-				</div>
-			)}
-			{metrics.quality !== undefined && (
-				<div className="flex items-center gap-1 text-blue-400">
-					<div className="h-2 w-2 rounded-full bg-current" />
-					<span>{metrics.quality}p</span>
-				</div>
-			)}
-		</div>
-	)
-}
-
-// Enhanced control bar that combines all controls
-export const EnhancedControlBar = function EnhancedControlBar({
-	className,
-	showSkipButtons = true,
-	showVolumeControl = true,
-	showTimeDisplay = true,
-	playButtonSize = "xl",
-	skipButtonSize = "md",
-	skipTime = 10,
-	showPerformanceIndicators = process.env.NODE_ENV === "development",
-	performanceMetrics
-}: {
-	className?: string
-	showSkipButtons?: boolean
-	showVolumeControl?: boolean
-	showTimeDisplay?: boolean
-	playButtonSize?: "sm" | "md" | "lg" | "xl"
-	skipButtonSize?: "sm" | "md" | "lg"
-	skipTime?: number
-	showPerformanceIndicators?: boolean
-	performanceMetrics?: {
-		fps?: number
-		bufferHealth?: number
-		quality?: number
-		bandwidth?: number
-	}
-}) {
-	return (
-		<div
-			className={cn(
-				"flex flex-col gap-4 bg-gradient-to-t from-black/80 to-transparent p-4",
-				className
-			)}>
-			{/* Seek Bar */}
-			<EnhancedSeekBar className="w-full" />
-
-			{/* Control Buttons */}
-			<div className="flex items-center justify-between">
-				{/* Left side - Media controls */}
-				<div className="flex items-center gap-3">
-					{showSkipButtons && (
-						<EnhancedBackwardButton
-							size={skipButtonSize}
-							skipTime={skipTime}
-							className="shrink-0"
-						/>
-					)}
-
-					<EnhancedPlayButton size={playButtonSize} className="shrink-0" />
-
-					{showSkipButtons && (
-						<EnhancedForwardButton size={skipButtonSize} skipTime={skipTime} className="shrink-0" />
-					)}
-
-					{showVolumeControl && <EnhancedVolumeControl className="shrink-0" />}
-
-					{showTimeDisplay && (
-						<div className="flex items-center gap-1 font-mono text-sm">
-							<EnhancedTimeDisplay variant="current" />
-							<span className="text-white/60">/</span>
-							<EnhancedTimeDisplay variant="duration" />
-						</div>
-					)}
-				</div>
-
-				{/* Right side - Performance indicators and additional controls */}
-				<div className="flex items-center gap-2">
-					{showPerformanceIndicators && (
-						<PerformanceIndicator metrics={performanceMetrics} className="text-white/80" />
-					)}
-					{/* Future: Settings, Fullscreen, etc. */}
-				</div>
-			</div>
-		</div>
-	)
-}