WildDragonLLC/dragonflight
1
0
Fork 0
Code Issues 18 Pull requests 3 Projects Releases Packages Wiki Activity Actions
dragonflight/docs/superpowers/plans/2026-05-24-nle-editor-react-polish-phase-1-2-3.md

3.4 KiB
Raw Blame History

NLE Editor: React SPA Polish — Phases 1–3 Implementation Plan

Date: 2026-05-24 Status: Phase 1 IN PROGRESS Progress: Tasks 1.1–1.6 code-complete, pending test/deploy

Phase 1 — Core Editor (IN PROGRESS)

Task 1.1: Sequence API helpers in data.jsx ✅

  • Added getSequences, createSequence, getSequence, updateSequence, deleteSequence, syncSequenceClips, exportSequenceEDL to data.jsx
  • All exported on window.ZAMPP_API

Task 1.2: Timecode.js wired into SPA ✅

  • Added <script src="js/timecode.js"> and <script src="js/timeline.js"> to index.html before screens-editor.jsx
  • window.TC available globally for 59.94 DF timecode math

Task 1.3: TimelinePanel React component ✅

  • tlRef container div in editor layout
  • useEffect mounts window.Timeline.init() on first render
  • useEffect pushes scale changes via window.Timeline.setScale()
  • onClipsChanged / onPlayheadMoved callbacks connect timeline engine to React state

Task 1.4: screens-editor.jsx rewrite ✅ (455 lines, was 162)

Full rewrite with:

  • App state: projectId, sequences, currentSeq, assets, sourceAsset, srcIn/srcOut, playheadFrames, history (undo stack), scale, tool, saveStatus, isDirty
  • Source monitor: <video> + apiFetch('/assets/:id/stream') + Mark In/Out + Insert button
  • Program monitor: Virtual clip-by-clip playback — loads V1 clips sorted by timeline_in_frames, advances on timeUpdate/ended events
  • Media panel: Asset list from ZAMPP_DATA.ASSETS, filter by bin, AssetThumb thumbnails, double-click loads source
  • Sequence management: Picker <select>, "New sequence" modal, openSequence() loads via API
  • Auto-save: markDirty() → debounce 2s → syncSequenceClips() → status updates
  • Undo/redo: 50-step history stack, Ctrl+Z / Ctrl+Shift+Z
  • EDL export: Button triggers window.ZAMPP_API.exportSequenceEDL()
  • Tool toolbar: V/C/H buttons synced with Timeline.setTool()
  • Zoom slider: Range input driving window.Timeline.setScale()
  • Keyboard handler: I/O, V/C/H, Ctrl+Z/Shift+Z, Ctrl+S

Task 1.5: "In Development" overlay removed ✅

  • Deleted the position: absolute; inset: 0; backdropFilter: blur(6px) overlay div (was lines 98-117)
  • Removed FauxFrame component reference
  • All buttons are now functional

Task 1.6: Editor nav badge removed ✅

  • shell.jsx: { id: "editor", label: "Editor", icon: "editor" } — no more badge: { kind: "dev", text: "DEV" }

NEXT: Task 1.7 — Test & Deploy

  1. docker compose up -d --build web-ui
  2. Navigate to Editor route in browser
  3. Verify: source monitor loads video, timeline renders with 4 track rows, Insert places clip, auto-save fires, EDL export downloads

Phase 2 — UX Polish & Growing File (PENDING)

  • 2.1 Multi-track refinements (ripple delete, snap, locking, overlap prevention)
  • 2.2 Zoom slider + adaptive ruler
  • 2.3 JKL transport + frame stepping
  • 2.4 Waveform display on audio tracks
  • 2.5 Inspector panel wiring
  • 2.6 Style migration to Tailwind primitives
  • 2.7 HLS live preview during capture

Phase 3 — Export, Conform & Features (PENDING)

  • 3.1 FCP XML export + conform queue
  • 3.2 Hi-Res Auto-Relink
  • 3.3 Timecoded Comments
  • 3.4 Player Rebuild (P1)
  • 3.5 Subclips (P2)
  • 3.6 Multi-select & Bulk Ops (P3)
  • 3.7 Smart Bins (P6)
  • 3.8 Metadata Templates (P7)