Feature: Visual Timeline Scrubber für Video-Trimming

[N3XT0R]

Motivation

Aktuell erfolgt die Auswahl des Preview-Zeitraums beim Video-Upload über manuelle Eingabe im mm:ss-Format.
Das funktioniert zuverlässig, ist aber weder intuitiv noch visuell ansprechend.

Ziel ist es, die UX durch einen visuellen Timeline-Scrubber zu verbessern, bei dem Nutzer Start- und Endpunkt per Drag & Drop auf einer Video-Timeline wählen können.

---

Zielsetzung

Bereitstellung eines modernen, Browser-kompatiblen Video-Timeline-Pickers, der:

• Eine visuelle Vorschau des hochgeladenen Videos zeigt
• Start- und Endpunkte per Drag & Drop auf der Timeline ermöglicht
• Präzise Zeitangaben (mm:ss) live anzeigt
• Die manuelle Eingabe (mm:ss) weiterhin unterstützt
• Mit modernen Browsern und Filament v4 / Livewire kompatibel ist

---

Problem

Die meisten existierenden Video-Range-Picker-Plugins sind:

• Veraltet (z. B. Flash oder alte jQuery-Versionen)
• Nicht mehr mit modernen Browsern kompatibel
• Kaum in Filament/Livewire integrierbar

---

Aktueller Stand (v3.0.0)

Funktional, aber rudimentär:

• TextInput-Felder für Start/End im mm:ss-Format
• Client-side Validation (Start < End, End <= Duration)
• Automatische Duration-Erkennung via JavaScript
• Smart Defaults (Start: 00:00, End: Video-Duration)

Code-Referenz:
App\Filament\Pages\VideoUpload::timeFields()

---

Anforderungen

🎯 Must Have

• Visuelle Timeline mit Video-Thumbnail oder Fortschrittsbalken
• Drag-Handles für Start- und Endpunkt
• Live-Anzeige der gewählten Zeitspanne (mm:ss)
• Bidirektionale Synchronisation mit bestehenden TextInput-Feldern
• Client-side Validation (Start < End, End <= Duration)
• Kompatibilität mit modernen Browsern (Chrome, Firefox, Safari, Edge)

💡 Nice to Have

• Video-Preview beim Hovern über die Timeline
• Frame-genaue Navigation (z. B. Pfeiltasten)
• Keyboard-Shortcuts für präzises Trimming
• Thumbnails entlang der Timeline (ähnlich YouTube-Editor)
• Zoom-Funktion für lange Videos

---

Technische Überlegungen

🔧 Mögliche Ansätze

1. Custom Component mit HTML5 Video API

   • Volle Kontrolle, keine externen Dependencies
   • Moderate bis hohe Implementierungskomplexität

2. Integration einer modernen JavaScript-Library

   • Recherche aktiver, maintained Projekte
   • Filament/Livewire-Integration prüfen

3. Video.js / Plyr + Custom Range Plugin

   • Nutzung eines etablierten Players als Basis
   • Custom Range-Selection aufbauen

4. Canvas-basierte Lösung

   • Thumbnails aus Video extrahieren
   • Timeline auf Canvas rendern
   • Sehr hoher Aufwand, aber maximale Flexibilität

---

Integration in Filament

• Implementierung als Custom Filament Field Component, z. B.

  VideoTrimField::make('trim_range')

• Synchronisation mit wire:model.defer
• Event-Hook nach FilePond:addfile, um Video-Daten (Blob) zu initialisieren
• Keine Backend-Roundtrips nötig – reine Client-side Interaktion

---

Abgrenzung (Out of Scope)

• Video-Transcoding oder Rendering
• Audio-Waveform-Visualisierung
• Server-side Videoverarbeitung (bleibt unverändert)

---

Akzeptanzkriterien

✅ Funktionalität

• User kann Start- und Endpunkt per Drag & Drop auf der Timeline wählen
• Timeline zeigt visuelle Repräsentation des Videos (z. B. Fortschrittsbalken oder Thumbnails)
• Drag-Handles sind klar erkennbar und intuitiv bedienbar
• Gewählte Zeitspanne wird live im mm:ss-Format angezeigt
• Manuelle Eingabe bleibt möglich
• Änderungen in Timeline und Textfeldern synchronisieren sich bidirektional

⚙️ Validation

• Startzeit < Endzeit
• Endzeit ≤ Video-Duration
• Klare, verständliche Fehlermeldungen
• Validation läuft vollständig client-side

🧩 Technische Qualität

• Kompatibel mit modernen Browsern
• Keine veralteten Dependencies
• Livewire-kompatibel (wire:model.defer)
• Flüssige Interaktion auch bei Videos > 100 MB
• Keine Regression bei bestehender Upload-Funktion

🧠 User Experience

• Mobile-Support (Touch-Drag)
• Intuitive Bedienung ohne Anleitung
• Visuelles Feedback beim Dragging
• Responsives Verhalten bei unterschiedlichen Bildschirmgrößen

🧪 Testing

• Unit-Tests für Validation-Logic
• Browser-Tests für Drag & Drop
• Manuelle Tests auf Desktop & Mobile
• Edge-Cases getestet (z. B. Videos < 10 s oder > 10 min)

---

Priorität

🟡 Niedrig – Funktionalität bereits vorhanden, Fokus liegt auf UX-Verbesserung.

---

Zielversion

v3.x oder v4.0

---

Abhängigkeiten

• Keine direkten technischen Abhängigkeiten
• Research-Phase: Evaluierung moderner Video-Timeline-Libraries

---

Referenzen

• Aktueller Code: App\Filament\Pages\VideoUpload::timeFields()
• Inspiration: YouTube Video Editor, Adobe Premiere, DaVinci Resolve
• Potenzielle Libraries: (Recherche offen)

Nächste Schritte

• Research moderner HTML5/JS Video-Timeline-Libraries
• Proof of Concept (HTML5-basierte Range-Slider-Lösung)
• Integrationstest mit Filament + Livewire
• UX-Iteration mit realen Videodateien