🎯 Objective & Overview
Add a responsive, high-performance video preview player to the Studio tab in both the Avalonia Desktop UI (Windows/Linux) and WebAssembly (WASM) browser dashboard to play generated .mp4 and .webm videos.
📂 Files & Components to Touch
- Desktop / Avalonia UI (
LocalLLMServerManager.Shared/Views/Controls/):
- Update
EngineStudioTabControl.axaml to include a dedicated Video Studio sub-view or mode selector (Images / 3D Mesh / Video / Audio).
- Add media playback view utilizing Avalonia media controls or embedded cross-platform video rendering.
- WASM Browser UI (
wwwroot/):
- Update
wwwroot/index.html or WASM host templates to embed an HTML5 <video controls autoplay loop> component.
- Include video download/export button and resolution/fps badges.
- ViewModels (
LocalLLMServerManager.Shared/ViewModels/):
EngineStudioViewModel.cs / MainViewModel.cs: Add observable properties:
SelectedVideoWorkflow
IsGeneratingVideo
VideoGenerationProgress
RenderedVideoUrl
GeneratedVideosList (ObservableCollection)
🎨 UI Specifications
- Controls: Play, Pause, Seek bar, Loop toggle, Fullscreen, Download (
.mp4).
- Metadata Overlay: Display duration (e.g.
3.0s), resolution (832x480), FPS (16 fps), and seed used.
- Gallery Mode: Recent video renders displayed in a carousel / thumbnail grid.
🛠️ Step-by-Step Implementation Guide
- Extend
EngineStudioTabControl.axaml with a TabControl or segmented button allowing users to toggle between [ 🎨 Images ], [ 📦 3D Meshes ], and [ 🎬 Video ].
- Bind generation inputs (Prompt, Negative Prompt, Resolution, Frame Count, Workflow dropdown) to
EngineStudioViewModel.
- Connect
GenerateCommand to POST /api/video/generate and listen to progress updates.
- Once completed, set
RenderedVideoUrl and trigger playback.
🧪 Verification
dotnet build
npm run lint & npx tsc --noEmit
- Run Playwright E2E layout tests:
npm run test:layout
🎯 Objective & Overview
Add a responsive, high-performance video preview player to the Studio tab in both the Avalonia Desktop UI (Windows/Linux) and WebAssembly (WASM) browser dashboard to play generated
.mp4and.webmvideos.📂 Files & Components to Touch
LocalLLMServerManager.Shared/Views/Controls/):EngineStudioTabControl.axamlto include a dedicated Video Studio sub-view or mode selector (Images / 3D Mesh / Video / Audio).wwwroot/):wwwroot/index.htmlor WASM host templates to embed an HTML5<video controls autoplay loop>component.LocalLLMServerManager.Shared/ViewModels/):EngineStudioViewModel.cs/MainViewModel.cs: Add observable properties:SelectedVideoWorkflowIsGeneratingVideoVideoGenerationProgressRenderedVideoUrlGeneratedVideosList(ObservableCollection)🎨 UI Specifications
.mp4).3.0s), resolution (832x480), FPS (16 fps), and seed used.🛠️ Step-by-Step Implementation Guide
EngineStudioTabControl.axamlwith a TabControl or segmented button allowing users to toggle between[ 🎨 Images ],[ 📦 3D Meshes ], and[ 🎬 Video ].EngineStudioViewModel.GenerateCommandtoPOST /api/video/generateand listen to progress updates.RenderedVideoUrland trigger playback.🧪 Verification
dotnet buildnpm run lint&npx tsc --noEmitnpm run test:layout