WildDragonLLC/dragonflight
1
0
Fork 0
Code Issues 18 Pull requests 3 Projects Releases Packages Wiki Activity Actions

feat(ui): Dragonflight redesign — visuals + tweaks panel: visuals.jsx

Browse source
This commit is contained in:
Zac Gaetano 2026-05-22 08:15:34 -04:00
parent dfdf0845a0
commit c0345e47c9
1 changed files with 0 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
services/web-ui/public/visuals.jsx
View file

@ -2,9 +2,6 @@
const { thumbGrad } = window.ZAMPP_DATA; 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" }) { function AssetThumb({ asset, size = "md" }) {
const aspect = size === "tall" ? "9 / 16" : "16 / 9"; const aspect = size === "tall" ? "9 / 16" : "16 / 9";
const seed = asset.seed || 1; 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 }) { function FauxFrame({ seed }) {
// pick a "shot" type by seed
const shots = ["stage", "track", "interview", "aerial", "crowd", "trophy"]; const shots = ["stage", "track", "interview", "aerial", "crowd", "trophy"];
const shot = shots[seed % shots.length]; 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 = "" }) { function Waveform({ seed = 1, color = "var(--accent)", className = "" }) {
const bars = 60; const bars = 60;
const pts = React.useMemo(() => { 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 }) { function LiveStrip({ seed = 1, count = 8 }) {
const [tick, setTick] = React.useState(0); const [tick, setTick] = React.useState(0);
React.useEffect(() => { React.useEffect(() => {
@ -162,7 +155,6 @@ function LiveStrip({ seed = 1, count = 8 }) {
); );
} }
// Sparkline
function Sparkline({ data, color = "var(--accent)", height = 28, fill = true }) { function Sparkline({ data, color = "var(--accent)", height = 28, fill = true }) {
const max = Math.max(...data, 1); const max = Math.max(...data, 1);
const min = Math.min(...data, 0); 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 }) { function AudioMeter({ level = 0.7, peak = 0.85, vertical = false }) {
const segs = 20; const segs = 20;
return ( return (
@ -197,7 +188,6 @@ function AudioMeter({ level = 0.7, peak = 0.85, vertical = false }) {
); );
} }
// Status dot with pulse
function StatusDot({ status }) { function StatusDot({ status }) {
const map = { const map = {
online: { color: "var(--success)", pulse: false }, 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 }) { function Elapsed({ seconds, live = false }) {
const [t, setT] = React.useState(seconds); const [t, setT] = React.useState(seconds);
React.useEffect(() => { React.useEffect(() => {