@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

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

@@ -1,188 +0,0 @@
-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/dist/src/hooks/accessibility/use-focus-management.d.ts

@@ -1,31 +0,0 @@
-export interface FocusOptions {
-    preventScroll?: boolean;
-    restoreFocus?: boolean;
-}
-export interface UseFocusManagementOptions {
-    restoreFocus?: boolean;
-    initialFocus?: string | HTMLElement | (() => HTMLElement | null);
-}
-export declare function useFocusManagement({ restoreFocus, initialFocus }?: UseFocusManagementOptions): {
-    containerRef: import("react").RefObject<HTMLElement | null>;
-    storePreviousFocus: () => void;
-    restorePreviousFocus: (options?: FocusOptions) => void;
-    focusElement: (target: string | HTMLElement | (() => HTMLElement | null), options?: FocusOptions) => void;
-    getFocusableElements: (container?: HTMLElement) => HTMLElement[];
-    createFocusTrap: () => () => void;
-    navigateFocus: (direction: "next" | "previous") => void;
-};
-export declare function useMediaPlayerFocus(): {
-    focusPlayPause: () => void;
-    focusSeekBar: () => void;
-    focusVolumeControl: () => void;
-    focusSettings: () => void;
-    containerRef: import("react").RefObject<HTMLElement | null>;
-    storePreviousFocus: () => void;
-    restorePreviousFocus: (options?: FocusOptions) => void;
-    focusElement: (target: string | HTMLElement | (() => HTMLElement | null), options?: FocusOptions) => void;
-    getFocusableElements: (container?: HTMLElement) => HTMLElement[];
-    createFocusTrap: () => () => void;
-    navigateFocus: (direction: "next" | "previous") => void;
-};
-//# sourceMappingURL=use-focus-management.d.ts.map

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

@@ -1,176 +0,0 @@
-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/dist/src/hooks/accessibility/use-keyboard-shortcuts.d.ts

@@ -1,38 +0,0 @@
-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 declare function useKeyboardShortcuts({ shortcuts, enabled, target }: UseKeyboardShortcutsOptions): {
-    shortcuts: {
-        key: string;
-        description: string;
-        modifiers: {
-            ctrl: boolean | undefined;
-            alt: boolean | undefined;
-            shift: boolean | undefined;
-        };
-    }[];
-};
-export declare 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[];
-//# sourceMappingURL=use-keyboard-shortcuts.d.ts.map

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

@@ -1,144 +0,0 @@
-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/dist/src/hooks/accessibility/use-screen-reader.d.ts

@@ -1,22 +0,0 @@
-export type AnnouncementPriority = 'assertive' | 'polite' | 'off';
-export interface UseScreenReaderOptions {
-    defaultPriority?: AnnouncementPriority;
-    debounceMs?: number;
-}
-export declare function useScreenReader({ defaultPriority, debounceMs }?: UseScreenReaderOptions): {
-    announce: (message: string, priority?: AnnouncementPriority) => void;
-};
-export declare function useMediaScreenReader(): {
-    announce: (message: string, priority?: AnnouncementPriority) => void;
-    announcePlaybackState: (isPlaying: boolean) => void;
-    announceVolume: (volume: number, isMuted: boolean) => void;
-    announceTime: (currentTime: number, duration: number) => void;
-    announceFullscreen: (isFullscreen: boolean) => void;
-    announceSubtitles: (enabled: boolean, language?: string) => void;
-    announcePlaybackSpeed: (speed: number) => void;
-    announceQuality: (quality: string) => void;
-    announceLoading: (isLoading: boolean) => void;
-    announceError: (error: string) => void;
-    announceBuffering: (isBuffering: boolean) => void;
-};
-//# sourceMappingURL=use-screen-reader.d.ts.map