@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

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

@@ -1,9 +1,9 @@
 "use client"
 
 import React from "react"
-import { useMediaSelector, useMediaDispatch, MediaActionTypes } from "../../context/media-context"
-import { cn } from "../../lib/utils"
+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({
@@ -14,8 +14,8 @@ export const EnhancedPlayButton = function EnhancedPlayButton({
 	size?: "sm" | "md" | "lg" | "xl"
 }) {
 	const dispatch = useMediaDispatch()
-	const isPlaying = useMediaSelector(state => state.isPlaying)
-	const isLoading = useMediaSelector(state => state.isLoading)
+	const isPlaying = useMediaSelector((state) => state.isPlaying)
+	const isLoading = useMediaSelector((state) => state.isLoading)
 
 	const sizeClasses = {
 		sm: "h-8 w-8",
@@ -51,10 +51,14 @@ export const EnhancedPlayButton = function EnhancedPlayButton({
 				sizeClasses[size],
 				className
 			)}
-			aria-label={isPlaying ? "Pause" : "Play"}
-		>
+			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(
+						"animate-spin rounded-full border-2 border-white/30 border-t-white",
+						iconSizes[size]
+					)}
+				/>
 			) : (
 				<div className={cn("transition-transform duration-200", iconSizes[size])}>
 					{isPlaying ? (
@@ -79,17 +83,18 @@ export const EnhancedSeekBar = function EnhancedSeekBar({
 	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 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
+	const previewProgress =
+		duration > 0 && previewTime !== null ? (previewTime / duration) * 100 : null
 
 	// Calculate buffered ranges
 	const bufferedRanges = React.useMemo(() => {
@@ -104,20 +109,26 @@ export const EnhancedSeekBar = function EnhancedSeekBar({
 		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 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 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) {
@@ -126,17 +137,23 @@ export const EnhancedSeekBar = function EnhancedSeekBar({
 		}
 	}, [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 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])
+	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) => {
@@ -160,17 +177,17 @@ export const EnhancedSeekBar = function EnhancedSeekBar({
 		}
 
 		if (isDragging) {
-			document.addEventListener('mousemove', handleMouseMove)
-			document.addEventListener('mouseup', handleMouseUp)
-			document.addEventListener('touchmove', handleTouchMove)
-			document.addEventListener('touchend', handleMouseUp)
+			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)
+			document.removeEventListener("mousemove", handleMouseMove)
+			document.removeEventListener("mouseup", handleMouseUp)
+			document.removeEventListener("touchmove", handleTouchMove)
+			document.removeEventListener("touchend", handleMouseUp)
 		}
 	}, [isDragging, getTimeFromPosition, dispatch])
 
@@ -182,9 +199,8 @@ export const EnhancedSeekBar = function EnhancedSeekBar({
 					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%)'
-					}}
-				>
+						transform: "translateX(-50%)"
+					}}>
 					{formatTime(hoverTime || previewTime || 0)}
 				</div>
 			)}
@@ -195,8 +211,7 @@ export const EnhancedSeekBar = function EnhancedSeekBar({
 				onMouseMove={handleMouseMove}
 				onMouseLeave={handleMouseLeave}
 				onMouseDown={handleMouseDown}
-				onTouchStart={handleTouchStart}
-			>
+				onTouchStart={handleTouchStart}>
 				{/* Buffered ranges */}
 				{bufferedRanges.map((range, index) => (
 					<div
@@ -226,7 +241,7 @@ export const EnhancedSeekBar = function EnhancedSeekBar({
 				{/* 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%)' }}
+					style={{ left: `${progress}%`, transform: "translateX(-50%) translateY(-50%)" }}
 				/>
 			</div>
 		</div>
@@ -240,8 +255,8 @@ export const EnhancedVolumeControl = function EnhancedVolumeControl({
 	className?: string
 }) {
 	const dispatch = useMediaDispatch()
-	const volume = useMediaSelector(state => state.volume)
-	const isMuted = useMediaSelector(state => state.isMuted)
+	const volume = useMediaSelector((state) => state.volume)
+	const isMuted = useMediaSelector((state) => state.isMuted)
 
 	const [showSlider, setShowSlider] = React.useState(false)
 
@@ -249,52 +264,54 @@ export const EnhancedVolumeControl = function EnhancedVolumeControl({
 		dispatch({ type: MediaActionTypes.TOGGLE_MUTE })
 	}, [dispatch])
 
-	const handleVolumeChange = React.useCallback((newVolume: number) => {
-		dispatch({ type: MediaActionTypes.SET_VOLUME, detail: newVolume })
-	}, [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"/>
+					<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"/>
+					<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"/>
+					<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 
+		<div
 			className={cn("relative flex items-center", className)}
 			onMouseEnter={() => setShowSlider(true)}
-			onMouseLeave={() => setShowSlider(false)}
-		>
+			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"}
-			>
+				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"
-			)}>
+			<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"
@@ -320,7 +337,7 @@ export const EnhancedBackwardButton = function EnhancedBackwardButton({
 	skipTime?: number
 }) {
 	const dispatch = useMediaDispatch()
-	const currentTime = useMediaSelector(state => state.currentTime)
+	const currentTime = useMediaSelector((state) => state.currentTime)
 
 	const sizeClasses = {
 		sm: "h-8 w-8",
@@ -352,18 +369,13 @@ export const EnhancedBackwardButton = function EnhancedBackwardButton({
 				className
 			)}
 			aria-label={`Backward ${skipTime} seconds`}
-			title={`Backward ${skipTime}s`}
-		>
+			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"/>
+					<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>
-				)}
+				{skipTime && <span className="-bottom-1 absolute font-bold text-[10px]">{skipTime}</span>}
 			</div>
 		</button>
 	)
@@ -380,8 +392,8 @@ export const EnhancedForwardButton = function EnhancedForwardButton({
 	skipTime?: number
 }) {
 	const dispatch = useMediaDispatch()
-	const currentTime = useMediaSelector(state => state.currentTime)
-	const duration = useMediaSelector(state => state.duration)
+	const currentTime = useMediaSelector((state) => state.currentTime)
+	const duration = useMediaSelector((state) => state.duration)
 
 	const sizeClasses = {
 		sm: "h-8 w-8",
@@ -413,18 +425,13 @@ export const EnhancedForwardButton = function EnhancedForwardButton({
 				className
 			)}
 			aria-label={`Forward ${skipTime} seconds`}
-			title={`Forward ${skipTime}s`}
-		>
+			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"/>
+					<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>
-				)}
+				{skipTime && <span className="-bottom-1 absolute font-bold text-[10px]">{skipTime}</span>}
 			</div>
 		</button>
 	)
@@ -438,8 +445,8 @@ export const EnhancedTimeDisplay = function EnhancedTimeDisplay({
 	variant?: "current" | "duration" | "remaining"
 	className?: string
 }) {
-	const currentTime = useMediaSelector(state => state.currentTime)
-	const duration = useMediaSelector(state => state.duration)
+	const currentTime = useMediaSelector((state) => state.currentTime)
+	const duration = useMediaSelector((state) => state.duration)
 
 	const displayTime = React.useMemo(() => {
 		switch (variant) {
@@ -455,9 +462,7 @@ export const EnhancedTimeDisplay = function EnhancedTimeDisplay({
 	}, [variant, currentTime, duration])
 
 	return (
-		<div className={cn("font-mono text-sm text-white tabular-nums", className)}>
-			{displayTime}
-		</div>
+		<div className={cn("font-mono text-sm text-white tabular-nums", className)}>{displayTime}</div>
 	)
 }
 
@@ -474,20 +479,20 @@ export const PerformanceIndicator = function PerformanceIndicator({
 	}
 	className?: string
 }) {
-	if (!metrics || process.env.NODE_ENV !== 'development') {
+	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'
+		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'
+		if (health >= 5) return "text-green-400"
+		if (health >= 2) return "text-yellow-400"
+		return "text-red-400"
 	}
 
 	return (
@@ -523,7 +528,7 @@ export const EnhancedControlBar = function EnhancedControlBar({
 	playButtonSize = "xl",
 	skipButtonSize = "md",
 	skipTime = 10,
-	showPerformanceIndicators = process.env.NODE_ENV === 'development',
+	showPerformanceIndicators = process.env.NODE_ENV === "development",
 	performanceMetrics
 }: {
 	className?: string
@@ -542,7 +547,11 @@ export const EnhancedControlBar = function EnhancedControlBar({
 	}
 }) {
 	return (
-		<div className={cn("flex flex-col gap-4 bg-gradient-to-t from-black/80 to-transparent p-4", className)}>
+		<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" />
 
@@ -551,29 +560,20 @@ export const EnhancedControlBar = function EnhancedControlBar({
 				{/* Left side - Media controls */}
 				<div className="flex items-center gap-3">
 					{showSkipButtons && (
-						<EnhancedBackwardButton 
-							size={skipButtonSize} 
+						<EnhancedBackwardButton
+							size={skipButtonSize}
 							skipTime={skipTime}
-							className="shrink-0" 
+							className="shrink-0"
 						/>
 					)}
 
-					<EnhancedPlayButton 
-						size={playButtonSize}
-						className="shrink-0" 
-					/>
+					<EnhancedPlayButton size={playButtonSize} className="shrink-0" />
 
 					{showSkipButtons && (
-						<EnhancedForwardButton 
-							size={skipButtonSize} 
-							skipTime={skipTime}
-							className="shrink-0" 
-						/>
+						<EnhancedForwardButton size={skipButtonSize} skipTime={skipTime} className="shrink-0" />
 					)}
 
-					{showVolumeControl && (
-						<EnhancedVolumeControl className="shrink-0" />
-					)}
+					{showVolumeControl && <EnhancedVolumeControl className="shrink-0" />}
 
 					{showTimeDisplay && (
 						<div className="flex items-center gap-1 font-mono text-sm">
@@ -587,10 +587,7 @@ export const EnhancedControlBar = function EnhancedControlBar({
 				{/* Right side - Performance indicators and additional controls */}
 				<div className="flex items-center gap-2">
 					{showPerformanceIndicators && (
-						<PerformanceIndicator
-							metrics={performanceMetrics}
-							className="text-white/80"
-						/>
+						<PerformanceIndicator metrics={performanceMetrics} className="text-white/80" />
 					)}
 					{/* Future: Settings, Fullscreen, etc. */}
 				</div>