@therealtinhtute/baroiplayer 1.0.0

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

@@ -0,0 +1,600 @@
+"use client"
+
+import React from "react"
+import { useMediaSelector, useMediaDispatch, MediaActionTypes } from "../../context/media-context"
+import { cn } from "../../lib/utils"
+import { formatTime } from "../../lib/format-time"
+
+// 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>
+	)
+}