@therealtinhtute/baroiplayer 1.0.8 → 1.1.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 HTMLVideoElement).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,6 @@ interface UseEnhancedMediaPlayerOptions {
 	timeUpdateThrottleMs?: number
 	enableSeekPreview?: boolean
 	preloadStrategy?: "eager" | "lazy" | "progressive"
-	// Event callbacks
-	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
 }
 
 // Performance-optimized media player hook with React 19 features
@@ -61,29 +51,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<NodeJS.Timeout>()
 	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 +84,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 +115,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 +226,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)
@@ -408,14 +404,7 @@ export function useEnhancedMediaPlayer(options: UseEnhancedMediaPlayerOptions) {
 			setVolume,
 			toggleMute,
 			enterFullscreen,
-			exitFullscreen,
-			toggleFullscreen: () => {
-				if (document.fullscreenElement) {
-					exitFullscreen()
-				} else {
-					enterFullscreen()
-				}
-			}
+			exitFullscreen
 		}
 	}, [
 		isPlaying,
@@ -428,35 +417,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?.duration ?? duration,
+			volume: optimisticState?.volume ?? optimisticVolume,
+			isMuted: optimisticState?.isMuted ?? isMuted,
+			isLoading: optimisticState?.isBuffering ?? isLoading,
+			isBuffering: optimisticState?.isBuffering ?? isBuffering,
+			error: optimisticState?.error ?? error,
+			buffered: optimisticState?.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 +467,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?.actions,
+		actionState: optimisticState?.actionState,
 
 		// Optimistic features
 		optimisticState,
 		isEnhanced
 	}
-}
+}

package/src/hooks/use-focus-trap.tsx

@@ -0,0 +1,162 @@
+import { type RefObject, useCallback, useEffect, useRef } from "react"
+
+interface UseFocusTrapOptions {
+	active?: boolean
+	initialFocus?: boolean
+	returnFocus?: boolean
+	trapId?: string
+}
+
+export function useFocusTrap(
+	containerRef: RefObject<HTMLElement>,
+	options: UseFocusTrapOptions = {}
+) {
+	const { active = true, initialFocus = true, returnFocus = true, trapId } = options
+	const previousFocusRef = useRef<HTMLElement | null>(null)
+	const lastFocusedElementRef = useRef<HTMLElement | null>(null)
+
+	const getFocusableElements = useCallback(() => {
+		const container = containerRef.current
+		if (!container) return []
+
+		return container.querySelectorAll<HTMLElement>(
+			'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+		)
+	}, [containerRef])
+
+	const handleKeyDown = useCallback((e: KeyboardEvent) => {
+		if (!active || e.key !== "Tab") return
+
+		const focusableElements = getFocusableElements()
+		if (focusableElements.length === 0) return
+
+		const firstElement = focusableElements[0]
+		const lastElement = focusableElements[focusableElements.length - 1]
+
+		if (e.shiftKey) {
+			if (document.activeElement === firstElement) {
+				e.preventDefault()
+				lastElement?.focus()
+			}
+		} else {
+			if (document.activeElement === lastElement) {
+				e.preventDefault()
+				firstElement?.focus()
+			}
+		}
+	}, [active, getFocusableElements])
+
+	const handleTabKeyDown = useCallback((e: KeyboardEvent) => {
+		handleKeyDown(e)
+	}, [handleKeyDown])
+
+	useEffect(() => {
+		if (!active) return
+
+		const container = containerRef.current
+		if (!container) return
+
+		previousFocusRef.current = document.activeElement as HTMLElement
+
+		const handleTab = (e: KeyboardEvent) => {
+			if (e.key === "Tab") {
+				handleTabKeyDown(e)
+			}
+		}
+
+		container.addEventListener("keydown", handleTab)
+
+		if (initialFocus) {
+			const focusableElements = getFocusableElements()
+			const firstFocusable = focusableElements[0]
+			if (firstFocusable) {
+				setTimeout(() => firstFocusable.focus(), 0)
+			}
+		}
+
+		if (trapId) {
+			container.setAttribute("id", trapId)
+		}
+
+		return () => {
+			container.removeEventListener("keydown", handleTab)
+
+			if (returnFocus && previousFocusRef.current) {
+				try {
+					previousFocusRef.current.focus()
+				} catch {
+				}
+			}
+
+			if (trapId) {
+				container.removeAttribute("id")
+			}
+		}
+	}, [active, containerRef, initialFocus, returnFocus, trapId, getFocusableElements, handleTabKeyDown])
+
+	const focusFirstElement = useCallback(() => {
+		const focusableElements = getFocusableElements()
+		const firstElement = focusableElements[0]
+		firstElement?.focus()
+		lastFocusedElementRef.current = firstElement
+	}, [getFocusableElements])
+
+	const focusLastElement = useCallback(() => {
+		const focusableElements = getFocusableElements()
+		const lastElement = focusableElements[focusableElements.length - 1]
+		lastElement?.focus()
+		lastFocusedElementRef.current = lastElement
+	}, [getFocusableElements])
+
+	return {
+		focusFirstElement,
+		focusLastElement
+	}
+}
+
+interface FocusScopeProps {
+	children: React.ReactNode
+	active?: boolean
+	initialFocus?: boolean
+	returnFocus?: boolean
+	onEscape?: (event: KeyboardEvent) => void
+}
+
+export function FocusScope({
+	children,
+	active = true,
+	initialFocus = true,
+	returnFocus = true,
+	onEscape
+}: FocusScopeProps) {
+	const containerRef = useRef<HTMLDivElement>(null)
+
+	const handleKeyDown = useCallback((e: KeyboardEvent) => {
+		if (e.key === "Escape") {
+			onEscape?.(e)
+		}
+	}, [onEscape])
+
+	useEffect(() => {
+		const container = containerRef.current
+		if (!container || !active) return
+
+		const handleKeyDownEvent = (e: KeyboardEvent) => {
+			if (e.key === "Escape") {
+				handleKeyDown(e)
+			}
+		}
+
+		container.addEventListener("keydown", handleKeyDownEvent)
+
+		return () => {
+			container.removeEventListener("keydown", handleKeyDownEvent)
+		}
+	}, [active, handleKeyDown])
+
+	return (
+		<div ref={containerRef} data-focus-scope={active ? "active" : "inactive"}>
+			{children}
+		</div>
+	)
+}