Skip to content

feat(ui): Add Video Player preview component to Desktop and WASM dashboards #10

Description

@spelech

🎯 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

  1. 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.
  2. 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.
  3. 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

  1. Extend EngineStudioTabControl.axaml with a TabControl or segmented button allowing users to toggle between [ 🎨 Images ], [ 📦 3D Meshes ], and [ 🎬 Video ].
  2. Bind generation inputs (Prompt, Negative Prompt, Resolution, Frame Count, Workflow dropdown) to EngineStudioViewModel.
  3. Connect GenerateCommand to POST /api/video/generate and listen to progress updates.
  4. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions