@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

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

@@ -1,194 +0,0 @@
-"use client"
-
-import { useActionState, useCallback, useOptimistic, useState } from "react"
-import { useMediaSelector, useMediaStore } from "../context/media-context"
-import type { EnhancedMediaStore } from "../context/media-store"
-import type { MediaPlayerState } from "../types/index"
-import { useMediaActions } from "./use-media-actions"
-import { useMediaOptimistic } from "./use-media-optimistic"
-
-// 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
-
-	// Always call hooks unconditionally
-	const regularState = useMediaState()
-	const enhancedStore = store as unknown as EnhancedMediaStore
-	const optimisticState = useMediaOptimistic(enhancedStore)
-	const actions = useMediaActions(enhancedStore)
-
-	// Return appropriate state based on store type
-	if (!isEnhanced) {
-		// Fall back to regular media state if not enhanced
-		return regularState as any
-	}
-
-	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() {
-	// Always call hooks unconditionally
-	const enhancedState = useEnhancedMediaState()
-	const regularState = useMediaState()
-
-	// Check if we're in an enhanced context by testing a property that would only exist in enhanced mode
-	const isEnhancedContext = "getOptimisticState" in enhancedState
-
-	if (!isEnhancedContext) {
-		// Fall back to legacy version if not in MediaProvider context
-		console.warn("MediaStore context not available, using legacy state management")
-		return regularState
-	}
-
-	return enhancedState
-}

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

@@ -1,360 +0,0 @@
-"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<ReturnType<typeof setTimeout> | undefined>(undefined)
-	const observersRef = useRef<Set<MutationObserver>>(new Set())
-	const eventListenersRef = useRef<Map<Element, Array<{ event: string; handler: EventListener }>>>(
-		new Map()
-	)
-	const intervalRefs = useRef<Set<ReturnType<typeof setInterval>>>(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
-	})
-
-	// Cleanup function (must be declared before use)
-	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()
-
-		// Force garbage collection if available
-		if (typeof window !== "undefined" && "gc" in window) {
-			;(window as any).gc()
-		}
-	}, [])
-
-	// Safe interval management (must be declared before use)
-	const useInterval = useCallback((callback: () => void, delay: number) => {
-		const timeoutId = globalThis.setInterval(callback, delay)
-		intervalRefs.current.add(timeoutId)
-
-		return () => {
-			globalThis.clearInterval(timeoutId)
-			intervalRefs.current.delete(timeoutId)
-		}
-	}, [])
-
-	// 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()
-		return useInterval(checkMemory, cleanupInterval)
-	}, [monitorMemory, getMemoryUsage, maxMemoryUsage, enableGC, cleanupInterval, performCleanup])
-
-	// 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 timeout management
-	const useSafeTimeout = useCallback((callback: () => void, delay: number) => {
-		const timeoutId = globalThis.setTimeout(callback, delay)
-		intervalRefs.current.add(timeoutId)
-
-		return () => {
-			globalThis.clearTimeout(timeoutId)
-			intervalRefs.current.delete(timeoutId)
-		}
-	}, [])
-
-	// Safe animation frame management
-	const useSafeAnimationFrame = useCallback((callback: FrameRequestCallback) => {
-		const frameId = globalThis.requestAnimationFrame(callback)
-		animationFrameRefs.current.add(frameId)
-
-		return () => {
-			globalThis.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: useInterval,
-		setTimeout: useSafeTimeout,
-		requestAnimationFrame: useSafeAnimationFrame,
-		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 | undefined>(undefined)
-
-	// 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-network-status.ts

@@ -1,124 +0,0 @@
-import { useCallback, useEffect, useState } from "react"
-
-export interface NetworkStatus {
-	isOnline: boolean
-	connectionType: string | null
-	downlink: number | null
-	effectiveType: string | null
-	rtt: number | null
-	saveData: boolean | null
-	wasOffline: boolean
-	reconnectedAt: number | null
-}
-
-export function useNetworkStatus(): NetworkStatus {
-	const [status, setStatus] = useState<NetworkStatus>(() => ({
-		isOnline: typeof navigator !== "undefined" ? navigator.onLine : true,
-		connectionType: null,
-		downlink: null,
-		effectiveType: null,
-		rtt: null,
-		saveData: null,
-		wasOffline: false,
-		reconnectedAt: null
-	}))
-
-	useEffect(() => {
-		const updateStatus = () => {
-			const connection =
-				(navigator as any).connection ||
-				(navigator as any).mozConnection ||
-				(navigator as any).webkitConnection
-			setStatus((prev) => ({
-				...prev,
-				isOnline: navigator.onLine,
-				connectionType: connection?.type || null,
-				downlink: connection?.downlink || null,
-				effectiveType: connection?.effectiveType || null,
-				rtt: connection?.rtt || null,
-				saveData: connection?.saveData || null
-			}))
-		}
-
-		const handleOnline = () => {
-			setStatus((prev) => ({
-				...prev,
-				isOnline: true,
-				wasOffline: true,
-				reconnectedAt: Date.now()
-			}))
-		}
-
-		const handleOffline = () => {
-			setStatus((prev) => ({
-				...prev,
-				isOnline: false
-			}))
-		}
-
-		window.addEventListener("online", handleOnline)
-		window.addEventListener("offline", handleOffline)
-
-		const connection =
-			(navigator as any).connection ||
-			(navigator as any).mozConnection ||
-			(navigator as any).webkitConnection
-		if (connection) {
-			connection.addEventListener?.("change", updateStatus)
-		}
-
-		updateStatus()
-
-		return () => {
-			window.removeEventListener("online", handleOnline)
-			window.removeEventListener("offline", handleOffline)
-			if (connection) {
-				connection.removeEventListener?.("change", updateStatus)
-			}
-		}
-	}, [])
-
-	return status
-}
-
-export function useAdaptiveQuality() {
-	const { effectiveType, downlink, isOnline } = useNetworkStatus()
-
-	const getQualityLevel = useCallback(() => {
-		if (!isOnline) return 0
-
-		switch (effectiveType) {
-			case "4g":
-				if (downlink && downlink >= 10) return 3
-				if (downlink && downlink >= 5) return 2
-				return 1
-			case "3g":
-				if (downlink && downlink >= 1.5) return 1
-				return 0
-			case "2g":
-			case "slow-2g":
-				return 0
-			default:
-				return 1
-		}
-	}, [effectiveType, downlink, isOnline])
-
-	return {
-		qualityLevel: getQualityLevel(),
-		shouldReduceQuality: effectiveType === "3g" || effectiveType === "2g" || !isOnline,
-		supportsHD: effectiveType === "4g" && downlink !== null && downlink >= 5
-	}
-}
-
-export function useAutoQualitySwitch(enabled = true) {
-	const { isOnline, effectiveType } = useNetworkStatus()
-
-	const shouldAutoSwitch = useCallback(() => {
-		if (!enabled) return false
-		if (!isOnline) return false
-		if (effectiveType === "4g" || effectiveType === "3g") return true
-		return false
-	}, [enabled, isOnline, effectiveType])
-
-	return { shouldAutoSwitch: shouldAutoSwitch() }
-}