@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

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

@@ -1,176 +1,183 @@
-import { useRef, useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useRef } from "react"
 
 export interface FocusOptions {
-  preventScroll?: boolean
-  restoreFocus?: boolean
+	preventScroll?: boolean
+	restoreFocus?: boolean
 }
 
 export interface UseFocusManagementOptions {
-  restoreFocus?: boolean
-  initialFocus?: string | HTMLElement | (() => HTMLElement | null)
+	restoreFocus?: boolean
+	initialFocus?: string | HTMLElement | (() => HTMLElement | null)
 }
 
 export function useFocusManagement({
-  restoreFocus = true,
-  initialFocus
+	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
-  }
+	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
-  }
-}
+	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

@@ -1,144 +1,152 @@
-import { useEffect, useCallback, useRef } from 'react'
+import { useCallback, useEffect, useRef } from "react"
 
 export interface KeyboardShortcut {
-  key: string
-  ctrlKey?: boolean
-  altKey?: boolean
-  shiftKey?: boolean
-  action: () => void
-  description: string
-  preventDefault?: boolean
+	key: string
+	ctrlKey?: boolean
+	altKey?: boolean
+	shiftKey?: boolean
+	action: () => void
+	description: string
+	preventDefault?: boolean
 }
 
 export interface UseKeyboardShortcutsOptions {
-  shortcuts: KeyboardShortcut[]
-  enabled?: boolean
-  target?: HTMLElement | null
+	shortcuts: KeyboardShortcut[]
+	enabled?: boolean
+	target?: HTMLElement | null
 }
 
 export function useKeyboardShortcuts({
-  shortcuts,
-  enabled = true,
-  target
+	shortcuts,
+	enabled = true,
+	target
 }: UseKeyboardShortcutsOptions) {
-  const shortcutsRef = useRef(shortcuts)
-  shortcutsRef.current = shortcuts
+	const shortcutsRef = useRef(shortcuts)
+	shortcutsRef.current = shortcuts
 
-  const handleKeyDown = useCallback((event: KeyboardEvent) => {
-    if (!enabled) return
+	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
-    }
+			// 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
-    )
+			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])
+			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])
+	useEffect(() => {
+		const element = target || document
+		element.addEventListener("keydown", handleKeyDown as EventListener)
 
-  return {
-    shortcuts: shortcuts.map(s => ({
-      key: s.key,
-      description: s.description,
-      modifiers: {
-        ctrl: s.ctrlKey,
-        alt: s.altKey,
-        shift: s.shiftKey
-      }
-    }))
-  }
+		return () => {
+			element.removeEventListener("keydown", handleKeyDown as EventListener)
+		}
+	}, [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
+	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'
-  }] : [])
-]
+	{
+		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"
+				}
+			]
+		: [])
+]