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

fix: SDI crash, monitors polling, home RAM fields, editor IN DEV splash, timecode, create recorder API: screens-editor.jsx

Browse source
This commit is contained in:
Zac Gaetano 2026-05-22 10:55:20 -04:00
parent 24a1d57165
commit fb44bd8aff
1 changed files with 33 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
services/web-ui/public/screens-editor.jsx
View file

@ -1,5 +1,14 @@
// screens-editor.jsx — Editor (timeline)
function _fmtTimecode(ms) {
const s = Math.floor(ms / 1000);
const f = Math.floor((ms % 1000) / (1000 / 30));
return String(Math.floor(s / 3600)).padStart(2, '0') + ':' +
String(Math.floor((s % 3600) / 60)).padStart(2, '0') + ':' +
String(s % 60).padStart(2, '0') + ':' +
String(f).padStart(2, '0');
}
function Editor() {
const { ASSETS } = window.ZAMPP_DATA;
const [playing, setPlaying] = React.useState(false);
@ -12,7 +21,7 @@ function Editor() {
}, [playing]);
return (
<div className="editor-shell">
<div className="editor-shell" style={{ position: 'relative' }}>
<div className="editor-topbar">
<span style={{ fontWeight: 600, fontSize: 13 }}>New sequence</span>
<div style={{ flex: 1 }} />
@ -48,7 +57,7 @@ function Editor() {
<Icon name="play" size={28} />
</button>
)}
<div className="player-tc"><span className="mono">{msToTimecode ? msToTimecode(currentMs) : '00:00:00:00'}</span></div>
<div className="player-tc"><span className="mono">{_fmtTimecode(currentMs)}</span></div>
</div>
<div className="editor-transport">
<button className="icon-btn" onClick={() => setCurrentMs(0)}><Icon name="arrowLeft" size={14} /></button>
@ -83,6 +92,28 @@ function Editor() {
</aside>
</div>
<EditorTimeline currentMs={currentMs} total={60} clips={[]} />
{/* IN DEVELOPMENT overlay */}
<div style={{
position: 'absolute', inset: 0, zIndex: 20,
display: 'flex', alignItems: 'center', justifyContent: 'center',
backdropFilter: 'blur(6px)', background: 'rgba(10,12,16,0.82)',
pointerEvents: 'all',
}}>
<div style={{
background: 'var(--bg-1)', border: '1px solid var(--border-stronger)',
borderRadius: 14, padding: '48px 56px', textAlign: 'center',
maxWidth: 440, boxShadow: '0 24px 80px rgba(0,0,0,0.6)',
}}>
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', color: 'var(--warning)', textTransform: 'uppercase', marginBottom: 20 }}>In Development</div>
<div style={{ fontSize: 22, fontWeight: 700, marginBottom: 14, letterSpacing: '-0.02em', color: 'var(--text-1)' }}>Non-linear Editor</div>
<div style={{ fontSize: 13, color: 'var(--text-3)', lineHeight: 1.75 }}>
Timeline editing, multi-track audio mixing,<br />
GPU-accelerated export, and color grading<br />
are coming in a future release.
</div>
</div>
</div>
</div>
);
}