@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

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

@@ -1,338 +0,0 @@
-"use client"
-
-import React from "react"
-import { MediaActionTypes, useMediaDispatch, useMediaSelector } 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

@@ -1,39 +0,0 @@
-// 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"