@therealtinhtute/baroiplayer 1.0.8 → 1.1.0

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

@@ -19,86 +19,86 @@ export function useKeyboardControls({
 	volumeStep = 0.1
 }: UseKeyboardControlsOptions) {
 	const handleKeyDown = (event: KeyboardEvent) => {
-    			if (!enabled) return
-
-    			// Don't handle keyboard events if user is typing in an input
-    			const target = event.target as HTMLElement
-    			if (
-    				target.tagName === "INPUT" ||
-    				target.tagName === "TEXTAREA" ||
-    				target.contentEditable === "true"
-    			) {
-    				return
-    			}
-
-    			switch (event.code) {
-    				case "Space":
-    				case "KeyK":
-    					event.preventDefault()
-    					controls.toggle()
-    					break
-
-    				case "KeyM":
-    					event.preventDefault()
-    					controls.toggleMute()
-    					break
-
-    				case "KeyF":
-    					event.preventDefault()
-    					controls.toggleFullscreen()
-    					break
-
-    				case "ArrowLeft":
-    					event.preventDefault()
-    					controls.seek(Math.max(0, state.currentTime - seekStep))
-    					break
-
-    				case "ArrowRight":
-    					event.preventDefault()
-    					controls.seek(Math.min(state.duration, state.currentTime + seekStep))
-    					break
-
-    				case "ArrowUp":
-    					event.preventDefault()
-    					controls.setVolume(Math.min(1, state.volume + volumeStep))
-    					break
-
-    				case "ArrowDown":
-    					event.preventDefault()
-    					controls.setVolume(Math.max(0, state.volume - volumeStep))
-    					break
-
-    				case "Digit0":
-    				case "Digit1":
-    				case "Digit2":
-    				case "Digit3":
-    				case "Digit4":
-    				case "Digit5":
-    				case "Digit6":
-    				case "Digit7":
-    				case "Digit8":
-    				case "Digit9":
-    					event.preventDefault()
-    					const digit = parseInt(event.code.replace("Digit", ""), 10)
-    					const percentage = digit / 10
-    					controls.seek(state.duration * percentage)
-    					break
-
-    				case "Home":
-    					event.preventDefault()
-    					controls.seek(0)
-    					break
-
-    				case "End":
-    					event.preventDefault()
-    					controls.seek(state.duration)
-    					break
-
-    				default:
-    					// Don't prevent default for unhandled keys
-    					break
-    			}
-    		}
+		if (!enabled) return
+
+		// Don't handle keyboard events if user is typing in an input
+		const target = event.target as HTMLElement
+		if (
+			target.tagName === "INPUT" ||
+			target.tagName === "TEXTAREA" ||
+			target.contentEditable === "true"
+		) {
+			return
+		}
+
+		switch (event.code) {
+			case "Space":
+			case "KeyK":
+				event.preventDefault()
+				controls.toggle()
+				break
+
+			case "KeyM":
+				event.preventDefault()
+				controls.toggleMute()
+				break
+
+			case "KeyF":
+				event.preventDefault()
+				controls.toggleFullscreen()
+				break
+
+			case "ArrowLeft":
+				event.preventDefault()
+				controls.seek(Math.max(0, state.currentTime - seekStep))
+				break
+
+			case "ArrowRight":
+				event.preventDefault()
+				controls.seek(Math.min(state.duration, state.currentTime + seekStep))
+				break
+
+			case "ArrowUp":
+				event.preventDefault()
+				controls.setVolume(Math.min(1, state.volume + volumeStep))
+				break
+
+			case "ArrowDown":
+				event.preventDefault()
+				controls.setVolume(Math.max(0, state.volume - volumeStep))
+				break
+
+			case "Digit0":
+			case "Digit1":
+			case "Digit2":
+			case "Digit3":
+			case "Digit4":
+			case "Digit5":
+			case "Digit6":
+			case "Digit7":
+			case "Digit8":
+			case "Digit9":
+				event.preventDefault()
+				const digit = parseInt(event.code.replace("Digit", ""), 10)
+				const percentage = digit / 10
+				controls.seek(state.duration * percentage)
+				break
+
+			case "Home":
+				event.preventDefault()
+				controls.seek(0)
+				break
+
+			case "End":
+				event.preventDefault()
+				controls.seek(state.duration)
+				break
+
+			default:
+				// Don't prevent default for unhandled keys
+				break
+		}
+	}
 
 	useEffect(() => {
 		if (!enabled) return

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

@@ -0,0 +1,255 @@
+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)
+
+		return () => {
+			target.removeEventListener("keydown", handleKeyDown)
+		}
+	}, [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

@@ -2,8 +2,12 @@
 
 import React from "react"
 import type { MediaActionType, MediaState } from "../context/media-context"
-import type { OptimisticMediaAction, MediaActionState, EnhancedMediaStore } from "../context/media-store"
 import { MediaActionTypes } from "../context/media-context"
+import type {
+	EnhancedMediaStore,
+	MediaActionState,
+	OptimisticMediaAction
+} from "../context/media-store"
 
 // Action payload types
 export interface MediaActionPayloads {
@@ -32,9 +36,10 @@ export interface MediaActionPayloads {
 }
 
 // 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>
+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>(
@@ -66,10 +71,8 @@ export function useMediaActionState(store: EnhancedMediaStore) {
 	React.useEffect(() => {
 		const unsubscribe = store.subscribe(() => {
 			const newActionState = store.getActionState()
-			setActionState(current => 
-				JSON.stringify(current) !== JSON.stringify(newActionState) 
-					? newActionState 
-					: current
+			setActionState((current) =>
+				JSON.stringify(current) !== JSON.stringify(newActionState) ? newActionState : current
 			)
 		})
 		return unsubscribe
@@ -81,75 +84,81 @@ export function useMediaActionState(store: EnhancedMediaStore) {
 // 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])
+	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)
+	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])
+		}),
+		[actions]
+	)
 
 	// Retry failed action
 	const retryLastAction = React.useCallback(async () => {
@@ -172,4 +181,4 @@ export function useMediaActions(store: EnhancedMediaStore) {
 		errorMessage: actionState.error,
 		retryCount: actionState.retryCount
 	}
-}
+}