@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

package/src/hooks/use-buffer-health.ts

@@ -0,0 +1,218 @@
+import { useCallback, useEffect, useRef, useState } from "react"
+
+export interface BufferHealthMetrics {
+	bufferedDuration: number
+	bufferedPercent: number
+	playheadDistance: number
+	stallCount: number
+	isStalled: boolean
+	lastStallDuration: number | null
+	bitrate: number | null
+	droppedFrames: number
+	audioLevel: number | null
+}
+
+export interface UseBufferHealthOptions {
+	minBufferDuration?: number
+	maxStallDuration?: number
+	stallThreshold?: number
+	onStall?: (duration: number) => void
+	onRecover?: () => void
+}
+
+const DEFAULT_OPTIONS: UseBufferHealthOptions = {
+	minBufferDuration: 5,
+	maxStallDuration: 3000,
+	stallThreshold: 1000,
+	onStall: undefined,
+	onRecover: undefined
+}
+
+export function useBufferHealth(
+	videoRef: React.RefObject<HTMLVideoElement | HTMLAudioElement>,
+	options: UseBufferHealthOptions = {}
+): BufferHealthMetrics {
+	const opts = { ...DEFAULT_OPTIONS, ...options }
+	const [metrics, setMetrics] = useState<BufferHealthMetrics>({
+		bufferedDuration: 0,
+		bufferedPercent: 0,
+		playheadDistance: 0,
+		stallCount: 0,
+		isStalled: false,
+		lastStallDuration: null,
+		bitrate: null,
+		droppedFrames: 0,
+		audioLevel: null
+	})
+
+	const stallStartRef = useRef<number | null>(null)
+	const lastPlayheadRef = useRef<number>(0)
+	const lastTimeRef = useRef<number>(0)
+
+	const calculateMetrics = useCallback(() => {
+		const video = videoRef.current
+		if (!video) return
+
+		const currentTime = video.currentTime
+		const duration = video.duration || 1
+		const buffered = video.buffered
+
+		let bufferedDuration = 0
+		if (buffered.length > 0) {
+			for (let i = 0; i < buffered.length; i++) {
+				const start = buffered.start(i)
+				const end = buffered.end(i)
+				if (start <= currentTime && end >= currentTime) {
+					bufferedDuration = end - currentTime
+					break
+				}
+			}
+		}
+
+		const bufferedPercent = (bufferedDuration / duration) * 100
+		const playheadDistance = 0
+
+		const now = Date.now()
+		const timeDelta = now - lastTimeRef.current
+		const playheadDelta = Math.abs(currentTime - lastPlayheadRef.current)
+
+		let isStalled = false
+		let stallDuration: number | null = null
+		let stallCount = metrics.stallCount
+
+		if (video.paused || video.ended) {
+			if (stallStartRef.current !== null) {
+				stallDuration = Date.now() - stallStartRef.current
+				if (stallDuration > (opts.stallThreshold || 1000)) {
+					isStalled = true
+					stallCount++
+					opts.onStall?.(stallDuration)
+				}
+				stallStartRef.current = null
+			}
+		} else if (timeDelta > 500 && playheadDelta < 0.1) {
+			if (stallStartRef.current === null) {
+				stallStartRef.current = now
+			}
+			isStalled = true
+		} else if (playheadDelta > 0.1 && stallStartRef.current !== null) {
+			stallDuration = Date.now() - stallStartRef.current
+			stallStartRef.current = null
+			if (stallDuration > (opts.stallThreshold || 1000)) {
+				stallCount++
+				opts.onStall?.(stallDuration)
+			}
+			opts.onRecover?.()
+		}
+
+		let droppedFrames = 0
+		let bitrate: number | null = null
+		let audioLevel: number | null = null
+
+		if ("getVideoPlaybackQuality" in video) {
+			const quality = (video as any).getVideoPlaybackQuality()
+			droppedFrames = quality?.droppedVideoFrames || 0
+		}
+
+		if ("getBitrateInfo" in video) {
+			const info = (video as any).getBitrateInfo()
+			bitrate = info?.bitrate || null
+		}
+
+		if ("audioTracks" in video) {
+			const tracks = (video as any).audioTracks
+			if (tracks && tracks.length > 0) {
+				audioLevel = tracks[0]?.volume || null
+			}
+		}
+
+		lastPlayheadRef.current = currentTime
+		lastTimeRef.current = now
+
+		setMetrics({
+			bufferedDuration,
+			bufferedPercent,
+			playheadDistance,
+			stallCount,
+			isStalled,
+			lastStallDuration: stallDuration,
+			bitrate,
+			droppedFrames,
+			audioLevel
+		})
+	}, [videoRef, opts, metrics.stallCount, opts.onStall, opts.onRecover, opts.stallThreshold])
+
+	useEffect(() => {
+		const video = videoRef.current
+		if (!video) return
+
+		const interval = setInterval(calculateMetrics, 250)
+
+		const handleWaiting = () => {
+			stallStartRef.current = Date.now()
+		}
+
+		const handlePlaying = () => {
+			if (stallStartRef.current !== null) {
+				const stallDuration = Date.now() - stallStartRef.current
+				if (stallDuration > (opts.stallThreshold || 1000)) {
+					setMetrics((prev) => ({
+						...prev,
+						stallCount: prev.stallCount + 1,
+						isStalled: false,
+						lastStallDuration: stallDuration
+					}))
+					opts.onStall?.(stallDuration)
+				}
+				stallStartRef.current = null
+			}
+			opts.onRecover?.()
+		}
+
+		video.addEventListener("waiting", handleWaiting)
+		video.addEventListener("playing", handlePlaying)
+
+		return () => {
+			clearInterval(interval)
+			video.removeEventListener("waiting", handleWaiting)
+			video.removeEventListener("playing", handlePlaying)
+		}
+	}, [videoRef, calculateMetrics, opts.stallThreshold, opts.onStall, opts.onRecover])
+
+	return metrics
+}
+
+export function useAdaptiveBuffering(
+	videoRef: React.RefObject<HTMLVideoElement | HTMLAudioElement>,
+	options?: UseBufferHealthOptions
+) {
+	const metrics = useBufferHealth(videoRef, options)
+
+	const getRecommendedBufferSize = useCallback(() => {
+		if (metrics.isStalled) {
+			return 30
+		}
+		if (metrics.stallCount > 3) {
+			return 20
+		}
+		if (metrics.bufferedPercent < 5) {
+			return 15
+		}
+		return 10
+	}, [metrics.isStalled, metrics.stallCount, metrics.bufferedPercent])
+
+	const shouldIncreaseBuffer = useCallback(() => {
+		return metrics.stallCount > 0 && metrics.bufferedPercent < 10
+	}, [metrics.stallCount, metrics.bufferedPercent])
+
+	const shouldReduceQuality = useCallback(() => {
+		return metrics.isStalled || metrics.stallCount > 5
+	}, [metrics.isStalled, metrics.stallCount])
+
+	return {
+		...metrics,
+		recommendedBufferSize: getRecommendedBufferSize(),
+		shouldIncreaseBuffer: shouldIncreaseBuffer(),
+		shouldReduceQuality: shouldReduceQuality()
+	}
+}

package/src/hooks/use-enhanced-media-player.ts

@@ -9,11 +9,11 @@ import React, {
 	useOptimistic,
 	useActionState
 } from "react"
+import { useMediaSelector, useMediaStore } from "../context/media-context"
+import type { EnhancedMediaStore } from "../context/media-store"
 import type { MediaPlayerControls, 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"
+import { useMediaOptimistic } from "./use-media-optimistic"
 
 interface UseEnhancedMediaPlayerOptions {
 	src: string | string[]
@@ -34,16 +34,32 @@ interface UseEnhancedMediaPlayerOptions {
 	timeUpdateThrottleMs?: number
 	enableSeekPreview?: boolean
 	preloadStrategy?: "eager" | "lazy" | "progressive"
-	// Event callbacks
+	// Event handlers
 	onPlay?: () => void
 	onPause?: () => void
-	onTimeUpdate?: (currentTime: number) => void
-	onDurationChange?: (duration: number) => void
-	onVolumeChange?: (volume: number) => void
-	onError?: (error: string) => void
-	onLoadStart?: () => void
-	onLoadedData?: () => void
-	onEnded?: () => void
+}
+
+/**
+ * Safely sets currentTime on a media element, ensuring the value is finite
+ */
+function safeSetCurrentTime(media: HTMLVideoElement | HTMLAudioElement, time: number): boolean {
+	if (!Number.isFinite(time)) {
+		console.warn(`Attempted to set non-finite currentTime: ${time}`)
+		return false
+	}
+
+	if (time < 0) {
+		console.warn(`Attempted to set negative currentTime: ${time}`)
+		return false
+	}
+
+	try {
+		media.currentTime = time
+		return true
+	} catch (error) {
+		console.error(`Failed to set currentTime to ${time}:`, error)
+		return false
+	}
 }
 
 // Performance-optimized media player hook with React 19 features
@@ -61,29 +77,29 @@ export function useEnhancedMediaPlayer(options: UseEnhancedMediaPlayerOptions) {
 	const lastFrameTime = React.useRef<number>(0)
 
 	// Throttled time update
-	const timeUpdateTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
+	const timeUpdateTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
 	const lastTimeUpdate = useRef<number>(0)
 
 	// Store integration
 	const store = useMediaStore()
-	const isEnhanced = 'getOptimisticState' in store
+	const isEnhanced = "getOptimisticState" in store
 
 	// Select only the state we need to minimize re-renders
-	const isPlaying = useMediaSelector(state => state.isPlaying)
-	const currentTime = useMediaSelector(state => state.currentTime)
-	const duration = useMediaSelector(state => state.duration)
-	const volume = useMediaSelector(state => state.volume)
-	const isMuted = useMediaSelector(state => state.isMuted)
-	const isLoading = useMediaSelector(state => state.isLoading)
-	const isBuffering = useMediaSelector(state => state.isBuffering)
-	const error = useMediaSelector(state => state.error)
-	const buffered = useMediaSelector(state => state.buffered)
-	const isFullscreen = useMediaSelector(state => state.isFullscreen)
-
-	// Enhanced features if available
+	const isPlaying = useMediaSelector((state) => state.isPlaying)
+	const currentTime = useMediaSelector((state) => state.currentTime)
+	const duration = useMediaSelector((state) => state.duration)
+	const volume = useMediaSelector((state) => state.volume)
+	const isMuted = useMediaSelector((state) => state.isMuted)
+	const isLoading = useMediaSelector((state) => state.isLoading)
+	const isBuffering = useMediaSelector((state) => state.isBuffering)
+	const error = useMediaSelector((state) => state.error)
+	const buffered = useMediaSelector((state) => state.buffered)
+	const isFullscreen = useMediaSelector((state) => state.isFullscreen)
+
+	// Enhanced features - always call hooks unconditionally
 	const enhancedStore = store as unknown as EnhancedMediaStore
-	const optimisticState = isEnhanced ? useMediaOptimistic(enhancedStore) : null
-	const actions = isEnhanced ? useMediaActions(enhancedStore) : null
+	const optimisticState = useMediaOptimistic(enhancedStore)
+	const actions = useMediaActions(enhancedStore)
 
 	// Performance state
 	const [performanceMetrics, setPerformanceMetrics] = React.useState({
@@ -94,13 +110,19 @@ export function useEnhancedMediaPlayer(options: UseEnhancedMediaPlayerOptions) {
 	})
 
 	// Optimistic state updates for immediate UI feedback
-	const [optimisticVolume, setOptimisticVolume] = useOptimistic(volume, (state, newVolume: number) => {
-		return Math.max(0, Math.min(1, newVolume))
-	})
+	const [optimisticVolume, setOptimisticVolume] = useOptimistic(
+		volume,
+		(state, newVolume: number) => {
+			return Math.max(0, Math.min(1, newVolume))
+		}
+	)
 
-	const [optimisticTime, setOptimisticTime] = useOptimistic(currentTime, (state, newTime: number) => {
-		return Math.max(0, Math.min(duration || 0, newTime))
-	})
+	const [optimisticTime, setOptimisticTime] = useOptimistic(
+		currentTime,
+		(state, newTime: number) => {
+			return Math.max(0, Math.min(duration || 0, newTime))
+		}
+	)
 
 	// Initialize media element with performance optimizations
 	useEffect(() => {
@@ -119,21 +141,21 @@ export function useEnhancedMediaPlayer(options: UseEnhancedMediaPlayerOptions) {
 
 		Object.entries(initProps).forEach(([key, value]) => {
 			if (value !== undefined) {
-				(media as any)[key] = value
+				;(media as any)[key] = value
 			}
 		})
 
 		// Performance optimizations
-		media.setAttribute('preload', options.preloadStrategy === 'eager' ? 'auto' : 'metadata')
+		media.setAttribute("preload", options.preloadStrategy === "eager" ? "auto" : "metadata")
 
-		if (options.bufferingStrategy === 'aggressive') {
-			media.setAttribute('buffered', 'auto')
+		if (options.bufferingStrategy === "aggressive") {
+			media.setAttribute("buffered", "auto")
 		}
 
 		// Hardware acceleration
 		if (media instanceof HTMLVideoElement) {
-			media.style.willChange = 'transform'
-			media.style.transform = 'translateZ(0)'
+			media.style.willChange = "transform"
+			media.style.transform = "translateZ(0)"
 		}
 	}, [
 		options.volume,
@@ -230,7 +252,7 @@ export function useEnhancedMediaPlayer(options: UseEnhancedMediaPlayerOptions) {
 			// Calculate frame rate every second
 			if (frameCount.current >= 60) {
 				const fps = Math.round((frameCount.current * 1000) / (now - lastFrameTime.current))
-				setPerformanceMetrics(prev => ({
+				setPerformanceMetrics((prev) => ({
 					...prev,
 					frameRate: fps,
 					droppedFrames: Math.max(0, 60 - fps)
@@ -335,14 +357,25 @@ export function useEnhancedMediaPlayer(options: UseEnhancedMediaPlayerOptions) {
 			const media = mediaRef.current
 			if (!media) return
 
-			const clampedTime = Math.max(0, Math.min(time, duration || 0))
+			const validDuration = Number.isFinite(duration) && duration > 0 ? duration : Number.isFinite(media.duration) ? media.duration : 0
+			if (validDuration === 0) {
+				console.warn("Cannot seek: duration is not available")
+				return
+			}
+
+			const clampedTime = Math.max(0, Math.min(time, validDuration))
+
+			if (!Number.isFinite(clampedTime)) {
+				console.warn(`Computed non-finite seek time: ${clampedTime}`)
+				return
+			}
 
 			if (isEnhanced && actions) {
 				startSeekTransition(() => {
 					actions.seek(clampedTime, true) // Optimistic
 				})
 			} else {
-				media.currentTime = clampedTime
+				safeSetCurrentTime(media, clampedTime)
 			}
 		}
 
@@ -400,25 +433,79 @@ export function useEnhancedMediaPlayer(options: UseEnhancedMediaPlayerOptions) {
 			}
 		}
 
+		const mute = () => {
+			const media = mediaRef.current
+			if (!media) return
+
+			if (isEnhanced && actions) {
+				actions.mute(true)
+			} else {
+				media.muted = true
+			}
+		}
+
+		const unmute = () => {
+			const media = mediaRef.current
+			if (!media) return
+
+			if (isEnhanced && actions) {
+				actions.unmute(true)
+			} else {
+				media.muted = false
+			}
+		}
+
+		const toggleFullscreen = async () => {
+			if (isFullscreen) {
+				await exitFullscreen()
+			} else {
+				await enterFullscreen()
+			}
+		}
+
+		const setCurrentTime = (time: number) => {
+			const media = mediaRef.current
+			if (!media) return
+
+			const validDuration =
+				Number.isFinite(duration) && duration > 0
+					? duration
+					: Number.isFinite(media.duration)
+						? media.duration
+						: 0
+
+			if (validDuration === 0) {
+				console.warn("Cannot set currentTime: duration is not available")
+				return
+			}
+
+			const clampedTime = Math.max(0, Math.min(time, validDuration))
+
+			if (!Number.isFinite(clampedTime)) {
+				console.warn(`Computed non-finite currentTime: ${clampedTime}`)
+				return
+			}
+
+			safeSetCurrentTime(media, clampedTime)
+		}
+
 		return {
 			play,
 			pause,
 			toggle,
 			seek,
+			setCurrentTime,
 			setVolume,
+			mute,
+			unmute,
 			toggleMute,
 			enterFullscreen,
 			exitFullscreen,
-			toggleFullscreen: () => {
-				if (document.fullscreenElement) {
-					exitFullscreen()
-				} else {
-					enterFullscreen()
-				}
-			}
+			toggleFullscreen
 		}
 	}, [
 		isPlaying,
+		isFullscreen,
 		duration,
 		isEnhanced,
 		actions,
@@ -428,35 +515,38 @@ export function useEnhancedMediaPlayer(options: UseEnhancedMediaPlayerOptions) {
 	])
 
 	// Computed state
-	const computedState = useMemo(() => ({
-		isPlaying: optimisticState?.state?.isPlaying ?? isPlaying,
-		currentTime: optimisticState?.state?.currentTime ?? currentTime,
-		duration: optimisticState?.state?.duration ?? duration,
-		volume: optimisticState?.state?.volume ?? optimisticVolume,
-		isMuted: optimisticState?.state?.isMuted ?? isMuted,
-		isLoading: optimisticState?.state?.isBuffering ?? isLoading,
-		isBuffering: optimisticState?.state?.isBuffering ?? isBuffering,
-		error: optimisticState?.state?.error ?? error,
-		buffered: optimisticState?.state?.buffered ?? buffered,
-		isFullscreen: optimisticState?.state?.isFullscreen ?? isFullscreen,
-		progress: duration > 0 ? currentTime / duration : 0,
-		isTransitioning: isPending || isSeeking,
-		canPlay: !isLoading && !isBuffering && !error
-	}), [
-		optimisticState,
-		isPlaying,
-		currentTime,
-		duration,
-		optimisticVolume,
-		isMuted,
-		isLoading,
-		isBuffering,
-		error,
-		buffered,
-		isFullscreen,
-		isPending,
-		isSeeking
-	])
+	const computedState = useMemo(
+		() => ({
+			isPlaying: optimisticState?.isPlaying ?? isPlaying,
+			currentTime: optimisticState?.currentTime ?? currentTime,
+			duration: optimisticState?.actualState?.duration ?? duration,
+			volume: optimisticState?.volume ?? optimisticVolume,
+			isMuted: optimisticState?.isMuted ?? isMuted,
+			isLoading: optimisticState?.isBuffering ?? isLoading,
+			isBuffering: optimisticState?.isBuffering ?? isBuffering,
+			error: optimisticState?.actualState?.error ?? error,
+			buffered: optimisticState?.actualState?.buffered ?? buffered,
+			isFullscreen: optimisticState?.isFullscreen ?? isFullscreen,
+			progress: duration > 0 ? currentTime / duration : 0,
+			isTransitioning: isPending || isSeeking,
+			canPlay: !isLoading && !isBuffering && !error
+		}),
+		[
+			optimisticState,
+			isPlaying,
+			currentTime,
+			duration,
+			optimisticVolume,
+			isMuted,
+			isLoading,
+			isBuffering,
+			error,
+			buffered,
+			isFullscreen,
+			isPending,
+			isSeeking
+		]
+	)
 
 	return {
 		// Refs
@@ -475,11 +565,11 @@ export function useEnhancedMediaPlayer(options: UseEnhancedMediaPlayerOptions) {
 		isTransitioning: isPending || isSeeking,
 
 		// Enhanced features
-		actions: optimisticState, // The optimisticState object contains all the actions
-		actionState: optimisticState?.state,
+		actions: optimisticState,
+		actionState: optimisticState,
 
 		// Optimistic features
 		optimisticState,
 		isEnhanced
 	}
-}
+}