@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

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

@@ -1,264 +0,0 @@
-"use client"
-
-import React, { useOptimistic } from "react"
-import type { MediaState } from "../context/media-context"
-import type { EnhancedMediaStore, OptimisticMediaAction } 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

@@ -1,343 +0,0 @@
-"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
-}
-
-/**
- * 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)
-
-	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 = 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(() => {
-		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 = 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(() => {
-		const handleFullscreenChange = () => {
-			setFullscreen(!!document.fullscreenElement)
-		}
-
-		document.addEventListener("fullscreenchange", handleFullscreenChange)
-		return () => {
-			document.removeEventListener("fullscreenchange", handleFullscreenChange)
-		}
-	}, [setFullscreen])
-
-	const controls: MediaPlayerControls = {
-		play,
-		pause,
-		toggle,
-		seek,
-		setCurrentTime: seek,
-		setVolume: setVolumeControl,
-		mute,
-		unmute,
-		toggleMute,
-		enterFullscreen,
-		exitFullscreen,
-		toggleFullscreen
-	}
-
-	return {
-		state,
-		controls,
-		mediaRef,
-		containerRef
-	}
-}