@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/src/context/media-provider.tsx

@@ -1,264 +0,0 @@
-"use client"
-
-import React from "react"
-import { MediaErrorHandler, type RetryConfig } from "./error-handling"
-import {
-	type MediaAction,
-	MediaActionTypes,
-	MediaContext,
-	type MediaContextValue,
-	type MediaState,
-	type MediaStore,
-	MediaStoreContext,
-	initialMediaState
-} from "./media-context"
-import { type EnhancedMediaStore, createEnhancedMediaStore } from "./media-store"
-import { type PersistenceConfig, useAutoMediaPersistence } from "./persistence"
-
-// 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 - always call hooks unconditionally
-	const persistenceResult = useAutoMediaPersistence(store.getState(), mediaId, persistenceConfig)
-
-	// 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

@@ -1,387 +0,0 @@
-"use client"
-
-import React from "react"
-import type { MediaAction, MediaActionType, MediaState } 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
-	}
-}