@therealtinhtute/baroiplayer 1.0.8 → 1.1.0

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

@@ -3,12 +3,14 @@
 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
-} = {}) {
+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
@@ -16,15 +18,17 @@ export function useMemoryOptimization(options: {
 		monitorMemory = true
 	} = options
 
-	const cleanupTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
+	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<ReturnType<typeof setInterval>>>(new Set()) // Use proper timer type
+	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)) {
+		if (typeof window === "undefined" || !("memory" in performance)) {
 			return { used: 0, total: 0, limit: 0 }
 		}
 
@@ -45,53 +49,22 @@ export function useMemoryOptimization(options: {
 		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 intervalId: ReturnType<typeof setInterval> = setInterval(checkMemory, cleanupInterval)
-		intervalRefs.current.add(intervalId)
-
-		return () => {
-			clearInterval(intervalId as any)
-			intervalRefs.current.delete(intervalId)
-		}
-	}, [monitorMemory, getMemoryUsage, maxMemoryUsage, enableGC, cleanupInterval])
-
-	// Cleanup function
+	// Cleanup function (must be declared before use)
 	const performCleanup = useCallback(() => {
-		// Clear all intervals
-		intervalRefs.current.forEach(intervalId => {
-			clearInterval(intervalId as any)
+		// Clear all timeouts
+		intervalRefs.current.forEach((timeout) => {
+			clearTimeout(timeout)
 		})
 		intervalRefs.current.clear()
 
 		// Cancel all animation frames
-		animationFrameRefs.current.forEach(frameId => {
+		animationFrameRefs.current.forEach((frameId) => {
 			cancelAnimationFrame(frameId)
 		})
 		animationFrameRefs.current.clear()
 
 		// Disconnect all observers
-		observersRef.current.forEach(observer => {
+		observersRef.current.forEach((observer) => {
 			observer.disconnect()
 		})
 		observersRef.current.clear()
@@ -104,66 +77,94 @@ export function useMemoryOptimization(options: {
 		})
 		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)
-				}
-			}
+		// Force garbage collection if available
+		if (typeof window !== "undefined" && "gc" in window) {
+			;(window as any).gc()
 		}
 	}, [])
 
-	// Safe interval management
-	const safeSetInterval = useCallback((callback: () => void, delay: number) => {
+	// Safe interval management (must be declared before use)
+	const useInterval = useCallback((callback: () => void, delay: number) => {
 		const timeoutId = setInterval(callback, delay)
 		intervalRefs.current.add(timeoutId)
 
 		return () => {
-			clearInterval(timeoutId as any)
+			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 safeSetTimeout = useCallback((callback: () => void, delay: number) => {
+	const setTimeout = useCallback((callback: () => void, delay: number) => {
 		const timeoutId = setTimeout(callback, delay)
 		intervalRefs.current.add(timeoutId)
 
 		return () => {
-			clearTimeout(timeoutId as any)
+			clearTimeout(timeoutId)
 			intervalRefs.current.delete(timeoutId)
 		}
 	}, [])
 
 	// Safe animation frame management
-	const safeRequestAnimationFrame = useCallback((callback: FrameRequestCallback) => {
+	const requestAnimationFrame = useCallback((callback: FrameRequestCallback) => {
 		const frameId = requestAnimationFrame(callback)
 		animationFrameRefs.current.add(frameId)
 
@@ -200,24 +201,26 @@ export function useMemoryOptimization(options: {
 
 		// Safe API functions
 		addEventListener,
-		setInterval: safeSetInterval,
-		setTimeout: safeSetTimeout,
-		requestAnimationFrame: safeRequestAnimationFrame,
+		setInterval,
+		setTimeout,
+		requestAnimationFrame,
 		addObserver,
 
 		// Utilities
 		formatBytes: (bytes: number) => {
-			if (bytes === 0) return '0 Bytes'
+			if (bytes === 0) return "0 Bytes"
 			const k = 1024
-			const sizes = ['Bytes', 'KB', 'MB', 'GB']
+			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]
+			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>) {
+export function useMediaResourceCleanup(
+	mediaRef: React.RefObject<HTMLVideoElement | HTMLAudioElement>
+) {
 	const { addEventListener, performCleanup } = useMemoryOptimization()
 
 	// Track resource cleanup
@@ -227,12 +230,12 @@ export function useMediaResourceCleanup(mediaRef: React.RefObject<HTMLVideoEleme
 
 		// Stop media playback
 		if (!media.paused) {
-			media.pause()
+			_media.pause()
 		}
 
 		// Clear source
 		if (media.src) {
-			media.src = ''
+			media.src = ""
 			media.load()
 		}
 
@@ -245,22 +248,21 @@ export function useMediaResourceCleanup(mediaRef: React.RefObject<HTMLVideoEleme
 		media.currentTime = 0
 
 		// Clear buffered data
-		if ('clearBuffered' in media) {
-			(media as any).clearBuffered()
+		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 () => {}
+	const registerMediaEventListener = useCallback(
+		(event: string, handler: EventListener, options?: AddEventListenerOptions) => {
+			const media = mediaRef.current
+			if (!media) return () => {}
 
-		return addEventListener(media, event, handler, options)
-	}, [mediaRef, addEventListener])
+			return addEventListener(media, event, handler, options)
+		},
+		[mediaRef, addEventListener]
+	)
 
 	// Cleanup on unmount
 	useEffect(() => {
@@ -284,7 +286,7 @@ export function usePerformanceMonitoring() {
 
 	const frameCountRef = useRef(0)
 	const lastFrameTimeRef = useRef(performance.now())
-	const longTaskObserverRef = useRef<PerformanceObserver | undefined>(undefined)
+	const longTaskObserverRef = useRef<PerformanceObserver>()
 
 	// FPS monitoring
 	useEffect(() => {
@@ -300,7 +302,7 @@ export function usePerformanceMonitoring() {
 				const expectedFrames = Math.round((now - lastFrameTimeRef.current) / 16.67) // 60fps
 				const frameDrops = Math.max(0, expectedFrames - frameCountRef.current)
 
-				setMetrics(prev => ({
+				setMetrics((prev) => ({
 					...prev,
 					fps,
 					frameDrops: prev.frameDrops + frameDrops
@@ -322,13 +324,14 @@ export function usePerformanceMonitoring() {
 
 	// Long task monitoring
 	useEffect(() => {
-		if (!('PerformanceObserver' in window)) return
+		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 => ({
+					if (entry.duration > 50) {
+						// Long task threshold
+						setMetrics((prev) => ({
 							...prev,
 							longTasks: prev.longTasks + 1,
 							totalLongTaskDuration: prev.totalLongTaskDuration + entry.duration
@@ -337,22 +340,21 @@ export function usePerformanceMonitoring() {
 				}
 			})
 
-			observer.observe({ entryTypes: ['longtask'] })
+			observer.observe({ entryTypes: ["longtask"] })
 			longTaskObserverRef.current = observer
 
 			return () => {
 				observer.disconnect()
 			}
 		} catch (error) {
-			console.warn('Long task monitoring not supported:', error)
+			console.warn("Long task monitoring not supported:", error)
 		}
 	}, [])
 
 	return {
 		...metrics,
-		averageLongTaskDuration: metrics.longTasks > 0
-			? metrics.totalLongTaskDuration / metrics.longTasks
-			: 0,
+		averageLongTaskDuration:
+			metrics.longTasks > 0 ? metrics.totalLongTaskDuration / metrics.longTasks : 0,
 		isPerformanceGood: metrics.fps >= 50 && metrics.frameDrops < 5
 	}
-}
+}

package/src/hooks/use-network-status.ts

@@ -0,0 +1,124 @@
+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() }
+}

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

@@ -1,92 +1,95 @@
-import { useOptimistic, useTransition } from 'react'
+import { useOptimistic, useTransition } from "react"
 
 export interface MediaState {
-  isPlaying: boolean
-  volume: number
-  currentTime: number
-  playbackRate: number
+	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
-  }
-}
+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
+	}
+}