@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.16

package/dist/hooks/use-hardware-acceleration.js

@@ -1,341 +1,248 @@
-import { useState, useEffect, useCallback, useRef } from 'react'
-
-export interface GPUInfo {
-  vendor: string
-  renderer: string
-  version: string
-  isWebGLSupported: boolean
-  isWebGL2Supported: boolean
-  maxTextureSize: number
-  maxAnisotropy: number
-  maxPrecision: string
-}
-
-export interface HardwareAccelerationMetrics {
-  fps: number
-  frameTime: number
-  memoryUsage: number
-  gpuUtilization: number
-  batteryImpact: number
-  performanceScore: number
-}
-
-export interface HardwareAccelerationConfig {
-  enableGPUMonitoring?: boolean
-  enablePerformanceTracking?: boolean
-  enableBatteryOptimization?: boolean
-  enableAutomaticOptimization?: boolean
-  fpsTarget?: number
-  memoryThreshold?: number
-  batteryLowThreshold?: number
-}
-
-export interface HardwareAccelerationCallbacks {
-  onGPUDetected?: (gpuInfo: GPUInfo) => void
-  onPerformanceWarning?: (warning: string, metrics: HardwareAccelerationMetrics) => void
-  onBatteryWarning?: (level: number, isLow: boolean) => void
-  onOptimizationApplied?: (optimization: string) => void
-}
-
-export const useHardwareAcceleration = (
-  config: HardwareAccelerationConfig = {},
-  callbacks: HardwareAccelerationCallbacks = {}
-) => {
-  const {
-    enableGPUMonitoring = true,
-    enablePerformanceTracking = true,
-    enableBatteryOptimization = true,
-    enableAutomaticOptimization = true,
-    fpsTarget = 60,
-    memoryThreshold = 80,
-    batteryLowThreshold = 0.2
-  } = config
-
-  const [gpuInfo, setGpuInfo] = useState<GPUInfo | null>(null)
-  const [metrics, setMetrics] = useState<HardwareAccelerationMetrics>({
-    fps: 60,
-    frameTime: 16.67,
-    memoryUsage: 0,
-    gpuUtilization: 0,
-    batteryImpact: 0,
-    performanceScore: 100
-  })
-  const [isOptimizing, setIsOptimizing] = useState(false)
-  const [optimizations, setOptimizations] = useState<string[]>([])
-  const [isHardwareAccelerated, setIsHardwareAccelerated] = useState(false)
-
-  const canvasRef = useRef<HTMLCanvasElement | null>(null)
-  const glRef = useRef<WebGLRenderingContext | null>(null)
-  const frameCountRef = useRef(0)
-  const lastFrameTimeRef = useRef(performance.now())
-  const performanceTimerRef = useRef<number | null>(null)
-
-  // GPU capability detection
-  const detectGPU = useCallback((): GPUInfo | null => {
-    if (!enableGPUMonitoring) return null
-
-    try {
-      const canvas = document.createElement('canvas')
-      const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl') as WebGLRenderingContext
-      
-      if (!gl) {
-        return {
-          vendor: 'Unknown',
-          renderer: 'WebGL not supported',
-          version: 'Unknown',
-          isWebGLSupported: false,
-          isWebGL2Supported: false,
-          maxTextureSize: 0,
-          maxAnisotropy: 0,
-          maxPrecision: 'Unknown'
+import { useState, useEffect, useCallback, useRef } from 'react';
+export const useHardwareAcceleration = (config = {}, callbacks = {}) => {
+    const { enableGPUMonitoring = true, enablePerformanceTracking = true, enableBatteryOptimization = true, enableAutomaticOptimization = true, fpsTarget = 60, memoryThreshold = 80, batteryLowThreshold = 0.2 } = config;
+    const [gpuInfo, setGpuInfo] = useState(null);
+    const [metrics, setMetrics] = useState({
+        fps: 60,
+        frameTime: 16.67,
+        memoryUsage: 0,
+        gpuUtilization: 0,
+        batteryImpact: 0,
+        performanceScore: 100
+    });
+    const [isOptimizing, setIsOptimizing] = useState(false);
+    const [optimizations, setOptimizations] = useState([]);
+    const [isHardwareAccelerated, setIsHardwareAccelerated] = useState(false);
+    const canvasRef = useRef(null);
+    const glRef = useRef(null);
+    const frameCountRef = useRef(0);
+    const lastFrameTimeRef = useRef(performance.now());
+    const performanceTimerRef = useRef(null);
+    // GPU capability detection
+    const detectGPU = useCallback(() => {
+        if (!enableGPUMonitoring)
+            return null;
+        try {
+            const canvas = document.createElement('canvas');
+            const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+            if (!gl) {
+                return {
+                    vendor: 'Unknown',
+                    renderer: 'WebGL not supported',
+                    version: 'Unknown',
+                    isWebGLSupported: false,
+                    isWebGL2Supported: false,
+                    maxTextureSize: 0,
+                    maxAnisotropy: 0,
+                    maxPrecision: 'Unknown'
+                };
+            }
+            const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
+            const vendor = debugInfo ? gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL) : 'Unknown';
+            const renderer = debugInfo ? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) : 'Unknown';
+            const version = gl.getParameter(gl.VERSION) || 'Unknown';
+            // Check WebGL2 support
+            const canvas2 = document.createElement('canvas');
+            const gl2 = canvas2.getContext('webgl2');
+            const isWebGL2Supported = !!gl2;
+            // Get GPU capabilities
+            const maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE) || 0;
+            const maxAnisotropy = gl.getParameter(gl.MAX_TEXTURE_MAX_ANISOTROPY_EXT) || 0;
+            const maxPrecision = gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT)?.precision?.toString() || 'Unknown';
+            const gpuInfo = {
+                vendor,
+                renderer,
+                version,
+                isWebGLSupported: true,
+                isWebGL2Supported,
+                maxTextureSize,
+                maxAnisotropy,
+                maxPrecision
+            };
+            setGpuInfo(gpuInfo);
+            callbacks.onGPUDetected?.(gpuInfo);
+            return gpuInfo;
         }
-      }
-
-      const debugInfo = gl.getExtension('WEBGL_debug_renderer_info')
-      const vendor = debugInfo ? gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL) : 'Unknown'
-      const renderer = debugInfo ? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) : 'Unknown'
-      const version = gl.getParameter(gl.VERSION) || 'Unknown'
-      
-      // Check WebGL2 support
-      const canvas2 = document.createElement('canvas')
-      const gl2 = canvas2.getContext('webgl2')
-      const isWebGL2Supported = !!gl2
-
-      // Get GPU capabilities
-      const maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE) || 0
-      const maxAnisotropy = gl.getParameter((gl as any).MAX_TEXTURE_MAX_ANISOTROPY_EXT) || 0
-      const maxPrecision = gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT)?.precision?.toString() || 'Unknown'
-
-      const gpuInfo: GPUInfo = {
-        vendor,
-        renderer,
-        version,
-        isWebGLSupported: true,
-        isWebGL2Supported,
-        maxTextureSize,
-        maxAnisotropy,
-        maxPrecision
-      }
-
-      setGpuInfo(gpuInfo)
-      callbacks.onGPUDetected?.(gpuInfo)
-      
-      return gpuInfo
-    } catch (error) {
-      console.warn('GPU detection failed:', error)
-      return null
-    }
-  }, [enableGPUMonitoring, callbacks])
-
-  // Performance monitoring
-  const measurePerformance = useCallback(() => {
-    if (!enablePerformanceTracking) return
-
-    const now = performance.now()
-    frameCountRef.current++
-    
-    if (now - lastFrameTimeRef.current >= 1000) {
-      const fps = Math.round((frameCountRef.current * 1000) / (now - lastFrameTimeRef.current))
-      const frameTime = 1000 / fps
-      
-      // Simulate GPU utilization and memory usage
-      const gpuUtilization = Math.random() * 100
-      const memoryUsage = Math.random() * 100
-      
-      // Calculate battery impact based on performance
-      const batteryImpact = Math.min((fps / fpsTarget) * 50 + (gpuUtilization / 100) * 30, 100)
-      
-      // Calculate performance score
-      const fpsScore = Math.min((fps / fpsTarget) * 100, 100)
-      const timeScore = Math.max(100 - (frameTime - 16.67) * 10, 0)
-      const memoryScore = Math.max(100 - memoryUsage, 0)
-      const gpuScore = Math.max(100 - gpuUtilization, 0)
-      
-      const performanceScore = Math.round((fpsScore + timeScore + memoryScore + gpuScore) / 4)
-      
-      const newMetrics: HardwareAccelerationMetrics = {
-        fps,
-        frameTime,
-        memoryUsage,
-        gpuUtilization,
-        batteryImpact,
-        performanceScore
-      }
-      
-      setMetrics(newMetrics)
-      
-      // Check for performance warnings
-      if (fps < fpsTarget * 0.8) {
-        callbacks.onPerformanceWarning?.('FPS below target', newMetrics)
-      }
-      
-      if (memoryUsage > memoryThreshold) {
-        callbacks.onPerformanceWarning?.('Memory usage high', newMetrics)
-      }
-      
-      frameCountRef.current = 0
-      lastFrameTimeRef.current = now
-    }
-  }, [enablePerformanceTracking, fpsTarget, memoryThreshold, callbacks])
-
-  // Battery monitoring
-  const checkBatteryStatus = useCallback(async () => {
-    if (!enableBatteryOptimization || !('getBattery' in navigator)) return
-
-    try {
-      const battery = await (navigator as any).getBattery()
-      const level = battery.level
-      
-      if (level < batteryLowThreshold) {
-        callbacks.onBatteryWarning?.(level, true)
-        applyBatteryOptimizations()
-      }
-    } catch (error) {
-      console.warn('Battery API not available:', error)
-    }
-  }, [enableBatteryOptimization, batteryLowThreshold, callbacks])
-
-  // Apply battery optimizations
-  const applyBatteryOptimizations = useCallback(() => {
-    if (!enableBatteryOptimization) return
-
-    setIsOptimizing(true)
-    
-    setTimeout(() => {
-      const optimizations = [
-        'Reduced animation complexity for battery optimization',
-        'Hardware acceleration throttled for power efficiency',
-        'GPU utilization optimized for battery life'
-      ]
-      
-      setOptimizations(prev => [...prev, ...optimizations])
-      setIsOptimizing(false)
-      
-      optimizations.forEach(optimization => {
-        callbacks.onOptimizationApplied?.(optimization)
-      })
-    }, 300)
-  }, [enableBatteryOptimization, callbacks])
-
-  // Automatic optimization
-  const applyAutomaticOptimizations = useCallback(() => {
-    if (!enableAutomaticOptimization) return
-
-    setIsOptimizing(true)
-    
-    setTimeout(() => {
-      const optimizations: string[] = []
-      
-      if (metrics.fps < fpsTarget * 0.8) {
-        optimizations.push('Hardware acceleration optimized for better FPS')
-      }
-      
-      if (metrics.memoryUsage > memoryThreshold) {
-        optimizations.push('Memory usage optimized for better performance')
-      }
-      
-      if (metrics.gpuUtilization > 80) {
-        optimizations.push('GPU utilization optimized for better efficiency')
-      }
-      
-      if (optimizations.length > 0) {
-        setOptimizations(prev => [...prev, ...optimizations])
-        optimizations.forEach(optimization => {
-          callbacks.onOptimizationApplied?.(optimization)
-        })
-      }
-      
-      setIsOptimizing(false)
-    }, 200)
-  }, [enableAutomaticOptimization, metrics, fpsTarget, memoryThreshold, callbacks])
-
-  // Hardware acceleration status check
-  const checkHardwareAcceleration = useCallback(() => {
-    if (!gpuInfo) return false
-    
-    const isSupported = gpuInfo.isWebGLSupported || gpuInfo.isWebGL2Supported
-    const hasGoodPerformance = metrics.performanceScore >= 80
-    
-    setIsHardwareAccelerated(isSupported && hasGoodPerformance)
-    return isSupported && hasGoodPerformance
-  }, [gpuInfo, metrics.performanceScore])
-
-  // Initialize monitoring
-  useEffect(() => {
-    try {
-      // Detect GPU on mount
-      const detectedGPU = detectGPU()
-      
-      if (detectedGPU) {
-        canvasRef.current = document.createElement('canvas')
-        glRef.current = canvasRef.current.getContext('webgl')
-      }
-
-      // Set up performance monitoring
-      if (enablePerformanceTracking) {
-        performanceTimerRef.current = window.setInterval(measurePerformance, 1000)
-      }
-
-      // Set up battery monitoring
-      if (enableBatteryOptimization) {
-        checkBatteryStatus()
-        const batteryInterval = setInterval(checkBatteryStatus, 30000) // Check every 30 seconds
-        
-        return () => {
-          if (batteryInterval) clearInterval(batteryInterval)
+        catch (error) {
+            console.warn('GPU detection failed:', error);
+            return null;
+        }
+    }, [enableGPUMonitoring, callbacks]);
+    // Performance monitoring
+    const measurePerformance = useCallback(() => {
+        if (!enablePerformanceTracking)
+            return;
+        const now = performance.now();
+        frameCountRef.current++;
+        if (now - lastFrameTimeRef.current >= 1000) {
+            const fps = Math.round((frameCountRef.current * 1000) / (now - lastFrameTimeRef.current));
+            const frameTime = 1000 / fps;
+            // Simulate GPU utilization and memory usage
+            const gpuUtilization = Math.random() * 100;
+            const memoryUsage = Math.random() * 100;
+            // Calculate battery impact based on performance
+            const batteryImpact = Math.min((fps / fpsTarget) * 50 + (gpuUtilization / 100) * 30, 100);
+            // Calculate performance score
+            const fpsScore = Math.min((fps / fpsTarget) * 100, 100);
+            const timeScore = Math.max(100 - (frameTime - 16.67) * 10, 0);
+            const memoryScore = Math.max(100 - memoryUsage, 0);
+            const gpuScore = Math.max(100 - gpuUtilization, 0);
+            const performanceScore = Math.round((fpsScore + timeScore + memoryScore + gpuScore) / 4);
+            const newMetrics = {
+                fps,
+                frameTime,
+                memoryUsage,
+                gpuUtilization,
+                batteryImpact,
+                performanceScore
+            };
+            setMetrics(newMetrics);
+            // Check for performance warnings
+            if (fps < fpsTarget * 0.8) {
+                callbacks.onPerformanceWarning?.('FPS below target', newMetrics);
+            }
+            if (memoryUsage > memoryThreshold) {
+                callbacks.onPerformanceWarning?.('Memory usage high', newMetrics);
+            }
+            frameCountRef.current = 0;
+            lastFrameTimeRef.current = now;
+        }
+    }, [enablePerformanceTracking, fpsTarget, memoryThreshold, callbacks]);
+    // Battery monitoring
+    const checkBatteryStatus = useCallback(async () => {
+        if (!enableBatteryOptimization || !('getBattery' in navigator))
+            return;
+        try {
+            const battery = await navigator.getBattery();
+            const level = battery.level;
+            if (level < batteryLowThreshold) {
+                callbacks.onBatteryWarning?.(level, true);
+                applyBatteryOptimizations();
+            }
+        }
+        catch (error) {
+            console.warn('Battery API not available:', error);
         }
-      }
-    } catch (error) {
-      console.warn('Hardware acceleration initialization failed:', error)
-    }
-  }, [detectGPU, enablePerformanceTracking, enableBatteryOptimization, checkBatteryStatus, measurePerformance])
-
-  // Check hardware acceleration status when metrics change
-  useEffect(() => {
-    checkHardwareAcceleration()
-  }, [checkHardwareAcceleration])
-
-  // Apply automatic optimizations when performance degrades
-  useEffect(() => {
-    if (enableAutomaticOptimization && metrics.performanceScore < 70) {
-      applyAutomaticOptimizations()
-    }
-  }, [enableAutomaticOptimization, metrics.performanceScore, applyAutomaticOptimizations])
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      if (performanceTimerRef.current) {
-        clearInterval(performanceTimerRef.current)
-      }
-    }
-  }, [])
-
-  return {
-    // State
-    gpuInfo,
-    metrics,
-    isOptimizing,
-    optimizations,
-    isHardwareAccelerated,
-    
-    // Actions
-    detectGPU,
-    measurePerformance,
-    checkBatteryStatus,
-    applyBatteryOptimizations,
-    applyAutomaticOptimizations,
-    checkHardwareAcceleration,
-    
-    // Computed values
-    isGPUSupported: !!gpuInfo?.isWebGLSupported,
-    isWebGL2Supported: !!gpuInfo?.isWebGL2Supported,
-    performanceLevel: metrics.performanceScore >= 90 ? 'excellent' : 
-                     metrics.performanceScore >= 80 ? 'good' : 
-                     metrics.performanceScore >= 70 ? 'fair' : 'poor',
-    needsOptimization: metrics.performanceScore < 70,
-    batteryOptimized: metrics.batteryImpact < 50
-  }
-}
-
-export default useHardwareAcceleration
+    }, [enableBatteryOptimization, batteryLowThreshold, callbacks]);
+    // Apply battery optimizations
+    const applyBatteryOptimizations = useCallback(() => {
+        if (!enableBatteryOptimization)
+            return;
+        setIsOptimizing(true);
+        setTimeout(() => {
+            const optimizations = [
+                'Reduced animation complexity for battery optimization',
+                'Hardware acceleration throttled for power efficiency',
+                'GPU utilization optimized for battery life'
+            ];
+            setOptimizations(prev => [...prev, ...optimizations]);
+            setIsOptimizing(false);
+            optimizations.forEach(optimization => {
+                callbacks.onOptimizationApplied?.(optimization);
+            });
+        }, 300);
+    }, [enableBatteryOptimization, callbacks]);
+    // Automatic optimization
+    const applyAutomaticOptimizations = useCallback(() => {
+        if (!enableAutomaticOptimization)
+            return;
+        setIsOptimizing(true);
+        setTimeout(() => {
+            const optimizations = [];
+            if (metrics.fps < fpsTarget * 0.8) {
+                optimizations.push('Hardware acceleration optimized for better FPS');
+            }
+            if (metrics.memoryUsage > memoryThreshold) {
+                optimizations.push('Memory usage optimized for better performance');
+            }
+            if (metrics.gpuUtilization > 80) {
+                optimizations.push('GPU utilization optimized for better efficiency');
+            }
+            if (optimizations.length > 0) {
+                setOptimizations(prev => [...prev, ...optimizations]);
+                optimizations.forEach(optimization => {
+                    callbacks.onOptimizationApplied?.(optimization);
+                });
+            }
+            setIsOptimizing(false);
+        }, 200);
+    }, [enableAutomaticOptimization, metrics, fpsTarget, memoryThreshold, callbacks]);
+    // Hardware acceleration status check
+    const checkHardwareAcceleration = useCallback(() => {
+        if (!gpuInfo)
+            return false;
+        const isSupported = gpuInfo.isWebGLSupported || gpuInfo.isWebGL2Supported;
+        const hasGoodPerformance = metrics.performanceScore >= 80;
+        setIsHardwareAccelerated(isSupported && hasGoodPerformance);
+        return isSupported && hasGoodPerformance;
+    }, [gpuInfo, metrics.performanceScore]);
+    // Initialize monitoring
+    useEffect(() => {
+        try {
+            // Detect GPU on mount
+            const detectedGPU = detectGPU();
+            if (detectedGPU) {
+                canvasRef.current = document.createElement('canvas');
+                glRef.current = canvasRef.current.getContext('webgl');
+            }
+            // Set up performance monitoring
+            if (enablePerformanceTracking) {
+                performanceTimerRef.current = window.setInterval(measurePerformance, 1000);
+            }
+            // Set up battery monitoring
+            if (enableBatteryOptimization) {
+                checkBatteryStatus();
+                const batteryInterval = setInterval(checkBatteryStatus, 30000); // Check every 30 seconds
+                return () => {
+                    if (batteryInterval)
+                        clearInterval(batteryInterval);
+                };
+            }
+        }
+        catch (error) {
+            console.warn('Hardware acceleration initialization failed:', error);
+        }
+    }, [detectGPU, enablePerformanceTracking, enableBatteryOptimization, checkBatteryStatus, measurePerformance]);
+    // Check hardware acceleration status when metrics change
+    useEffect(() => {
+        checkHardwareAcceleration();
+    }, [checkHardwareAcceleration]);
+    // Apply automatic optimizations when performance degrades
+    useEffect(() => {
+        if (enableAutomaticOptimization && metrics.performanceScore < 70) {
+            applyAutomaticOptimizations();
+        }
+    }, [enableAutomaticOptimization, metrics.performanceScore, applyAutomaticOptimizations]);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (performanceTimerRef.current) {
+                clearInterval(performanceTimerRef.current);
+            }
+        };
+    }, []);
+    return {
+        // State
+        gpuInfo,
+        metrics,
+        isOptimizing,
+        optimizations,
+        isHardwareAccelerated,
+        // Actions
+        detectGPU,
+        measurePerformance,
+        checkBatteryStatus,
+        applyBatteryOptimizations,
+        applyAutomaticOptimizations,
+        checkHardwareAcceleration,
+        // Computed values
+        isGPUSupported: !!gpuInfo?.isWebGLSupported,
+        isWebGL2Supported: !!gpuInfo?.isWebGL2Supported,
+        performanceLevel: metrics.performanceScore >= 90 ? 'excellent' :
+            metrics.performanceScore >= 80 ? 'good' :
+                metrics.performanceScore >= 70 ? 'fair' : 'poor',
+        needsOptimization: metrics.performanceScore < 70,
+        batteryOptimized: metrics.batteryImpact < 50
+    };
+};
+export default useHardwareAcceleration;