73 lines
3.4 KiB
Markdown
73 lines
3.4 KiB
Markdown
# 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)
|