@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.4 → 0.1.5

package/src/hooks/use-battery-animations.ts

@@ -0,0 +1,384 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+
+export interface BatteryAnimationConfig {
+  enableBatteryMonitoring?: boolean
+  enablePerformanceThrottling?: boolean
+  enableReducedMotion?: boolean
+  enableUserPreferences?: boolean
+  enableAutomaticOptimization?: boolean
+  lowBatteryThreshold?: number
+  criticalBatteryThreshold?: number
+  performanceThrottleThreshold?: number
+  animationComplexityLevels?: 'low' | 'medium' | 'high'
+}
+
+export interface BatteryAnimationState {
+  batteryLevel: number
+  isLowBattery: boolean
+  isCriticalBattery: boolean
+  isCharging: boolean
+  performanceScore: number
+  shouldThrottle: boolean
+  throttleLevel: 'none' | 'light' | 'moderate' | 'aggressive'
+  reducedMotion: boolean
+  userPreference: 'performance' | 'balanced' | 'battery' | 'accessibility'
+}
+
+export interface BatteryAnimationCallbacks {
+  onBatteryLevelChange?: (level: number, isLow: boolean) => void
+  onPerformanceWarning?: (score: number, shouldThrottle: boolean) => void
+  onAnimationThrottled?: (level: string, reason: string) => void
+  onUserPreferenceChange?: (preference: string) => void
+  onReducedMotionChange?: (enabled: boolean) => void
+}
+
+export const useBatteryAnimations = (
+  config: BatteryAnimationConfig = {},
+  callbacks: BatteryAnimationCallbacks = {}
+) => {
+  const {
+    enableBatteryMonitoring = true,
+    enablePerformanceThrottling = true,
+    enableReducedMotion = true,
+    enableUserPreferences = true,
+    enableAutomaticOptimization = true,
+    lowBatteryThreshold = 0.2,
+    criticalBatteryThreshold = 0.1,
+    performanceThrottleThreshold = 70
+  } = config
+
+  const [state, setState] = useState<BatteryAnimationState>({
+    batteryLevel: 1,
+    isLowBattery: false,
+    isCriticalBattery: false,
+    isCharging: false,
+    performanceScore: 100,
+    shouldThrottle: false,
+    throttleLevel: 'none',
+    reducedMotion: false,
+    userPreference: 'balanced'
+  })
+
+  const [isOptimizing, setIsOptimizing] = useState(false)
+  const [optimizations, setOptimizations] = useState<string[]>([])
+  const batteryRef = useRef<any>(null)
+  const performanceTimerRef = useRef<number | null>(null)
+  const batteryCheckIntervalRef = useRef<number | null>(null)
+
+  // Battery level detection
+  const getBatteryStatus = useCallback(async (): Promise<void> => {
+    if (!enableBatteryMonitoring || !('getBattery' in navigator)) return
+
+    try {
+      const battery = await (navigator as any).getBattery()
+      batteryRef.current = battery
+      
+      const batteryLevel = battery.level
+      const isCharging = battery.charging
+      const isLowBattery = batteryLevel <= lowBatteryThreshold
+      const isCriticalBattery = batteryLevel <= criticalBatteryThreshold
+      
+      setState(prev => ({
+        ...prev,
+        batteryLevel,
+        isLowBattery,
+        isCriticalBattery,
+        isCharging
+      }))
+      
+      callbacks.onBatteryLevelChange?.(batteryLevel, isLowBattery)
+    } catch (error) {
+      console.warn('Battery API not available:', error)
+    }
+  }, [enableBatteryMonitoring, lowBatteryThreshold, criticalBatteryThreshold, callbacks])
+
+  // Performance monitoring
+  const measurePerformance = useCallback(() => {
+    if (!enablePerformanceThrottling) return
+
+    try {
+      // Simulate performance measurement
+      const performanceScore = Math.random() * 100
+      const shouldThrottle = performanceScore < performanceThrottleThreshold
+      
+      setState(prev => ({
+        ...prev,
+        performanceScore,
+        shouldThrottle
+      }))
+      
+      if (shouldThrottle) {
+        callbacks.onPerformanceWarning?.(performanceScore, shouldThrottle)
+      }
+    } catch (error) {
+      console.warn('Performance measurement failed:', error)
+    }
+  }, [enablePerformanceThrottling, performanceThrottleThreshold, callbacks])
+
+  // Reduced motion detection
+  const checkReducedMotion = useCallback(() => {
+    if (!enableReducedMotion) return
+
+    try {
+      const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+      
+      setState(prev => ({
+        ...prev,
+        reducedMotion
+      }))
+      
+      callbacks.onReducedMotionChange?.(reducedMotion)
+    } catch (error) {
+      console.warn('Reduced motion detection failed:', error)
+    }
+  }, [enableReducedMotion, callbacks])
+
+  // Animation throttling based on battery and performance
+  const applyAnimationThrottling = useCallback(() => {
+    if (!enablePerformanceThrottling) return
+
+    setIsOptimizing(true)
+    
+    setTimeout(() => {
+      let throttleLevel: 'none' | 'light' | 'moderate' | 'aggressive' = 'none'
+      let optimizations: string[] = []
+      
+      // Battery-based throttling
+      if (state.isCriticalBattery) {
+        throttleLevel = 'aggressive'
+        optimizations.push('Critical battery: Maximum animation throttling applied')
+        optimizations.push('All non-essential animations disabled')
+        optimizations.push('Only essential UI transitions enabled')
+      } else if (state.isLowBattery) {
+        throttleLevel = 'moderate'
+        optimizations.push('Low battery: Enhanced animation throttling applied')
+        optimizations.push('Animation complexity reduced by 60%')
+        optimizations.push('Performance optimizations enabled')
+      } else if (state.batteryLevel < 0.5) {
+        throttleLevel = 'light'
+        optimizations.push('Medium battery: Light animation throttling applied')
+        optimizations.push('Animation complexity reduced by 30%')
+        optimizations.push('Battery optimization enabled')
+      }
+      
+      // Performance-based throttling
+      if (state.shouldThrottle) {
+        if (throttleLevel === 'none') throttleLevel = 'light'
+        optimizations.push('Performance-based throttling applied')
+        optimizations.push('Animation frame rate optimized')
+      }
+      
+      // Reduced motion support
+      if (state.reducedMotion) {
+        if (throttleLevel === 'none') throttleLevel = 'light'
+        optimizations.push('Reduced motion preference respected')
+        optimizations.push('Animation duration minimized')
+      }
+      
+      // User preference consideration
+      if (state.userPreference === 'battery') {
+        if (throttleLevel === 'none') throttleLevel = 'light'
+        optimizations.push('User preference: Battery optimization enabled')
+      } else if (state.userPreference === 'accessibility') {
+        if (throttleLevel === 'none') throttleLevel = 'light'
+        optimizations.push('User preference: Accessibility optimization enabled')
+      }
+      
+      setState(prev => ({
+        ...prev,
+        throttleLevel
+      }))
+      
+      setOptimizations(prev => [...prev, ...optimizations])
+      setIsOptimizing(false)
+      
+      callbacks.onAnimationThrottled?.(throttleLevel, 'Battery and performance optimization')
+      
+      optimizations.forEach(optimization => {
+        console.log('Animation optimization:', optimization)
+      })
+    }, 300)
+  }, [enablePerformanceThrottling, state, callbacks])
+
+  // Get animation recommendations
+  const getAnimationRecommendations = useCallback(() => {
+    const recommendations = []
+    
+    if (state.isCriticalBattery) {
+      recommendations.push('Critical battery: Disable all animations except essential transitions')
+      recommendations.push('Use static UI elements instead of animated ones')
+      recommendations.push('Minimize DOM updates and reflows')
+    } else if (state.isLowBattery) {
+      recommendations.push('Low battery: Reduce animation complexity significantly')
+      recommendations.push('Use simple transforms instead of complex animations')
+      recommendations.push('Limit animation duration to under 300ms')
+    } else if (state.batteryLevel < 0.5) {
+      recommendations.push('Medium battery: Consider light animation optimization')
+      recommendations.push('Use CSS transforms instead of JavaScript animations')
+      recommendations.push('Implement animation pausing when not in viewport')
+    }
+    
+    if (state.shouldThrottle) {
+      recommendations.push('Performance issue: Reduce animation frame rate')
+      recommendations.push('Use requestAnimationFrame for smooth animations')
+      recommendations.push('Implement animation debouncing')
+    }
+    
+    if (state.reducedMotion) {
+      recommendations.push('Accessibility: Respect reduced motion preference')
+      recommendations.push('Provide alternative non-animated experiences')
+      recommendations.push('Use subtle transitions instead of animations')
+    }
+    
+    return recommendations
+  }, [state])
+
+  // Get optimal animation settings
+  const getOptimalAnimationSettings = useCallback(() => {
+    const settings = {
+      duration: 300,
+      easing: 'ease-out',
+      shouldAnimate: true,
+      complexity: 'medium',
+      frameRate: 60
+    }
+    
+    switch (state.throttleLevel) {
+      case 'aggressive':
+        settings.duration = 150
+        settings.easing = 'linear'
+        settings.shouldAnimate = false
+        settings.complexity = 'minimal'
+        settings.frameRate = 30
+        break
+      case 'moderate':
+        settings.duration = 200
+        settings.easing = 'ease-out'
+        settings.shouldAnimate = true
+        settings.complexity = 'low'
+        settings.frameRate = 45
+        break
+      case 'light':
+        settings.duration = 250
+        settings.easing = 'ease-out'
+        settings.shouldAnimate = true
+        settings.complexity = 'medium'
+        settings.frameRate = 50
+        break
+      default:
+        settings.duration = 300
+        settings.easing = 'ease-out'
+        settings.shouldAnimate = true
+        settings.complexity = 'high'
+        settings.frameRate = 60
+    }
+    
+    // Override for reduced motion
+    if (state.reducedMotion) {
+      settings.duration = 100
+      settings.easing = 'linear'
+      settings.complexity = 'minimal'
+      settings.frameRate = 30
+    }
+    
+    return settings
+  }, [state.throttleLevel, state.reducedMotion])
+
+  // Update user preferences
+  const updateUserPreference = useCallback((preference: string) => {
+    if (!enableUserPreferences) return
+
+    setState(prev => ({
+      ...prev,
+      userPreference: preference as any
+    }))
+    
+    callbacks.onUserPreferenceChange?.(preference)
+    
+    // Apply optimizations based on new preference
+    setTimeout(() => {
+      applyAnimationThrottling()
+    }, 100)
+  }, [enableUserPreferences, callbacks, applyAnimationThrottling])
+
+  // Initialize monitoring
+  useEffect(() => {
+    try {
+      // Get initial battery status
+      if (enableBatteryMonitoring) {
+        getBatteryStatus()
+        batteryCheckIntervalRef.current = window.setInterval(getBatteryStatus, 10000)
+      }
+      
+      // Set up performance monitoring
+      if (enablePerformanceThrottling) {
+        performanceTimerRef.current = window.setInterval(measurePerformance, 5000)
+      }
+      
+      // Check reduced motion preference
+      if (enableReducedMotion) {
+        checkReducedMotion()
+        
+        // Listen for preference changes
+        const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
+        const handleChange = () => checkReducedMotion()
+        mediaQuery.addEventListener('change', handleChange)
+        
+        return () => mediaQuery.removeEventListener('change', handleChange)
+      }
+    } catch (error) {
+      console.warn('Battery animation initialization failed:', error)
+    }
+  }, [enableBatteryMonitoring, enablePerformanceThrottling, enableReducedMotion, getBatteryStatus, measurePerformance, checkReducedMotion])
+
+  // Apply throttling when state changes
+  useEffect(() => {
+    if (enableAutomaticOptimization) {
+      applyAnimationThrottling()
+    }
+  }, [enableAutomaticOptimization, applyAnimationThrottling])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (performanceTimerRef.current) {
+        clearInterval(performanceTimerRef.current)
+      }
+      if (batteryCheckIntervalRef.current) {
+        clearInterval(batteryCheckIntervalRef.current)
+      }
+    }
+  }, [])
+
+  return {
+    // State
+    state,
+    isOptimizing,
+    optimizations,
+    
+    // Actions
+    getBatteryStatus,
+    measurePerformance,
+    checkReducedMotion,
+    applyAnimationThrottling,
+    updateUserPreference,
+    
+    // Computed values
+    batteryPercentage: Math.round(state.batteryLevel * 100),
+    shouldDisableAnimations: state.throttleLevel === 'aggressive' || state.reducedMotion,
+    animationSettings: getOptimalAnimationSettings(),
+    recommendations: getAnimationRecommendations(),
+    
+    // Utility functions
+    isAnimationOptimized: () => state.throttleLevel !== 'none',
+    getBatteryHealth: () => {
+      if (state.batteryLevel >= 0.8) return 'excellent'
+      if (state.batteryLevel >= 0.6) return 'good'
+      if (state.batteryLevel >= 0.4) return 'fair'
+      if (state.batteryLevel >= 0.2) return 'poor'
+      return 'critical'
+    }
+  }
+}
+
+export default useBatteryAnimations