@therealtinhtute/baroiplayer 1.0.0

package/src/context/media-provider.tsx

@@ -0,0 +1,265 @@
+"use client"
+
+import React from "react"
+import {
+	type MediaAction,
+	MediaActionTypes,
+	MediaContext,
+	type MediaContextValue,
+	type MediaState,
+	type MediaStore,
+	MediaStoreContext,
+	initialMediaState
+} from "./media-context"
+import { createEnhancedMediaStore, type EnhancedMediaStore } from "./media-store"
+import { useAutoMediaPersistence, type PersistenceConfig } from "./persistence"
+import { MediaErrorHandler, type RetryConfig } from "./error-handling"
+
+// Legacy store for backward compatibility
+function createLegacyMediaStore(initialState: MediaState = initialMediaState): MediaStore {
+	let state = { ...initialState }
+	const listeners = new Set<() => void>()
+
+	const subscribe = (callback: () => void) => {
+		listeners.add(callback)
+		return () => listeners.delete(callback)
+	}
+
+	const getState = () => state
+
+	const setState = (updates: Partial<MediaState>) => {
+		const newState = { ...state, ...updates }
+		if (JSON.stringify(newState) !== JSON.stringify(state)) {
+			state = newState
+			listeners.forEach((callback) => callback())
+		}
+	}
+
+	const dispatch = (action: MediaAction) => {
+		switch (action.type) {
+			case MediaActionTypes.PLAY:
+				setState({ isPlaying: true, error: null })
+				break
+
+			case MediaActionTypes.PAUSE:
+				setState({ isPlaying: false })
+				break
+
+			case MediaActionTypes.SEEK:
+				setState({ currentTime: action.detail })
+				break
+
+			case MediaActionTypes.SET_VOLUME:
+				setState({ volume: Math.max(0, Math.min(1, action.detail)) })
+				break
+
+			case MediaActionTypes.MUTE:
+				setState({ isMuted: true })
+				break
+
+			case MediaActionTypes.UNMUTE:
+				setState({ isMuted: false })
+				break
+
+			case MediaActionTypes.TOGGLE_MUTE:
+				setState({ isMuted: !state.isMuted })
+				break
+
+			case MediaActionTypes.SET_DURATION:
+				setState({ duration: action.detail })
+				break
+
+			case MediaActionTypes.SET_CURRENT_TIME:
+				setState({ currentTime: action.detail })
+				break
+
+			case MediaActionTypes.SET_BUFFERED:
+				setState({ buffered: action.detail })
+				break
+
+			case MediaActionTypes.SET_LOADING:
+				setState({ isLoading: action.detail })
+				break
+
+			case MediaActionTypes.SET_ERROR:
+				setState({ error: action.detail, isLoading: false })
+				break
+
+			case MediaActionTypes.ENTER_FULLSCREEN:
+				setState({ isFullscreen: true })
+				break
+
+			case MediaActionTypes.EXIT_FULLSCREEN:
+				setState({ isFullscreen: false })
+				break
+
+			case MediaActionTypes.ENTER_PIP:
+				setState({ isPictureInPicture: true })
+				break
+
+			case MediaActionTypes.EXIT_PIP:
+				setState({ isPictureInPicture: false })
+				break
+
+			case MediaActionTypes.SET_PLAYBACK_RATE:
+				setState({ playbackRate: action.detail })
+				break
+
+			case MediaActionTypes.SET_SUBTITLE_TRACK:
+				setState({ selectedSubtitleTrack: action.detail })
+				break
+
+			case MediaActionTypes.SET_RENDITION:
+				setState({ selectedRendition: action.detail })
+				break
+
+			case MediaActionTypes.TOGGLE_SUBTITLES:
+				setState({ subtitlesShowing: !state.subtitlesShowing })
+				break
+
+			case MediaActionTypes.PREVIEW_TIME:
+				setState({ previewTime: action.detail })
+				break
+
+			case MediaActionTypes.CLEAR_PREVIEW:
+				setState({ previewTime: null, previewImage: null, previewCoords: null })
+				break
+
+			default:
+				console.warn(`Unknown media action type: ${action.type}`)
+		}
+	}
+
+	return { subscribe, getState, setState, dispatch }
+}
+
+// Enhanced media provider props with React 19 features
+export interface MediaProviderProps {
+	children: React.ReactNode
+	mediaId?: string
+	labelId?: string
+	descriptionId?: string
+	dir?: "ltr" | "rtl"
+	portalContainer?: HTMLElement
+	tooltipDelayDuration?: number
+	tooltipSideOffset?: number
+	disabled?: boolean
+	isVideo?: boolean
+	withoutTooltip?: boolean
+	initialState?: Partial<MediaState>
+	
+	// React 19 enhancements
+	useEnhancedStore?: boolean
+	persistenceConfig?: Partial<PersistenceConfig>
+	retryConfig?: Partial<RetryConfig>
+	enableOptimisticUpdates?: boolean
+	enableErrorRecovery?: boolean
+	onStateRehydrated?: (state: Partial<MediaState>) => void
+}
+
+// Enhanced media provider component with React 19 features
+export function MediaProvider({
+	children,
+	mediaId = "media-player",
+	labelId = "media-player-label",
+	descriptionId = "media-player-description",
+	dir = "ltr",
+	portalContainer,
+	tooltipDelayDuration = 700,
+	tooltipSideOffset = 4,
+	disabled = false,
+	isVideo = true,
+	withoutTooltip = false,
+	initialState = {},
+	// React 19 enhancements
+	useEnhancedStore = true,
+	persistenceConfig,
+	retryConfig,
+	enableOptimisticUpdates = true,
+	enableErrorRecovery = true,
+	onStateRehydrated
+}: MediaProviderProps) {
+	const rootRef = React.useRef<HTMLDivElement>(null)
+	const mediaRef = React.useRef<HTMLVideoElement | HTMLAudioElement>(null)
+
+	// Create enhanced or legacy store based on configuration
+	const store = React.useMemo(() => {
+		const combinedInitialState = { ...initialMediaState, ...initialState }
+		
+		if (useEnhancedStore) {
+			return createEnhancedMediaStore(combinedInitialState, persistenceConfig) as MediaStore & EnhancedMediaStore
+		} else {
+			return createLegacyMediaStore(combinedInitialState)
+		}
+	}, [useEnhancedStore, persistenceConfig])
+
+	// Error handler for React 19 features
+	const errorHandler = React.useMemo(() => {
+		if (enableErrorRecovery && useEnhancedStore) {
+			return new MediaErrorHandler(retryConfig)
+		}
+		return null
+	}, [enableErrorRecovery, useEnhancedStore, retryConfig])
+
+	// Auto-persistence for React 19 enhanced store
+	const persistenceResult = useEnhancedStore ? useAutoMediaPersistence(
+		store.getState(),
+		mediaId,
+		persistenceConfig
+	) : null
+
+	// Handle state rehydration callback
+	React.useEffect(() => {
+		if (persistenceResult?.isRehydrated && onStateRehydrated) {
+			const currentState = store.getState()
+			onStateRehydrated(currentState)
+		}
+	}, [persistenceResult?.isRehydrated, onStateRehydrated, store])
+
+	// Enhanced context value with React 19 features
+	const contextValue = React.useMemo<MediaContextValue & {
+		errorHandler?: MediaErrorHandler | null
+		isEnhanced?: boolean
+		isRehydrated?: boolean
+	}>(
+		() => ({
+			mediaId,
+			labelId,
+			descriptionId,
+			dir,
+			rootRef,
+			mediaRef,
+			portalContainer,
+			tooltipDelayDuration,
+			tooltipSideOffset,
+			disabled,
+			isVideo,
+			withoutTooltip,
+			// React 19 enhancements
+			errorHandler,
+			isEnhanced: useEnhancedStore,
+			isRehydrated: persistenceResult?.isRehydrated
+		}),
+		[
+			mediaId,
+			labelId,
+			descriptionId,
+			dir,
+			portalContainer,
+			tooltipDelayDuration,
+			tooltipSideOffset,
+			disabled,
+			isVideo,
+			withoutTooltip,
+			errorHandler,
+			useEnhancedStore,
+			persistenceResult?.isRehydrated
+		]
+	)
+
+	return (
+		<MediaContext.Provider value={contextValue}>
+			<MediaStoreContext.Provider value={store}>{children}</MediaStoreContext.Provider>
+		</MediaContext.Provider>
+	)
+}

package/src/context/media-store.ts

@@ -0,0 +1,379 @@
+"use client"
+
+import React from "react"
+import type { MediaState, MediaAction, MediaActionType } from "./media-context"
+import { MediaActionTypes, initialMediaState } from "./media-context"
+
+// Enhanced action types for React 19 features
+export interface OptimisticMediaAction extends MediaAction {
+	optimistic?: boolean
+	retryCount?: number
+	timestamp?: number
+}
+
+// Action state for useActionState
+export interface MediaActionState {
+	pending: boolean
+	error: string | null
+	lastAction: OptimisticMediaAction | null
+	retryCount: number
+}
+
+// State persistence configuration
+export interface PersistenceConfig {
+	enabled: boolean
+	key: string
+	persist: Array<keyof MediaState>
+	debounceMs: number
+}
+
+// Enhanced media store interface
+export interface EnhancedMediaStore {
+	// Original store interface
+	subscribe: (callback: () => void) => () => void
+	getState: () => MediaState
+	setState: (updates: Partial<MediaState>) => void
+	dispatch: (action: MediaAction) => void
+	
+	// React 19 enhancements
+	getOptimisticState: () => MediaState
+	dispatchOptimistic: (action: OptimisticMediaAction) => Promise<void>
+	rollbackOptimistic: (actionId: string) => void
+	getActionState: () => MediaActionState
+	setPersistenceConfig: (config: Partial<PersistenceConfig>) => void
+	rehydrateFromStorage: () => Promise<void>
+	clearPersistedState: () => void
+}
+
+// Default persistence configuration
+const DEFAULT_PERSISTENCE_CONFIG: PersistenceConfig = {
+	enabled: true,
+	key: "baroi-player-state",
+	persist: ["volume", "isMuted", "playbackRate", "subtitlesShowing"],
+	debounceMs: 500
+}
+
+// Create enhanced media store with React 19 features
+export function createEnhancedMediaStore(
+	initialState: MediaState = initialMediaState,
+	persistenceConfig: Partial<PersistenceConfig> = {}
+): EnhancedMediaStore {
+	let state = { ...initialState }
+	let optimisticState = { ...initialState }
+	let actionState: MediaActionState = {
+		pending: false,
+		error: null,
+		lastAction: null,
+		retryCount: 0
+	}
+
+	const config = { ...DEFAULT_PERSISTENCE_CONFIG, ...persistenceConfig }
+	const listeners = new Set<() => void>()
+	const optimisticQueue = new Map<string, OptimisticMediaAction>()
+	let persistenceTimeout: NodeJS.Timeout | null = null
+	
+	const subscribe = (callback: () => void) => {
+		listeners.add(callback)
+		return () => listeners.delete(callback)
+	}
+
+	const notifyListeners = () => {
+		listeners.forEach((callback) => callback())
+	}
+
+	const getState = () => state
+
+	const getOptimisticState = () => optimisticState
+
+	const getActionState = () => actionState
+
+	// Persistence helpers
+	const persistState = async () => {
+		if (!config.enabled || typeof window === 'undefined') return
+		
+		const persistedData = config.persist.reduce((acc, key) => {
+			(acc as any)[key] = state[key]
+			return acc
+		}, {} as Partial<MediaState>)
+
+		try {
+			localStorage.setItem(config.key, JSON.stringify({
+				...persistedData,
+				timestamp: Date.now()
+			}))
+		} catch (error) {
+			console.warn('Failed to persist media state:', error)
+		}
+	}
+
+	const debouncedPersist = () => {
+		if (persistenceTimeout) {
+			clearTimeout(persistenceTimeout)
+		}
+		persistenceTimeout = setTimeout(persistState, config.debounceMs)
+	}
+
+	const rehydrateFromStorage = async () => {
+		if (!config.enabled || typeof window === 'undefined') return
+
+		try {
+			const stored = localStorage.getItem(config.key)
+			if (!stored) return
+
+			const parsedData = JSON.parse(stored) as any
+			const { timestamp, ...persistedState } = parsedData
+
+			// Only rehydrate if data is less than 7 days old
+			const maxAge = 7 * 24 * 60 * 60 * 1000 // 7 days
+			if (timestamp && Date.now() - timestamp > maxAge) {
+				clearPersistedState()
+				return
+			}
+
+			// Merge persisted state with current state
+			const newState = { ...state, ...persistedState }
+			if (JSON.stringify(newState) !== JSON.stringify(state)) {
+				state = newState
+				optimisticState = { ...newState }
+				notifyListeners()
+			}
+		} catch (error) {
+			console.warn('Failed to rehydrate media state:', error)
+		}
+	}
+
+	const clearPersistedState = () => {
+		if (typeof window === 'undefined') return
+		try {
+			localStorage.removeItem(config.key)
+		} catch (error) {
+			console.warn('Failed to clear persisted state:', error)
+		}
+	}
+
+	const setPersistenceConfig = (newConfig: Partial<PersistenceConfig>) => {
+		Object.assign(config, newConfig)
+	}
+
+	const setState = (updates: Partial<MediaState>) => {
+		const newState = { ...state, ...updates }
+		if (JSON.stringify(newState) !== JSON.stringify(state)) {
+			state = newState
+			optimisticState = { ...newState }
+			
+			// Persist relevant changes
+			debouncedPersist()
+			notifyListeners()
+		}
+	}
+
+	const applyOptimisticUpdate = (action: OptimisticMediaAction) => {
+		const actionId = `${action.type}-${Date.now()}-${Math.random()}`
+		
+		// Store original action for rollback
+		optimisticQueue.set(actionId, { ...action, timestamp: Date.now() })
+
+		// Apply optimistic update to optimistic state
+		const optimisticUpdate = processMediaAction(optimisticState, action)
+		optimisticState = { ...optimisticState, ...optimisticUpdate }
+		
+		notifyListeners()
+		return actionId
+	}
+
+	const rollbackOptimistic = (actionId: string) => {
+		if (!optimisticQueue.has(actionId)) return
+
+		// Remove from queue and recalculate optimistic state
+		optimisticQueue.delete(actionId)
+		
+		// Rebuild optimistic state from actual state + remaining optimistic actions
+		optimisticState = { ...state }
+		for (const [, action] of optimisticQueue) {
+			const update = processMediaAction(optimisticState, action)
+			optimisticState = { ...optimisticState, ...update }
+		}
+		
+		notifyListeners()
+	}
+
+	// Process media action and return state updates
+	const processMediaAction = (currentState: MediaState, action: MediaAction): Partial<MediaState> => {
+		switch (action.type) {
+			case MediaActionTypes.PLAY:
+				return { isPlaying: true, error: null }
+			
+			case MediaActionTypes.PAUSE:
+				return { isPlaying: false }
+			
+			case MediaActionTypes.SEEK:
+				return { currentTime: action.detail }
+			
+			case MediaActionTypes.SET_VOLUME:
+				return { volume: Math.max(0, Math.min(1, action.detail)) }
+			
+			case MediaActionTypes.MUTE:
+				return { isMuted: true }
+			
+			case MediaActionTypes.UNMUTE:
+				return { isMuted: false }
+			
+			case MediaActionTypes.TOGGLE_MUTE:
+				return { isMuted: !currentState.isMuted }
+			
+			case MediaActionTypes.SET_DURATION:
+				return { duration: action.detail }
+			
+			case MediaActionTypes.SET_CURRENT_TIME:
+				return { currentTime: action.detail }
+			
+			case MediaActionTypes.SET_BUFFERED:
+				return { buffered: action.detail }
+			
+			case MediaActionTypes.SET_LOADING:
+				return { isLoading: action.detail }
+			
+			case MediaActionTypes.SET_ERROR:
+				return { error: action.detail, isLoading: false }
+			
+			case MediaActionTypes.ENTER_FULLSCREEN:
+				return { isFullscreen: true }
+			
+			case MediaActionTypes.EXIT_FULLSCREEN:
+				return { isFullscreen: false }
+			
+			case MediaActionTypes.ENTER_PIP:
+				return { isPictureInPicture: true }
+			
+			case MediaActionTypes.EXIT_PIP:
+				return { isPictureInPicture: false }
+			
+			case MediaActionTypes.SET_PLAYBACK_RATE:
+				return { playbackRate: action.detail }
+			
+			case MediaActionTypes.SET_SUBTITLE_TRACK:
+				return { selectedSubtitleTrack: action.detail }
+			
+			case MediaActionTypes.SET_RENDITION:
+				return { selectedRendition: action.detail }
+			
+			case MediaActionTypes.TOGGLE_SUBTITLES:
+				return { subtitlesShowing: !currentState.subtitlesShowing }
+			
+			case MediaActionTypes.PREVIEW_TIME:
+				return { previewTime: action.detail }
+			
+			case MediaActionTypes.CLEAR_PREVIEW:
+				return { previewTime: null, previewImage: null, previewCoords: null }
+			
+			default:
+				console.warn(`Unknown media action type: ${action.type}`)
+				return {}
+		}
+	}
+
+	const dispatch = (action: MediaAction) => {
+		const updates = processMediaAction(state, action)
+		setState(updates)
+	}
+
+	const dispatchOptimistic = async (action: OptimisticMediaAction): Promise<void> => {
+		// Set action state to pending
+		actionState = {
+			pending: true,
+			error: null,
+			lastAction: action,
+			retryCount: action.retryCount || 0
+		}
+		
+		// Apply optimistic update immediately
+		const actionId = applyOptimisticUpdate(action)
+		
+		try {
+			// Simulate async operation (e.g., network request, DOM manipulation)
+			await new Promise(resolve => setTimeout(resolve, 0))
+			
+			// Apply the actual update to the real state
+			const updates = processMediaAction(state, action)
+			const newState = { ...state, ...updates }
+			
+			if (JSON.stringify(newState) !== JSON.stringify(state)) {
+				state = newState
+				debouncedPersist()
+			}
+			
+			// Clean up optimistic action
+			optimisticQueue.delete(actionId)
+			
+			// Update action state
+			actionState = {
+				pending: false,
+				error: null,
+				lastAction: action,
+				retryCount: 0
+			}
+			
+			// Sync optimistic state with actual state
+			optimisticState = { ...state }
+			for (const [, queuedAction] of optimisticQueue) {
+				const update = processMediaAction(optimisticState, queuedAction)
+				optimisticState = { ...optimisticState, ...update }
+			}
+			
+		} catch (error) {
+			// Rollback optimistic update on error
+			rollbackOptimistic(actionId)
+			
+			const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred'
+			actionState = {
+				pending: false,
+				error: errorMessage,
+				lastAction: action,
+				retryCount: (action.retryCount || 0) + 1
+			}
+			
+			// Auto-retry logic for certain actions
+			if (actionState.retryCount < 3 && shouldRetry(action.type)) {
+				setTimeout(() => {
+					dispatchOptimistic({
+						...action,
+						retryCount: actionState.retryCount
+					})
+				}, Math.pow(2, actionState.retryCount) * 1000) // Exponential backoff
+			}
+		}
+		
+		notifyListeners()
+	}
+
+	// Determine if an action should be retried
+	const shouldRetry = (actionType: MediaActionType): boolean => {
+		const retryableActions: MediaActionType[] = [
+			MediaActionTypes.PLAY,
+			MediaActionTypes.PAUSE,
+			MediaActionTypes.SEEK,
+			MediaActionTypes.SET_VOLUME,
+			MediaActionTypes.MUTE,
+			MediaActionTypes.UNMUTE,
+			MediaActionTypes.TOGGLE_MUTE
+		]
+		return retryableActions.includes(actionType)
+	}
+
+	// Initialize with rehydrated state
+	rehydrateFromStorage()
+
+	return {
+		subscribe,
+		getState,
+		setState,
+		dispatch,
+		getOptimisticState,
+		dispatchOptimistic,
+		rollbackOptimistic,
+		getActionState,
+		setPersistenceConfig,
+		rehydrateFromStorage,
+		clearPersistedState
+	}
+}