@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

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

@@ -1,89 +1,91 @@
-import { use, cache } from 'react'
+import { cache, use } from "react"
 
 export interface MediaMetadata {
-  title?: string
-  artist?: string
-  duration: number
-  format: string
-  width?: number
-  height?: number
+	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'}`)
-  }
+	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'
+	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))
+	// 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')}`
-  }
-}
+	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

@@ -2,61 +2,58 @@
 
 import React, { useOptimistic } from "react"
 import type { MediaState } from "../context/media-context"
-import type { OptimisticMediaAction, EnhancedMediaStore } from "../context/media-store"
+import type { EnhancedMediaStore, OptimisticMediaAction } from "../context/media-store"
 
 // Optimistic update reducer function
-function optimisticMediaReducer(
-	state: MediaState, 
-	action: OptimisticMediaAction
-): MediaState {
+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 
+			return {
+				...state,
+				previewTime: null,
+				previewImage: null,
+				previewCoords: null
 			}
-		
+
 		default:
 			return state
 	}
@@ -64,128 +61,129 @@ function optimisticMediaReducer(
 
 // 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 actualState = React.useSyncExternalStore(store.subscribe, store.getState, store.getState)
 
-	const [optimisticState, addOptimistic] = useOptimistic(
-		actualState,
-		optimisticMediaReducer
-	)
+	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()
+	const dispatchOptimistic = React.useCallback(
+		async (action: OptimisticMediaAction) => {
+			// Add optimistic update immediately
+			if (action.optimistic) {
+				addOptimistic(action)
 			}
-			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)
+			// Dispatch the actual action
+			await store.dispatchOptimistic(action)
 		},
+		[store, addOptimistic]
+	)
 
-		// Seek with immediate scrub feedback
-		seekOptimistic: async (time: number) => {
-			const action: OptimisticMediaAction = {
-				type: "SEEK",
-				detail: time,
-				optimistic: true,
-				timestamp: Date.now()
-			}
-			await dispatchOptimistic(action)
-		},
+	// 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)
+			},
 
-		// Mute toggle with immediate icon change
-		toggleMuteOptimistic: async () => {
-			const action: OptimisticMediaAction = {
-				type: "TOGGLE_MUTE",
-				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)
+			},
 
-		// 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)
-		},
+			// Seek with immediate scrub feedback
+			seekOptimistic: async (time: number) => {
+				const action: OptimisticMediaAction = {
+					type: "SEEK",
+					detail: time,
+					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)
-		},
+			// 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()
+			// Subtitle toggle with immediate visibility change
+			toggleSubtitlesOptimistic: async () => {
+				const action: OptimisticMediaAction = {
+					type: "TOGGLE_SUBTITLES",
+					optimistic: true,
+					timestamp: Date.now()
+				}
+				await dispatchOptimistic(action)
 			}
-			await dispatchOptimistic(action)
-		}
-	}), [optimisticState, dispatchOptimistic])
+		}),
+		[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])
+	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,
@@ -199,56 +197,52 @@ export function useMediaOptimistic(store: EnhancedMediaStore) {
 // 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 `${hours}:${String(mins % 60).padStart(2, "0")}:${String(secs).padStart(2, "0")}`
 	}
-	
-	return `${mins}:${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 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 => {
+		stateKeys.forEach((key) => {
 			if (JSON.stringify(actualState[key]) !== JSON.stringify(optimisticState[key])) {
 				diffs.push({
 					key: key as string,
@@ -257,10 +251,10 @@ export function useMediaStateComparison(store: EnhancedMediaStore) {
 				})
 			}
 		})
-		
+
 		return diffs
 	}, [actualState, optimisticState])
-	
+
 	return {
 		actualState,
 		optimisticState,