116 lines
5.1 KiB
Markdown
116 lines
5.1 KiB
Markdown
---
|
|
phase: 44-video-presentations
|
|
plan: 03
|
|
subsystem: ui
|
|
tags: [remotion, video, presentations, react, sse, progress, content-studio]
|
|
|
|
# Dependency graph
|
|
requires:
|
|
- phase: 44-video-presentations/44-01
|
|
provides: PresentationBundle interface, content_job.progress LiveEventType, presentation case in content-job-runner
|
|
- phase: 44-video-presentations/44-02
|
|
provides: Server-side presentation renderer emitting SSE progress events
|
|
provides:
|
|
- useContentJob extended to read fine-grained data.progress from SSE events
|
|
- PresentationPanel component with prompt, type selector, real-time progress, MP4 player
|
|
- ContentStudio Presentations tab wiring PresentationPanel
|
|
affects:
|
|
- Any future content studio panels using useContentJob (can use fine-grained progress)
|
|
|
|
# Tech tracking
|
|
tech-stack:
|
|
added: []
|
|
patterns:
|
|
- "Fine-grained SSE progress: data.progress preferred over coarse statusToProgress fallback"
|
|
- "mp4Base64 -> blob URL via useMemo with URL.revokeObjectURL cleanup in useEffect"
|
|
- "Panel pattern: useContentJob + getContentJobAsset fetch on job.status === done"
|
|
|
|
key-files:
|
|
created:
|
|
- ui/src/components/PresentationPanel.tsx
|
|
modified:
|
|
- ui/src/hooks/useContentJob.ts
|
|
- ui/src/pages/ContentStudio.tsx
|
|
|
|
key-decisions:
|
|
- "data.progress preferred over statusToProgress when typeof data.progress === 'number' — backward-compatible for all non-video job types"
|
|
- "mp4Base64 blob URL created in useMemo and cleaned up via useEffect return — avoids memory leaks across rerenders"
|
|
- "PresentationBundle interface defined locally in PresentationPanel — avoids cross-package import from server types"
|
|
|
|
patterns-established:
|
|
- "Fine-grained SSE progress reading: check typeof data.progress === 'number' before falling back to coarse status mapping"
|
|
- "Video blob URL lifecycle: useMemo for creation, useEffect cleanup for revocation"
|
|
|
|
requirements-completed: [PRES-01, PRES-02, PRES-03, PRES-04]
|
|
|
|
# Metrics
|
|
duration: 5min
|
|
completed: 2026-04-04
|
|
---
|
|
|
|
# Phase 44 Plan 03: Video Presentations — UI Panel Summary
|
|
|
|
**PresentationPanel with real-time SSE progress bar, MP4 video player + download, and Presentations tab in ContentStudio — backed by fine-grained data.progress in useContentJob**
|
|
|
|
## Performance
|
|
|
|
- **Duration:** ~5 min
|
|
- **Started:** 2026-04-04T23:28:00Z
|
|
- **Completed:** 2026-04-04T23:33:00Z
|
|
- **Tasks:** 2
|
|
- **Files modified:** 3
|
|
|
|
## Accomplishments
|
|
|
|
- Extended `useContentJob` SSE handler to read `data.progress` (number 0-100) from status events, falling back to coarse `statusToProgress` for non-video job types
|
|
- Created `PresentationPanel` (199 lines) with prompt textarea, pitch-deck/demo-video selector, real-time progress bar with percentage text, MP4 video player with blob URL lifecycle management, and download + generate-another actions
|
|
- Added Presentations tab to ContentStudio as the 8th tab, wired to PresentationPanel
|
|
|
|
## Task Commits
|
|
|
|
1. **Task 1: Extend useContentJob to read fine-grained SSE progress** - `f088090a` (feat)
|
|
2. **Task 2: Create PresentationPanel and add Presentations tab to ContentStudio** - `1fb26bfb` (feat)
|
|
|
|
## Files Created/Modified
|
|
|
|
- `ui/src/hooks/useContentJob.ts` - Added `progress?: number` to SSE data type; prefer `data.progress` over coarse `statusToProgress`
|
|
- `ui/src/components/PresentationPanel.tsx` - Full panel: prompt, type selector, progress bar, video player, blob URL lifecycle
|
|
- `ui/src/pages/ContentStudio.tsx` - Import PresentationPanel; add Presentations TabsTrigger and TabsContent after Brand
|
|
|
|
## Decisions Made
|
|
|
|
- `data.progress` check uses `typeof data.progress === "number"` guard — prevents `0` (falsy) from triggering the fallback incorrectly
|
|
- `mp4Base64` blob URL created in `useMemo([bundle?.mp4Base64])` and revoked in `useEffect` return — ensures revocation fires when URL changes or component unmounts
|
|
- `PresentationBundle` interface defined locally in `PresentationPanel.tsx` — avoids importing server-side types into the UI package
|
|
|
|
## Deviations from Plan
|
|
|
|
None - plan executed exactly as written.
|
|
|
|
## Issues Encountered
|
|
|
|
Pre-existing TypeScript errors in `ContentStudio.tsx` (themeJob.bundle reference) and `PersonalAssistant.tsx` (ToastTone type mismatch) exist independently of this plan's changes. No new errors were introduced by this plan. Logged as deferred items (out-of-scope per deviation rule boundary).
|
|
|
|
## User Setup Required
|
|
|
|
None - no external service configuration required.
|
|
|
|
## Next Phase Readiness
|
|
|
|
- All four PRES requirements (PRES-01 through PRES-04) are complete across plans 01-03
|
|
- Phase 44 is complete: Remotion workspace (plan 01), server renderer (plan 02), UI panel (plan 03)
|
|
- ContentStudio now has 8 tabs: Diagrams, Icons, Themes, Wallpapers, Social, Documents, Brand, Presentations
|
|
|
|
## Self-Check: PASSED
|
|
|
|
- FOUND: ui/src/components/PresentationPanel.tsx
|
|
- FOUND: ui/src/hooks/useContentJob.ts (modified)
|
|
- FOUND: ui/src/pages/ContentStudio.tsx (modified)
|
|
- FOUND: .planning/phases/44-video-presentations/44-03-SUMMARY.md
|
|
- FOUND commit: f088090a (Task 1)
|
|
- FOUND commit: 1fb26bfb (Task 2)
|
|
- FOUND commit: 60e94e51 (metadata)
|
|
|
|
---
|
|
*Phase: 44-video-presentations*
|
|
*Completed: 2026-04-04*
|