@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

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

@@ -27,6 +27,29 @@ interface UseMediaPlayerOptions {
 	onEnded?: () => void
 }
 
+/**
+ * Safely sets currentTime on a media element, ensuring the value is finite
+ */
+function safeSetCurrentTime(media: HTMLVideoElement | HTMLAudioElement, time: number): boolean {
+	if (!Number.isFinite(time)) {
+		console.warn(`Attempted to set non-finite currentTime: ${time}`)
+		return false
+	}
+
+	if (time < 0) {
+		console.warn(`Attempted to set negative currentTime: ${time}`)
+		return false
+	}
+
+	try {
+		media.currentTime = time
+		return true
+	} catch (error) {
+		console.error(`Failed to set currentTime to ${time}:`, error)
+		return false
+	}
+}
+
 export function useMediaPlayer(options: UseMediaPlayerOptions) {
 	const mediaRef = useRef<HTMLVideoElement | HTMLAudioElement>(null)
 	const containerRef = useRef<HTMLDivElement>(null)
@@ -73,73 +96,73 @@ export function useMediaPlayer(options: UseMediaPlayerOptions) {
 	}, [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)
-    	}
+	const handlePlay = useCallback(() => {
+		setPlaying(true)
+		options.onPlay?.()
+	}, [setPlaying, options])
+
+	const handlePause = useCallback(() => {
+		setPlaying(false)
+		options.onPause?.()
+	}, [setPlaying, options])
+
+	const handleTimeUpdate = useCallback(() => {
+		const media = mediaRef.current
+		if (!media) return
+
+		setCurrentTime(media.currentTime)
+		options.onTimeUpdate?.(media.currentTime)
+	}, [setCurrentTime, options])
+
+	const handleDurationChange = useCallback(() => {
+		const media = mediaRef.current
+		if (!media) return
+
+		setDuration(media.duration)
+		options.onDurationChange?.(media.duration)
+	}, [setDuration, options])
+
+	const handleVolumeChange = useCallback(() => {
+		const media = mediaRef.current
+		if (!media) return
+
+		setVolume(media.volume)
+		setMuted(media.muted)
+		options.onVolumeChange?.(media.volume)
+	}, [setVolume, setMuted, options])
+
+	const handleLoadStart = useCallback(() => {
+		setLoading(true)
+		setError(null)
+		options.onLoadStart?.()
+	}, [setLoading, setError, options])
+
+	const handleLoadedData = useCallback(() => {
+		setLoading(false)
+		options.onLoadedData?.()
+	}, [setLoading, options])
+
+	const handleError = useCallback(() => {
+		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)
+	}, [setError, setLoading, options])
+
+	const handleEnded = useCallback(() => {
+		setPlaying(false)
+		options.onEnded?.()
+	}, [setPlaying, options])
+
+	const handleProgress = useCallback(() => {
+		const media = mediaRef.current
+		if (!media) return
+
+		setBuffered(media.buffered)
+	}, [setBuffered])
 
 	// Attach event listeners
 	useEffect(() => {
@@ -183,99 +206,106 @@ export function useMediaPlayer(options: UseMediaPlayerOptions) {
 	])
 
 	// 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()
-    		}
-    	}
+	const play = useCallback(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")
+		}
+	}, [setError])
+
+	const pause = useCallback(() => {
+		const media = mediaRef.current
+		if (!media) return
+
+		media.pause()
+	}, [])
+
+	const toggle = useCallback(() => {
+		if (state.isPlaying) {
+			pause()
+		} else {
+			play()
+		}
+	}, [state.isPlaying, pause, play])
+
+	const seek = useCallback((time: number) => {
+		const media = mediaRef.current
+		if (!media) return
+
+		const duration = Number.isFinite(media.duration) ? media.duration : 0
+		if (duration === 0) {
+			console.warn("Cannot seek: duration is not available")
+			return
+		}
+
+		const clampedTime = Math.max(0, Math.min(time, duration))
+		safeSetCurrentTime(media, clampedTime)
+	}, [])
+
+	const setVolumeControl = useCallback((volume: number) => {
+		const media = mediaRef.current
+		if (!media) return
+
+		const clampedVolume = Math.max(0, Math.min(1, volume))
+		media.volume = clampedVolume
+	}, [])
+
+	const mute = useCallback(() => {
+		const media = mediaRef.current
+		if (!media) return
+
+		media.muted = true
+	}, [])
+
+	const unmute = useCallback(() => {
+		const media = mediaRef.current
+		if (!media) return
+
+		media.muted = false
+	}, [])
+
+	const toggleMute = useCallback(() => {
+		const media = mediaRef.current
+		if (!media) return
+
+		media.muted = !media.muted
+	}, [])
+
+	const enterFullscreen = useCallback(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)
+		}
+	}, [setFullscreen])
+
+	const exitFullscreen = useCallback(async () => {
+		if (!document.fullscreenElement) return
+
+		try {
+			await document.exitFullscreen()
+			setFullscreen(false)
+		} catch (error) {
+			console.error("Failed to exit fullscreen:", error)
+		}
+	}, [setFullscreen])
+
+	const toggleFullscreen = useCallback(() => {
+		if (document.fullscreenElement) {
+			exitFullscreen()
+		} else {
+			enterFullscreen()
+		}
+	}, [exitFullscreen, enterFullscreen])
 
 	// Listen for fullscreen changes
 	useEffect(() => {
@@ -294,7 +324,10 @@ export function useMediaPlayer(options: UseMediaPlayerOptions) {
 		pause,
 		toggle,
 		seek,
+		setCurrentTime: seek,
 		setVolume: setVolumeControl,
+		mute,
+		unmute,
 		toggleMute,
 		enterFullscreen,
 		exitFullscreen,

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

@@ -1,11 +1,11 @@
 "use client"
 
-import { useCallback, useState, useActionState, useOptimistic } from "react"
+import { useActionState, useCallback, useOptimistic, useState } from "react"
+import { useMediaSelector, useMediaStore } from "../context/media-context"
+import type { EnhancedMediaStore } from "../context/media-store"
 import type { 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"
+import { useMediaOptimistic } from "./use-media-optimistic"
 
 // Legacy hook for backward compatibility
 export function useMediaState() {
@@ -22,44 +22,44 @@ export function useMediaState() {
 	})
 
 	const updateState = (updates: Partial<MediaPlayerState>) => {
-    		setState((prev: MediaPlayerState) => ({ ...prev, ...updates }))
-    	}
+		setState((prev: MediaPlayerState) => ({ ...prev, ...updates }))
+	}
 
 	const setPlaying = (isPlaying: boolean) => {
-    			updateState({ isPlaying })
-    		}
+		updateState({ isPlaying })
+	}
 
 	const setCurrentTime = (currentTime: number) => {
-    			updateState({ currentTime })
-    		}
+		updateState({ currentTime })
+	}
 
 	const setDuration = (duration: number) => {
-    			updateState({ duration })
-    		}
+		updateState({ duration })
+	}
 
 	const setVolume = (volume: number) => {
-    			updateState({ volume: Math.max(0, Math.min(1, volume)) })
-    		}
+		updateState({ volume: Math.max(0, Math.min(1, volume)) })
+	}
 
 	const setMuted = (isMuted: boolean) => {
-    			updateState({ isMuted })
-    		}
+		updateState({ isMuted })
+	}
 
 	const setLoading = (isLoading: boolean) => {
-    			updateState({ isLoading })
-    		}
+		updateState({ isLoading })
+	}
 
 	const setFullscreen = (isFullscreen: boolean) => {
-    			updateState({ isFullscreen })
-    		}
+		updateState({ isFullscreen })
+	}
 
 	const setError = (error: string | null) => {
-    			updateState({ error })
-    		}
+		updateState({ error })
+	}
 
 	const setBuffered = (buffered: TimeRanges | null) => {
-    			updateState({ buffered })
-    		}
+		updateState({ buffered })
+	}
 
 	return {
 		state,
@@ -79,29 +79,27 @@ export function useMediaState() {
 // React 19 enhanced media state hook
 export function useEnhancedMediaState() {
 	const store = useMediaStore()
-	
+
 	// Check if this is an enhanced store
-	const isEnhanced = 'getOptimisticState' in store
-	
-	if (!isEnhanced) {
-		// Fall back to regular media state if not enhanced
-		return useMediaState() as any
-	}
-	
-	// Cast to enhanced store type
+	const isEnhanced = "getOptimisticState" in store
+
+	// Always call hooks unconditionally
+	const regularState = useMediaState()
 	const enhancedStore = store as unknown as EnhancedMediaStore
-	
-	// Use React 19 optimistic updates
 	const optimisticState = useMediaOptimistic(enhancedStore)
-	
-	// Get action handlers with React 19 features
 	const actions = useMediaActions(enhancedStore)
-	
+
+	// Return appropriate state based on store type
+	if (!isEnhanced) {
+		// Fall back to regular media state if not enhanced
+		return regularState as any
+	}
+
 	return {
 		// State (optimistic values for immediate UI feedback)
 		state: optimisticState.state,
 		actualState: optimisticState.actualState,
-		
+
 		// Individual state selectors
 		isPlaying: optimisticState.isPlaying,
 		currentTime: optimisticState.currentTime,
@@ -112,52 +110,52 @@ export function useEnhancedMediaState() {
 		isFullscreen: optimisticState.isFullscreen,
 		error: optimisticState.state.error,
 		buffered: optimisticState.state.buffered,
-		
+
 		// Computed values
 		progress: optimisticState.progress,
 		formattedTime: optimisticState.formattedTime,
 		formattedDuration: optimisticState.formattedDuration,
-		
+
 		// Actions with optimistic updates
 		actions,
-		
+
 		// Action state for loading/error handling
 		isActionLoading: actions.isLoading,
 		actionError: actions.errorMessage,
 		retryLastAction: actions.retryLastAction,
-		
+
 		// Legacy compatibility methods
 		updateState: (updates: Partial<MediaPlayerState>) => {
 			// Map legacy updates to new actions
-			if ('isPlaying' in updates) {
+			if ("isPlaying" in updates) {
 				updates.isPlaying ? actions.play() : actions.pause()
 			}
-			if ('currentTime' in updates) {
+			if ("currentTime" in updates) {
 				actions.setCurrentTime(updates.currentTime!)
 			}
-			if ('duration' in updates) {
+			if ("duration" in updates) {
 				actions.setDuration(updates.duration!)
 			}
-			if ('volume' in updates) {
+			if ("volume" in updates) {
 				actions.setVolume(updates.volume!)
 			}
-			if ('isMuted' in updates) {
+			if ("isMuted" in updates) {
 				updates.isMuted ? actions.mute() : actions.unmute()
 			}
-			if ('isLoading' in updates) {
+			if ("isLoading" in updates) {
 				actions.setLoading(updates.isLoading!)
 			}
-			if ('isFullscreen' in updates) {
+			if ("isFullscreen" in updates) {
 				updates.isFullscreen ? actions.enterFullscreen() : actions.exitFullscreen()
 			}
-			if ('error' in updates) {
+			if ("error" in updates) {
 				actions.setError(updates.error ?? null)
 			}
-			if ('buffered' in updates) {
+			if ("buffered" in updates) {
 				actions.setBuffered(updates.buffered ?? null)
 			}
 		},
-		
+
 		// Individual action methods for legacy compatibility
 		setPlaying: (isPlaying: boolean) => {
 			isPlaying ? actions.play(true) : actions.pause(true) // Use optimistic updates
@@ -179,12 +177,18 @@ export function useEnhancedMediaState() {
 
 // Hook that automatically chooses between legacy and enhanced based on context availability
 export function useAdaptiveMediaState() {
-	try {
-		// Try to use the enhanced version if MediaStore context is available
-		return useEnhancedMediaState()
-	} catch (error) {
+	// Always call hooks unconditionally
+	const enhancedState = useEnhancedMediaState()
+	const regularState = useMediaState()
+
+	// Check if we're in an enhanced context by testing a property that would only exist in enhanced mode
+	const isEnhancedContext = "getOptimisticState" in enhancedState
+
+	if (!isEnhancedContext) {
 		// Fall back to legacy version if not in MediaProvider context
-		console.warn('MediaStore context not available, using legacy state management')
-		return useMediaState()
+		console.warn("MediaStore context not available, using legacy state management")
+		return regularState
 	}
+
+	return enhancedState
 }