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

🎯 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