Benutzer, Sammlungen, Wünsche und zwei Kartenansichten

Die Runde ist jetzt benannt. Der Host pflegt die Namensliste im neuen Reiter
"Verwaltung", alle anderen wählen sich oben rechts einen aus. Der Name landet
serverseitig an Vorschlägen und Wertungen, statt aus einem Textfeld zu
kommen, in das jeder schreiben konnte, was er wollte.

Dazu zwei Sammelstellen, beide nach Person gruppiert und für alle sichtbar,
aber nur selbst bearbeitbar:
- "Sammlungen": Filme, die man sehen möchte. Getrennt vom Rad-Vorschlag,
  von dem es weiterhin einen je Person gibt.
- "Wünsche": was der Seite noch fehlt. Der Host darf hier alle Einträge
  ändern und löschen.

Die Filmliste hat jetzt zwei Ansichten. Kompakt ist die gewohnte Karte,
Details stellt Cover, Text und vier Szenenbilder nebeneinander — eine Karte
so breit wie vier kompakte oder die halbe Reihe, je nachdem was zuerst
zutrifft. Reihen und Einzelfilme sind dabei exakt gleich hoch; die
Blätterleiste liegt dafür über dem Cover statt darunter.

Die Filmansicht nutzt die Breite: links Cover, Text und Knöpfe, rechts der
Trailer, darunter die Bilder. Ein Klick zeigt ein Bild in voller Größe.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013XVnRop5c3or3B8xE2hpgZ

frontend/src/components/StreamTab.vue

@@ -18,6 +18,37 @@ const lautstaerke = ref(1)
 const vollbild = ref(false)
 
 let hls = null
+let neustart = null
+let wache = null
+
+// Mehrere Fehler kurz hintereinander sollen nicht mehrere Timer anlegen
+function spaeterNeuLaden() {
+  if (neustart) return
+  neustart = window.setTimeout(() => {
+    neustart = null
+    hls?.startLoad()
+  }, 3000)
+}
+
+// hls.js meldet nicht jeden Hänger als Fehler. Manchmal steht die Playlist,
+// aber es kommt kein Segment — dann bleibt der Player einfach stehen, ohne
+// dass irgendetwas davon erfährt. Wer die Seite offen hat, bevor gesendet
+// wird, sitzt sonst vor einem toten Bild.
+function wacheStarten() {
+  let letzte = -1
+  let stillstand = 0
+  wache = window.setInterval(() => {
+    const v = video.value
+    if (!v || v.paused || zustand.value === 'bereit') return
+    if (v.currentTime === letzte) stillstand++
+    else stillstand = 0
+    letzte = v.currentTime
+    if (stillstand >= 5) {
+      stillstand = 0
+      hls?.startLoad()
+    }
+  }, 1000)
+}
 
 // Was der Server sendet, läuft. Wer anhält, fällt aus dem Gleichlauf und
 // müsste den Rückstand hinterher mit erhöhtem Tempo aufholen. Also lassen
@@ -90,7 +121,7 @@ function verbinden() {
     if (daten.type === Hls.ErrorTypes.NETWORK_ERROR) {
       zustand.value = 'wartet'
       // Nicht sofort neu anfragen — sonst hämmert der Browser den Server
-      window.setTimeout(() => hls?.startLoad(), 3000)
+      spaeterNeuLaden()
     } else if (daten.type === Hls.ErrorTypes.MEDIA_ERROR) {
       hls.recoverMediaError()
     } else {
@@ -99,6 +130,11 @@ function verbinden() {
     }
   })
 
+  // Kommen wieder Daten, ist die Wartemeldung überholt
+  hls.on(Hls.Events.FRAG_BUFFERED, () => {
+    if (zustand.value === 'wartet') zustand.value = 'laeuft'
+  })
+
   hls.on(Hls.Events.MANIFEST_PARSED, () => {
     zustand.value = 'laeuft'
     video.value.play().catch(() => {
@@ -126,6 +162,7 @@ function vollbildGewechselt() {
 
 onMounted(() => {
   verbinden()
+  wacheStarten()
   document.addEventListener('fullscreenchange', vollbildGewechselt)
   window.addEventListener('keydown', tasteAbfangen)
 })
@@ -133,6 +170,8 @@ onMounted(() => {
 onUnmounted(() => {
   document.removeEventListener('fullscreenchange', vollbildGewechselt)
   window.removeEventListener('keydown', tasteAbfangen)
+  window.clearInterval(wache)
+  window.clearTimeout(neustart)
   hls?.destroy()
   hls = null
 })