@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/src/hooks/__tests__/use-media-state.test.tsx

@@ -1,316 +0,0 @@
-import { act, renderHook } from '@testing-library/react'
-import type { ReactNode } from 'react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { MediaProvider } from '../../context/media-provider'
-import { useAdaptiveMediaState, useEnhancedMediaState, useMediaState } from '../use-media-state'
-
-describe('useMediaState', () => {
-	describe('Basic State Management', () => {
-		it('should initialize with default state', () => {
-			const { result } = renderHook(() => useMediaState())
-
-			expect(result.current.state).toEqual({
-				isPlaying: false,
-				currentTime: 0,
-				duration: 0,
-				volume: 1,
-				isMuted: false,
-				isLoading: false,
-				isFullscreen: false,
-				error: null,
-				buffered: null
-			})
-		})
-
-		it('should provide state update functions', () => {
-			const { result } = renderHook(() => useMediaState())
-
-			expect(typeof result.current.updateState).toBe('function')
-			expect(typeof result.current.setPlaying).toBe('function')
-			expect(typeof result.current.setCurrentTime).toBe('function')
-			expect(typeof result.current.setDuration).toBe('function')
-			expect(typeof result.current.setVolume).toBe('function')
-			expect(typeof result.current.setMuted).toBe('function')
-			expect(typeof result.current.setLoading).toBe('function')
-			expect(typeof result.current.setFullscreen).toBe('function')
-			expect(typeof result.current.setError).toBe('function')
-			expect(typeof result.current.setBuffered).toBe('function')
-		})
-	})
-
-	describe('State Updates', () => {
-		it('should update playing state', () => {
-			const { result } = renderHook(() => useMediaState())
-
-			act(() => {
-				result.current.setPlaying(true)
-			})
-
-			expect(result.current.state.isPlaying).toBe(true)
-
-			act(() => {
-				result.current.setPlaying(false)
-			})
-
-			expect(result.current.state.isPlaying).toBe(false)
-		})
-
-		it('should update current time', () => {
-			const { result } = renderHook(() => useMediaState())
-
-			act(() => {
-				result.current.setCurrentTime(42)
-			})
-
-			expect(result.current.state.currentTime).toBe(42)
-		})
-
-		it('should update duration', () => {
-			const { result } = renderHook(() => useMediaState())
-
-			act(() => {
-				result.current.setDuration(120)
-			})
-
-			expect(result.current.state.duration).toBe(120)
-		})
-
-		it('should update and clamp volume', () => {
-			const { result } = renderHook(() => useMediaState())
-
-			// Normal volume
-			act(() => {
-				result.current.setVolume(0.5)
-			})
-			expect(result.current.state.volume).toBe(0.5)
-
-			// Volume above 1 should clamp to 1
-			act(() => {
-				result.current.setVolume(1.5)
-			})
-			expect(result.current.state.volume).toBe(1)
-
-			// Volume below 0 should clamp to 0
-			act(() => {
-				result.current.setVolume(-0.5)
-			})
-			expect(result.current.state.volume).toBe(0)
-		})
-
-		it('should update muted state', () => {
-			const { result } = renderHook(() => useMediaState())
-
-			act(() => {
-				result.current.setMuted(true)
-			})
-			expect(result.current.state.isMuted).toBe(true)
-
-			act(() => {
-				result.current.setMuted(false)
-			})
-			expect(result.current.state.isMuted).toBe(false)
-		})
-
-		it('should update loading state', () => {
-			const { result } = renderHook(() => useMediaState())
-
-			act(() => {
-				result.current.setLoading(true)
-			})
-			expect(result.current.state.isLoading).toBe(true)
-
-			act(() => {
-				result.current.setLoading(false)
-			})
-			expect(result.current.state.isLoading).toBe(false)
-		})
-
-		it('should update fullscreen state', () => {
-			const { result } = renderHook(() => useMediaState())
-
-			act(() => {
-				result.current.setFullscreen(true)
-			})
-			expect(result.current.state.isFullscreen).toBe(true)
-
-			act(() => {
-				result.current.setFullscreen(false)
-			})
-			expect(result.current.state.isFullscreen).toBe(false)
-		})
-
-		it('should update error state', () => {
-			const { result } = renderHook(() => useMediaState())
-
-			act(() => {
-				result.current.setError('Network error')
-			})
-			expect(result.current.state.error).toBe('Network error')
-
-			act(() => {
-				result.current.setError(null)
-			})
-			expect(result.current.state.error).toBeNull()
-		})
-
-		it('should update buffered state', () => {
-			const { result } = renderHook(() => useMediaState())
-			const mockBuffered = {
-				length: 1,
-				start: () => 0,
-				end: () => 50
-			} as TimeRanges
-
-			act(() => {
-				result.current.setBuffered(mockBuffered)
-			})
-			expect(result.current.state.buffered).toBe(mockBuffered)
-
-			act(() => {
-				result.current.setBuffered(null)
-			})
-			expect(result.current.state.buffered).toBeNull()
-		})
-
-		it('should batch update multiple state properties', () => {
-			const { result } = renderHook(() => useMediaState())
-
-			act(() => {
-				result.current.updateState({
-					isPlaying: true,
-					currentTime: 30,
-					volume: 0.8,
-					isMuted: false
-				})
-			})
-
-			expect(result.current.state).toMatchObject({
-				isPlaying: true,
-				currentTime: 30,
-				volume: 0.8,
-				isMuted: false
-			})
-		})
-	})
-
-	describe('State Immutability', () => {
-		it('should not mutate previous state', () => {
-			const { result } = renderHook(() => useMediaState())
-
-			const previousState = result.current.state
-
-			act(() => {
-				result.current.setPlaying(true)
-			})
-
-			expect(previousState.isPlaying).toBe(false)
-			expect(result.current.state.isPlaying).toBe(true)
-			expect(result.current.state).not.toBe(previousState)
-		})
-	})
-})
-
-describe('useEnhancedMediaState', () => {
-	const wrapper = ({ children }: { children: ReactNode }) => (
-		<MediaProvider>{children}</MediaProvider>
-	)
-
-	it('should provide enhanced state with MediaProvider', () => {
-		const { result } = renderHook(() => useEnhancedMediaState(), { wrapper })
-
-		expect(result.current).toBeDefined()
-		expect(result.current.state).toBeDefined()
-		expect(result.current.actions).toBeDefined()
-	})
-
-	it('should fall back to legacy state if store is not enhanced', () => {
-		// Test fallback behavior when not in enhanced store context
-		const { result } = renderHook(() => useEnhancedMediaState(), { wrapper })
-
-		expect(result.current.state).toBeDefined()
-	})
-
-	it('should provide optimistic state values', () => {
-		const { result } = renderHook(() => useEnhancedMediaState(), { wrapper })
-
-		expect(result.current).toHaveProperty('state')
-		expect(result.current).toHaveProperty('actualState')
-	})
-
-	it('should provide computed values', () => {
-		const { result } = renderHook(() => useEnhancedMediaState(), { wrapper })
-
-		expect(result.current).toHaveProperty('progress')
-		expect(result.current).toHaveProperty('formattedTime')
-		expect(result.current).toHaveProperty('formattedDuration')
-	})
-
-	it('should provide action state for loading/error handling', () => {
-		const { result } = renderHook(() => useEnhancedMediaState(), { wrapper })
-
-		expect(result.current).toHaveProperty('isActionLoading')
-		expect(result.current).toHaveProperty('actionError')
-		expect(result.current).toHaveProperty('retryLastAction')
-	})
-
-	it('should provide legacy compatibility methods', () => {
-		const { result } = renderHook(() => useEnhancedMediaState(), { wrapper })
-
-		expect(typeof result.current.updateState).toBe('function')
-		expect(typeof result.current.setPlaying).toBe('function')
-		expect(typeof result.current.setCurrentTime).toBe('function')
-		expect(typeof result.current.setDuration).toBe('function')
-		expect(typeof result.current.setVolume).toBe('function')
-		expect(typeof result.current.setMuted).toBe('function')
-	})
-
-	it('should map legacy updates to new actions', () => {
-		const { result } = renderHook(() => useEnhancedMediaState(), { wrapper })
-
-		// Should not throw
-		act(() => {
-			result.current.updateState({
-				isPlaying: true,
-				volume: 0.5,
-				isMuted: false
-			})
-		})
-
-		expect(result.current.actions).toBeDefined()
-	})
-})
-
-describe('useAdaptiveMediaState', () => {
-	it('should use enhanced state when MediaProvider is available', () => {
-		const wrapper = ({ children }: { children: ReactNode }) => (
-			<MediaProvider>{children}</MediaProvider>
-		)
-
-		const { result } = renderHook(() => useAdaptiveMediaState(), { wrapper })
-
-		// Should have enhanced features
-		expect(result.current).toHaveProperty('actions')
-		expect(result.current).toHaveProperty('isActionLoading')
-	})
-
-	it('should fall back to legacy state without MediaProvider', () => {
-		const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-
-		const { result } = renderHook(() => useAdaptiveMediaState())
-
-		expect(result.current.state).toBeDefined()
-
-		consoleWarnSpy.mockRestore()
-	})
-
-	it('should handle context errors gracefully', () => {
-		const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-
-		// Should not throw
-		const { result } = renderHook(() => useAdaptiveMediaState())
-
-		expect(result.current).toBeDefined()
-
-		consoleWarnSpy.mockRestore()
-	})
-})

package/src/hooks/accessibility/index.ts

@@ -1,27 +0,0 @@
-export {
-	useKeyboardShortcuts,
-	createMediaKeyboardShortcuts,
-	type KeyboardShortcut,
-	type UseKeyboardShortcutsOptions
-} from "./use-keyboard-shortcuts"
-
-export {
-	useFocusManagement,
-	useMediaPlayerFocus,
-	type FocusOptions,
-	type UseFocusManagementOptions
-} from "./use-focus-management"
-
-export {
-	useScreenReader,
-	useMediaScreenReader,
-	type AnnouncementPriority,
-	type UseScreenReaderOptions
-} from "./use-screen-reader"
-
-export {
-	useAccessibilityPreferences,
-	useAccessibilityStyles,
-	useFocusVisible,
-	type AccessibilityPreferences
-} from "./use-accessibility-preferences"

package/src/hooks/accessibility/use-accessibility-preferences.ts

@@ -1,190 +0,0 @@
-import { useCallback, useEffect, useState } from "react"
-
-export interface AccessibilityPreferences {
-	prefersReducedMotion: boolean
-	prefersHighContrast: boolean
-	prefersColorScheme: "light" | "dark" | "no-preference"
-	prefersReducedTransparency: boolean
-}
-
-export function useAccessibilityPreferences(): AccessibilityPreferences {
-	const [preferences, setPreferences] = useState<AccessibilityPreferences>({
-		prefersReducedMotion: false,
-		prefersHighContrast: false,
-		prefersColorScheme: "no-preference",
-		prefersReducedTransparency: false
-	})
-
-	const updatePreferences = useCallback(() => {
-		if (typeof window === "undefined") return
-
-		const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches
-		const prefersHighContrast = window.matchMedia("(prefers-contrast: high)").matches
-		const prefersReducedTransparency = window.matchMedia(
-			"(prefers-reduced-transparency: reduce)"
-		).matches
-
-		let prefersColorScheme: "light" | "dark" | "no-preference" = "no-preference"
-		if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-			prefersColorScheme = "dark"
-		} else if (window.matchMedia("(prefers-color-scheme: light)").matches) {
-			prefersColorScheme = "light"
-		}
-
-		setPreferences({
-			prefersReducedMotion,
-			prefersHighContrast,
-			prefersColorScheme,
-			prefersReducedTransparency
-		})
-	}, [])
-
-	useEffect(() => {
-		if (typeof window === "undefined") return
-
-		// Initial check
-		updatePreferences()
-
-		// Set up media query listeners
-		const mediaQueries = [
-			window.matchMedia("(prefers-reduced-motion: reduce)"),
-			window.matchMedia("(prefers-contrast: high)"),
-			window.matchMedia("(prefers-color-scheme: dark)"),
-			window.matchMedia("(prefers-color-scheme: light)"),
-			window.matchMedia("(prefers-reduced-transparency: reduce)")
-		]
-
-		// Add listeners
-		mediaQueries.forEach((mq) => {
-			mq.addEventListener("change", updatePreferences)
-		})
-
-		// Cleanup
-		return () => {
-			mediaQueries.forEach((mq) => {
-				mq.removeEventListener("change", updatePreferences)
-			})
-		}
-	}, [updatePreferences])
-
-	return preferences
-}
-
-// Hook for applying accessibility styles
-export function useAccessibilityStyles() {
-	const preferences = useAccessibilityPreferences()
-
-	// Generate CSS custom properties based on preferences
-	const cssVariables = useCallback(() => {
-		const vars: Record<string, string> = {}
-
-		if (preferences.prefersHighContrast) {
-			vars["--media-contrast"] = "high"
-			vars["--media-bg-opacity"] = "1"
-			vars["--media-border-width"] = "2px"
-			vars["--media-focus-outline-width"] = "3px"
-		} else {
-			vars["--media-contrast"] = "normal"
-			vars["--media-bg-opacity"] = "0.8"
-			vars["--media-border-width"] = "1px"
-			vars["--media-focus-outline-width"] = "2px"
-		}
-
-		if (preferences.prefersReducedMotion) {
-			vars["--media-transition-duration"] = "0ms"
-			vars["--media-animation-duration"] = "0ms"
-			vars["--media-motion"] = "none"
-		} else {
-			vars["--media-transition-duration"] = "200ms"
-			vars["--media-animation-duration"] = "300ms"
-			vars["--media-motion"] = "auto"
-		}
-
-		if (preferences.prefersReducedTransparency) {
-			vars["--media-backdrop-blur"] = "0px"
-			vars["--media-bg-opacity"] = "1"
-		} else {
-			vars["--media-backdrop-blur"] = "10px"
-		}
-
-		return vars
-	}, [preferences])
-
-	// Apply styles to document
-	const applyStyles = useCallback(() => {
-		if (typeof document === "undefined") return
-
-		const vars = cssVariables()
-		Object.entries(vars).forEach(([property, value]) => {
-			document.documentElement.style.setProperty(property, value)
-		})
-	}, [cssVariables])
-
-	useEffect(() => {
-		applyStyles()
-	}, [applyStyles])
-
-	return {
-		preferences,
-		cssVariables: cssVariables(),
-		applyStyles
-	}
-}
-
-// Hook for managing focus visibility
-export function useFocusVisible() {
-	const [isFocusVisible, setIsFocusVisible] = useState(false)
-
-	useEffect(() => {
-		if (typeof window === "undefined") return
-
-		let hadKeyboardEvent = true
-		let keyboardThrottleTimeoutID: NodeJS.Timeout | undefined
-
-		const handleKeyDown = (e: KeyboardEvent) => {
-			if (e.metaKey || e.altKey || e.ctrlKey) {
-				return
-			}
-
-			hadKeyboardEvent = true
-			setIsFocusVisible(true)
-		}
-
-		const handlePointerDown = () => {
-			hadKeyboardEvent = false
-			setIsFocusVisible(false)
-		}
-
-		const handleFocus = (e: FocusEvent) => {
-			if (hadKeyboardEvent || (e.target as HTMLElement)?.matches(":focus-visible")) {
-				setIsFocusVisible(true)
-			}
-		}
-
-		const handleBlur = () => {
-			setIsFocusVisible(false)
-		}
-
-		document.addEventListener("keydown", handleKeyDown, true)
-		document.addEventListener("mousedown", handlePointerDown, true)
-		document.addEventListener("pointerdown", handlePointerDown, true)
-		document.addEventListener("touchstart", handlePointerDown, true)
-		document.addEventListener("focus", handleFocus, true)
-		document.addEventListener("blur", handleBlur, true)
-
-		return () => {
-			document.removeEventListener("keydown", handleKeyDown, true)
-			document.removeEventListener("mousedown", handlePointerDown, true)
-			document.removeEventListener("pointerdown", handlePointerDown, true)
-			document.removeEventListener("touchstart", handlePointerDown, true)
-			document.removeEventListener("focus", handleFocus, true)
-			document.removeEventListener("blur", handleBlur, true)
-
-			if (keyboardThrottleTimeoutID) {
-				clearTimeout(keyboardThrottleTimeoutID)
-			}
-		}
-	}, [])
-
-	return isFocusVisible
-}

package/src/hooks/accessibility/use-focus-management.ts

@@ -1,183 +0,0 @@
-import { useCallback, useEffect, useRef } from "react"
-
-export interface FocusOptions {
-	preventScroll?: boolean
-	restoreFocus?: boolean
-}
-
-export interface UseFocusManagementOptions {
-	restoreFocus?: boolean
-	initialFocus?: string | HTMLElement | (() => HTMLElement | null)
-}
-
-export function useFocusManagement({
-	restoreFocus = true,
-	initialFocus
-}: UseFocusManagementOptions = {}) {
-	const previousFocusRef = useRef<HTMLElement | null>(null)
-	const containerRef = useRef<HTMLElement | null>(null)
-
-	// Store the previously focused element
-	const storePreviousFocus = useCallback(() => {
-		previousFocusRef.current = document.activeElement as HTMLElement
-	}, [])
-
-	// Restore focus to the previously focused element
-	const restorePreviousFocus = useCallback(
-		(options: FocusOptions = {}) => {
-			if (previousFocusRef.current && restoreFocus) {
-				previousFocusRef.current.focus({
-					preventScroll: options.preventScroll
-				})
-				previousFocusRef.current = null
-			}
-		},
-		[restoreFocus]
-	)
-
-	// Focus an element by selector or element
-	const focusElement = useCallback(
-		(target: string | HTMLElement | (() => HTMLElement | null), options: FocusOptions = {}) => {
-			let element: HTMLElement | null = null
-
-			if (typeof target === "string") {
-				element =
-					(containerRef.current?.querySelector(target) as HTMLElement) ||
-					(document.querySelector(target) as HTMLElement)
-			} else if (typeof target === "function") {
-				element = target()
-			} else {
-				element = target
-			}
-
-			if (element) {
-				element.focus({
-					preventScroll: options.preventScroll
-				})
-			}
-		},
-		[]
-	)
-
-	// Get all focusable elements within a container
-	const getFocusableElements = useCallback((container?: HTMLElement) => {
-		const root = container || containerRef.current || document
-		const focusableSelectors = [
-			"button:not([disabled])",
-			"input:not([disabled])",
-			"textarea:not([disabled])",
-			"select:not([disabled])",
-			"a[href]",
-			'[tabindex]:not([tabindex="-1"])',
-			"audio[controls]",
-			"video[controls]",
-			'[contenteditable]:not([contenteditable="false"])'
-		].join(", ")
-
-		return Array.from(root.querySelectorAll(focusableSelectors)) as HTMLElement[]
-	}, [])
-
-	// Create a focus trap within the container
-	const createFocusTrap = useCallback(() => {
-		const handleKeyDown = (event: KeyboardEvent) => {
-			if (event.key !== "Tab") return
-
-			const focusableElements = getFocusableElements()
-			if (focusableElements.length === 0) return
-
-			const firstFocusable = focusableElements[0]
-			const lastFocusable = focusableElements[focusableElements.length - 1]
-
-			if (event.shiftKey) {
-				// Shift + Tab
-				if (document.activeElement === firstFocusable) {
-					event.preventDefault()
-					lastFocusable?.focus()
-				}
-			} else {
-				// Tab
-				if (document.activeElement === lastFocusable) {
-					event.preventDefault()
-					firstFocusable?.focus()
-				}
-			}
-		}
-
-		document.addEventListener("keydown", handleKeyDown)
-		return () => document.removeEventListener("keydown", handleKeyDown)
-	}, [getFocusableElements])
-
-	// Navigate to next/previous focusable element
-	const navigateFocus = useCallback(
-		(direction: "next" | "previous") => {
-			const focusableElements = getFocusableElements()
-			const currentIndex = focusableElements.indexOf(document.activeElement as HTMLElement)
-
-			let nextIndex: number
-			if (direction === "next") {
-				nextIndex = currentIndex + 1 >= focusableElements.length ? 0 : currentIndex + 1
-			} else {
-				nextIndex = currentIndex - 1 < 0 ? focusableElements.length - 1 : currentIndex - 1
-			}
-
-			focusableElements[nextIndex]?.focus()
-		},
-		[getFocusableElements]
-	)
-
-	// Initialize focus on mount
-	useEffect(() => {
-		if (initialFocus) {
-			const timer = setTimeout(() => {
-				focusElement(initialFocus)
-			}, 0)
-			return () => clearTimeout(timer)
-		}
-	}, [initialFocus, focusElement])
-
-	return {
-		containerRef,
-		storePreviousFocus,
-		restorePreviousFocus,
-		focusElement,
-		getFocusableElements,
-		createFocusTrap,
-		navigateFocus
-	}
-}
-
-// Hook for managing focus within media player controls
-export function useMediaPlayerFocus() {
-	const focusManager = useFocusManagement({
-		restoreFocus: true,
-		initialFocus: '[data-media-control="play-pause"]'
-	})
-
-	// Focus on play/pause button
-	const focusPlayPause = useCallback(() => {
-		focusManager.focusElement('[data-media-control="play-pause"]')
-	}, [focusManager])
-
-	// Focus on seek bar
-	const focusSeekBar = useCallback(() => {
-		focusManager.focusElement('[data-media-control="seek-bar"]')
-	}, [focusManager])
-
-	// Focus on volume control
-	const focusVolumeControl = useCallback(() => {
-		focusManager.focusElement('[data-media-control="volume"]')
-	}, [focusManager])
-
-	// Focus on settings button
-	const focusSettings = useCallback(() => {
-		focusManager.focusElement('[data-media-control="settings"]')
-	}, [focusManager])
-
-	return {
-		...focusManager,
-		focusPlayPause,
-		focusSeekBar,
-		focusVolumeControl,
-		focusSettings
-	}
-}