@therealtinhtute/baroiplayer 1.0.8 → 1.1.0

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

@@ -1,22 +1,24 @@
 "use client"
 
 import React from "react"
-import { useMediaSelector, useMediaDispatch, MediaActionTypes } from "../context/media-context"
+import { MediaActionTypes, useMediaDispatch, useMediaSelector } from "../context/media-context"
 
 // Optimized hook for media state with memoized selectors
 export function useOptimizedMediaState() {
 	// Memoized selectors to prevent unnecessary re-renders
-	const isPlaying = useMediaSelector(React.useCallback(state => state.isPlaying, []))
-	const currentTime = useMediaSelector(React.useCallback(state => state.currentTime, []))
-	const duration = useMediaSelector(React.useCallback(state => state.duration, []))
-	const volume = useMediaSelector(React.useCallback(state => state.volume, []))
-	const isMuted = useMediaSelector(React.useCallback(state => state.isMuted, []))
-	const isLoading = useMediaSelector(React.useCallback(state => state.isLoading, []))
-	const error = useMediaSelector(React.useCallback(state => state.error, []))
-	const isFullscreen = useMediaSelector(React.useCallback(state => state.isFullscreen, []))
-	const isPictureInPicture = useMediaSelector(React.useCallback(state => state.isPictureInPicture, []))
-	const buffered = useMediaSelector(React.useCallback(state => state.buffered, []))
-	const playbackRate = useMediaSelector(React.useCallback(state => state.playbackRate, []))
+	const isPlaying = useMediaSelector(React.useCallback((state) => state.isPlaying, []))
+	const currentTime = useMediaSelector(React.useCallback((state) => state.currentTime, []))
+	const duration = useMediaSelector(React.useCallback((state) => state.duration, []))
+	const volume = useMediaSelector(React.useCallback((state) => state.volume, []))
+	const isMuted = useMediaSelector(React.useCallback((state) => state.isMuted, []))
+	const isLoading = useMediaSelector(React.useCallback((state) => state.isLoading, []))
+	const error = useMediaSelector(React.useCallback((state) => state.error, []))
+	const isFullscreen = useMediaSelector(React.useCallback((state) => state.isFullscreen, []))
+	const isPictureInPicture = useMediaSelector(
+		React.useCallback((state) => state.isPictureInPicture, [])
+	)
+	const buffered = useMediaSelector(React.useCallback((state) => state.buffered, []))
+	const playbackRate = useMediaSelector(React.useCallback((state) => state.playbackRate, []))
 
 	// Derived state with memoization
 	const progress = React.useMemo(() => {
@@ -56,7 +58,7 @@ export function useOptimizedMediaState() {
 		isPictureInPicture,
 		buffered,
 		playbackRate,
-		
+
 		// Derived state
 		progress,
 		remainingTime,
@@ -82,13 +84,19 @@ export function useOptimizedMediaControls() {
 		dispatch({ type: MediaActionTypes.PLAY })
 	}, [dispatch])
 
-	const seek = React.useCallback((time: number) => {
-		dispatch({ type: MediaActionTypes.SEEK, detail: time })
-	}, [dispatch])
+	const seek = React.useCallback(
+		(time: number) => {
+			dispatch({ type: MediaActionTypes.SEEK, detail: time })
+		},
+		[dispatch]
+	)
 
-	const setVolume = React.useCallback((volume: number) => {
-		dispatch({ type: MediaActionTypes.SET_VOLUME, detail: volume })
-	}, [dispatch])
+	const setVolume = React.useCallback(
+		(volume: number) => {
+			dispatch({ type: MediaActionTypes.SET_VOLUME, detail: volume })
+		},
+		[dispatch]
+	)
 
 	const mute = React.useCallback(() => {
 		dispatch({ type: MediaActionTypes.MUTE })
@@ -126,17 +134,26 @@ export function useOptimizedMediaControls() {
 		dispatch({ type: MediaActionTypes.ENTER_PIP })
 	}, [dispatch])
 
-	const setPlaybackRate = React.useCallback((rate: number) => {
-		dispatch({ type: MediaActionTypes.SET_PLAYBACK_RATE, detail: rate })
-	}, [dispatch])
-
-	const skipForward = React.useCallback((seconds: number = 10) => {
-		dispatch({ type: MediaActionTypes.SEEK, detail: seconds })
-	}, [dispatch])
-
-	const skipBackward = React.useCallback((seconds: number = 10) => {
-		dispatch({ type: MediaActionTypes.SEEK, detail: -seconds })
-	}, [dispatch])
+	const setPlaybackRate = React.useCallback(
+		(rate: number) => {
+			dispatch({ type: MediaActionTypes.SET_PLAYBACK_RATE, detail: rate })
+		},
+		[dispatch]
+	)
+
+	const skipForward = React.useCallback(
+		(seconds: number = 10) => {
+			dispatch({ type: MediaActionTypes.SEEK, detail: seconds })
+		},
+		[dispatch]
+	)
+
+	const skipBackward = React.useCallback(
+		(seconds: number = 10) => {
+			dispatch({ type: MediaActionTypes.SEEK, detail: -seconds })
+		},
+		[dispatch]
+	)
 
 	return {
 		play,
@@ -164,15 +181,18 @@ export function useDebouncedSeek(delay: number = 100) {
 	const dispatch = useMediaDispatch()
 	const timeoutRef = React.useRef<NodeJS.Timeout | null>(null)
 
-	const debouncedSeek = React.useCallback((time: number) => {
-		if (timeoutRef.current) {
-			clearTimeout(timeoutRef.current)
-		}
-		
-		timeoutRef.current = setTimeout(() => {
-			dispatch({ type: MediaActionTypes.SEEK, detail: time })
-		}, delay)
-	}, [dispatch, delay])
+	const debouncedSeek = React.useCallback(
+		(time: number) => {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current)
+			}
+
+			timeoutRef.current = setTimeout(() => {
+				dispatch({ type: MediaActionTypes.SEEK, detail: time })
+			}, delay)
+		},
+		[dispatch, delay]
+	)
 
 	React.useEffect(() => {
 		return () => {
@@ -190,13 +210,16 @@ export function useThrottledVolume(delay: number = 50) {
 	const dispatch = useMediaDispatch()
 	const lastUpdateRef = React.useRef<number>(0)
 
-	const throttledSetVolume = React.useCallback((volume: number) => {
-		const now = Date.now()
-		if (now - lastUpdateRef.current >= delay) {
-			dispatch({ type: MediaActionTypes.SET_VOLUME, detail: volume })
-			lastUpdateRef.current = now
-		}
-	}, [dispatch, delay])
+	const throttledSetVolume = React.useCallback(
+		(volume: number) => {
+			const now = Date.now()
+			if (now - lastUpdateRef.current >= delay) {
+				dispatch({ type: MediaActionTypes.SET_VOLUME, detail: volume })
+				lastUpdateRef.current = now
+			}
+		},
+		[dispatch, delay]
+	)
 
 	return throttledSetVolume
 }
@@ -209,9 +232,9 @@ export function useFormattedTime(time: number) {
 		const seconds = Math.floor(time % 60)
 
 		if (hours > 0) {
-			return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
+			return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`
 		}
-		return `${minutes}:${seconds.toString().padStart(2, '0')}`
+		return `${minutes}:${seconds.toString().padStart(2, "0")}`
 	}, [time])
 }
 
@@ -226,12 +249,9 @@ export function useIntersectionObserver(
 		const element = elementRef.current
 		if (!element) return
 
-		const observer = new IntersectionObserver(
-			([entry]) => {
-				setIsIntersecting(entry?.isIntersecting ?? false)
-			},
-			options
-		)
+		const observer = new IntersectionObserver(([entry]) => {
+			setIsIntersecting(entry?.isIntersecting ?? false)
+		}, options)
 
 		observer.observe(element)
 
@@ -255,8 +275,8 @@ export function useMediaQuery(query: string) {
 			setMatches(event.matches)
 		}
 
-		mediaQuery.addEventListener('change', handler)
-		return () => mediaQuery.removeEventListener('change', handler)
+		mediaQuery.addEventListener("change", handler)
+		return () => mediaQuery.removeEventListener("change", handler)
 	}, [query])
 
 	return matches

package/src/hooks/use-smart-preload.ts

@@ -0,0 +1,230 @@
+import { useCallback, useEffect, useRef, useState } from "react"
+import type { RefObject } from "react"
+
+export interface PreloadSource {
+	src: string
+	type: string
+	priority: number
+	preloadedAt?: number
+}
+
+export interface UseSmartPreloadOptions {
+	enabled?: boolean
+	maxConcurrent?: number
+	preloadAheadTime?: number
+	onPreloadComplete?: (src: string) => void
+	onPreloadError?: (src: string, error: Error) => void
+}
+
+export interface UseSmartPreloadReturn {
+	preload: (src: string, type: string, priority?: number) => Promise<void>
+	preloadSources: (sources: PreloadSource[]) => Promise<void>
+	cancelPreload: (src: string) => void
+	cancelAllPreloads: () => void
+	isPreloading: (src: string) => boolean
+	getPreloadProgress: (src: string) => number | null
+	preloadQueue: PreloadSource[]
+	preloadedSources: string[]
+}
+
+const DEFAULT_OPTIONS: UseSmartPreloadOptions = {
+	enabled: true,
+	maxConcurrent: 2,
+	preloadAheadTime: 30,
+	onPreloadComplete: undefined,
+	onPreloadError: undefined
+}
+
+export function useSmartPreload(options: UseSmartPreloadOptions = {}): UseSmartPreloadReturn {
+	const opts = { ...DEFAULT_OPTIONS, ...options }
+	const [preloadQueue, setPreloadQueue] = useState<PreloadSource[]>([])
+	const [preloadedSources, setPreloadedSources] = useState<string[]>([])
+	const [inProgress, setInProgress] = useState<Map<string, Promise<void>>>(new Map())
+	const progressRef = useRef<Map<string, number>>(new Map())
+	const activeCountRef = useRef(0)
+
+	const preloadFile = useCallback(
+		async (source: PreloadSource): Promise<void> => {
+			const { src, type } = source
+
+			if (inProgress.has(src)) {
+				return
+			}
+
+			progressRef.current.set(src, 0)
+
+			const preloadPromise = (async () => {
+				try {
+					const response = await fetch(src, {
+						method: "HEAD",
+						cache: "preload"
+					})
+
+					if (!response.ok) {
+						throw new Error(`Failed to preload: ${response.status}`)
+					}
+
+					progressRef.current.set(src, 100)
+					setPreloadedSources((prev) => [...prev, src])
+					opts.onPreloadComplete?.(src)
+				} catch (error) {
+					progressRef.current.delete(src)
+					opts.onPreloadError?.(src, error as Error)
+					throw error
+				} finally {
+					setInProgress((prev) => {
+						const next = new Map(prev)
+						next.delete(src)
+						return next
+					})
+					activeCountRef.current--
+				}
+			})()
+
+			setInProgress((prev) => new Map(prev).set(src, preloadPromise))
+			activeCountRef.current++
+
+			return preloadPromise
+		},
+		[opts]
+	)
+
+	const processQueue = useCallback(() => {
+		setPreloadQueue((currentQueue) => {
+			if (currentQueue.length === 0 || activeCountRef.current >= (opts.maxConcurrent || 2)) {
+				return currentQueue
+			}
+
+			const nextQueue = [...currentQueue]
+			const toPreload: PreloadSource[] = []
+			const remaining: PreloadSource[] = []
+
+			for (const source of nextQueue) {
+				if (toPreload.length < (opts.maxConcurrent || 2) - activeCountRef.current) {
+					if (!inProgress.has(source.src)) {
+						toPreload.push({ ...source, preloadedAt: Date.now() })
+					}
+				} else {
+					remaining.push(source)
+				}
+			}
+
+			toPreload.forEach((source) => {
+				preloadFile(source).catch(() => {})
+			})
+
+			return remaining
+		})
+	}, [opts.maxConcurrent, preloadFile, inProgress])
+
+	useEffect(() => {
+		processQueue()
+	}, [preloadQueue.length, inProgress.size])
+
+	const preload = useCallback(
+		async (src: string, type: string, priority = 0): Promise<void> => {
+			if (!opts.enabled) return
+
+			const newSource: PreloadSource = { src, type, priority }
+
+			setPreloadQueue((current) => {
+				const existing = current.find((s) => s.src === src)
+				if (existing) {
+					if (priority > existing.priority) {
+						return current.map((s) => (s.src === src ? { ...s, priority } : s))
+					}
+					return current
+				}
+				return [...current, newSource].sort((a, b) => b.priority - a.priority)
+			})
+		},
+		[opts.enabled, opts.preloadAheadTime]
+	)
+
+	const preloadSources = useCallback(
+		async (sources: PreloadSource[]): Promise<void> => {
+			const sorted = [...sources].sort((a, b) => b.priority - a.priority)
+
+			for (const source of sorted) {
+				await preload(source.src, source.type, source.priority)
+			}
+		},
+		[preload]
+	)
+
+	const cancelPreload = useCallback((src: string) => {
+		setPreloadQueue((current) => current.filter((s) => s.src !== src))
+		setInProgress((prev) => {
+			const next = new Map(prev)
+			next.delete(src)
+			return next
+		})
+		progressRef.current.delete(src)
+	}, [])
+
+	const cancelAllPreloads = useCallback(() => {
+		setPreloadQueue([])
+		setInProgress(new Map())
+		setPreloadedSources([])
+		progressRef.current.clear()
+		activeCountRef.current = 0
+	}, [])
+
+	const isPreloading = useCallback(
+		(src: string): boolean => {
+			return inProgress.has(src)
+		},
+		[inProgress]
+	)
+
+	const getPreloadProgress = useCallback((src: string): number | null => {
+		return progressRef.current.get(src) || null
+	}, [])
+
+	return {
+		preload,
+		preloadSources,
+		cancelPreload,
+		cancelAllPreloads,
+		isPreloading,
+		getPreloadProgress,
+		preloadQueue,
+		preloadedSources
+	}
+}
+
+export function usePreloadOnVisibility(
+	videoRef: RefObject<HTMLVideoElement | HTMLAudioElement>,
+	sources: PreloadSource[],
+	options?: UseSmartPreloadOptions
+) {
+	const smartPreload = useSmartPreload(options)
+
+	useEffect(() => {
+		if (!videoRef.current) return
+
+		const video = videoRef.current
+
+		const handleCanPlay = () => {
+			if (video.buffered.length > 0) {
+				const bufferedEnd = video.buffered.end(video.buffered.length - 1)
+				const remaining = video.duration - video.currentTime
+
+				if (remaining < (options?.preloadAheadTime || 30)) {
+					const nextSources = sources.filter(
+						(s) => !smartPreload.isPreloading(s.src) && !smartPreload.getPreloadProgress(s.src)
+					)
+					smartPreload.preloadSources(nextSources)
+				}
+			}
+		}
+
+		video.addEventListener("canplay", handleCanPlay)
+
+		return () => {
+			video.removeEventListener("canplay", handleCanPlay)
+		}
+	}, [videoRef, sources, options, smartPreload])
+
+	return smartPreload
+}