From 5f07a1df8e4eef6b85c9c699ad7fe700c546602f Mon Sep 17 00:00:00 2001 From: Eli Mallon Date: Sun, 22 Feb 2026 14:06:41 -0800 Subject: [PATCH] prelive: blue circles rather than green --- .../components/live-dashboard/bento-grid.tsx | 8 +++++-- .../live-dashboard/stream-monitor.tsx | 2 ++ .../src/components/dashboard/header.tsx | 8 +++++-- .../dashboard/information-widget.tsx | 24 ++++++++++++------- 4 files changed, 29 insertions(+), 13 deletions(-) diff --git a/js/app/components/live-dashboard/bento-grid.tsx b/js/app/components/live-dashboard/bento-grid.tsx index d70bbc11..dcf2fa30 100644 --- a/js/app/components/live-dashboard/bento-grid.tsx +++ b/js/app/components/live-dashboard/bento-grid.tsx @@ -3,6 +3,7 @@ import { borders, Button, Dashboard, + useLivestream, useLivestreamStore, usePlayerStore, useProfile, @@ -81,6 +82,7 @@ export default function BentoGrid({ isLive, videoRef }: BentoGridProps) { const ingestConnectionState = usePlayerStore((x) => x.ingestConnectionState); const ingestStarted = usePlayerStore((x) => x.ingestStarted); const emojiData = useEmojiData(); + const livestream = useLivestream(); // Calculate derived values const isConnected = ingestConnectionState === "connected"; @@ -112,8 +114,10 @@ export default function BentoGrid({ isLive, videoRef }: BentoGridProps) { | "excellent" | "good" | "poor" - | "offline" => { + | "offline" + | "pre-live" => { if (!isLive) return "offline"; + if (!livestream) return "pre-live"; switch (segmentTiming.connectionQuality) { case "good": return "excellent"; @@ -124,7 +128,7 @@ export default function BentoGrid({ isLive, videoRef }: BentoGridProps) { default: return "offline"; } - }, [isLive, segmentTiming.connectionQuality]); + }, [isLive, livestream, segmentTiming.connectionQuality]); // Calculate messages per minute const messagesPerMinute = useMemo((): number => { diff --git a/js/app/components/live-dashboard/stream-monitor.tsx b/js/app/components/live-dashboard/stream-monitor.tsx index 301963ec..f71a40c2 100644 --- a/js/app/components/live-dashboard/stream-monitor.tsx +++ b/js/app/components/live-dashboard/stream-monitor.tsx @@ -61,6 +61,7 @@ export default function StreamMonitor({ // Connection quality indicator const getConnectionIcon = () => { if (!isLive) return null; + if (!ls) return ; switch (segmentTiming.connectionQuality) { case "good": @@ -76,6 +77,7 @@ export default function StreamMonitor({ const getConnectionColor = () => { if (!isLive) return "red"; + if (!ls) return "blue"; switch (segmentTiming.connectionQuality) { case "good": diff --git a/js/components/src/components/dashboard/header.tsx b/js/components/src/components/dashboard/header.tsx index b5c74e68..f10710eb 100644 --- a/js/components/src/components/dashboard/header.tsx +++ b/js/components/src/components/dashboard/header.tsx @@ -36,7 +36,7 @@ function MetricItem({ icon: Icon, label, value, status }: MetricItemProps) { } interface StatusIndicatorProps { - status: "excellent" | "good" | "poor" | "offline"; + status: "excellent" | "good" | "poor" | "offline" | "pre-live"; isLive: boolean; } @@ -44,6 +44,8 @@ function StatusIndicator({ status, isLive }: StatusIndicatorProps) { const getStatusColor = () => { if (!isLive) return bg.gray[500]; switch (status) { + case "pre-live": + return bg.blue[500]; case "excellent": return bg.green[500]; case "good": @@ -60,6 +62,8 @@ function StatusIndicator({ status, isLive }: StatusIndicatorProps) { const getStatusText = () => { if (!isLive) return "OFFLINE"; switch (status) { + case "pre-live": + return "NOT LIVE"; case "excellent": return "EXCELLENT"; case "good": @@ -101,7 +105,7 @@ interface HeaderProps { uptime?: string; bitrate?: string; timeBetweenSegments?: number; - connectionStatus?: "excellent" | "good" | "poor" | "offline"; + connectionStatus?: "excellent" | "good" | "poor" | "offline" | "pre-live"; problemsCount?: number; onProblemsPress?: () => void; } diff --git a/js/components/src/components/dashboard/information-widget.tsx b/js/components/src/components/dashboard/information-widget.tsx index 07321f6b..bd299e81 100644 --- a/js/components/src/components/dashboard/information-widget.tsx +++ b/js/components/src/components/dashboard/information-widget.tsx @@ -13,11 +13,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react"; import { LayoutChangeEvent, Text, TouchableOpacity, View } from "react-native"; import Svg, { Path, Line as SvgLine, Text as SvgText } from "react-native-svg"; import { useAQState } from "../../hooks"; -import { - useLivestreamStore, - useSegment, - useViewers, -} from "../../livestream-store"; +import { useLivestream, useSegment, useViewers } from "../../livestream-store"; import * as zero from "../../ui"; import { InfoBox, InfoRow } from "../ui"; @@ -50,7 +46,7 @@ export default function InformationWidget({ const isCompactHeight = layoutMeasured && componentHeight < 350; const seg = useSegment(); - const livestream = useLivestreamStore((x) => x.livestream); + const livestream = useLivestream(); const viewers = useViewers(); const getBitrate = useCallback((): number => { @@ -173,8 +169,9 @@ export default function InformationWidget({ width: 8, height: 8, borderRadius: 4, - backgroundColor: - getConnectionStatus() === "good" + backgroundColor: !livestream + ? "#3b82f6" + : getConnectionStatus() === "good" ? "#22c55e" : getConnectionStatus() === "warning" ? "#f59e0b" @@ -182,6 +179,11 @@ export default function InformationWidget({ }, ]} /> + {!livestream && ( + + (not live) + + )} setShowViewers(!showViewers)} @@ -315,6 +317,7 @@ export default function InformationWidget({ data={bitrateHistory} width={componentWidth - 40} height={120} + color={livestream ? "#22c55e" : "#3b82f6"} /> )} @@ -395,6 +398,7 @@ export default function InformationWidget({ data={bitrateHistory} width={componentWidth - 40} height={isCompactHeight ? 80 : 120} + color={livestream ? "#22c55e" : "#3b82f6"} /> )} @@ -432,10 +436,12 @@ function BitrateChart({ data, width, height, + color = "#22c55e", }: { data: number[]; width: number; height: number; + color?: string; }) { const maxDataValue = Math.max(...data, 1); const minDataValue = Math.min(...data); @@ -515,7 +521,7 @@ function BitrateChart({