@therealtinhtute/baroiplayer 1.2.1 → 2.0.0-beta.1

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

@@ -1,575 +0,0 @@
-"use client"
-
-import React, {
-	useCallback,
-	useEffect,
-	useRef,
-	useMemo,
-	useTransition,
-	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 { useMediaActions } from "./use-media-actions"
-import { useMediaOptimistic } from "./use-media-optimistic"
-
-interface UseEnhancedMediaPlayerOptions {
-	src: string | string[]
-	autoPlay?: boolean
-	loop?: boolean
-	muted?: boolean
-	volume?: number
-	preload?: "none" | "metadata" | "auto"
-	crossOrigin?: "anonymous" | "use-credentials"
-	playbackRates?: number[]
-	keyboardControls?: boolean
-	showControls?: boolean
-	customControls?: boolean
-	enablePerformanceMonitoring?: boolean
-	bufferingStrategy?: "aggressive" | "conservative" | "adaptive"
-	// Performance optimizations
-	enableTimeUpdateThrottling?: boolean
-	timeUpdateThrottleMs?: number
-	enableSeekPreview?: boolean
-	preloadStrategy?: "eager" | "lazy" | "progressive"
-	// Event handlers
-	onPlay?: () => void
-	onPause?: () => 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
-export function useEnhancedMediaPlayer(options: UseEnhancedMediaPlayerOptions) {
-	const mediaRef = useRef<HTMLVideoElement | HTMLAudioElement>(null)
-	const containerRef = useRef<HTMLDivElement>(null)
-
-	// React 19 concurrent features
-	const [isPending, startTransition] = useTransition()
-	const [isSeeking, startSeekTransition] = useTransition()
-
-	// Performance monitoring
-	const renderStartTime = React.useRef<number>(0)
-	const frameCount = React.useRef<number>(0)
-	const lastFrameTime = React.useRef<number>(0)
-
-	// Throttled time update
-	const timeUpdateTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
-	const lastTimeUpdate = useRef<number>(0)
-
-	// Store integration
-	const store = useMediaStore()
-	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 - always call hooks unconditionally
-	const enhancedStore = store as unknown as EnhancedMediaStore
-	const optimisticState = useMediaOptimistic(enhancedStore)
-	const actions = useMediaActions(enhancedStore)
-
-	// Performance state
-	const [performanceMetrics, setPerformanceMetrics] = React.useState({
-		frameRate: 0,
-		averageRenderTime: 0,
-		droppedFrames: 0,
-		bufferHealth: 0
-	})
-
-	// Optimistic state updates for immediate UI feedback
-	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))
-		}
-	)
-
-	// Initialize media element with performance optimizations
-	useEffect(() => {
-		const media = mediaRef.current
-		if (!media) return
-
-		// Set initial properties
-		const initProps = {
-			volume: options.volume,
-			muted: options.muted,
-			autoplay: options.autoPlay,
-			loop: options.loop,
-			preload: options.preload,
-			crossOrigin: options.crossOrigin
-		}
-
-		Object.entries(initProps).forEach(([key, value]) => {
-			if (value !== undefined) {
-				;(media as any)[key] = value
-			}
-		})
-
-		// Performance optimizations
-		media.setAttribute("preload", options.preloadStrategy === "eager" ? "auto" : "metadata")
-
-		if (options.bufferingStrategy === "aggressive") {
-			media.setAttribute("buffered", "auto")
-		}
-
-		// Hardware acceleration
-		if (media instanceof HTMLVideoElement) {
-			media.style.willChange = "transform"
-			media.style.transform = "translateZ(0)"
-		}
-	}, [
-		options.volume,
-		options.muted,
-		options.autoPlay,
-		options.loop,
-		options.preload,
-		options.crossOrigin,
-		options.preloadStrategy,
-		options.bufferingStrategy
-	])
-
-	// Optimized event handlers with React 19 patterns
-	const handleTimeUpdate = useCallback(() => {
-		const media = mediaRef.current
-		if (!media) return
-
-		const now = performance.now()
-
-		// Throttle time updates for performance
-		if (options.enableTimeUpdateThrottling !== false) {
-			if (now - lastTimeUpdate.current < (options.timeUpdateThrottleMs || 100)) {
-				return
-			}
-			lastTimeUpdate.current = now
-		}
-
-		startTransition(() => {
-			if (isEnhanced && actions) {
-				actions.setCurrentTime(media.currentTime)
-			}
-		})
-	}, [options.enableTimeUpdateThrottling, options.timeUpdateThrottleMs, isEnhanced, actions])
-
-	const handlePlay = useCallback(() => {
-		startTransition(() => {
-			if (isEnhanced && actions) {
-				actions.play(true) // Optimistic update
-			}
-		})
-		options.onPlay?.()
-	}, [isEnhanced, actions, options.onPlay])
-
-	const handlePause = useCallback(() => {
-		startTransition(() => {
-			if (isEnhanced && actions) {
-				actions.pause(true) // Optimistic update
-			}
-		})
-		options.onPause?.()
-	}, [isEnhanced, actions, options.onPause])
-
-	const handleVolumeChange = useCallback(() => {
-		const media = mediaRef.current
-		if (!media) return
-
-		startTransition(() => {
-			if (isEnhanced && actions) {
-				actions.setVolume(media.volume, true) // Optimistic update
-				media.muted ? actions.mute(true) : actions.unmute(true)
-			}
-		})
-	}, [isEnhanced, actions])
-
-	const handleSeeking = useCallback(() => {
-		startSeekTransition(() => {
-			// Seek operations get their own transition
-		})
-	}, [])
-
-	const handleSeeked = useCallback(() => {
-		// Seek completed
-	}, [])
-
-	const handleProgress = useCallback(() => {
-		const media = mediaRef.current
-		if (!media) return
-
-		startTransition(() => {
-			if (isEnhanced && actions) {
-				actions.setBuffered(media.buffered)
-			}
-		})
-	}, [isEnhanced, actions])
-
-	// Performance monitoring
-	const measureRenderTime = useCallback(() => {
-		const now = performance.now()
-		const deltaTime = now - lastFrameTime.current
-
-		if (deltaTime > 0) {
-			frameCount.current++
-
-			// Calculate frame rate every second
-			if (frameCount.current >= 60) {
-				const fps = Math.round((frameCount.current * 1000) / (now - lastFrameTime.current))
-				setPerformanceMetrics((prev) => ({
-					...prev,
-					frameRate: fps,
-					droppedFrames: Math.max(0, 60 - fps)
-				}))
-				frameCount.current = 0
-				lastFrameTime.current = now
-			}
-		}
-	}, [])
-
-	// Attach event listeners with performance optimization
-	useEffect(() => {
-		const media = mediaRef.current
-		if (!media) return
-
-		// Use passive listeners where possible for better performance
-		const eventListeners = [
-			{ event: "timeupdate", handler: handleTimeUpdate, passive: true },
-			{ event: "play", handler: handlePlay },
-			{ event: "pause", handler: handlePause },
-			{ event: "volumechange", handler: handleVolumeChange },
-			{ event: "seeking", handler: handleSeeking },
-			{ event: "seeked", handler: handleSeeked },
-			{ event: "progress", handler: handleProgress, passive: true },
-			{ event: "loadedmetadata", handler: () => measureRenderTime() },
-			{ event: "loadeddata", handler: () => measureRenderTime() }
-		]
-
-		eventListeners.forEach(({ event, handler, passive }) => {
-			const options = passive ? { passive: true } : {}
-			media.addEventListener(event, handler, options)
-		})
-
-		// Performance monitoring frame loop
-		let rafId: number
-		const performanceLoop = () => {
-			measureRenderTime()
-			rafId = requestAnimationFrame(performanceLoop)
-		}
-
-		if (options.enablePerformanceMonitoring) {
-			performanceLoop()
-		}
-
-		return () => {
-			eventListeners.forEach(({ event, handler }) => {
-				media.removeEventListener(event, handler)
-			})
-			if (rafId) {
-				cancelAnimationFrame(rafId)
-			}
-		}
-	}, [
-		handleTimeUpdate,
-		handlePlay,
-		handlePause,
-		handleVolumeChange,
-		handleSeeking,
-		handleSeeked,
-		handleProgress,
-		measureRenderTime,
-		options.enablePerformanceMonitoring
-	])
-
-	// Optimized control functions with React 19 features
-	const controls = useMemo(() => {
-		const play = async () => {
-			const media = mediaRef.current
-			if (!media) return
-
-			if (isEnhanced && actions) {
-				await actions.play(true) // Optimistic
-			} else {
-				try {
-					await media.play()
-				} catch (error) {
-					console.error("Failed to play media:", error)
-				}
-			}
-		}
-
-		const pause = () => {
-			const media = mediaRef.current
-			if (!media) return
-
-			if (isEnhanced && actions) {
-				actions.pause(true) // Optimistic
-			} else {
-				media.pause()
-			}
-		}
-
-		const toggle = () => {
-			if (isPlaying) {
-				pause()
-			} else {
-				play()
-			}
-		}
-
-		const seek = (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 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 {
-				safeSetCurrentTime(media, clampedTime)
-			}
-		}
-
-		const setVolume = (volume: number) => {
-			const media = mediaRef.current
-			if (!media) return
-
-			const clampedVolume = Math.max(0, Math.min(1, volume))
-
-			if (isEnhanced && actions) {
-				setOptimisticVolume(clampedVolume)
-				startTransition(() => {
-					actions.setVolume(clampedVolume, true)
-				})
-			} else {
-				media.volume = clampedVolume
-			}
-		}
-
-		const toggleMute = () => {
-			const media = mediaRef.current
-			if (!media) return
-
-			if (isEnhanced && actions) {
-				actions.toggleMute(true) // Optimistic
-			} else {
-				media.muted = !media.muted
-			}
-		}
-
-		const enterFullscreen = async () => {
-			const container = containerRef.current
-			if (!container || !document.fullscreenEnabled) return
-
-			try {
-				await container.requestFullscreen()
-				if (isEnhanced && actions) {
-					actions.enterFullscreen(true)
-				}
-			} catch (error) {
-				console.error("Failed to enter fullscreen:", error)
-			}
-		}
-
-		const exitFullscreen = async () => {
-			if (!document.fullscreenElement) return
-
-			try {
-				await document.exitFullscreen()
-				if (isEnhanced && actions) {
-					actions.exitFullscreen(true)
-				}
-			} catch (error) {
-				console.error("Failed to exit fullscreen:", error)
-			}
-		}
-
-		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
-		}
-	}, [
-		isPlaying,
-		isFullscreen,
-		duration,
-		isEnhanced,
-		actions,
-		startTransition,
-		startSeekTransition,
-		setOptimisticVolume
-	])
-
-	// Computed state
-	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
-		mediaRef,
-		containerRef,
-
-		// State
-		state: computedState,
-		actualState: optimisticState?.actualState,
-
-		// Controls
-		controls,
-
-		// Performance metrics
-		performanceMetrics,
-		isTransitioning: isPending || isSeeking,
-
-		// Enhanced features
-		actions: optimisticState,
-		actionState: optimisticState,
-
-		// Optimistic features
-		optimisticState,
-		isEnhanced
-	}
-}