@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/dist/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
+	}
+}

package/dist/src/hooks/use-intelligent-preloading.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Intelligent Preloading Hook
+ * Combines user behavior analysis with network conditions for optimal preloading
+ */
+import { MediaSource } from '../types';
+interface IntelligentPreloadingOptions {
+    /** Enable user behavior tracking */
+    trackUserBehavior?: boolean;
+    /** Adapt to network conditions */
+    adaptToNetwork?: boolean;
+    /** Preload strategy */
+    strategy?: 'conservative' | 'balanced' | 'aggressive';
+    /** Maximum number of items to preload */
+    maxPreloadItems?: number;
+    /** Preload radius for playlist items */
+    preloadRadius?: number;
+}
+export declare const useIntelligentPreloading: (sources: MediaSource[], options?: IntelligentPreloadingOptions) => {
+    /**
+     * Manually trigger preloading for specific index
+     */
+    preloadAtIndex: (index: number) => void;
+    /**
+     * Get current user behavior data
+     */
+    getUserBehavior: () => {
+        mouseMovements: number;
+        scrollEvents: number;
+        keyPresses: number;
+        focusEvents: number;
+        timeOnPage: number;
+        engagementScore: number;
+        lastInteraction: number;
+    };
+    /**
+     * Get current network conditions
+     */
+    getNetworkConditions: () => {
+        type: string;
+        downlink: number;
+        effectiveType: string;
+        saveData: boolean;
+        rtt?: undefined;
+    } | {
+        type: any;
+        downlink: any;
+        effectiveType: any;
+        saveData: any;
+        rtt: any;
+    };
+    /**
+     * Clear preloaded items cache
+     */
+    clearCache: () => void;
+    /**
+     * Get preloading statistics
+     */
+    getStats: () => {
+        preloadedItems: number;
+        engagementScore: number;
+        queueLength: number;
+        maxPreloadItems: number;
+    };
+};
+export default useIntelligentPreloading;
+//# sourceMappingURL=use-intelligent-preloading.d.ts.map

package/dist/src/hooks/use-intelligent-preloading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-intelligent-preloading.d.ts","sourceRoot":"","sources":["use-intelligent-preloading.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,UAAU,4BAA4B;IACrC,oCAAoC;IACpC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kCAAkC;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,cAAc,GAAG,UAAU,GAAG,YAAY,CAAC;IACtD,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB;AAkBD,eAAO,MAAM,wBAAwB,GACpC,SAAS,WAAW,EAAE,EACtB,UAAS,4BAAiC;IAwRzC;;OAEG;4BACqB,MAAM;IAI9B;;OAEG;;wBAlTY,MAAM;sBACR,MAAM;oBACR,MAAM;qBACL,MAAM;oBACP,MAAM;yBACD,MAAM;yBACN,MAAM;;IA+StB;;OAEG;;;;;;;;;;;;;;IAGH;;OAEG;;IAKH;;OAEG;;;;;;;CAUJ,CAAC;AAEF,eAAe,wBAAwB,CAAC"}