@therealtinhtute/baroiplayer 1.0.0

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

@@ -0,0 +1,188 @@
+import { useState, useEffect, useCallback } 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
+
+    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

@@ -0,0 +1,176 @@
+import { useRef, useCallback, useEffect } 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
+  }
+}

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

@@ -0,0 +1,144 @@
+import { useEffect, useCallback, useRef } from 'react'
+
+export interface KeyboardShortcut {
+  key: string
+  ctrlKey?: boolean
+  altKey?: boolean
+  shiftKey?: boolean
+  action: () => void
+  description: string
+  preventDefault?: boolean
+}
+
+export interface UseKeyboardShortcutsOptions {
+  shortcuts: KeyboardShortcut[]
+  enabled?: boolean
+  target?: HTMLElement | null
+}
+
+export function useKeyboardShortcuts({
+  shortcuts,
+  enabled = true,
+  target
+}: UseKeyboardShortcutsOptions) {
+  const shortcutsRef = useRef(shortcuts)
+  shortcutsRef.current = shortcuts
+
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    if (!enabled) return
+
+    // Don't trigger shortcuts when user is typing in inputs
+    if (
+      event.target instanceof HTMLInputElement ||
+      event.target instanceof HTMLTextAreaElement ||
+      (event.target as HTMLElement)?.contentEditable === 'true'
+    ) {
+      return
+    }
+
+    const shortcut = shortcutsRef.current.find(s => 
+      s.key.toLowerCase() === event.key.toLowerCase() &&
+      !!s.ctrlKey === event.ctrlKey &&
+      !!s.altKey === event.altKey &&
+      !!s.shiftKey === event.shiftKey
+    )
+
+    if (shortcut) {
+      if (shortcut.preventDefault !== false) {
+        event.preventDefault()
+      }
+      shortcut.action()
+    }
+  }, [enabled])
+
+  useEffect(() => {
+    const element = target || document
+    element.addEventListener('keydown', handleKeyDown)
+    
+    return () => {
+      element.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [handleKeyDown, target])
+
+  return {
+    shortcuts: shortcuts.map(s => ({
+      key: s.key,
+      description: s.description,
+      modifiers: {
+        ctrl: s.ctrlKey,
+        alt: s.altKey,
+        shift: s.shiftKey
+      }
+    }))
+  }
+}
+
+// Pre-defined media player shortcuts
+export const createMediaKeyboardShortcuts = (controls: {
+  play: () => void
+  pause: () => void
+  togglePlayPause: () => void
+  seekForward: (seconds?: number) => void
+  seekBackward: (seconds?: number) => void
+  volumeUp: () => void
+  volumeDown: () => void
+  toggleMute: () => void
+  toggleFullscreen: () => void
+  showHelp?: () => void
+}): KeyboardShortcut[] => [
+  {
+    key: ' ',
+    action: controls.togglePlayPause,
+    description: 'Play/Pause'
+  },
+  {
+    key: 'k',
+    action: controls.togglePlayPause,
+    description: 'Play/Pause (K)'
+  },
+  {
+    key: 'ArrowLeft',
+    action: () => controls.seekBackward(10),
+    description: 'Seek backward 10 seconds'
+  },
+  {
+    key: 'ArrowRight',
+    action: () => controls.seekForward(10),
+    description: 'Seek forward 10 seconds'
+  },
+  {
+    key: 'j',
+    action: () => controls.seekBackward(10),
+    description: 'Seek backward 10 seconds (J)'
+  },
+  {
+    key: 'l',
+    action: () => controls.seekForward(10),
+    description: 'Seek forward 10 seconds (L)'
+  },
+  {
+    key: 'ArrowUp',
+    action: controls.volumeUp,
+    description: 'Volume up'
+  },
+  {
+    key: 'ArrowDown',
+    action: controls.volumeDown,
+    description: 'Volume down'
+  },
+  {
+    key: 'm',
+    action: controls.toggleMute,
+    description: 'Toggle mute'
+  },
+  {
+    key: 'f',
+    action: controls.toggleFullscreen,
+    description: 'Toggle fullscreen'
+  },
+  ...(controls.showHelp ? [{
+    key: '?',
+    action: controls.showHelp,
+    description: 'Show keyboard shortcuts help'
+  }] : [])
+]

package/src/hooks/accessibility/use-screen-reader.ts

@@ -0,0 +1,182 @@
+import { useRef, useCallback, useEffect } from 'react'
+
+export type AnnouncementPriority = 'assertive' | 'polite' | 'off'
+
+export interface UseScreenReaderOptions {
+  defaultPriority?: AnnouncementPriority
+  debounceMs?: number
+}
+
+export function useScreenReader({
+  defaultPriority = 'polite',
+  debounceMs = 100
+}: UseScreenReaderOptions = {}) {
+  const liveRegionRef = useRef<HTMLDivElement | null>(null)
+  const timeoutRef = useRef<NodeJS.Timeout>()
+
+  // Create or get the live region for announcements
+  const getLiveRegion = useCallback((priority: AnnouncementPriority) => {
+    if (!liveRegionRef.current) {
+      const liveRegion = document.createElement('div')
+      liveRegion.setAttribute('aria-live', priority)
+      liveRegion.setAttribute('aria-atomic', 'true')
+      liveRegion.setAttribute('class', 'sr-only')
+      liveRegion.style.cssText = `
+        position: absolute !important;
+        width: 1px !important;
+        height: 1px !important;
+        padding: 0 !important;
+        margin: -1px !important;
+        overflow: hidden !important;
+        clip: rect(0, 0, 0, 0) !important;
+        white-space: nowrap !important;
+        border: 0 !important;
+      `
+      document.body.appendChild(liveRegion)
+      liveRegionRef.current = liveRegion
+    }
+
+    // Update priority if needed
+    if (liveRegionRef.current.getAttribute('aria-live') !== priority) {
+      liveRegionRef.current.setAttribute('aria-live', priority)
+    }
+
+    return liveRegionRef.current
+  }, [])
+
+  // Announce a message to screen readers
+  const announce = useCallback((
+    message: string,
+    priority: AnnouncementPriority = defaultPriority
+  ) => {
+    if (!message.trim() || priority === 'off') return
+
+    // Clear existing timeout
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+    }
+
+    // Debounce announcements
+    timeoutRef.current = setTimeout(() => {
+      const liveRegion = getLiveRegion(priority)
+      
+      // Clear and then set the message to ensure it's announced
+      liveRegion.textContent = ''
+      
+      // Use requestAnimationFrame to ensure the clear happens first
+      requestAnimationFrame(() => {
+        liveRegion.textContent = message
+      })
+    }, debounceMs)
+  }, [defaultPriority, debounceMs, getLiveRegion])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+      if (liveRegionRef.current) {
+        document.body.removeChild(liveRegionRef.current)
+        liveRegionRef.current = null
+      }
+    }
+  }, [])
+
+  return { announce }
+}
+
+// Hook specifically for media player screen reader announcements
+export function useMediaScreenReader() {
+  const { announce } = useScreenReader({ defaultPriority: 'polite' })
+
+  // Announce playback state changes
+  const announcePlaybackState = useCallback((isPlaying: boolean) => {
+    announce(isPlaying ? 'Playing' : 'Paused', 'assertive')
+  }, [announce])
+
+  // Announce volume changes
+  const announceVolume = useCallback((volume: number, isMuted: boolean) => {
+    if (isMuted) {
+      announce('Muted', 'assertive')
+    } else {
+      const volumePercent = Math.round(volume * 100)
+      announce(`Volume ${volumePercent}%`, 'polite')
+    }
+  }, [announce])
+
+  // Announce time position changes
+  const announceTime = useCallback((currentTime: number, duration: number) => {
+    const formatTime = (seconds: number) => {
+      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')}`
+      }
+      return `${minutes}:${secs.toString().padStart(2, '0')}`
+    }
+
+    const current = formatTime(currentTime)
+    const total = formatTime(duration)
+    announce(`${current} of ${total}`, 'polite')
+  }, [announce])
+
+  // Announce fullscreen state changes
+  const announceFullscreen = useCallback((isFullscreen: boolean) => {
+    announce(isFullscreen ? 'Entered fullscreen' : 'Exited fullscreen', 'assertive')
+  }, [announce])
+
+  // Announce subtitle state changes
+  const announceSubtitles = useCallback((enabled: boolean, language?: string) => {
+    if (enabled) {
+      announce(language ? `Subtitles enabled in ${language}` : 'Subtitles enabled', 'assertive')
+    } else {
+      announce('Subtitles disabled', 'assertive')
+    }
+  }, [announce])
+
+  // Announce playback speed changes
+  const announcePlaybackSpeed = useCallback((speed: number) => {
+    if (speed === 1) {
+      announce('Normal playback speed', 'assertive')
+    } else {
+      announce(`Playback speed ${speed}x`, 'assertive')
+    }
+  }, [announce])
+
+  // Announce quality changes
+  const announceQuality = useCallback((quality: string) => {
+    announce(`Quality changed to ${quality}`, 'polite')
+  }, [announce])
+
+  // Announce loading state
+  const announceLoading = useCallback((isLoading: boolean) => {
+    announce(isLoading ? 'Loading...' : 'Loading complete', 'polite')
+  }, [announce])
+
+  // Announce errors
+  const announceError = useCallback((error: string) => {
+    announce(`Error: ${error}`, 'assertive')
+  }, [announce])
+
+  // Announce buffering state
+  const announceBuffering = useCallback((isBuffering: boolean) => {
+    announce(isBuffering ? 'Buffering...' : 'Buffering complete', 'polite')
+  }, [announce])
+
+  return {
+    announce,
+    announcePlaybackState,
+    announceVolume,
+    announceTime,
+    announceFullscreen,
+    announceSubtitles,
+    announcePlaybackSpeed,
+    announceQuality,
+    announceLoading,
+    announceError,
+    announceBuffering
+  }
+}