@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/src/context/error-handling.ts

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

@@ -1,254 +0,0 @@
-"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
-}
-
-// Shallow comparison for selector optimization
-function shallowEqual(prev: unknown, next: unknown): boolean {
-	if (Object.is(prev, next)) return true
-
-	if (typeof prev !== "object" || prev === null || typeof next !== "object" || next === null) {
-		return false
-	}
-
-	const prevKeys = Object.keys(prev as object)
-	const nextKeys = Object.keys(next as object)
-
-	if (prevKeys.length !== nextKeys.length) return false
-
-	for (const key of prevKeys) {
-		if (!nextKeys.includes(key)) return false
-
-		const prevValue = (prev as Record<string, unknown>)[key]
-		const nextValue = (next as Record<string, unknown>)[key]
-
-		if (!Object.is(prevValue, nextValue)) return false
-	}
-
-	return true
-}
-
-// Hook to select specific state values - React 19 optimized with shallow comparison
-export function useMediaSelector<T>(selector: (state: MediaState) => T): T {
-	const store = useMediaStore()
-
-	// React 19 compiler will optimize this callback
-	const getSnapshot = () => selector(store.getState())
-
-	// Track previous selected value for shallow comparison
-	const prevRef = React.useRef<T | undefined>(undefined)
-	const getServerSnapshot = React.useCallback(() => {
-		const value = selector(store.getState())
-		prevRef.current = value
-		return value
-	}, [selector])
-
-	// Use useSyncExternalStore for subscription
-	const selected = React.useSyncExternalStore(store.subscribe, getSnapshot, getServerSnapshot)
-
-	// Apply shallow comparison to prevent unnecessary re-renders
-	React.useEffect(() => {
-		const prev = prevRef.current
-		if (prev !== undefined && shallowEqual(prev, selected)) {
-			// Values are equal, no re-render needed
-			return
-		}
-		prevRef.current = selected
-	}, [selected])
-
-	return selected
-}
-
-// 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: []
-}