udpate stuff

frontend/src/components/StatusBar.tsx

@@ -4,6 +4,22 @@ interface Props {
   status: StreamStatus | null;
 }
 
+function healthColor(speed: string): string {
+  const n = parseFloat(speed);
+  if (isNaN(n)) return "health-unknown";
+  if (n >= 0.95) return "health-good";
+  if (n >= 0.8) return "health-warn";
+  return "health-bad";
+}
+
+function healthLabel(speed: string): string {
+  const n = parseFloat(speed);
+  if (isNaN(n)) return "?";
+  if (n >= 0.95) return "Good";
+  if (n >= 0.8) return "Slow upstream";
+  return "Upstream too slow";
+}
+
 export default function StatusBar({ status }: Props) {
   if (!status) {
     return (
@@ -14,6 +30,8 @@ export default function StatusBar({ status }: Props) {
     );
   }
 
+  const h = status.health;
+
   return (
     <div className="status-bar">
       <span className={`status-dot ${status.live ? "live" : "offline"}`} />
@@ -24,12 +42,32 @@ export default function StatusBar({ status }: Props) {
       <span className="status-source">
         Source: {status.source === "obs" ? "OBS" : "IPTV"}
       </span>
-      {status.source === "iptv" && status.channelName && (
+      {status.source === "iptv" && status.channel_name && (
         <>
           <span className="status-separator">|</span>
-          <span className="status-channel">{status.channelName}</span>
+          <span className={`status-channel ${status.transitioning ? "channel-transitioning" : ""}`}>
+            {status.channel_name}
+            {status.transitioning && (
+              <span className="channel-switching">Switching...</span>
+            )}
+          </span>
         </>
       )}
+      {h && h.speed && (
+        <span className="status-health">
+          <span className="status-separator">|</span>
+          <span className={`health-indicator ${healthColor(h.speed)}`}>
+            {healthLabel(h.speed)}
+          </span>
+          <span className="health-stats">
+            {h.speed} / {h.bitrate}
+            {h.fps && h.fps !== "0.00" && <> / {h.fps}fps</>}
+            {h.drop_frames !== "0" && (
+              <span className="health-drops"> / {h.drop_frames} dropped</span>
+            )}
+          </span>
+        </span>
+      )}
     </div>
   );
 }