@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

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

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