@therealtinhtute/baroiplayer 1.0.0

package/src/hooks/core/index.ts

@@ -0,0 +1,47 @@
+// Core Media Player Hooks
+export { useKeyboardControls } from "../use-keyboard-controls";
+export { useMediaPlayer } from "../use-media-player";
+
+// Media State Hooks
+export {
+  useAdaptiveMediaState,
+  useEnhancedMediaState,
+  useMediaState
+} from "../use-media-state";
+
+// React 19 Advanced Hooks
+export {
+  useMediaActions,
+  useMediaActionState
+} from "../use-media-actions";
+export type { MediaActionPayloads } from "../use-media-actions";
+
+export {
+  useMediaOptimistic,
+  useMediaStateComparison,
+  useOptimisticUpdates
+} from "../use-media-optimistic";
+
+// Mobile-First Touch Gestures
+export {
+  useMediaGestures,
+  useTouchGestures
+} from "../use-touch-gestures";
+export type {
+  GestureConfig,
+  GestureEvent,
+  GestureType
+} from "../use-touch-gestures";
+
+// Refactored Hooks (React 19 optimized)
+export { useVideoPlayer } from "../useVideoPlayer";
+export { useSubtitles } from "../useSubtitles";
+export { useEnhancedSubtitles } from "../useEnhancedSubtitles";
+export type { SubtitleTrack, UseEnhancedSubtitlesOptions } from "../useEnhancedSubtitles";
+export { useMediaControls } from "../useMediaControls";
+export { useScreenshot } from "../useScreenshot";
+export type { VideoState, VideoControls } from "../useVideoPlayer";
+
+// Specialized hooks
+export { useMediaMetadata } from "../use-media-metadata";
+export { useOptimisticControls } from "../use-optimistic-controls";

package/src/hooks/legacy.ts

@@ -0,0 +1,27 @@
+/**
+ * Legacy Hooks (Deprecated)
+ * These hooks are wrapped with deprecation warnings
+ */
+
+import { showDeprecationWarning } from "../lib/deprecation"
+
+// Import current hooks
+import { useMediaPlayer } from "./use-media-player"
+import { useSubtitles } from "./useSubtitles"
+
+// Legacy hook wrappers with deprecation warnings
+export function useVideoPlayer(props: any) {
+	showDeprecationWarning(
+		"useVideoPlayer",
+		"useMediaPlayer (the primary media player hook)"
+	)
+	return useMediaPlayer(props)
+}
+
+export function useEnhancedSubtitles(props: any) {
+	showDeprecationWarning(
+		"useEnhancedSubtitles",
+		"useSubtitles (the current subtitle hook)"
+	)
+	return useSubtitles(props)
+}

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

@@ -0,0 +1,468 @@
+"use client"
+
+import React, {
+	useCallback,
+	useEffect,
+	useRef,
+	useMemo,
+	useTransition,
+	useOptimistic,
+	useActionState
+} from "react"
+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"
+
+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"
+}
+
+// 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<NodeJS.Timeout>()
+	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 if available
+	const enhancedStore = store as unknown as EnhancedMediaStore
+	const optimisticState = isEnhanced ? useMediaOptimistic(enhancedStore) : null
+	const actions = isEnhanced ? useMediaActions(enhancedStore) : null
+
+	// 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 clampedTime = Math.max(0, Math.min(time, duration || 0))
+
+			if (isEnhanced && actions) {
+				startSeekTransition(() => {
+					actions.seek(clampedTime, true) // Optimistic
+				})
+			} else {
+				media.currentTime = 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)
+			}
+		}
+
+		return {
+			play,
+			pause,
+			toggle,
+			seek,
+			setVolume,
+			toggleMute,
+			enterFullscreen,
+			exitFullscreen
+		}
+	}, [
+		isPlaying,
+		duration,
+		isEnhanced,
+		actions,
+		startTransition,
+		startSeekTransition,
+		setOptimisticVolume
+	])
+
+	// Computed state
+	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
+		mediaRef,
+		containerRef,
+
+		// State
+		state: computedState,
+		actualState: optimisticState?.actualState,
+
+		// Controls
+		controls,
+
+		// Performance metrics
+		performanceMetrics,
+		isTransitioning: isPending || isSeeking,
+
+		// Enhanced features
+		actions: optimisticState?.actions,
+		actionState: optimisticState?.actionState,
+
+		// Optimistic features
+		optimisticState,
+		isEnhanced
+	}
+}