@therealtinhtute/baroiplayer 1.0.0

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

@@ -0,0 +1,345 @@
+"use client"
+
+import React from "react"
+import { useMediaSelector, useMediaDispatch, MediaActionTypes } from "../../context/media-context"
+import { cn } from "../../lib/utils"
+
+// Enhanced loading component with skeleton and progress
+export const EnhancedLoading = function EnhancedLoading({
+	className,
+	showProgress = false,
+	message = "Loading..."
+}: {
+	className?: string
+	showProgress?: boolean
+	message?: string
+}) {
+	const isLoading = useMediaSelector(state => state.isLoading)
+	const [progress, setProgress] = React.useState(0)
+
+	// Simulate loading progress for better UX
+	React.useEffect(() => {
+		if (!isLoading) {
+			setProgress(0)
+			return
+		}
+
+		const interval = setInterval(() => {
+			setProgress(prev => {
+				if (prev >= 90) return prev
+				return prev + Math.random() * 10
+			})
+		}, 200)
+
+		return () => clearInterval(interval)
+	}, [isLoading])
+
+	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="flex flex-col items-center gap-4 text-white">
+				{/* Spinner */}
+				<div className="relative">
+					<div className="h-12 w-12 animate-spin rounded-full border-4 border-white/20 border-t-white" />
+					{showProgress && (
+						<div className="absolute inset-0 flex items-center justify-center">
+							<span className="font-medium text-xs">{Math.round(progress)}%</span>
+						</div>
+					)}
+				</div>
+
+				{/* Message */}
+				<div className="text-center">
+					<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 
+								className="h-full bg-primary transition-all duration-300 ease-out"
+								style={{ width: `${progress}%` }}
+							/>
+						</div>
+					)}
+				</div>
+			</div>
+		</div>
+	)
+}
+
+// Enhanced error component with retry and detailed messages
+export const EnhancedError = function EnhancedError({
+	className,
+	onRetry,
+	showDetails = false
+}: {
+	className?: string
+	onRetry?: () => void
+	showDetails?: boolean
+}) {
+	const error = useMediaSelector(state => state.error)
+	const dispatch = useMediaDispatch()
+	const [showFullError, setShowFullError] = React.useState(false)
+
+	const handleRetry = React.useCallback(() => {
+		dispatch({ type: MediaActionTypes.SET_ERROR, detail: null })
+		onRetry?.()
+	}, [dispatch, onRetry])
+
+	const handleDismiss = React.useCallback(() => {
+		dispatch({ type: MediaActionTypes.SET_ERROR, detail: null })
+	}, [dispatch])
+
+	if (!error) return null
+
+	// Parse error types for better user messages
+	const getErrorMessage = (error: string) => {
+		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')) {
+			return {
+				title: "Format Not Supported",
+				message: "This video format is not supported by your browser.",
+				icon: "🎥"
+			}
+		}
+		if (error.includes('permission') || error.includes('cors')) {
+			return {
+				title: "Access Denied",
+				message: "Unable to access the video due to permission restrictions.",
+				icon: "🔒"
+			}
+		}
+		return {
+			title: "Playback Error",
+			message: "An error occurred while trying to play the video.",
+			icon: "⚠️"
+		}
+	}
+
+	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="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>
+
+				{/* Error message */}
+				<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"
+						>
+							{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>
+							</div>
+						)}
+					</div>
+				)}
+
+				{/* Action buttons */}
+				<div className="flex justify-center gap-3">
+					{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"
+						>
+							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"
+					>
+						Dismiss
+					</button>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+// Error boundary component for React errors
+interface ErrorBoundaryState {
+	hasError: boolean
+	error?: Error
+}
+
+export class MediaPlayerErrorBoundary extends React.Component<
+	{ children: React.ReactNode; fallback?: React.ComponentType<{ error: Error; retry: () => void }> },
+	ErrorBoundaryState
+> {
+	constructor(props: any) {
+		super(props)
+		this.state = { hasError: false }
+	}
+
+	static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+		return { hasError: true, error }
+	}
+
+	componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+		console.error('MediaPlayer Error:', error, errorInfo)
+	}
+
+	retry = () => {
+		this.setState({ hasError: false, error: undefined })
+	}
+
+	render() {
+		if (this.state.hasError) {
+			if (this.props.fallback) {
+				const Fallback = this.props.fallback
+				return <Fallback error={this.state.error!} retry={this.retry} />
+			}
+
+			return (
+				<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>
+						<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"
+						>
+							Reload Player
+						</button>
+					</div>
+				</div>
+			)
+		}
+
+		return this.props.children
+	}
+}
+
+// Connection status indicator
+export const ConnectionStatus = function ConnectionStatus({
+	className
+}: {
+	className?: string
+}) {
+	const [isOnline, setIsOnline] = React.useState(navigator.onLine)
+	const [showOfflineMessage, setShowOfflineMessage] = React.useState(false)
+
+	React.useEffect(() => {
+		const handleOnline = () => {
+			setIsOnline(true)
+			setShowOfflineMessage(false)
+		}
+
+		const handleOffline = () => {
+			setIsOnline(false)
+			setShowOfflineMessage(true)
+		}
+
+		window.addEventListener('online', handleOnline)
+		window.addEventListener('offline', handleOffline)
+
+		return () => {
+			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="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>
+			</div>
+		</div>
+	)
+}
+
+// Buffer health indicator
+export const BufferHealthIndicator = function BufferHealthIndicator({
+	className
+}: {
+	className?: string
+}) {
+	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
+
+		let bufferedAhead = 0
+		for (let i = 0; i < buffered.length; i++) {
+			const start = buffered.start(i)
+			const end = buffered.end(i)
+			if (start <= currentTime && end > currentTime) {
+				bufferedAhead = end - currentTime
+				break
+			}
+		}
+
+		return Math.min(100, (bufferedAhead / 30) * 100) // 30 seconds = 100%
+	}, [buffered, currentTime, duration])
+
+	const getHealthColor = (health: number) => {
+		if (health > 70) return "bg-green-500"
+		if (health > 30) return "bg-yellow-500"
+		return "bg-red-500"
+	}
+
+	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="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 
+						className={cn("h-full transition-all duration-300", getHealthColor(bufferHealth))}
+						style={{ width: `${bufferHealth}%` }}
+					/>
+				</div>
+				<span>{Math.round(bufferHealth)}%</span>
+			</div>
+		</div>
+	)
+}

package/src/components/enhanced/index.ts

@@ -0,0 +1,39 @@
+// Enhanced Components with Advanced Features
+export {
+  ChaptersPanel,
+  PictureInPictureButton,
+  PlaybackSpeedSelector,
+  QualitySelector,
+  SubtitleSelector
+} from "./advanced-features";
+
+// Enhanced Control Components  
+export {
+  EnhancedPlayButton,
+  EnhancedSeekBar,
+  EnhancedTimeDisplay,
+  EnhancedVolumeControl,
+  EnhancedBackwardButton,
+  EnhancedForwardButton,
+  EnhancedControlBar
+} from "./enhanced-controls";
+
+// Enhanced Error Handling
+export {
+  BufferHealthIndicator,
+  ConnectionStatus,
+  EnhancedError,
+  EnhancedLoading,
+  MediaPlayerErrorBoundary
+} from "./error-handling";
+
+// Main Enhanced Media Player
+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";