@therealtinhtute/baroiplayer 1.0.7 → 1.1.0

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

@@ -1,188 +1,190 @@
-import { useState, useEffect, useCallback } from 'react'
+import { useCallback, useEffect, useState } from "react"
 
 export interface AccessibilityPreferences {
-  prefersReducedMotion: boolean
-  prefersHighContrast: boolean
-  prefersColorScheme: 'light' | 'dark' | 'no-preference'
-  prefersReducedTransparency: boolean
+	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
+	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
-  }
+	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
-}
+	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
+}