@therealtinhtute/baroiplayer 1.0.7 → 1.1.0

package/src/context/error-handling.ts

@@ -41,18 +41,8 @@ const DEFAULT_RETRY_CONFIG: RetryConfig = {
 	baseDelay: 1000,
 	maxDelay: 10000,
 	exponentialBackoff: true,
-	retryableErrors: [
-		MediaErrorType.NETWORK_ERROR,
-		MediaErrorType.TIMEOUT_ERROR
-	],
-	retryableActions: [
-		"PLAY",
-		"PAUSE",
-		"SEEK",
-		"SET_VOLUME",
-		"ENTER_FULLSCREEN",
-		"EXIT_FULLSCREEN"
-	]
+	retryableErrors: [MediaErrorType.NETWORK_ERROR, MediaErrorType.TIMEOUT_ERROR],
+	retryableActions: ["PLAY", "PAUSE", "SEEK", "SET_VOLUME", "ENTER_FULLSCREEN", "EXIT_FULLSCREEN"]
 }
 
 // Error recovery strategies
@@ -70,17 +60,17 @@ class NetworkErrorRecovery implements ErrorRecoveryStrategy {
 	async recover(error: MediaError): Promise<void> {
 		// Wait for network to become available
 		if (navigator.onLine === false) {
-			await new Promise(resolve => {
+			await new Promise((resolve) => {
 				const handleOnline = () => {
-					window.removeEventListener('online', handleOnline)
+					window.removeEventListener("online", handleOnline)
 					resolve(void 0)
 				}
-				window.addEventListener('online', handleOnline)
+				window.addEventListener("online", handleOnline)
 			})
 		}
-		
+
 		// Additional delay for network stability
-		await new Promise(resolve => setTimeout(resolve, 2000))
+		await new Promise((resolve) => setTimeout(resolve, 2000))
 	}
 }
 
@@ -92,15 +82,15 @@ class PlaybackErrorRecovery implements ErrorRecoveryStrategy {
 
 	async recover(error: MediaError): Promise<void> {
 		// Try to reload the media element
-		const mediaElement = document.querySelector('video, audio') as HTMLMediaElement
+		const mediaElement = document.querySelector("video, audio") as HTMLMediaElement
 		if (mediaElement) {
 			mediaElement.load()
-			await new Promise(resolve => {
+			await new Promise((resolve) => {
 				const handleCanPlay = () => {
-					mediaElement.removeEventListener('canplay', handleCanPlay)
+					mediaElement.removeEventListener("canplay", handleCanPlay)
 					resolve(void 0)
 				}
-				mediaElement.addEventListener('canplay', handleCanPlay)
+				mediaElement.addEventListener("canplay", handleCanPlay)
 			})
 		}
 	}
@@ -109,13 +99,14 @@ class PlaybackErrorRecovery implements ErrorRecoveryStrategy {
 // 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'
+		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')
+		console.warn("Fullscreen requires user interaction")
 		// In a real implementation, you might show a message to the user
 	}
 }
@@ -127,10 +118,7 @@ export class MediaErrorHandler {
 	private errorQueue: Map<string, MediaError> = new Map()
 	private listeners: Set<(error: MediaError) => void> = new Set()
 
-	constructor(
-		config: Partial<RetryConfig> = {},
-		recoveryStrategies: ErrorRecoveryStrategy[] = []
-	) {
+	constructor(config: Partial<RetryConfig> = {}, recoveryStrategies: ErrorRecoveryStrategy[] = []) {
 		this.config = { ...DEFAULT_RETRY_CONFIG, ...config }
 		this.recoveryStrategies = [
 			new NetworkErrorRecovery(),
@@ -141,13 +129,9 @@ export class MediaErrorHandler {
 	}
 
 	// Create a media error from a generic error
-	createMediaError(
-		error: unknown,
-		action?: OptimisticMediaAction,
-		retryCount = 0
-	): MediaError {
+	createMediaError(error: unknown, action?: OptimisticMediaAction, retryCount = 0): MediaError {
 		const timestamp = Date.now()
-		
+
 		if (error instanceof Error) {
 			const errorType = this.categorizeError(error, action)
 			return {
@@ -160,10 +144,10 @@ export class MediaErrorHandler {
 				originalError: error
 			}
 		}
-		
+
 		return {
 			type: MediaErrorType.UNKNOWN_ERROR,
-			message: typeof error === 'string' ? error : 'Unknown error occurred',
+			message: typeof error === "string" ? error : "Unknown error occurred",
 			action,
 			timestamp,
 			retryable: this.isRetryable(MediaErrorType.UNKNOWN_ERROR, action),
@@ -174,44 +158,51 @@ export class MediaErrorHandler {
 	// 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') {
+		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') {
+		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') {
+		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') {
+		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') {
+		if (
+			message.includes("not supported") ||
+			message.includes("unsupported") ||
+			error.name === "NotSupportedError"
+		) {
 			return MediaErrorType.NOT_SUPPORTED_ERROR
 		}
-		
+
 		return MediaErrorType.UNKNOWN_ERROR
 	}
 
@@ -227,7 +218,7 @@ export class MediaErrorHandler {
 		if (!this.config.exponentialBackoff) {
 			return this.config.baseDelay
 		}
-		
+
 		const delay = this.config.baseDelay * Math.pow(2, retryCount)
 		return Math.min(delay, this.config.maxDelay)
 	}
@@ -240,13 +231,13 @@ export class MediaErrorHandler {
 	): 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))
-		
+		this.listeners.forEach((listener) => listener(mediaError))
+
 		// Try recovery strategies
 		for (const strategy of this.recoveryStrategies) {
 			if (strategy.canRecover(mediaError)) {
@@ -254,39 +245,46 @@ export class MediaErrorHandler {
 					await strategy.recover(mediaError)
 					break
 				} catch (recoveryError) {
-					console.warn('Recovery strategy failed:', recoveryError)
+					console.warn("Recovery strategy failed:", recoveryError)
 				}
 			}
 		}
-		
+
 		// Retry if possible
-		if (mediaError.retryable && 
-			mediaError.retryCount < this.config.maxRetries && 
-			retryCallback && 
-			action) {
-			
+		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})`)
-			
+			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)
+					await this.handleError(
+						retryError,
+						{
+							...action,
+							retryCount: mediaError.retryCount + 1
+						},
+						retryCallback
+					)
 				}
 			}, delay)
 		}
-		
+
 		return mediaError
 	}
 
@@ -321,15 +319,18 @@ export class MediaErrorHandler {
 		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)
-		
+
+		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,
@@ -343,25 +344,28 @@ export class MediaErrorHandler {
 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])
+			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 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,
@@ -374,21 +378,21 @@ export function useMediaErrorHandler(config?: Partial<RetryConfig>) {
 // 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

@@ -127,14 +127,60 @@ export function useMediaStore() {
 	return store
 }
 
-// Hook to select specific state values - React 19 optimized
+// 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())
 
-	return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot)
+	// 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
@@ -146,10 +192,10 @@ export function useMediaDispatch() {
 // 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 isEnhanced = "getOptimisticState" in store
+
 	const getSnapshot = () => {
 		if (isEnhanced) {
 			// Use optimistic state for immediate UI feedback
@@ -167,11 +213,11 @@ export function useOptimisticMediaSelector<T>(selector: (state: MediaState) => T
 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
-	
+
+	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,

package/src/context/media-provider.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import React from "react"
+import { MediaErrorHandler, type RetryConfig } from "./error-handling"
 import {
 	type MediaAction,
 	MediaActionTypes,
@@ -11,9 +12,8 @@ import {
 	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"
+import { type EnhancedMediaStore, createEnhancedMediaStore } from "./media-store"
+import { type PersistenceConfig, useAutoMediaPersistence } from "./persistence"
 
 // Legacy store for backward compatibility
 function createLegacyMediaStore(initialState: MediaState = initialMediaState): MediaStore {
@@ -147,7 +147,7 @@ export interface MediaProviderProps {
 	isVideo?: boolean
 	withoutTooltip?: boolean
 	initialState?: Partial<MediaState>
-	
+
 	// React 19 enhancements
 	useEnhancedStore?: boolean
 	persistenceConfig?: Partial<PersistenceConfig>
@@ -185,9 +185,10 @@ export function MediaProvider({
 	// 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
+			return createEnhancedMediaStore(combinedInitialState, persistenceConfig) as MediaStore &
+				EnhancedMediaStore
 		} else {
 			return createLegacyMediaStore(combinedInitialState)
 		}
@@ -201,12 +202,8 @@ export function MediaProvider({
 		return null
 	}, [enableErrorRecovery, useEnhancedStore, retryConfig])
 
-	// Auto-persistence for React 19 enhanced store
-	const persistenceResult = useEnhancedStore ? useAutoMediaPersistence(
-		store.getState(),
-		mediaId,
-		persistenceConfig
-	) : null
+	// Auto-persistence for React 19 enhanced store - always call hooks unconditionally
+	const persistenceResult = useAutoMediaPersistence(store.getState(), mediaId, persistenceConfig)
 
 	// Handle state rehydration callback
 	React.useEffect(() => {
@@ -217,11 +214,13 @@ export function MediaProvider({
 	}, [persistenceResult?.isRehydrated, onStateRehydrated, store])
 
 	// Enhanced context value with React 19 features
-	const contextValue = React.useMemo<MediaContextValue & {
-		errorHandler?: MediaErrorHandler | null
-		isEnhanced?: boolean
-		isRehydrated?: boolean
-	}>(
+	const contextValue = React.useMemo<
+		MediaContextValue & {
+			errorHandler?: MediaErrorHandler | null
+			isEnhanced?: boolean
+			isRehydrated?: boolean
+		}
+	>(
 		() => ({
 			mediaId,
 			labelId,