@therealtinhtute/baroiplayer 1.0.7 → 1.1.0

package/src/components/enhanced/error-handling.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import React from "react"
-import { useMediaSelector, useMediaDispatch, MediaActionTypes } from "../../context/media-context"
+import { MediaActionTypes, useMediaDispatch, useMediaSelector } from "../../context/media-context"
 import { cn } from "../../lib/utils"
 
 // Enhanced loading component with skeleton and progress
@@ -14,7 +14,7 @@ export const EnhancedLoading = function EnhancedLoading({
 	showProgress?: boolean
 	message?: string
 }) {
-	const isLoading = useMediaSelector(state => state.isLoading)
+	const isLoading = useMediaSelector((state) => state.isLoading)
 	const [progress, setProgress] = React.useState(0)
 
 	// Simulate loading progress for better UX
@@ -25,7 +25,7 @@ export const EnhancedLoading = function EnhancedLoading({
 		}
 
 		const interval = setInterval(() => {
-			setProgress(prev => {
+			setProgress((prev) => {
 				if (prev >= 90) return prev
 				return prev + Math.random() * 10
 			})
@@ -37,10 +37,11 @@ export const EnhancedLoading = function EnhancedLoading({
 	if (!isLoading) return null
 
 	return (
-		<div className={cn(
-			"absolute inset-0 z-40 flex items-center justify-center bg-black/50 backdrop-blur-sm",
-			className
-		)}>
+		<div
+			className={cn(
+				"absolute inset-0 z-40 flex items-center justify-center bg-black/50 backdrop-blur-sm",
+				className
+			)}>
 			<div className="flex flex-col items-center gap-4 text-white">
 				{/* Spinner */}
 				<div className="relative">
@@ -57,7 +58,7 @@ export const EnhancedLoading = function EnhancedLoading({
 					<p className="font-medium text-sm">{message}</p>
 					{showProgress && (
 						<div className="mt-2 h-1 w-48 overflow-hidden rounded-full bg-white/20">
-							<div 
+							<div
 								className="h-full bg-primary transition-all duration-300 ease-out"
 								style={{ width: `${progress}%` }}
 							/>
@@ -79,7 +80,7 @@ export const EnhancedError = function EnhancedError({
 	onRetry?: () => void
 	showDetails?: boolean
 }) {
-	const error = useMediaSelector(state => state.error)
+	const error = useMediaSelector((state) => state.error)
 	const dispatch = useMediaDispatch()
 	const [showFullError, setShowFullError] = React.useState(false)
 
@@ -96,21 +97,21 @@ export const EnhancedError = function EnhancedError({
 
 	// Parse error types for better user messages
 	const getErrorMessage = (error: string) => {
-		if (error.includes('network') || error.includes('fetch')) {
+		if (error.includes("network") || error.includes("fetch")) {
 			return {
 				title: "Network Error",
 				message: "Unable to load the video. Please check your internet connection.",
 				icon: "🌐"
 			}
 		}
-		if (error.includes('format') || error.includes('codec')) {
+		if (error.includes("format") || error.includes("codec")) {
 			return {
 				title: "Format Not Supported",
 				message: "This video format is not supported by your browser.",
 				icon: "🎥"
 			}
 		}
-		if (error.includes('permission') || error.includes('cors')) {
+		if (error.includes("permission") || error.includes("cors")) {
 			return {
 				title: "Access Denied",
 				message: "Unable to access the video due to permission restrictions.",
@@ -127,38 +128,32 @@ export const EnhancedError = function EnhancedError({
 	const errorInfo = getErrorMessage(error)
 
 	return (
-		<div className={cn(
-			"absolute inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm",
-			className
-		)}>
+		<div
+			className={cn(
+				"absolute inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm",
+				className
+			)}>
 			<div className="mx-4 max-w-md rounded-lg border border-red-500/20 bg-black/90 p-6 text-center">
 				{/* Error icon */}
 				<div className="mb-4 text-4xl">{errorInfo.icon}</div>
 
 				{/* Error title */}
-				<h3 className="mb-2 font-semibold text-lg text-white">
-					{errorInfo.title}
-				</h3>
+				<h3 className="mb-2 font-semibold text-lg text-white">{errorInfo.title}</h3>
 
 				{/* Error message */}
-				<p className="mb-4 text-sm text-white/80">
-					{errorInfo.message}
-				</p>
+				<p className="mb-4 text-sm text-white/80">{errorInfo.message}</p>
 
 				{/* Error details (collapsible) */}
 				{showDetails && (
 					<div className="mb-4">
 						<button
 							onClick={() => setShowFullError(!showFullError)}
-							className="text-white/60 text-xs transition-colors hover:text-white/80"
-						>
+							className="text-white/60 text-xs transition-colors hover:text-white/80">
 							{showFullError ? "Hide" : "Show"} technical details
 						</button>
 						{showFullError && (
 							<div className="mt-2 rounded border border-red-500/30 bg-red-900/20 p-3">
-								<code className="break-all text-red-300 text-xs">
-									{error}
-								</code>
+								<code className="break-all text-red-300 text-xs">{error}</code>
 							</div>
 						)}
 					</div>
@@ -169,15 +164,13 @@ export const EnhancedError = function EnhancedError({
 					{onRetry && (
 						<button
 							onClick={handleRetry}
-							className="rounded-lg bg-primary px-4 py-2 font-medium text-sm text-white transition-colors hover:bg-primary/80"
-						>
+							className="rounded-lg bg-primary px-4 py-2 font-medium text-sm text-white transition-colors hover:bg-primary/80">
 							Try Again
 						</button>
 					)}
 					<button
 						onClick={handleDismiss}
-						className="rounded-lg bg-white/10 px-4 py-2 font-medium text-sm text-white transition-colors hover:bg-white/20"
-					>
+						className="rounded-lg bg-white/10 px-4 py-2 font-medium text-sm text-white transition-colors hover:bg-white/20">
 						Dismiss
 					</button>
 				</div>
@@ -193,7 +186,10 @@ interface ErrorBoundaryState {
 }
 
 export class MediaPlayerErrorBoundary extends React.Component<
-	{ children: React.ReactNode; fallback?: React.ComponentType<{ error: Error; retry: () => void }> },
+	{
+		children: React.ReactNode
+		fallback?: React.ComponentType<{ error: Error; retry: () => void }>
+	},
 	ErrorBoundaryState
 > {
 	constructor(props: any) {
@@ -206,7 +202,7 @@ export class MediaPlayerErrorBoundary extends React.Component<
 	}
 
 	componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-		console.error('MediaPlayer Error:', error, errorInfo)
+		console.error("MediaPlayer Error:", error, errorInfo)
 	}
 
 	retry = () => {
@@ -224,16 +220,13 @@ export class MediaPlayerErrorBoundary extends React.Component<
 				<div className="absolute inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
 					<div className="mx-4 max-w-md rounded-lg border border-red-500/20 bg-black/90 p-6 text-center">
 						<div className="mb-4 text-4xl">💥</div>
-						<h3 className="mb-2 font-semibold text-lg text-white">
-							Something went wrong
-						</h3>
+						<h3 className="mb-2 font-semibold text-lg text-white">Something went wrong</h3>
 						<p className="mb-4 text-sm text-white/80">
 							The media player encountered an unexpected error.
 						</p>
 						<button
 							onClick={this.retry}
-							className="rounded-lg bg-primary px-4 py-2 font-medium text-sm text-white transition-colors hover:bg-primary/80"
-						>
+							className="rounded-lg bg-primary px-4 py-2 font-medium text-sm text-white transition-colors hover:bg-primary/80">
 							Reload Player
 						</button>
 					</div>
@@ -265,27 +258,26 @@ export const ConnectionStatus = function ConnectionStatus({
 			setShowOfflineMessage(true)
 		}
 
-		window.addEventListener('online', handleOnline)
-		window.addEventListener('offline', handleOffline)
+		window.addEventListener("online", handleOnline)
+		window.addEventListener("offline", handleOffline)
 
 		return () => {
-			window.removeEventListener('online', handleOnline)
-			window.removeEventListener('offline', handleOffline)
+			window.removeEventListener("online", handleOnline)
+			window.removeEventListener("offline", handleOffline)
 		}
 	}, [])
 
 	if (!showOfflineMessage) return null
 
 	return (
-		<div className={cn(
-			"absolute top-4 right-4 left-4 z-50 rounded-lg border border-orange-400/30 bg-orange-500/90 p-3 backdrop-blur-sm",
-			className
-		)}>
+		<div
+			className={cn(
+				"absolute top-4 right-4 left-4 z-50 rounded-lg border border-orange-400/30 bg-orange-500/90 p-3 backdrop-blur-sm",
+				className
+			)}>
 			<div className="flex items-center gap-3 text-white">
 				<div className="h-2 w-2 animate-pulse rounded-full bg-orange-300" />
-				<span className="font-medium text-sm">
-					You're offline. Video playback may be affected.
-				</span>
+				<span className="font-medium text-sm">You're offline. Video playback may be affected.</span>
 			</div>
 		</div>
 	)
@@ -297,9 +289,9 @@ export const BufferHealthIndicator = function BufferHealthIndicator({
 }: {
 	className?: string
 }) {
-	const buffered = useMediaSelector(state => state.buffered)
-	const currentTime = useMediaSelector(state => state.currentTime)
-	const duration = useMediaSelector(state => state.duration)
+	const buffered = useMediaSelector((state) => state.buffered)
+	const currentTime = useMediaSelector((state) => state.currentTime)
+	const duration = useMediaSelector((state) => state.duration)
 
 	const bufferHealth = React.useMemo(() => {
 		if (!buffered || duration === 0) return 0
@@ -326,14 +318,15 @@ export const BufferHealthIndicator = function BufferHealthIndicator({
 	if (bufferHealth > 80) return null // Don't show when buffer is healthy
 
 	return (
-		<div className={cn(
-			"absolute top-4 right-4 z-40 rounded-lg border border-white/20 bg-black/80 p-2 backdrop-blur-sm",
-			className
-		)}>
+		<div
+			className={cn(
+				"absolute top-4 right-4 z-40 rounded-lg border border-white/20 bg-black/80 p-2 backdrop-blur-sm",
+				className
+			)}>
 			<div className="flex items-center gap-2 text-white text-xs">
 				<span>Buffer:</span>
 				<div className="h-1 w-16 overflow-hidden rounded-full bg-white/20">
-					<div 
+					<div
 						className={cn("h-full transition-all duration-300", getHealthColor(bufferHealth))}
 						style={{ width: `${bufferHealth}%` }}
 					/>

package/src/components/enhanced/index.ts

@@ -1,39 +1,39 @@
 // Enhanced Components with Advanced Features
 export {
-  ChaptersPanel,
-  PictureInPictureButton,
-  PlaybackSpeedSelector,
-  QualitySelector,
-  SubtitleSelector
-} from "./advanced-features";
+	ChaptersPanel,
+	PictureInPictureButton,
+	PlaybackSpeedSelector,
+	QualitySelector,
+	SubtitleSelector
+} from "./advanced-features"
 
-// Enhanced Control Components  
+// Enhanced Control Components
 export {
-  EnhancedPlayButton,
-  EnhancedSeekBar,
-  EnhancedTimeDisplay,
-  EnhancedVolumeControl,
-  EnhancedBackwardButton,
-  EnhancedForwardButton,
-  EnhancedControlBar
-} from "./enhanced-controls";
+	EnhancedPlayButton,
+	EnhancedSeekBar,
+	EnhancedTimeDisplay,
+	EnhancedVolumeControl,
+	EnhancedBackwardButton,
+	EnhancedForwardButton,
+	EnhancedControlBar
+} from "./enhanced-controls"
 
 // Enhanced Error Handling
 export {
-  BufferHealthIndicator,
-  ConnectionStatus,
-  EnhancedError,
-  EnhancedLoading,
-  MediaPlayerErrorBoundary
-} from "./error-handling";
+	BufferHealthIndicator,
+	ConnectionStatus,
+	EnhancedError,
+	EnhancedLoading,
+	MediaPlayerErrorBoundary
+} from "./error-handling"
 
 // Main Enhanced Media Player
-export { EnhancedMediaPlayer } from "./media-player-enhanced";
+export { EnhancedMediaPlayer } from "./media-player-enhanced"
 
 // Enhanced Examples
 export {
-  EnhancedControlsExample,
-  CustomEnhancedControlsExample,
-  SkipButtonsOnlyExample
-} from "../examples/enhanced-controls-example";
-export type { EnhancedControlsExampleProps } from "../examples/enhanced-controls-example";
+	EnhancedControlsExample,
+	CustomEnhancedControlsExample,
+	SkipButtonsOnlyExample
+} from "../examples/enhanced-controls-example"
+export type { EnhancedControlsExampleProps } from "../examples/enhanced-controls-example"

package/src/components/enhanced/media-player-enhanced.tsx

@@ -1,9 +1,27 @@
 "use client"
 
 import React from "react"
-import { useMediaContext, useMediaSelector, useMediaDispatch, MediaActionTypes } from "../../context/media-context"
+import {
+	MediaActionTypes,
+	useMediaContext,
+	useMediaDispatch,
+	useMediaSelector
+} from "../../context/media-context"
 import { cn } from "../../lib/utils"
 
+// Utility function to compose refs
+function composeRefs<T>(...refs: Array<React.Ref<T> | undefined>) {
+	return (node: T) => {
+		refs.forEach((ref) => {
+			if (typeof ref === "function") {
+				ref(node)
+			} else if (ref) {
+				;(ref as React.MutableRefObject<T>).current = node
+			}
+		})
+	}
+}
+
 // Enhanced media player with better performance and mobile support
 export interface EnhancedMediaPlayerProps {
 	children: React.ReactNode
@@ -31,7 +49,7 @@ function useAutoHideControls(
 	const [showControls, setShowControls] = React.useState(true)
 	const [isHovering, setIsHovering] = React.useState(false)
 	const [isTouching, setIsTouching] = React.useState(false)
-  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null)
+	const timeoutRef = React.useRef<NodeJS.Timeout | null>(null)
 
 	const resetTimeout = React.useCallback(() => {
 		if (timeoutRef.current) {
@@ -105,67 +123,79 @@ function useAutoHideControls(
 // Custom hook for touch gestures
 function useTouchGestures(enabled: boolean) {
 	const dispatch = useMediaDispatch()
-	const isPlaying = useMediaSelector(state => state.isPlaying)
-	const currentTime = useMediaSelector(state => state.currentTime)
-	const duration = useMediaSelector(state => state.duration)
-	const volume = useMediaSelector(state => state.volume)
+	const isPlaying = useMediaSelector((state) => state.isPlaying)
+	const currentTime = useMediaSelector((state) => state.currentTime)
+	const duration = useMediaSelector((state) => state.duration)
+	const volume = useMediaSelector((state) => state.volume)
 
-	const [touchStart, setTouchStart] = React.useState<{ x: number; y: number; time: number } | null>(null)
+	const [touchStart, setTouchStart] = React.useState<{ x: number; y: number; time: number } | null>(
+		null
+	)
 	const [isDoubleTap, setIsDoubleTap] = React.useState(false)
 
-	const handleTouchStart = React.useCallback((e: React.TouchEvent) => {
-		if (!enabled) return
-		
-		const touch = e.touches[0]
-		if (!touch) return
-		
-		const now = Date.now()
-		
-		if (touchStart && now - touchStart.time < 300) {
-			setIsDoubleTap(true)
-			// Double tap to play/pause
-			dispatch({
-				type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
-			})
-		} else {
-			setTouchStart({
-				x: touch.clientX,
-				y: touch.clientY,
-				time: now
-			})
-			setIsDoubleTap(false)
-		}
-	}, [enabled, touchStart, isPlaying, dispatch])
-
-	const handleTouchMove = React.useCallback((e: React.TouchEvent) => {
-		if (!enabled || !touchStart || isDoubleTap) return
-
-		const touch = e.touches[0]
-		if (!touch) return
-		
-		const deltaX = touch.clientX - touchStart.x
-		const deltaY = touch.clientY - touchStart.y
-
-		// Horizontal swipe for seeking
-		if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 50) {
-			const seekAmount = (deltaX / window.innerWidth) * 30 // 30 seconds max
-			const newTime = Math.max(0, Math.min(duration, currentTime + seekAmount))
-			dispatch({
-				type: MediaActionTypes.SEEK,
-				detail: newTime
-			})
-		}
+	const handleTouchStart = React.useCallback(
+		(e: React.TouchEvent) => {
+			if (!enabled) return
+
+			const touch = e.touches[0]
+			if (!touch) return
+
+			const now = Date.now()
+
+			if (touchStart && now - touchStart.time < 300) {
+				setIsDoubleTap(true)
+				// Double tap to play/pause
+				dispatch({
+					type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
+				})
+			} else {
+				setTouchStart({
+					x: touch.clientX,
+					y: touch.clientY,
+					time: now
+				})
+				setIsDoubleTap(false)
+			}
+		},
+		[enabled, touchStart, isPlaying, dispatch]
+	)
 
-		// Vertical swipe for volume (right side of screen)
-		if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 50 && touchStart.x > window.innerWidth / 2) {
-			const volumeChange = -(deltaY / window.innerHeight) * 1 // Full range
-			const newVolume = Math.max(0, Math.min(1, volume + volumeChange))
-			dispatch({
-				type: MediaActionTypes.SET_VOLUME,
-				detail: newVolume
-			})
-		}
-	}, [enabled, touchStart, isDoubleTap, duration, currentTime, volume, dispatch])
+	const handleTouchMove = React.useCallback(
+		(e: React.TouchEvent) => {
+			if (!enabled || !touchStart || isDoubleTap) return
+
+			const touch = e.touches[0]
+			if (!touch) return
+
+			const deltaX = touch.clientX - touchStart.x
+			const deltaY = touch.clientY - touchStart.y
+
+			// Horizontal swipe for seeking
+			if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 50) {
+				const seekAmount = (deltaX / window.innerWidth) * 30 // 30 seconds max
+				const newTime = Math.max(0, Math.min(duration, currentTime + seekAmount))
+				dispatch({
+					type: MediaActionTypes.SEEK,
+					detail: newTime
+				})
+			}
+
+			// Vertical swipe for volume (right side of screen)
+			if (
+				Math.abs(deltaY) > Math.abs(deltaX) &&
+				Math.abs(deltaY) > 50 &&
+				touchStart.x > window.innerWidth / 2
+			) {
+				const volumeChange = -(deltaY / window.innerHeight) * 1 // Full range
+				const newVolume = Math.max(0, Math.min(1, volume + volumeChange))
+				dispatch({
+					type: MediaActionTypes.SET_VOLUME,
+					detail: newVolume
+				})
+			}
+		},
+		[enabled, touchStart, isDoubleTap, duration, currentTime, volume, dispatch]
+	)
 
 	const handleTouchEnd = React.useCallback(() => {
 		if (!enabled) return
@@ -200,13 +230,13 @@ export const EnhancedMediaPlayer = function EnhancedMediaPlayer({
 }: EnhancedMediaPlayerProps) {
 	const context = useMediaContext()
 	const dispatch = useMediaDispatch()
-	
+
 	// State selectors with memoization
-	const isPlaying = useMediaSelector(React.useCallback(state => state.isPlaying, []))
-	const isFullscreen = useMediaSelector(React.useCallback(state => state.isFullscreen, []))
-	const currentTime = useMediaSelector(React.useCallback(state => state.currentTime, []))
-	const volume = useMediaSelector(React.useCallback(state => state.volume, []))
-	const error = useMediaSelector(React.useCallback(state => state.error, []))
+	const isPlaying = useMediaSelector(React.useCallback((state) => state.isPlaying, []))
+	const isFullscreen = useMediaSelector(React.useCallback((state) => state.isFullscreen, []))
+	const currentTime = useMediaSelector(React.useCallback((state) => state.currentTime, []))
+	const volume = useMediaSelector(React.useCallback((state) => state.volume, []))
+	const error = useMediaSelector(React.useCallback((state) => state.error, []))
 
 	// Custom hooks
 	const {
@@ -225,10 +255,13 @@ export const EnhancedMediaPlayer = function EnhancedMediaPlayer({
 	} = useTouchGestures(enableTouchGestures)
 
 	// Combine touch handlers
-	const handleTouchStart = React.useCallback((e: React.TouchEvent) => {
-		handleControlsTouch()
-		handleGestureStart(e)
-	}, [handleControlsTouch, handleGestureStart])
+	const handleTouchStart = React.useCallback(
+		(e: React.TouchEvent) => {
+			handleControlsTouch()
+			handleGestureStart(e)
+		},
+		[handleControlsTouch, handleGestureStart]
+	)
 
 	const handleTouchEnd = React.useCallback(() => {
 		handleControlsTouchEnd()
@@ -250,45 +283,47 @@ export const EnhancedMediaPlayer = function EnhancedMediaPlayer({
 			}
 
 			switch (e.code) {
-				case 'Space':
-				case 'KeyK':
+				case "Space":
+				case "KeyK":
 					e.preventDefault()
 					dispatch({
 						type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
 					})
 					break
-				case 'KeyF':
+				case "KeyF":
 					e.preventDefault()
 					dispatch({
-						type: isFullscreen ? MediaActionTypes.EXIT_FULLSCREEN : MediaActionTypes.ENTER_FULLSCREEN
+						type: isFullscreen
+							? MediaActionTypes.EXIT_FULLSCREEN
+							: MediaActionTypes.ENTER_FULLSCREEN
 					})
 					break
-				case 'KeyM':
+				case "KeyM":
 					e.preventDefault()
 					dispatch({ type: MediaActionTypes.TOGGLE_MUTE })
 					break
-				case 'ArrowLeft':
+				case "ArrowLeft":
 					e.preventDefault()
 					dispatch({
 						type: MediaActionTypes.SEEK,
 						detail: Math.max(0, currentTime - 10)
 					})
 					break
-				case 'ArrowRight':
+				case "ArrowRight":
 					e.preventDefault()
 					dispatch({
 						type: MediaActionTypes.SEEK,
 						detail: currentTime + 10
 					})
 					break
-				case 'ArrowUp':
+				case "ArrowUp":
 					e.preventDefault()
 					dispatch({
 						type: MediaActionTypes.SET_VOLUME,
 						detail: Math.min(1, volume + 0.1)
 					})
 					break
-				case 'ArrowDown':
+				case "ArrowDown":
 					e.preventDefault()
 					dispatch({
 						type: MediaActionTypes.SET_VOLUME,
@@ -298,8 +333,8 @@ export const EnhancedMediaPlayer = function EnhancedMediaPlayer({
 			}
 		}
 
-		document.addEventListener('keydown', handleKeyDown)
-		return () => document.removeEventListener('keydown', handleKeyDown)
+		document.addEventListener("keydown", handleKeyDown)
+		return () => document.removeEventListener("keydown", handleKeyDown)
 	}, [enableKeyboardControls, dispatch, isPlaying, isFullscreen, currentTime, volume])
 
 	// Event callbacks
@@ -322,7 +357,7 @@ export const EnhancedMediaPlayer = function EnhancedMediaPlayer({
 
 	return (
 		<div
-			ref={context.rootRef}
+			ref={composeRefs(context.rootRef)}
 			className={cn(
 				"relative isolate flex flex-col overflow-hidden rounded-lg bg-black outline-none",
 				"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
@@ -339,8 +374,7 @@ export const EnhancedMediaPlayer = function EnhancedMediaPlayer({
 			onTouchStart={handleTouchStart}
 			onTouchMove={handleGestureMove}
 			onTouchEnd={handleTouchEnd}
-			onClick={handleClick}
-		>
+			onClick={handleClick}>
 			{children}
 		</div>
 	)