@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

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

@@ -0,0 +1,156 @@
+import { useState, useEffect, useCallback } from 'react';
+export function useAccessibilityPreferences() {
+    const [preferences, setPreferences] = useState({
+        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 = '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 = {};
+        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;
+        const handleKeyDown = (e) => {
+            if (e.metaKey || e.altKey || e.ctrlKey) {
+                return;
+            }
+            hadKeyboardEvent = true;
+            setIsFocusVisible(true);
+        };
+        const handlePointerDown = () => {
+            hadKeyboardEvent = false;
+            setIsFocusVisible(false);
+        };
+        const handleFocus = (e) => {
+            if (hadKeyboardEvent || e.target?.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-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/dist/src/hooks/accessibility/use-focus-management.d.ts

@@ -0,0 +1,31 @@
+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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-focus-management.d.ts","sourceRoot":"","sources":["use-focus-management.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,YAAY;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,MAAM,WAAW,yBAAyB;IACxC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,CAAA;CACjE;AAED,wBAAgB,kBAAkB,CAAC,EACjC,YAAmB,EACnB,YAAY,EACb,GAAE,yBAA8B;;;qCAUoB,YAAY;2BAWrD,MAAM,GAAG,WAAW,GAAG,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,YAChD,YAAY;uCAqB+B,WAAW,KAcC,WAAW,EAAE;;+BAkCjC,MAAM,GAAG,UAAU;EAiClE;AAGD,wBAAgB,mBAAmB;;;;;;;qCArHkB,YAAY;2BAWrD,MAAM,GAAG,WAAW,GAAG,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,YAChD,YAAY;uCAqB+B,WAAW,KAcC,WAAW,EAAE;;+BAkCjC,MAAM,GAAG,UAAU;EAqElE"}

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

@@ -0,0 +1,142 @@
+import { useRef, useCallback, useEffect } from 'react';
+export function useFocusManagement({ restoreFocus = true, initialFocus } = {}) {
+    const previousFocusRef = useRef(null);
+    const containerRef = useRef(null);
+    // Store the previously focused element
+    const storePreviousFocus = useCallback(() => {
+        previousFocusRef.current = document.activeElement;
+    }, []);
+    // Restore focus to the previously focused element
+    const restorePreviousFocus = useCallback((options = {}) => {
+        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, options = {}) => {
+        let element = null;
+        if (typeof target === 'string') {
+            element = containerRef.current?.querySelector(target) ||
+                document.querySelector(target);
+        }
+        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) => {
+        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));
+    }, []);
+    // Create a focus trap within the container
+    const createFocusTrap = useCallback(() => {
+        const handleKeyDown = (event) => {
+            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) => {
+        const focusableElements = getFocusableElements();
+        const currentIndex = focusableElements.indexOf(document.activeElement);
+        let nextIndex;
+        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-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
+  }
+}