@therealtinhtute/baroiplayer 1.0.0

package/src/hooks/use-media-metadata.ts

@@ -0,0 +1,89 @@
+import { use, cache } from 'react'
+
+export interface MediaMetadata {
+  title?: string
+  artist?: string
+  duration: number
+  format: string
+  width?: number
+  height?: number
+}
+
+// Cache metadata fetches to prevent duplicate requests
+const fetchMetadata = cache(async (src: string): Promise<MediaMetadata> => {
+  try {
+    // Create a video element to get metadata
+    const video = document.createElement('video')
+    video.crossOrigin = 'anonymous'
+    video.preload = 'metadata'
+    
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        video.removeEventListener('loadedmetadata', onMetadata)
+        video.removeEventListener('error', onError)
+        reject(new Error('Metadata loading timeout'))
+      }, 10000) // 10 second timeout
+      
+      const onMetadata = () => {
+        clearTimeout(timeout)
+        video.removeEventListener('loadedmetadata', onMetadata)
+        video.removeEventListener('error', onError)
+        
+        const metadata: MediaMetadata = {
+          duration: video.duration || 0,
+          format: getFormatFromSrc(src),
+          width: video.videoWidth || undefined,
+          height: video.videoHeight || undefined,
+        }
+        
+        resolve(metadata)
+      }
+      
+      const onError = (error: Event) => {
+        clearTimeout(timeout)
+        video.removeEventListener('loadedmetadata', onMetadata)
+        video.removeEventListener('error', onError)
+        reject(new Error('Failed to load media metadata'))
+      }
+      
+      video.addEventListener('loadedmetadata', onMetadata)
+      video.addEventListener('error', onError)
+      video.src = src
+    })
+  } catch (error) {
+    throw new Error(`Failed to fetch metadata: ${error instanceof Error ? error.message : 'Unknown error'}`)
+  }
+})
+
+function getFormatFromSrc(src: string): string {
+  const url = new URL(src, window.location.href)
+  const pathname = url.pathname.toLowerCase()
+  
+  if (pathname.endsWith('.mp4')) return 'MP4'
+  if (pathname.endsWith('.webm')) return 'WebM'
+  if (pathname.endsWith('.ogg')) return 'OGG'
+  if (pathname.endsWith('.m3u8')) return 'HLS'
+  if (pathname.endsWith('.mpd')) return 'DASH'
+  
+  return 'Unknown'
+}
+
+export function useMediaMetadata(src: string): MediaMetadata {
+  // Use the React 19 use() hook for async data
+  return use(fetchMetadata(src))
+}
+
+// Utility function to format time
+export function formatTime(seconds: number): string {
+  if (!isFinite(seconds) || isNaN(seconds)) return '0:00'
+  
+  const hours = Math.floor(seconds / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+  const secs = Math.floor(seconds % 60)
+  
+  if (hours > 0) {
+    return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+  } else {
+    return `${minutes}:${secs.toString().padStart(2, '0')}`
+  }
+}

package/src/hooks/use-media-optimistic.ts

@@ -0,0 +1,270 @@
+"use client"
+
+import React, { useOptimistic } from "react"
+import type { MediaState } from "../context/media-context"
+import type { OptimisticMediaAction, EnhancedMediaStore } from "../context/media-store"
+
+// Optimistic update reducer function
+function optimisticMediaReducer(
+	state: MediaState, 
+	action: OptimisticMediaAction
+): MediaState {
+	if (!action.optimistic) return state
+
+	// Apply immediate optimistic updates for better UX
+	switch (action.type) {
+		case "PLAY":
+			return { ...state, isPlaying: true, error: null }
+		
+		case "PAUSE":
+			return { ...state, isPlaying: false }
+		
+		case "SEEK":
+			return { ...state, currentTime: action.detail }
+		
+		case "SET_VOLUME":
+			return { ...state, volume: Math.max(0, Math.min(1, action.detail)) }
+		
+		case "MUTE":
+			return { ...state, isMuted: true }
+		
+		case "UNMUTE":
+			return { ...state, isMuted: false }
+		
+		case "TOGGLE_MUTE":
+			return { ...state, isMuted: !state.isMuted }
+		
+		case "ENTER_FULLSCREEN":
+			return { ...state, isFullscreen: true }
+		
+		case "EXIT_FULLSCREEN":
+			return { ...state, isFullscreen: false }
+		
+		case "SET_PLAYBACK_RATE":
+			return { ...state, playbackRate: action.detail }
+		
+		case "TOGGLE_SUBTITLES":
+			return { ...state, subtitlesShowing: !state.subtitlesShowing }
+		
+		case "PREVIEW_TIME":
+			return { ...state, previewTime: action.detail }
+		
+		case "CLEAR_PREVIEW":
+			return { 
+				...state, 
+				previewTime: null, 
+				previewImage: null, 
+				previewCoords: null 
+			}
+		
+		default:
+			return state
+	}
+}
+
+// Media optimistic state hook using React 19's useOptimistic
+export function useMediaOptimistic(store: EnhancedMediaStore) {
+	const actualState = React.useSyncExternalStore(
+		store.subscribe,
+		store.getState,
+		store.getState
+	)
+
+	const [optimisticState, addOptimistic] = useOptimistic(
+		actualState,
+		optimisticMediaReducer
+	)
+
+	// Enhanced dispatch that uses optimistic updates
+	const dispatchOptimistic = React.useCallback(async (action: OptimisticMediaAction) => {
+		// Add optimistic update immediately
+		if (action.optimistic) {
+			addOptimistic(action)
+		}
+		
+		// Dispatch the actual action
+		await store.dispatchOptimistic(action)
+	}, [store, addOptimistic])
+
+	// Quick actions with optimistic updates
+	const optimisticActions = React.useMemo(() => ({
+		// Play/Pause with immediate feedback
+		togglePlayPause: async () => {
+			const action: OptimisticMediaAction = {
+				type: optimisticState.isPlaying ? "PAUSE" : "PLAY",
+				optimistic: true,
+				timestamp: Date.now()
+			}
+			await dispatchOptimistic(action)
+		},
+
+		// Volume control with immediate slider feedback
+		setVolumeOptimistic: async (volume: number) => {
+			const action: OptimisticMediaAction = {
+				type: "SET_VOLUME",
+				detail: Math.max(0, Math.min(1, volume)),
+				optimistic: true,
+				timestamp: Date.now()
+			}
+			await dispatchOptimistic(action)
+		},
+
+		// Seek with immediate scrub feedback
+		seekOptimistic: async (time: number) => {
+			const action: OptimisticMediaAction = {
+				type: "SEEK",
+				detail: time,
+				optimistic: true,
+				timestamp: Date.now()
+			}
+			await dispatchOptimistic(action)
+		},
+
+		// Mute toggle with immediate icon change
+		toggleMuteOptimistic: async () => {
+			const action: OptimisticMediaAction = {
+				type: "TOGGLE_MUTE",
+				optimistic: true,
+				timestamp: Date.now()
+			}
+			await dispatchOptimistic(action)
+		},
+
+		// Fullscreen toggle with immediate layout change
+		toggleFullscreenOptimistic: async () => {
+			const action: OptimisticMediaAction = {
+				type: optimisticState.isFullscreen ? "EXIT_FULLSCREEN" : "ENTER_FULLSCREEN",
+				optimistic: true,
+				timestamp: Date.now()
+			}
+			await dispatchOptimistic(action)
+		},
+
+		// Playback rate with immediate feedback
+		setPlaybackRateOptimistic: async (rate: number) => {
+			const action: OptimisticMediaAction = {
+				type: "SET_PLAYBACK_RATE",
+				detail: rate,
+				optimistic: true,
+				timestamp: Date.now()
+			}
+			await dispatchOptimistic(action)
+		},
+
+		// Subtitle toggle with immediate visibility change
+		toggleSubtitlesOptimistic: async () => {
+			const action: OptimisticMediaAction = {
+				type: "TOGGLE_SUBTITLES",
+				optimistic: true,
+				timestamp: Date.now()
+			}
+			await dispatchOptimistic(action)
+		}
+	}), [optimisticState, dispatchOptimistic])
+
+	// State selectors that return optimistic values
+	const selectors = React.useMemo(() => ({
+		isPlaying: optimisticState.isPlaying,
+		currentTime: optimisticState.currentTime,
+		volume: optimisticState.volume,
+		isMuted: optimisticState.isMuted,
+		isFullscreen: optimisticState.isFullscreen,
+		playbackRate: optimisticState.playbackRate,
+		subtitlesShowing: optimisticState.subtitlesShowing,
+		previewTime: optimisticState.previewTime,
+		
+		// Computed values
+		progress: optimisticState.duration > 0 
+			? optimisticState.currentTime / optimisticState.duration 
+			: 0,
+		
+		formattedTime: formatTime(optimisticState.currentTime),
+		formattedDuration: formatTime(optimisticState.duration),
+		
+		// State checks
+		canPlay: !optimisticState.isLoading && !optimisticState.error,
+		hasError: !!optimisticState.error,
+		isBuffering: optimisticState.isLoading
+	}), [optimisticState])
+
+	return {
+		state: optimisticState,
+		actualState,
+		...selectors,
+		...optimisticActions,
+		dispatchOptimistic
+	}
+}
+
+// Time formatting utility
+function formatTime(seconds: number): string {
+	if (!seconds || !isFinite(seconds)) return "0:00"
+	
+	const mins = Math.floor(seconds / 60)
+	const secs = Math.floor(seconds % 60)
+	const hours = Math.floor(mins / 60)
+	
+	if (hours > 0) {
+		return `${hours}:${String(mins % 60).padStart(2, '0')}:${String(secs).padStart(2, '0')}`
+	}
+	
+	return `${mins}:${String(secs).padStart(2, '0')}`
+}
+
+// Hook for components that need to detect optimistic updates
+export function useOptimisticUpdates(store: EnhancedMediaStore) {
+	const [hasOptimisticUpdates, setHasOptimisticUpdates] = React.useState(false)
+	
+	React.useEffect(() => {
+		const unsubscribe = store.subscribe(() => {
+			const actualState = store.getState()
+			const optimisticState = store.getOptimisticState()
+			
+			const hasUpdates = JSON.stringify(actualState) !== JSON.stringify(optimisticState)
+			setHasOptimisticUpdates(hasUpdates)
+		})
+		
+		return unsubscribe
+	}, [store])
+	
+	return hasOptimisticUpdates
+}
+
+// Hook to get both actual and optimistic state for debugging
+export function useMediaStateComparison(store: EnhancedMediaStore) {
+	const actualState = React.useSyncExternalStore(
+		store.subscribe,
+		store.getState,
+		store.getState
+	)
+	
+	const optimisticState = React.useSyncExternalStore(
+		store.subscribe,
+		store.getOptimisticState,
+		store.getOptimisticState
+	)
+	
+	const differences = React.useMemo(() => {
+		const diffs: any[] = []
+		
+		const stateKeys = Object.keys(actualState) as Array<keyof MediaState>
+		stateKeys.forEach(key => {
+			if (JSON.stringify(actualState[key]) !== JSON.stringify(optimisticState[key])) {
+				diffs.push({
+					key: key as string,
+					actual: actualState[key],
+					optimistic: optimisticState[key]
+				})
+			}
+		})
+		
+		return diffs
+	}, [actualState, optimisticState])
+	
+	return {
+		actualState,
+		optimisticState,
+		differences,
+		hasOptimisticUpdates: differences.length > 0
+	}
+}

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

@@ -0,0 +1,312 @@
+"use client"
+
+import { useCallback, useEffect, useRef } from "react"
+import type { MediaPlayerControls } from "../types/index"
+import { useMediaState } from "./use-media-state"
+
+interface UseMediaPlayerOptions {
+	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
+	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
+}
+
+export function useMediaPlayer(options: UseMediaPlayerOptions) {
+	const mediaRef = useRef<HTMLVideoElement | HTMLAudioElement>(null)
+	const containerRef = useRef<HTMLDivElement>(null)
+
+	const {
+		state,
+		setPlaying,
+		setCurrentTime,
+		setDuration,
+		setVolume,
+		setMuted,
+		setLoading,
+		setFullscreen,
+		setError,
+		setBuffered
+	} = useMediaState()
+
+	// Initialize media element with options
+	useEffect(() => {
+		const media = mediaRef.current
+		if (!media) return
+
+		// Set initial properties
+		if (options.volume !== undefined) {
+			media.volume = options.volume
+			setVolume(options.volume)
+		}
+		if (options.muted !== undefined) {
+			media.muted = options.muted
+			setMuted(options.muted)
+		}
+		if (options.autoPlay !== undefined) {
+			media.autoplay = options.autoPlay
+		}
+		if (options.loop !== undefined) {
+			media.loop = options.loop
+		}
+		if (options.preload !== undefined) {
+			media.preload = options.preload
+		}
+		if (options.crossOrigin !== undefined) {
+			media.crossOrigin = options.crossOrigin
+		}
+	}, [options, setVolume, setMuted])
+
+	// Event handlers
+	const handlePlay = () => {
+    		setPlaying(true)
+    		options.onPlay?.()
+    	}
+
+	const handlePause = () => {
+    		setPlaying(false)
+    		options.onPause?.()
+    	}
+
+	const handleTimeUpdate = () => {
+    		const media = mediaRef.current
+    		if (!media) return
+
+    		setCurrentTime(media.currentTime)
+    		options.onTimeUpdate?.(media.currentTime)
+    	}
+
+	const handleDurationChange = () => {
+    		const media = mediaRef.current
+    		if (!media) return
+
+    		setDuration(media.duration)
+    		options.onDurationChange?.(media.duration)
+    	}
+
+	const handleVolumeChange = () => {
+    		const media = mediaRef.current
+    		if (!media) return
+
+    		setVolume(media.volume)
+    		setMuted(media.muted)
+    		options.onVolumeChange?.(media.volume)
+    	}
+
+	const handleLoadStart = () => {
+    		setLoading(true)
+    		setError(null)
+    		options.onLoadStart?.()
+    	}
+
+	const handleLoadedData = () => {
+    		setLoading(false)
+    		options.onLoadedData?.()
+    	}
+
+	const handleError = () => {
+    		const media = mediaRef.current
+    		if (!media) return
+
+    		const errorMessage = media.error?.message || "An error occurred while loading the media"
+    		setError(errorMessage)
+    		setLoading(false)
+    		options.onError?.(errorMessage)
+    	}
+
+	const handleEnded = () => {
+    		setPlaying(false)
+    		options.onEnded?.()
+    	}
+
+	const handleProgress = () => {
+    		const media = mediaRef.current
+    		if (!media) return
+
+    		setBuffered(media.buffered)
+    	}
+
+	// Attach event listeners
+	useEffect(() => {
+		const media = mediaRef.current
+		if (!media) return
+
+		media.addEventListener("play", handlePlay)
+		media.addEventListener("pause", handlePause)
+		media.addEventListener("timeupdate", handleTimeUpdate)
+		media.addEventListener("durationchange", handleDurationChange)
+		media.addEventListener("volumechange", handleVolumeChange)
+		media.addEventListener("loadstart", handleLoadStart)
+		media.addEventListener("loadeddata", handleLoadedData)
+		media.addEventListener("error", handleError)
+		media.addEventListener("ended", handleEnded)
+		media.addEventListener("progress", handleProgress)
+
+		return () => {
+			media.removeEventListener("play", handlePlay)
+			media.removeEventListener("pause", handlePause)
+			media.removeEventListener("timeupdate", handleTimeUpdate)
+			media.removeEventListener("durationchange", handleDurationChange)
+			media.removeEventListener("volumechange", handleVolumeChange)
+			media.removeEventListener("loadstart", handleLoadStart)
+			media.removeEventListener("loadeddata", handleLoadedData)
+			media.removeEventListener("error", handleError)
+			media.removeEventListener("ended", handleEnded)
+			media.removeEventListener("progress", handleProgress)
+		}
+	}, [
+		handlePlay,
+		handlePause,
+		handleTimeUpdate,
+		handleDurationChange,
+		handleVolumeChange,
+		handleLoadStart,
+		handleLoadedData,
+		handleError,
+		handleEnded,
+		handleProgress
+	])
+
+	// Control functions
+	const play = async () => {
+    		const media = mediaRef.current
+    		if (!media) return
+
+    		try {
+    			await media.play()
+    		} catch (error) {
+    			console.error("Failed to play media:", error)
+    			setError("Failed to play media")
+    		}
+    	}
+
+	const pause = () => {
+    		const media = mediaRef.current
+    		if (!media) return
+
+    		media.pause()
+    	}
+
+	const toggle = () => {
+    		if (state.isPlaying) {
+    			pause()
+    		} else {
+    			play()
+    		}
+    	}
+
+	const seek = (time: number) => {
+    		const media = mediaRef.current
+    		if (!media) return
+
+    		media.currentTime = Math.max(0, Math.min(time, media.duration || 0))
+    	}
+
+	const setVolumeControl = (volume: number) => {
+    		const media = mediaRef.current
+    		if (!media) return
+
+    		const clampedVolume = Math.max(0, Math.min(1, volume))
+    		media.volume = clampedVolume
+    	}
+
+	const mute = () => {
+    		const media = mediaRef.current
+    		if (!media) return
+
+    		media.muted = true
+    	}
+
+	const unmute = () => {
+    		const media = mediaRef.current
+    		if (!media) return
+
+    		media.muted = false
+    	}
+
+	const toggleMute = () => {
+    		const media = mediaRef.current
+    		if (!media) return
+
+    		media.muted = !media.muted
+    	}
+
+	const enterFullscreen = async () => {
+    		const container = containerRef.current
+    		if (!container || !document.fullscreenEnabled) return
+
+    		try {
+    			await container.requestFullscreen()
+    			setFullscreen(true)
+    		} catch (error) {
+    			console.error("Failed to enter fullscreen:", error)
+    		}
+    	}
+
+	const exitFullscreen = async () => {
+    		if (!document.fullscreenElement) return
+
+    		try {
+    			await document.exitFullscreen()
+    			setFullscreen(false)
+    		} catch (error) {
+    			console.error("Failed to exit fullscreen:", error)
+    		}
+    	}
+
+	const toggleFullscreen = () => {
+    		if (document.fullscreenElement) {
+    			exitFullscreen()
+    		} else {
+    			enterFullscreen()
+    		}
+    	}
+
+	// Listen for fullscreen changes
+	useEffect(() => {
+		const handleFullscreenChange = () => {
+			setFullscreen(!!document.fullscreenElement)
+		}
+
+		document.addEventListener("fullscreenchange", handleFullscreenChange)
+		return () => {
+			document.removeEventListener("fullscreenchange", handleFullscreenChange)
+		}
+	}, [setFullscreen])
+
+	const controls: MediaPlayerControls = {
+		play,
+		pause,
+		toggle,
+		seek,
+		setVolume: setVolumeControl,
+		mute,
+		unmute,
+		toggleMute,
+		enterFullscreen,
+		exitFullscreen,
+		toggleFullscreen
+	}
+
+	return {
+		state,
+		controls,
+		mediaRef,
+		containerRef
+	}
+}