Initial commit

components/viewer/connection-status.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Signal, Clock, Gauge } from 'lucide-react'
+
+interface ConnectionStatusProps {
+  quality: 'high' | 'medium' | 'low'
+}
+
+export function ConnectionStatus({ quality }: ConnectionStatusProps) {
+  const [stats, setStats] = useState({
+    latency: 45,
+    fps: 60,
+    bitrate: 8.5,
+  })
+
+  // Simulate varying connection stats
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setStats({
+        latency: Math.floor(35 + Math.random() * 20),
+        fps: quality === 'high' ? 60 : quality === 'medium' ? 30 : 15,
+        bitrate: quality === 'high' ? 8 + Math.random() * 2 : quality === 'medium' ? 4 + Math.random() : 1 + Math.random() * 0.5,
+      })
+    }, 1000)
+
+    return () => clearInterval(interval)
+  }, [quality])
+
+  return (
+    <div className="flex items-center justify-center gap-6 h-8 bg-card/80 backdrop-blur border-t border-border/50 text-xs text-muted-foreground">
+      <div className="flex items-center gap-1.5">
+        <Clock className="h-3 w-3" />
+        <span>{stats.latency}ms</span>
+      </div>
+      <div className="flex items-center gap-1.5">
+        <Gauge className="h-3 w-3" />
+        <span>{stats.fps} FPS</span>
+      </div>
+      <div className="flex items-center gap-1.5">
+        <Signal className="h-3 w-3" />
+        <span>{stats.bitrate.toFixed(1)} Mbps</span>
+      </div>
+    </div>
+  )
+}