@therealtinhtute/baroiplayer 1.0.8 → 1.1.0

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

@@ -1,485 +0,0 @@
-"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"
-	// 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
-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 | 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 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,
-			toggleFullscreen: () => {
-				if (document.fullscreenElement) {
-					exitFullscreen()
-				} else {
-					enterFullscreen()
-				}
-			}
-		}
-	}, [
-		isPlaying,
-		duration,
-		isEnhanced,
-		actions,
-		startTransition,
-		startSeekTransition,
-		setOptimisticVolume
-	])
-
-	// 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
-	])
-
-	return {
-		// Refs
-		mediaRef,
-		containerRef,
-
-		// State
-		state: computedState,
-		actualState: optimisticState?.actualState,
-
-		// Controls
-		controls,
-
-		// Performance metrics
-		performanceMetrics,
-		isTransitioning: isPending || isSeeking,
-
-		// Enhanced features
-		actions: optimisticState, // The optimisticState object contains all the actions
-		actionState: optimisticState?.state,
-
-		// Optimistic features
-		optimisticState,
-		isEnhanced
-	}
-}

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

@@ -1,66 +0,0 @@
-/**
- * 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