diff --git a/services/web-ui/public/visuals.jsx b/services/web-ui/public/visuals.jsx index 6f7c5c3..4a5f3dd 100644 --- a/services/web-ui/public/visuals.jsx +++ b/services/web-ui/public/visuals.jsx @@ -2,9 +2,6 @@ const { thumbGrad } = window.ZAMPP_DATA; -// AssetThumb — renders a placeholder thumbnail for an asset. -// For video: gradient background + scan lines + framed window + tiny "preview" content -// For audio: waveform function AssetThumb({ asset, size = "md" }) { const aspect = size === "tall" ? "9 / 16" : "16 / 9"; const seed = asset.seed || 1; @@ -28,9 +25,7 @@ function AssetThumb({ asset, size = "md" }) { ); } -// FauxFrame - draws a stylized video frame using shapes/SVG function FauxFrame({ seed }) { - // pick a "shot" type by seed const shots = ["stage", "track", "interview", "aerial", "crowd", "trophy"]; const shot = shots[seed % shots.length]; @@ -116,7 +111,6 @@ function FauxFrame({ seed }) { ); } -// Waveform — pseudorandom but deterministic function Waveform({ seed = 1, color = "var(--accent)", className = "" }) { const bars = 60; const pts = React.useMemo(() => { @@ -136,7 +130,6 @@ function Waveform({ seed = 1, color = "var(--accent)", className = "" }) { ); } -// Live scrolling thumbnail strip - shows recent frames coming in function LiveStrip({ seed = 1, count = 8 }) { const [tick, setTick] = React.useState(0); React.useEffect(() => { @@ -162,7 +155,6 @@ function LiveStrip({ seed = 1, count = 8 }) { ); } -// Sparkline function Sparkline({ data, color = "var(--accent)", height = 28, fill = true }) { const max = Math.max(...data, 1); const min = Math.min(...data, 0); @@ -182,7 +174,6 @@ function Sparkline({ data, color = "var(--accent)", height = 28, fill = true }) ); } -// Animated audio meter function AudioMeter({ level = 0.7, peak = 0.85, vertical = false }) { const segs = 20; return ( @@ -197,7 +188,6 @@ function AudioMeter({ level = 0.7, peak = 0.85, vertical = false }) { ); } -// Status dot with pulse function StatusDot({ status }) { const map = { online: { color: "var(--success)", pulse: false }, @@ -220,7 +210,6 @@ function StatusDot({ status }) { ); } -// Live-style ticking clock for elapsed times function Elapsed({ seconds, live = false }) { const [t, setT] = React.useState(seconds); React.useEffect(() => {