@therealtinhtute/baroiplayer 1.2.1 → 2.0.0-beta.1

package/src/hooks/use-keyboard-shortcuts.ts

@@ -1,255 +0,0 @@
-import { useCallback, useEffect, useRef } from "react"
-
-export interface KeyboardShortcut {
-	key: string
-	ctrl?: boolean
-	shift?: boolean
-	alt?: boolean
-	meta?: boolean
-	action: () => void
-	description?: string
-	enabled?: boolean
-}
-
-export interface UseKeyboardShortcutsOptions {
-	enabled?: boolean
-	capture?: boolean
-	preventDefault?: boolean
-}
-
-const DEFAULT_OPTIONS: UseKeyboardShortcutsOptions = {
-	enabled: true,
-	capture: false,
-	preventDefault: true
-}
-
-export function useKeyboardShortcuts(
-	shortcuts: KeyboardShortcut[],
-	options: UseKeyboardShortcutsOptions = {}
-) {
-	const opts = { ...DEFAULT_OPTIONS, ...options }
-	const enabledRef = useRef(opts.enabled)
-
-	useEffect(() => {
-		enabledRef.current = opts.enabled
-	}, [opts.enabled])
-
-	const handleKeyDown = useCallback(
-		(e: KeyboardEvent) => {
-			if (!enabledRef.current) return
-
-			for (const shortcut of shortcuts) {
-				if (shortcut.enabled === false) continue
-
-				const keyMatch = e.key.toLowerCase() === shortcut.key.toLowerCase()
-				const ctrlMatch = shortcut.ctrl ? e.ctrlKey : !e.ctrlKey && !shortcut.ctrl
-				const shiftMatch = shortcut.shift ? e.shiftKey : !e.shiftKey && !shortcut.shift
-				const altMatch = shortcut.alt ? e.altKey : !e.altKey && !shortcut.alt
-				const metaMatch = shortcut.meta ? e.metaKey : !e.metaKey && !shortcut.meta
-
-				if (keyMatch && ctrlMatch && shiftMatch && altMatch && metaMatch) {
-					if (opts.preventDefault) {
-						e.preventDefault()
-						e.stopPropagation()
-					}
-					shortcut.action()
-					return
-				}
-			}
-		},
-		[shortcuts, opts.preventDefault]
-	)
-
-	useEffect(() => {
-		const target = opts.capture ? window.document.body : window
-
-		target.addEventListener("keydown", handleKeyDown as EventListener)
-
-		return () => {
-			target.removeEventListener("keydown", handleKeyDown as EventListener)
-		}
-	}, [handleKeyDown, opts.capture])
-
-	return shortcuts
-}
-
-export const DEFAULT_SHORTCUTS: KeyboardShortcut[] = [
-	{
-		key: " ",
-		action: () => {},
-		description: "Play/Pause",
-		enabled: true
-	},
-	{
-		key: "k",
-		action: () => {},
-		description: "Play/Pause",
-		enabled: true
-	},
-	{
-		key: "f",
-		action: () => {},
-		description: "Toggle fullscreen",
-		enabled: true
-	},
-	{
-		key: "m",
-		action: () => {},
-		description: "Toggle mute",
-		enabled: true
-	},
-	{
-		key: "ArrowUp",
-		action: () => {},
-		description: "Volume up",
-		enabled: true
-	},
-	{
-		key: "ArrowDown",
-		action: () => {},
-		description: "Volume down",
-		enabled: true
-	},
-	{
-		key: "ArrowLeft",
-		shift: true,
-		action: () => {},
-		description: "Seek backward 10 seconds",
-		enabled: true
-	},
-	{
-		key: "ArrowRight",
-		shift: true,
-		action: () => {},
-		description: "Seek forward 10 seconds",
-		enabled: true
-	},
-	{
-		key: "j",
-		action: () => {},
-		description: "Seek backward 10 seconds",
-		enabled: true
-	},
-	{
-		key: "l",
-		action: () => {},
-		description: "Seek forward 10 seconds",
-		enabled: true
-	},
-	{
-		key: "c",
-		action: () => {},
-		description: "Toggle captions",
-		enabled: true
-	},
-	{
-		key: "?",
-		action: () => {},
-		description: "Show keyboard shortcuts",
-		enabled: true
-	},
-	{
-		key: "Home",
-		action: () => {},
-		description: "Go to beginning",
-		enabled: true
-	},
-	{
-		key: "End",
-		action: () => {},
-		description: "Go to end",
-		enabled: true
-	}
-]
-
-export function useMediaPlayerShortcuts(
-	handlers: {
-		onPlayPause?: () => void
-		onToggleFullscreen?: () => void
-		onToggleMute?: () => void
-		onVolumeUp?: () => void
-		onVolumeDown?: () => void
-		onSeekBackward?: (seconds?: number) => void
-		onSeekForward?: (seconds?: number) => void
-		onToggleCaptions?: () => void
-		onShowShortcuts?: () => void
-		onGoToStart?: () => void
-		onGoToEnd?: () => void
-	},
-	options?: UseKeyboardShortcutsOptions
-) {
-	const shortcuts: KeyboardShortcut[] = [
-		{
-			key: " ",
-			action: handlers.onPlayPause ?? (() => {}),
-			description: "Play/Pause"
-		},
-		{
-			key: "k",
-			action: handlers.onPlayPause ?? (() => {}),
-			description: "Play/Pause"
-		},
-		{
-			key: "f",
-			action: handlers.onToggleFullscreen ?? (() => {}),
-			description: "Toggle fullscreen"
-		},
-		{
-			key: "m",
-			action: handlers.onToggleMute ?? (() => {}),
-			description: "Toggle mute"
-		},
-		{
-			key: "ArrowUp",
-			action: handlers.onVolumeUp ?? (() => {}),
-			description: "Volume up"
-		},
-		{
-			key: "ArrowDown",
-			action: handlers.onVolumeDown ?? (() => {}),
-			description: "Volume down"
-		},
-		{
-			key: "ArrowLeft",
-			action: () => handlers.onSeekBackward?.(10),
-			description: "Seek backward 10 seconds"
-		},
-		{
-			key: "ArrowRight",
-			action: () => handlers.onSeekForward?.(10),
-			description: "Seek forward 10 seconds"
-		},
-		{
-			key: "j",
-			action: () => handlers.onSeekBackward?.(10),
-			description: "Seek backward 10 seconds"
-		},
-		{
-			key: "l",
-			action: () => handlers.onSeekForward?.(10),
-			description: "Seek forward 10 seconds"
-		},
-		{
-			key: "c",
-			action: handlers.onToggleCaptions ?? (() => {}),
-			description: "Toggle captions"
-		},
-		{
-			key: "?",
-			action: handlers.onShowShortcuts ?? (() => {}),
-			description: "Show keyboard shortcuts"
-		},
-		{
-			key: "Home",
-			action: handlers.onGoToStart ?? (() => {}),
-			description: "Go to beginning"
-		},
-		{
-			key: "End",
-			action: handlers.onGoToEnd ?? (() => {}),
-			description: "Go to end"
-		}
-	]
-
-	return useKeyboardShortcuts(shortcuts, options)
-}

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

@@ -1,184 +0,0 @@
-"use client"
-
-import React from "react"
-import type { MediaActionType, MediaState } from "../context/media-context"
-import { MediaActionTypes } from "../context/media-context"
-import type {
-	EnhancedMediaStore,
-	MediaActionState,
-	OptimisticMediaAction
-} from "../context/media-store"
-
-// Action payload types
-export interface MediaActionPayloads {
-	[MediaActionTypes.PLAY]: void
-	[MediaActionTypes.PAUSE]: void
-	[MediaActionTypes.SEEK]: number
-	[MediaActionTypes.SET_VOLUME]: number
-	[MediaActionTypes.MUTE]: void
-	[MediaActionTypes.UNMUTE]: void
-	[MediaActionTypes.TOGGLE_MUTE]: void
-	[MediaActionTypes.SET_DURATION]: number
-	[MediaActionTypes.SET_CURRENT_TIME]: number
-	[MediaActionTypes.SET_BUFFERED]: TimeRanges | null
-	[MediaActionTypes.SET_LOADING]: boolean
-	[MediaActionTypes.SET_ERROR]: string | null
-	[MediaActionTypes.ENTER_FULLSCREEN]: void
-	[MediaActionTypes.EXIT_FULLSCREEN]: void
-	[MediaActionTypes.ENTER_PIP]: void
-	[MediaActionTypes.EXIT_PIP]: void
-	[MediaActionTypes.SET_PLAYBACK_RATE]: number
-	[MediaActionTypes.SET_SUBTITLE_TRACK]: TextTrack | null
-	[MediaActionTypes.SET_RENDITION]: string | null
-	[MediaActionTypes.TOGGLE_SUBTITLES]: void
-	[MediaActionTypes.PREVIEW_TIME]: number | null
-	[MediaActionTypes.CLEAR_PREVIEW]: void
-}
-
-// Enhanced action creator that returns a Promise
-type OptimisticActionCreator<T extends keyof MediaActionPayloads> =
-	MediaActionPayloads[T] extends void
-		? (optimistic?: boolean) => Promise<void>
-		: (payload: MediaActionPayloads[T], optimistic?: boolean) => Promise<void>
-
-// Action creator factory
-function createOptimisticAction<T extends keyof MediaActionPayloads>(
-	type: T,
-	store: EnhancedMediaStore
-): OptimisticActionCreator<T> {
-	return ((payload?: any, optimistic = false) => {
-		const action: OptimisticMediaAction = {
-			type,
-			detail: payload,
-			optimistic,
-			timestamp: Date.now()
-		}
-
-		if (optimistic) {
-			return store.dispatchOptimistic(action)
-		} else {
-			store.dispatch(action)
-			return Promise.resolve()
-		}
-	}) as OptimisticActionCreator<T>
-}
-
-// React 19 useActionState integration
-export function useMediaActionState(store: EnhancedMediaStore) {
-	const [actionState, setActionState] = React.useState<MediaActionState>(store.getActionState())
-
-	// Subscribe to action state changes
-	React.useEffect(() => {
-		const unsubscribe = store.subscribe(() => {
-			const newActionState = store.getActionState()
-			setActionState((current) =>
-				JSON.stringify(current) !== JSON.stringify(newActionState) ? newActionState : current
-			)
-		})
-		return unsubscribe
-	}, [store])
-
-	return actionState
-}
-
-// Media actions hook with React 19 optimistic updates
-export function useMediaActions(store: EnhancedMediaStore) {
-	// Create action creators with optimistic support
-	const actions = React.useMemo(
-		() => ({
-			// Playback actions
-			play: createOptimisticAction(MediaActionTypes.PLAY, store),
-			pause: createOptimisticAction(MediaActionTypes.PAUSE, store),
-			seek: createOptimisticAction(MediaActionTypes.SEEK, store),
-
-			// Volume actions
-			setVolume: createOptimisticAction(MediaActionTypes.SET_VOLUME, store),
-			mute: createOptimisticAction(MediaActionTypes.MUTE, store),
-			unmute: createOptimisticAction(MediaActionTypes.UNMUTE, store),
-			toggleMute: createOptimisticAction(MediaActionTypes.TOGGLE_MUTE, store),
-
-			// Media state actions
-			setDuration: createOptimisticAction(MediaActionTypes.SET_DURATION, store),
-			setCurrentTime: createOptimisticAction(MediaActionTypes.SET_CURRENT_TIME, store),
-			setBuffered: createOptimisticAction(MediaActionTypes.SET_BUFFERED, store),
-			setLoading: createOptimisticAction(MediaActionTypes.SET_LOADING, store),
-			setError: createOptimisticAction(MediaActionTypes.SET_ERROR, store),
-
-			// Display actions
-			enterFullscreen: createOptimisticAction(MediaActionTypes.ENTER_FULLSCREEN, store),
-			exitFullscreen: createOptimisticAction(MediaActionTypes.EXIT_FULLSCREEN, store),
-			enterPiP: createOptimisticAction(MediaActionTypes.ENTER_PIP, store),
-			exitPiP: createOptimisticAction(MediaActionTypes.EXIT_PIP, store),
-
-			// Advanced actions
-			setPlaybackRate: createOptimisticAction(MediaActionTypes.SET_PLAYBACK_RATE, store),
-			setSubtitleTrack: createOptimisticAction(MediaActionTypes.SET_SUBTITLE_TRACK, store),
-			setRendition: createOptimisticAction(MediaActionTypes.SET_RENDITION, store),
-			toggleSubtitles: createOptimisticAction(MediaActionTypes.TOGGLE_SUBTITLES, store),
-
-			// Preview actions
-			previewTime: createOptimisticAction(MediaActionTypes.PREVIEW_TIME, store),
-			clearPreview: createOptimisticAction(MediaActionTypes.CLEAR_PREVIEW, store)
-		}),
-		[store]
-	)
-
-	// Get action state for loading/error handling
-	const actionState = useMediaActionState(store)
-
-	// Convenience methods that commonly use optimistic updates
-	const optimisticActions = React.useMemo(
-		() => ({
-			// These actions benefit from immediate UI feedback
-			togglePlayPause: async (isPlaying: boolean) => {
-				if (isPlaying) {
-					await actions.pause(true) // optimistic
-				} else {
-					await actions.play(true) // optimistic
-				}
-			},
-
-			seekWithPreview: async (time: number) => {
-				// Immediate preview update, then actual seek
-				await actions.previewTime(time, true)
-				await actions.seek(time, true)
-			},
-
-			adjustVolume: async (delta: number, currentVolume: number) => {
-				const newVolume = Math.max(0, Math.min(1, currentVolume + delta))
-				await actions.setVolume(newVolume, true)
-			},
-
-			toggleFullscreenOptimistic: async (isFullscreen: boolean) => {
-				if (isFullscreen) {
-					await actions.exitFullscreen(true)
-				} else {
-					await actions.enterFullscreen(true)
-				}
-			}
-		}),
-		[actions]
-	)
-
-	// Retry failed action
-	const retryLastAction = React.useCallback(async () => {
-		const { lastAction } = actionState
-		if (lastAction && actionState.error) {
-			await store.dispatchOptimistic({
-				...lastAction,
-				retryCount: (lastAction.retryCount || 0) + 1
-			})
-		}
-	}, [store, actionState])
-
-	return {
-		...actions,
-		...optimisticActions,
-		actionState,
-		retryLastAction,
-		isLoading: actionState.pending,
-		hasError: !!actionState.error,
-		errorMessage: actionState.error,
-		retryCount: actionState.retryCount
-	}
-}

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

@@ -1,91 +0,0 @@
-import { cache, use } 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")}`
-	}
-}