@therealtinhtute/baroiplayer 1.0.0

package/src/hooks/use-media-state.ts

@@ -0,0 +1,190 @@
+"use client"
+
+import { useCallback, useState, useActionState, useOptimistic } from "react"
+import type { MediaPlayerState } from "../types/index"
+import { useMediaStore, useMediaSelector } from "../context/media-context"
+import { useMediaOptimistic } from "./use-media-optimistic"
+import { useMediaActions } from "./use-media-actions"
+import type { EnhancedMediaStore } from "../context/media-store"
+
+// Legacy hook for backward compatibility
+export function useMediaState() {
+	const [state, setState] = useState<MediaPlayerState>({
+		isPlaying: false,
+		currentTime: 0,
+		duration: 0,
+		volume: 1,
+		isMuted: false,
+		isLoading: false,
+		isFullscreen: false,
+		error: null,
+		buffered: null
+	})
+
+	const updateState = (updates: Partial<MediaPlayerState>) => {
+    		setState((prev: MediaPlayerState) => ({ ...prev, ...updates }))
+    	}
+
+	const setPlaying = (isPlaying: boolean) => {
+    			updateState({ isPlaying })
+    		}
+
+	const setCurrentTime = (currentTime: number) => {
+    			updateState({ currentTime })
+    		}
+
+	const setDuration = (duration: number) => {
+    			updateState({ duration })
+    		}
+
+	const setVolume = (volume: number) => {
+    			updateState({ volume: Math.max(0, Math.min(1, volume)) })
+    		}
+
+	const setMuted = (isMuted: boolean) => {
+    			updateState({ isMuted })
+    		}
+
+	const setLoading = (isLoading: boolean) => {
+    			updateState({ isLoading })
+    		}
+
+	const setFullscreen = (isFullscreen: boolean) => {
+    			updateState({ isFullscreen })
+    		}
+
+	const setError = (error: string | null) => {
+    			updateState({ error })
+    		}
+
+	const setBuffered = (buffered: TimeRanges | null) => {
+    			updateState({ buffered })
+    		}
+
+	return {
+		state,
+		updateState,
+		setPlaying,
+		setCurrentTime,
+		setDuration,
+		setVolume,
+		setMuted,
+		setLoading,
+		setFullscreen,
+		setError,
+		setBuffered
+	}
+}
+
+// React 19 enhanced media state hook
+export function useEnhancedMediaState() {
+	const store = useMediaStore()
+	
+	// Check if this is an enhanced store
+	const isEnhanced = 'getOptimisticState' in store
+	
+	if (!isEnhanced) {
+		// Fall back to regular media state if not enhanced
+		return useMediaState() as any
+	}
+	
+	// Cast to enhanced store type
+	const enhancedStore = store as unknown as EnhancedMediaStore
+	
+	// Use React 19 optimistic updates
+	const optimisticState = useMediaOptimistic(enhancedStore)
+	
+	// Get action handlers with React 19 features
+	const actions = useMediaActions(enhancedStore)
+	
+	return {
+		// State (optimistic values for immediate UI feedback)
+		state: optimisticState.state,
+		actualState: optimisticState.actualState,
+		
+		// Individual state selectors
+		isPlaying: optimisticState.isPlaying,
+		currentTime: optimisticState.currentTime,
+		duration: optimisticState.state.duration,
+		volume: optimisticState.volume,
+		isMuted: optimisticState.isMuted,
+		isLoading: optimisticState.isBuffering,
+		isFullscreen: optimisticState.isFullscreen,
+		error: optimisticState.state.error,
+		buffered: optimisticState.state.buffered,
+		
+		// Computed values
+		progress: optimisticState.progress,
+		formattedTime: optimisticState.formattedTime,
+		formattedDuration: optimisticState.formattedDuration,
+		
+		// Actions with optimistic updates
+		actions,
+		
+		// Action state for loading/error handling
+		isActionLoading: actions.isLoading,
+		actionError: actions.errorMessage,
+		retryLastAction: actions.retryLastAction,
+		
+		// Legacy compatibility methods
+		updateState: (updates: Partial<MediaPlayerState>) => {
+			// Map legacy updates to new actions
+			if ('isPlaying' in updates) {
+				updates.isPlaying ? actions.play() : actions.pause()
+			}
+			if ('currentTime' in updates) {
+				actions.setCurrentTime(updates.currentTime!)
+			}
+			if ('duration' in updates) {
+				actions.setDuration(updates.duration!)
+			}
+			if ('volume' in updates) {
+				actions.setVolume(updates.volume!)
+			}
+			if ('isMuted' in updates) {
+				updates.isMuted ? actions.mute() : actions.unmute()
+			}
+			if ('isLoading' in updates) {
+				actions.setLoading(updates.isLoading!)
+			}
+			if ('isFullscreen' in updates) {
+				updates.isFullscreen ? actions.enterFullscreen() : actions.exitFullscreen()
+			}
+			if ('error' in updates) {
+				actions.setError(updates.error ?? null)
+			}
+			if ('buffered' in updates) {
+				actions.setBuffered(updates.buffered ?? null)
+			}
+		},
+		
+		// Individual action methods for legacy compatibility
+		setPlaying: (isPlaying: boolean) => {
+			isPlaying ? actions.play(true) : actions.pause(true) // Use optimistic updates
+		},
+		setCurrentTime: (time: number) => actions.setCurrentTime(time),
+		setDuration: (duration: number) => actions.setDuration(duration),
+		setVolume: (volume: number) => actions.setVolume(volume, true),
+		setMuted: (muted: boolean) => {
+			muted ? actions.mute(true) : actions.unmute(true)
+		},
+		setLoading: (loading: boolean) => actions.setLoading(loading),
+		setFullscreen: (fullscreen: boolean) => {
+			fullscreen ? actions.enterFullscreen(true) : actions.exitFullscreen(true)
+		},
+		setError: (error: string | null) => actions.setError(error),
+		setBuffered: (buffered: TimeRanges | null) => actions.setBuffered(buffered)
+	}
+}
+
+// Hook that automatically chooses between legacy and enhanced based on context availability
+export function useAdaptiveMediaState() {
+	try {
+		// Try to use the enhanced version if MediaStore context is available
+		return useEnhancedMediaState()
+	} catch (error) {
+		// Fall back to legacy version if not in MediaProvider context
+		console.warn('MediaStore context not available, using legacy state management')
+		return useMediaState()
+	}
+}

package/src/hooks/use-memory-optimization.ts

@@ -0,0 +1,358 @@
+"use client"
+
+import React, { useEffect, useRef, useCallback, useMemo } from "react"
+
+// Memory optimization hook for media players
+export function useMemoryOptimization(options: {
+	maxMemoryUsage?: number // in MB
+	cleanupInterval?: number // in ms
+	enableGC?: boolean
+	monitorMemory?: boolean
+} = {}) {
+	const {
+		maxMemoryUsage = 100, // 100MB default
+		cleanupInterval = 30000, // 30 seconds default
+		enableGC = true,
+		monitorMemory = true
+	} = options
+
+	const cleanupTimeoutRef = useRef<NodeJS.Timeout>()
+	const observersRef = useRef<Set<MutationObserver>>(new Set())
+	const eventListenersRef = useRef<Map<Element, Array<{ event: string; handler: EventListener }>>>(new Map())
+	const intervalRefs = useRef<Set<NodeJS.Timeout>>(new Set())
+	const animationFrameRefs = useRef<Set<number>>(new Set())
+
+	// Get current memory usage
+	const getMemoryUsage = useCallback(() => {
+		if (typeof window === 'undefined' || !('memory' in performance)) {
+			return { used: 0, total: 0, limit: 0 }
+		}
+
+		const memory = (performance as any).memory
+		return {
+			used: memory.usedJSHeapSize,
+			total: memory.totalJSHeapSize,
+			limit: memory.jsHeapSizeLimit
+		}
+	}, [])
+
+	// Memory monitoring state
+	const [memoryStats, setMemoryStats] = React.useState({
+		used: 0,
+		total: 0,
+		limit: 0,
+		usage: 0,
+		isHighUsage: false
+	})
+
+	// Memory monitoring
+	useEffect(() => {
+		if (!monitorMemory) return
+
+		const checkMemory = () => {
+			const memory = getMemoryUsage()
+			const usage = (memory.used / 1024 / 1024) // Convert to MB
+			const isHighUsage = usage > maxMemoryUsage
+
+			setMemoryStats({
+				...memory,
+				usage,
+				isHighUsage
+			})
+
+			// Trigger cleanup if memory usage is high
+			if (isHighUsage && enableGC) {
+				performCleanup()
+			}
+		}
+
+		checkMemory()
+		const interval = setInterval(checkMemory, cleanupInterval)
+		intervalRefs.current.add(interval)
+
+		return () => {
+			clearInterval(interval)
+			intervalRefs.current.delete(interval)
+		}
+	}, [monitorMemory, getMemoryUsage, maxMemoryUsage, enableGC, cleanupInterval])
+
+	// Cleanup function
+	const performCleanup = useCallback(() => {
+		// Clear all timeouts
+		intervalRefs.current.forEach(timeout => {
+			clearTimeout(timeout)
+		})
+		intervalRefs.current.clear()
+
+		// Cancel all animation frames
+		animationFrameRefs.current.forEach(frameId => {
+			cancelAnimationFrame(frameId)
+		})
+		animationFrameRefs.current.clear()
+
+		// Disconnect all observers
+		observersRef.current.forEach(observer => {
+			observer.disconnect()
+		})
+		observersRef.current.clear()
+
+		// Remove all event listeners
+		eventListenersRef.current.forEach((listeners, element) => {
+			listeners.forEach(({ event, handler }) => {
+				element.removeEventListener(event, handler)
+			})
+		})
+		eventListenersRef.current.clear()
+
+		// Trigger garbage collection if available
+		if (enableGC && 'gc' in window) {
+			(window as any).gc()
+		}
+	}, [enableGC])
+
+	// Safe event listener management
+	const addEventListener = useCallback((
+		element: Element,
+		event: string,
+		handler: EventListener,
+		options?: AddEventListenerOptions
+	) => {
+		element.addEventListener(event, handler, options)
+
+		if (!eventListenersRef.current.has(element)) {
+			eventListenersRef.current.set(element, [])
+		}
+		eventListenersRef.current.get(element)!.push({ event, handler })
+
+		// Return cleanup function
+		return () => {
+			element.removeEventListener(event, handler)
+			const listeners = eventListenersRef.current.get(element)
+			if (listeners) {
+				const index = listeners.findIndex(l => l.event === event && l.handler === handler)
+				if (index > -1) {
+					listeners.splice(index, 1)
+				}
+				if (listeners.length === 0) {
+					eventListenersRef.current.delete(element)
+				}
+			}
+		}
+	}, [])
+
+	// Safe interval management
+	const setInterval = useCallback((callback: () => void, delay: number) => {
+		const timeoutId = setInterval(callback, delay)
+		intervalRefs.current.add(timeoutId)
+
+		return () => {
+			clearInterval(timeoutId)
+			intervalRefs.current.delete(timeoutId)
+		}
+	}, [])
+
+	// Safe timeout management
+	const setTimeout = useCallback((callback: () => void, delay: number) => {
+		const timeoutId = setTimeout(callback, delay)
+		intervalRefs.current.add(timeoutId)
+
+		return () => {
+			clearTimeout(timeoutId)
+			intervalRefs.current.delete(timeoutId)
+		}
+	}, [])
+
+	// Safe animation frame management
+	const requestAnimationFrame = useCallback((callback: FrameRequestCallback) => {
+		const frameId = requestAnimationFrame(callback)
+		animationFrameRefs.current.add(frameId)
+
+		return () => {
+			cancelAnimationFrame(frameId)
+			animationFrameRefs.current.delete(frameId)
+		}
+	}, [])
+
+	// Safe observer management
+	const addObserver = useCallback((observer: MutationObserver) => {
+		observersRef.current.add(observer)
+
+		return () => {
+			observer.disconnect()
+			observersRef.current.delete(observer)
+		}
+	}, [])
+
+	// Cleanup on unmount
+	useEffect(() => {
+		return () => {
+			performCleanup()
+		}
+	}, [performCleanup])
+
+	return {
+		// Memory stats
+		memoryStats,
+		getMemoryUsage,
+
+		// Cleanup functions
+		performCleanup,
+
+		// Safe API functions
+		addEventListener,
+		setInterval,
+		setTimeout,
+		requestAnimationFrame,
+		addObserver,
+
+		// Utilities
+		formatBytes: (bytes: number) => {
+			if (bytes === 0) return '0 Bytes'
+			const k = 1024
+			const sizes = ['Bytes', 'KB', 'MB', 'GB']
+			const i = Math.floor(Math.log(bytes) / Math.log(k))
+			return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+		}
+	}
+}
+
+// Resource cleanup hook for media elements
+export function useMediaResourceCleanup(mediaRef: React.RefObject<HTMLVideoElement | HTMLAudioElement>) {
+	const { addEventListener, performCleanup } = useMemoryOptimization()
+
+	// Track resource cleanup
+	const cleanupResources = useCallback(() => {
+		const media = mediaRef.current
+		if (!media) return
+
+		// Stop media playback
+		if (!media.paused) {
+		_media.pause()
+		}
+
+		// Clear source
+		if (media.src) {
+			media.src = ''
+			media.load()
+		}
+
+		// Remove source elements
+		while (media.firstChild) {
+			media.removeChild(media.firstChild)
+		}
+
+		// Clear any pending seeks
+		media.currentTime = 0
+
+		// Clear buffered data
+		if ('clearBuffered' in media) {
+			(media as any).clearBuffered()
+		}
+	}, [mediaRef])
+
+	// Enhanced event listener registration
+	const registerMediaEventListener = useCallback((
+		event: string,
+		handler: EventListener,
+		options?: AddEventListenerOptions
+	) => {
+		const media = mediaRef.current
+		if (!media) return () => {}
+
+		return addEventListener(media, event, handler, options)
+	}, [mediaRef, addEventListener])
+
+	// Cleanup on unmount
+	useEffect(() => {
+		return cleanupResources
+	}, [cleanupResources])
+
+	return {
+		cleanupResources,
+		registerMediaEventListener
+	}
+}
+
+// Performance monitoring hook
+export function usePerformanceMonitoring() {
+	const [metrics, setMetrics] = React.useState({
+		fps: 0,
+		frameDrops: 0,
+		longTasks: 0,
+		totalLongTaskDuration: 0
+	})
+
+	const frameCountRef = useRef(0)
+	const lastFrameTimeRef = useRef(performance.now())
+	const longTaskObserverRef = useRef<PerformanceObserver>()
+
+	// FPS monitoring
+	useEffect(() => {
+		let rafId: number
+
+		const measureFrame = () => {
+			frameCountRef.current++
+			const now = performance.now()
+
+			// Calculate FPS every second
+			if (now - lastFrameTimeRef.current >= 1000) {
+				const fps = Math.round((frameCountRef.current * 1000) / (now - lastFrameTimeRef.current))
+				const expectedFrames = Math.round((now - lastFrameTimeRef.current) / 16.67) // 60fps
+				const frameDrops = Math.max(0, expectedFrames - frameCountRef.current)
+
+				setMetrics(prev => ({
+					...prev,
+					fps,
+					frameDrops: prev.frameDrops + frameDrops
+				}))
+
+				frameCountRef.current = 0
+				lastFrameTimeRef.current = now
+			}
+
+			rafId = requestAnimationFrame(measureFrame)
+		}
+
+		rafId = requestAnimationFrame(measureFrame)
+
+		return () => {
+			cancelAnimationFrame(rafId)
+		}
+	}, [])
+
+	// Long task monitoring
+	useEffect(() => {
+		if (!('PerformanceObserver' in window)) return
+
+		try {
+			const observer = new PerformanceObserver((list) => {
+				for (const entry of list.getEntries()) {
+					if (entry.duration > 50) { // Long task threshold
+						setMetrics(prev => ({
+							...prev,
+							longTasks: prev.longTasks + 1,
+							totalLongTaskDuration: prev.totalLongTaskDuration + entry.duration
+						}))
+					}
+				}
+			})
+
+			observer.observe({ entryTypes: ['longtask'] })
+			longTaskObserverRef.current = observer
+
+			return () => {
+				observer.disconnect()
+			}
+		} catch (error) {
+			console.warn('Long task monitoring not supported:', error)
+		}
+	}, [])
+
+	return {
+		...metrics,
+		averageLongTaskDuration: metrics.longTasks > 0
+			? metrics.totalLongTaskDuration / metrics.longTasks
+			: 0,
+		isPerformanceGood: metrics.fps >= 50 && metrics.frameDrops < 5
+	}
+}

package/src/hooks/use-optimistic-controls.ts

@@ -0,0 +1,92 @@
+import { useOptimistic, useTransition } from 'react'
+
+export interface MediaState {
+  isPlaying: boolean
+  volume: number
+  currentTime: number
+  playbackRate: number
+}
+
+export function useOptimisticMediaState(initialState: MediaState, mediaElement?: HTMLMediaElement | null) {
+  const [isPending, startTransition] = useTransition()
+  
+  // Optimistic state for each property
+  const [optimisticPlaying, setOptimisticPlaying] = useOptimistic(
+    initialState.isPlaying,
+    (_, value: boolean) => value
+  )
+  
+  const [optimisticVolume, setOptimisticVolume] = useOptimistic(
+    initialState.volume,
+    (_, value: number) => value
+  )
+  
+  const [optimisticTime, setOptimisticTime] = useOptimistic(
+    initialState.currentTime,
+    (_, value: number) => value
+  )
+  
+  const [optimisticRate, setOptimisticRate] = useOptimistic(
+    initialState.playbackRate,
+    (_, value: number) => value
+  )
+  
+  // Wrapped actions with optimistic updates
+  const actions = {
+    togglePlay: async () => {
+      const newState = !optimisticPlaying
+      setOptimisticPlaying(newState)
+      
+      startTransition(async () => {
+        if (mediaElement) {
+          if (newState) {
+            await mediaElement.play()
+          } else {
+            mediaElement.pause()
+          }
+        }
+      })
+    },
+    
+    setVolume: async (volume: number) => {
+      setOptimisticVolume(volume)
+      
+      startTransition(async () => {
+        if (mediaElement) {
+          mediaElement.volume = volume
+        }
+      })
+    },
+    
+    seek: async (time: number) => {
+      setOptimisticTime(time)
+      
+      startTransition(async () => {
+        if (mediaElement) {
+          mediaElement.currentTime = time
+        }
+      })
+    },
+    
+    setPlaybackRate: async (rate: number) => {
+      setOptimisticRate(rate)
+      
+      startTransition(async () => {
+        if (mediaElement) {
+          mediaElement.playbackRate = rate
+        }
+      })
+    }
+  }
+  
+  return {
+    state: {
+      isPlaying: optimisticPlaying,
+      volume: optimisticVolume,
+      currentTime: optimisticTime,
+      playbackRate: optimisticRate
+    },
+    actions,
+    isPending
+  }
+}