@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

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

@@ -1,95 +0,0 @@
-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
-	}
-}

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

@@ -1,283 +0,0 @@
-"use client"
-
-import React from "react"
-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, []))
-
-	// Derived state with memoization
-	const progress = React.useMemo(() => {
-		return duration > 0 ? (currentTime / duration) * 100 : 0
-	}, [currentTime, duration])
-
-	const remainingTime = React.useMemo(() => {
-		return Math.max(0, duration - currentTime)
-	}, [duration, currentTime])
-
-	const bufferedRanges = React.useMemo(() => {
-		if (!buffered || duration === 0) return []
-		const ranges = []
-		for (let i = 0; i < buffered.length; i++) {
-			ranges.push({
-				start: (buffered.start(i) / duration) * 100,
-				end: (buffered.end(i) / duration) * 100
-			})
-		}
-		return ranges
-	}, [buffered, duration])
-
-	const canPlay = React.useMemo(() => {
-		return !isLoading && !error && duration > 0
-	}, [isLoading, error, duration])
-
-	return {
-		// Basic state
-		isPlaying,
-		currentTime,
-		duration,
-		volume,
-		isMuted,
-		isLoading,
-		error,
-		isFullscreen,
-		isPictureInPicture,
-		buffered,
-		playbackRate,
-
-		// Derived state
-		progress,
-		remainingTime,
-		bufferedRanges,
-		canPlay
-	}
-}
-
-// Optimized hook for media controls with memoized callbacks
-export function useOptimizedMediaControls() {
-	const dispatch = useMediaDispatch()
-
-	// Memoized control functions
-	const play = React.useCallback(() => {
-		dispatch({ type: MediaActionTypes.PLAY })
-	}, [dispatch])
-
-	const pause = React.useCallback(() => {
-		dispatch({ type: MediaActionTypes.PAUSE })
-	}, [dispatch])
-
-	const toggle = React.useCallback(() => {
-		dispatch({ type: MediaActionTypes.PLAY })
-	}, [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 mute = React.useCallback(() => {
-		dispatch({ type: MediaActionTypes.MUTE })
-	}, [dispatch])
-
-	const unmute = React.useCallback(() => {
-		dispatch({ type: MediaActionTypes.UNMUTE })
-	}, [dispatch])
-
-	const toggleMute = React.useCallback(() => {
-		dispatch({ type: MediaActionTypes.TOGGLE_MUTE })
-	}, [dispatch])
-
-	const enterFullscreen = React.useCallback(() => {
-		dispatch({ type: MediaActionTypes.ENTER_FULLSCREEN })
-	}, [dispatch])
-
-	const exitFullscreen = React.useCallback(() => {
-		dispatch({ type: MediaActionTypes.EXIT_FULLSCREEN })
-	}, [dispatch])
-
-	const toggleFullscreen = React.useCallback(() => {
-		dispatch({ type: MediaActionTypes.ENTER_FULLSCREEN })
-	}, [dispatch])
-
-	const enterPictureInPicture = React.useCallback(() => {
-		dispatch({ type: MediaActionTypes.ENTER_PIP })
-	}, [dispatch])
-
-	const exitPictureInPicture = React.useCallback(() => {
-		dispatch({ type: MediaActionTypes.EXIT_PIP })
-	}, [dispatch])
-
-	const togglePictureInPicture = React.useCallback(() => {
-		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]
-	)
-
-	return {
-		play,
-		pause,
-		toggle,
-		seek,
-		setVolume,
-		mute,
-		unmute,
-		toggleMute,
-		enterFullscreen,
-		exitFullscreen,
-		toggleFullscreen,
-		enterPictureInPicture,
-		exitPictureInPicture,
-		togglePictureInPicture,
-		setPlaybackRate,
-		skipForward,
-		skipBackward
-	}
-}
-
-// Hook for debounced seek operations
-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]
-	)
-
-	React.useEffect(() => {
-		return () => {
-			if (timeoutRef.current) {
-				clearTimeout(timeoutRef.current)
-			}
-		}
-	}, [])
-
-	return debouncedSeek
-}
-
-// Hook for throttled volume changes
-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]
-	)
-
-	return throttledSetVolume
-}
-
-// Hook for optimized time formatting
-export function useFormattedTime(time: number) {
-	return React.useMemo(() => {
-		const hours = Math.floor(time / 3600)
-		const minutes = Math.floor((time % 3600) / 60)
-		const seconds = Math.floor(time % 60)
-
-		if (hours > 0) {
-			return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`
-		}
-		return `${minutes}:${seconds.toString().padStart(2, "0")}`
-	}, [time])
-}
-
-// Hook for intersection observer (for lazy loading)
-export function useIntersectionObserver(
-	elementRef: React.RefObject<Element>,
-	options?: IntersectionObserverInit
-) {
-	const [isIntersecting, setIsIntersecting] = React.useState(false)
-
-	React.useEffect(() => {
-		const element = elementRef.current
-		if (!element) return
-
-		const observer = new IntersectionObserver(([entry]) => {
-			setIsIntersecting(entry?.isIntersecting ?? false)
-		}, options)
-
-		observer.observe(element)
-
-		return () => {
-			observer.unobserve(element)
-		}
-	}, [elementRef, options])
-
-	return isIntersecting
-}
-
-// Hook for media queries (responsive behavior)
-export function useMediaQuery(query: string) {
-	const [matches, setMatches] = React.useState(false)
-
-	React.useEffect(() => {
-		const mediaQuery = window.matchMedia(query)
-		setMatches(mediaQuery.matches)
-
-		const handler = (event: MediaQueryListEvent) => {
-			setMatches(event.matches)
-		}
-
-		mediaQuery.addEventListener("change", handler)
-		return () => mediaQuery.removeEventListener("change", handler)
-	}, [query])
-
-	return matches
-}

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

@@ -1,229 +0,0 @@
-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"
-					})
-
-					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
-}