'use client'; import { useState } from 'react'; import { useSmartPolling, PerformanceMonitor } from '@/lib/performance'; type OBSStatus = { host: string; port: string; hasPassword: boolean; connected: boolean; version?: { obsVersion: string; obsWebSocketVersion: string; }; currentScene?: string; sceneCount?: number; streaming?: boolean; recording?: boolean; error?: string; }; type Counts = { streams: number; teams: number; }; export default function Footer() { const [obsStatus, setObsStatus] = useState(null); const [counts, setCounts] = useState(null); const [isLoading, setIsLoading] = useState(true); // Smart polling with performance monitoring and visibility detection const fetchOBSStatus = async () => { const endTimer = PerformanceMonitor.startTimer('obsStatus_fetch'); try { const response = await fetch('/api/obsStatus'); const data = await response.json(); setObsStatus(data); } catch (error) { console.error('Failed to fetch OBS status:', error); // Set error state instead of leaving null setObsStatus(prev => prev ? { ...prev, error: 'Connection failed' } : null); } finally { setIsLoading(false); endTimer(); } }; const fetchCounts = async () => { try { const response = await fetch('/api/counts'); const data = await response.json(); setCounts(data.data); } catch (error) { console.error('Failed to fetch counts:', error); } }; // Use smart polling that respects page visibility and adapts interval based on connection status const pollingInterval = obsStatus?.connected ? 15000 : 30000; // Poll faster when connected useSmartPolling(fetchOBSStatus, pollingInterval, [obsStatus?.connected]); // Poll counts less frequently (every 60 seconds) since they don't change as often useSmartPolling(fetchCounts, 60000, []); if (isLoading) { return ( ); } return ( ); }