@therealtinhtute/baroiplayer 1.0.0

package/src/context/error-handling.ts

@@ -0,0 +1,394 @@
+"use client"
+
+import React from "react"
+import type { MediaActionType } from "./media-context"
+import type { OptimisticMediaAction } from "./media-store"
+
+// Error types specific to media operations
+export enum MediaErrorType {
+	NETWORK_ERROR = "NETWORK_ERROR",
+	PLAYBACK_ERROR = "PLAYBACK_ERROR",
+	PERMISSION_ERROR = "PERMISSION_ERROR",
+	NOT_SUPPORTED_ERROR = "NOT_SUPPORTED_ERROR",
+	TIMEOUT_ERROR = "TIMEOUT_ERROR",
+	UNKNOWN_ERROR = "UNKNOWN_ERROR"
+}
+
+// Enhanced error interface
+export interface MediaError {
+	type: MediaErrorType
+	message: string
+	action?: OptimisticMediaAction
+	timestamp: number
+	retryable: boolean
+	retryCount: number
+	originalError?: Error
+}
+
+// Retry configuration
+export interface RetryConfig {
+	maxRetries: number
+	baseDelay: number // milliseconds
+	maxDelay: number // milliseconds
+	exponentialBackoff: boolean
+	retryableErrors: MediaErrorType[]
+	retryableActions: MediaActionType[]
+}
+
+// Default retry configuration
+const DEFAULT_RETRY_CONFIG: RetryConfig = {
+	maxRetries: 3,
+	baseDelay: 1000,
+	maxDelay: 10000,
+	exponentialBackoff: true,
+	retryableErrors: [
+		MediaErrorType.NETWORK_ERROR,
+		MediaErrorType.TIMEOUT_ERROR
+	],
+	retryableActions: [
+		"PLAY",
+		"PAUSE",
+		"SEEK",
+		"SET_VOLUME",
+		"ENTER_FULLSCREEN",
+		"EXIT_FULLSCREEN"
+	]
+}
+
+// Error recovery strategies
+export interface ErrorRecoveryStrategy {
+	canRecover(error: MediaError): boolean
+	recover(error: MediaError): Promise<void>
+}
+
+// Network error recovery
+class NetworkErrorRecovery implements ErrorRecoveryStrategy {
+	canRecover(error: MediaError): boolean {
+		return error.type === MediaErrorType.NETWORK_ERROR && error.retryCount < 3
+	}
+
+	async recover(error: MediaError): Promise<void> {
+		// Wait for network to become available
+		if (navigator.onLine === false) {
+			await new Promise(resolve => {
+				const handleOnline = () => {
+					window.removeEventListener('online', handleOnline)
+					resolve(void 0)
+				}
+				window.addEventListener('online', handleOnline)
+			})
+		}
+		
+		// Additional delay for network stability
+		await new Promise(resolve => setTimeout(resolve, 2000))
+	}
+}
+
+// Playback error recovery
+class PlaybackErrorRecovery implements ErrorRecoveryStrategy {
+	canRecover(error: MediaError): boolean {
+		return error.type === MediaErrorType.PLAYBACK_ERROR && error.retryCount < 2
+	}
+
+	async recover(error: MediaError): Promise<void> {
+		// Try to reload the media element
+		const mediaElement = document.querySelector('video, audio') as HTMLMediaElement
+		if (mediaElement) {
+			mediaElement.load()
+			await new Promise(resolve => {
+				const handleCanPlay = () => {
+					mediaElement.removeEventListener('canplay', handleCanPlay)
+					resolve(void 0)
+				}
+				mediaElement.addEventListener('canplay', handleCanPlay)
+			})
+		}
+	}
+}
+
+// Permission error recovery (for fullscreen, etc.)
+class PermissionErrorRecovery implements ErrorRecoveryStrategy {
+	canRecover(error: MediaError): boolean {
+		return error.type === MediaErrorType.PERMISSION_ERROR && 
+			   error.action?.type === 'ENTER_FULLSCREEN'
+	}
+
+	async recover(error: MediaError): Promise<void> {
+		// Request user interaction for fullscreen
+		console.warn('Fullscreen requires user interaction')
+		// In a real implementation, you might show a message to the user
+	}
+}
+
+// Error handler class
+export class MediaErrorHandler {
+	private config: RetryConfig
+	private recoveryStrategies: ErrorRecoveryStrategy[]
+	private errorQueue: Map<string, MediaError> = new Map()
+	private listeners: Set<(error: MediaError) => void> = new Set()
+
+	constructor(
+		config: Partial<RetryConfig> = {},
+		recoveryStrategies: ErrorRecoveryStrategy[] = []
+	) {
+		this.config = { ...DEFAULT_RETRY_CONFIG, ...config }
+		this.recoveryStrategies = [
+			new NetworkErrorRecovery(),
+			new PlaybackErrorRecovery(),
+			new PermissionErrorRecovery(),
+			...recoveryStrategies
+		]
+	}
+
+	// Create a media error from a generic error
+	createMediaError(
+		error: unknown,
+		action?: OptimisticMediaAction,
+		retryCount = 0
+	): MediaError {
+		const timestamp = Date.now()
+		
+		if (error instanceof Error) {
+			const errorType = this.categorizeError(error, action)
+			return {
+				type: errorType,
+				message: error.message,
+				action,
+				timestamp,
+				retryable: this.isRetryable(errorType, action),
+				retryCount,
+				originalError: error
+			}
+		}
+		
+		return {
+			type: MediaErrorType.UNKNOWN_ERROR,
+			message: typeof error === 'string' ? error : 'Unknown error occurred',
+			action,
+			timestamp,
+			retryable: this.isRetryable(MediaErrorType.UNKNOWN_ERROR, action),
+			retryCount
+		}
+	}
+
+	// Categorize errors based on error properties and action context
+	private categorizeError(error: Error, action?: OptimisticMediaAction): MediaErrorType {
+		const message = error.message.toLowerCase()
+		
+		// Network-related errors
+		if (message.includes('network') || 
+			message.includes('fetch') || 
+			message.includes('connection') ||
+			error.name === 'NetworkError') {
+			return MediaErrorType.NETWORK_ERROR
+		}
+		
+		// Permission errors
+		if (message.includes('permission') || 
+			message.includes('denied') ||
+			message.includes('fullscreen') ||
+			error.name === 'NotAllowedError') {
+			return MediaErrorType.PERMISSION_ERROR
+		}
+		
+		// Playback errors
+		if (message.includes('decode') ||
+			message.includes('format') ||
+			message.includes('codec') ||
+			action?.type === 'PLAY') {
+			return MediaErrorType.PLAYBACK_ERROR
+		}
+		
+		// Timeout errors
+		if (message.includes('timeout') ||
+			error.name === 'TimeoutError') {
+			return MediaErrorType.TIMEOUT_ERROR
+		}
+		
+		// Not supported errors
+		if (message.includes('not supported') ||
+			message.includes('unsupported') ||
+			error.name === 'NotSupportedError') {
+			return MediaErrorType.NOT_SUPPORTED_ERROR
+		}
+		
+		return MediaErrorType.UNKNOWN_ERROR
+	}
+
+	// Check if an error/action combination is retryable
+	private isRetryable(errorType: MediaErrorType, action?: OptimisticMediaAction): boolean {
+		const errorRetryable = this.config.retryableErrors.includes(errorType)
+		const actionRetryable = !action || this.config.retryableActions.includes(action.type)
+		return errorRetryable && actionRetryable
+	}
+
+	// Calculate retry delay with exponential backoff
+	private calculateRetryDelay(retryCount: number): number {
+		if (!this.config.exponentialBackoff) {
+			return this.config.baseDelay
+		}
+		
+		const delay = this.config.baseDelay * Math.pow(2, retryCount)
+		return Math.min(delay, this.config.maxDelay)
+	}
+
+	// Handle an error with automatic retry logic
+	async handleError(
+		error: unknown,
+		action?: OptimisticMediaAction,
+		retryCallback?: (action: OptimisticMediaAction) => Promise<void>
+	): Promise<MediaError> {
+		const mediaError = this.createMediaError(error, action, action?.retryCount || 0)
+		const errorId = `${action?.type}-${mediaError.timestamp}`
+		
+		// Store error for tracking
+		this.errorQueue.set(errorId, mediaError)
+		
+		// Notify listeners
+		this.listeners.forEach(listener => listener(mediaError))
+		
+		// Try recovery strategies
+		for (const strategy of this.recoveryStrategies) {
+			if (strategy.canRecover(mediaError)) {
+				try {
+					await strategy.recover(mediaError)
+					break
+				} catch (recoveryError) {
+					console.warn('Recovery strategy failed:', recoveryError)
+				}
+			}
+		}
+		
+		// Retry if possible
+		if (mediaError.retryable && 
+			mediaError.retryCount < this.config.maxRetries && 
+			retryCallback && 
+			action) {
+			
+			const delay = this.calculateRetryDelay(mediaError.retryCount)
+			console.log(`Retrying action ${action.type} in ${delay}ms (attempt ${mediaError.retryCount + 1}/${this.config.maxRetries})`)
+			
+			setTimeout(async () => {
+				try {
+					await retryCallback({
+						...action,
+						retryCount: mediaError.retryCount + 1
+					})
+					
+					// Remove from error queue on successful retry
+					this.errorQueue.delete(errorId)
+				} catch (retryError) {
+					// Handle retry failure
+					await this.handleError(retryError, {
+						...action,
+						retryCount: mediaError.retryCount + 1
+					}, retryCallback)
+				}
+			}, delay)
+		}
+		
+		return mediaError
+	}
+
+	// Subscribe to error events
+	subscribe(listener: (error: MediaError) => void): () => void {
+		this.listeners.add(listener)
+		return () => this.listeners.delete(listener)
+	}
+
+	// Get current errors
+	getErrors(): MediaError[] {
+		return Array.from(this.errorQueue.values())
+	}
+
+	// Clear specific error
+	clearError(errorId: string): void {
+		this.errorQueue.delete(errorId)
+	}
+
+	// Clear all errors
+	clearAllErrors(): void {
+		this.errorQueue.clear()
+	}
+
+	// Get error statistics
+	getErrorStats(): {
+		totalErrors: number
+		errorsByType: Record<MediaErrorType, number>
+		retryableErrors: number
+		recentErrors: MediaError[]
+	} {
+		const errors = this.getErrors()
+		const now = Date.now()
+		const recentThreshold = 5 * 60 * 1000 // 5 minutes
+		
+		const errorsByType = errors.reduce((acc, error) => {
+			acc[error.type] = (acc[error.type] || 0) + 1
+			return acc
+		}, {} as Record<MediaErrorType, number>)
+		
+		const retryableErrors = errors.filter(e => e.retryable).length
+		const recentErrors = errors.filter(e => now - e.timestamp < recentThreshold)
+		
+		return {
+			totalErrors: errors.length,
+			errorsByType,
+			retryableErrors,
+			recentErrors
+		}
+	}
+}
+
+// Hook for using error handling in components
+export function useMediaErrorHandler(config?: Partial<RetryConfig>) {
+	const [handler] = React.useState(() => new MediaErrorHandler(config))
+	const [errors, setErrors] = React.useState<MediaError[]>([])
+	
+	React.useEffect(() => {
+		const unsubscribe = handler.subscribe((error) => {
+			setErrors(current => [...current, error])
+		})
+		
+		return unsubscribe
+	}, [handler])
+	
+	const clearError = React.useCallback((errorId: string) => {
+		handler.clearError(errorId)
+		setErrors(current => current.filter(e => `${e.action?.type}-${e.timestamp}` !== errorId))
+	}, [handler])
+	
+	const clearAllErrors = React.useCallback(() => {
+		handler.clearAllErrors()
+		setErrors([])
+	}, [handler])
+	
+	return {
+		handler,
+		errors,
+		clearError,
+		clearAllErrors,
+		errorStats: handler.getErrorStats()
+	}
+}
+
+// Hook for error boundaries
+export function useMediaErrorBoundary() {
+	const [error, setError] = React.useState<MediaError | null>(null)
+	
+	const resetError = React.useCallback(() => {
+		setError(null)
+	}, [])
+	
+	const captureError = React.useCallback((error: unknown, action?: OptimisticMediaAction) => {
+		const handler = new MediaErrorHandler()
+		const mediaError = handler.createMediaError(error, action)
+		setError(mediaError)
+	}, [])
+	
+	return {
+		error,
+		hasError: !!error,
+		resetError,
+		captureError
+	}
+}

package/src/context/media-context.tsx

@@ -0,0 +1,208 @@
+"use client"
+
+import React from "react"
+
+// Media action types
+export const MediaActionTypes = {
+	PLAY: "PLAY",
+	PAUSE: "PAUSE",
+	SEEK: "SEEK",
+	SET_VOLUME: "SET_VOLUME",
+	MUTE: "MUTE",
+	UNMUTE: "UNMUTE",
+	TOGGLE_MUTE: "TOGGLE_MUTE",
+	SET_DURATION: "SET_DURATION",
+	SET_CURRENT_TIME: "SET_CURRENT_TIME",
+	SET_BUFFERED: "SET_BUFFERED",
+	SET_LOADING: "SET_LOADING",
+	SET_ERROR: "SET_ERROR",
+	ENTER_FULLSCREEN: "ENTER_FULLSCREEN",
+	EXIT_FULLSCREEN: "EXIT_FULLSCREEN",
+	ENTER_PIP: "ENTER_PIP",
+	EXIT_PIP: "EXIT_PIP",
+	SET_PLAYBACK_RATE: "SET_PLAYBACK_RATE",
+	SET_SUBTITLE_TRACK: "SET_SUBTITLE_TRACK",
+	SET_RENDITION: "SET_RENDITION",
+	TOGGLE_SUBTITLES: "TOGGLE_SUBTITLES",
+	PREVIEW_TIME: "PREVIEW_TIME",
+	CLEAR_PREVIEW: "CLEAR_PREVIEW",
+	// New actions for Video.js adapter
+	SET_BUFFERING: "SET_BUFFERING",
+	SET_QUALITY_LEVEL: "SET_QUALITY_LEVEL",
+	SET_BANDWIDTH_ESTIMATE: "SET_BANDWIDTH_ESTIMATE",
+	SET_ACTIVE_TEXT_TRACKS: "SET_ACTIVE_TEXT_TRACKS"
+} as const
+
+export type MediaActionType = (typeof MediaActionTypes)[keyof typeof MediaActionTypes]
+
+// Media state interface
+export interface MediaState {
+	// Playback state
+	isPlaying: boolean
+	currentTime: number
+	duration: number
+	buffered: TimeRanges | null
+	isLoading: boolean
+	isBuffering: boolean
+	error: string | null
+
+	// Audio state
+	volume: number
+	isMuted: boolean
+
+	// Video state
+	isFullscreen: boolean
+	isPictureInPicture: boolean
+
+	// Advanced features
+	playbackRate: number
+	subtitlesShowing: boolean
+	selectedSubtitleTrack: TextTrack | null
+	selectedRendition: string | null
+	qualityLevel: number
+	bandwidthEstimate: number
+	activeTextTracks: any[]
+
+	// Preview state (for seek preview)
+	previewTime: number | null
+	previewImage: string | null
+	previewCoords: { x: number; y: number; width: number; height: number } | null
+
+	// Media lists
+	subtitlesList: TextTrack[]
+	renditionList: Array<{ id: string; label: string; width?: number; height?: number }>
+}
+
+// Media action interface
+export interface MediaAction {
+	type: MediaActionType
+	detail?: any
+}
+
+// Media context interface
+export interface MediaContextValue {
+	mediaId: string
+	labelId: string
+	descriptionId: string
+	dir?: "ltr" | "rtl"
+	rootRef: React.RefObject<HTMLDivElement | null>
+	mediaRef: React.RefObject<HTMLVideoElement | HTMLAudioElement | null>
+	portalContainer?: HTMLElement
+	tooltipDelayDuration: number
+	tooltipSideOffset: number
+	disabled: boolean
+	isVideo: boolean
+	withoutTooltip: boolean
+}
+
+// Store interface for internal state management
+export interface MediaStore {
+	subscribe: (callback: () => void) => () => void
+	getState: () => MediaState
+	setState: (updates: Partial<MediaState>) => void
+	dispatch: (action: MediaAction) => void
+}
+
+// Create the media context
+export const MediaContext = React.createContext<MediaContextValue | null>(null)
+
+// Hook to use media context
+export function useMediaContext() {
+	const context = React.useContext(MediaContext)
+	if (!context) {
+		throw new Error("useMediaContext must be used within a MediaPlayer")
+	}
+	return context
+}
+
+// Store context for state management
+export const MediaStoreContext = React.createContext<MediaStore | null>(null)
+
+// Hook to use media store
+export function useMediaStore() {
+	const store = React.useContext(MediaStoreContext)
+	if (!store) {
+		throw new Error("useMediaStore must be used within a MediaPlayer")
+	}
+	return store
+}
+
+// Hook to select specific state values - React 19 optimized
+export function useMediaSelector<T>(selector: (state: MediaState) => T): T {
+	const store = useMediaStore()
+
+	// React 19 compiler will optimize this callback
+	const getSnapshot = () => selector(store.getState())
+
+	return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot)
+}
+
+// Hook to get dispatch function
+export function useMediaDispatch() {
+	const store = useMediaStore()
+	return store.dispatch
+}
+
+// React 19 enhanced context selector with optimistic updates
+export function useOptimisticMediaSelector<T>(selector: (state: MediaState) => T): T {
+	const store = useMediaStore()
+	
+	// Check if enhanced store is available
+	const isEnhanced = 'getOptimisticState' in store
+	
+	const getSnapshot = () => {
+		if (isEnhanced) {
+			// Use optimistic state for immediate UI feedback
+			return selector((store as any).getOptimisticState())
+		} else {
+			// Fall back to regular state
+			return selector(store.getState())
+		}
+	}
+
+	return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot)
+}
+
+// Hook for accessing React 19 enhanced features
+export function useMediaEnhancements() {
+	const store = useMediaStore()
+	const context = useMediaContext()
+	
+	const isEnhanced = 'getOptimisticState' in store
+	const errorHandler = 'errorHandler' in context ? (context as any).errorHandler : null
+	const isRehydrated = 'isRehydrated' in context ? (context as any).isRehydrated : true
+	
+	return {
+		isEnhanced,
+		errorHandler,
+		isRehydrated,
+		actionsState: isEnhanced ? (store as any).getActionState() : null
+	}
+}
+
+// Initial media state
+export const initialMediaState: MediaState = {
+	isPlaying: false,
+	currentTime: 0,
+	duration: 0,
+	buffered: null,
+	isLoading: false,
+	isBuffering: false,
+	error: null,
+	volume: 1,
+	isMuted: false,
+	isFullscreen: false,
+	isPictureInPicture: false,
+	playbackRate: 1,
+	subtitlesShowing: false,
+	selectedSubtitleTrack: null,
+	selectedRendition: null,
+	qualityLevel: -1,
+	bandwidthEstimate: 0,
+	activeTextTracks: [],
+	previewTime: null,
+	previewImage: null,
+	previewCoords: null,
+	subtitlesList: [],
+	renditionList: []
+}