update

frontend/src/components/ClipsTab.vue

@@ -15,15 +15,21 @@ const props = defineProps({
 })
 
 // "Clip erstellen": erst den Abend wählen, dann öffnet der Editor.
-// Zur Wahl stehen nur Abende, zu denen es eine Aufnahme gibt.
+// Zur Wahl stehen nur Abende, zu denen es eine Aufnahme gibt. Wurde der
+// Stream an dem Abend neu gestartet, fragt ein zweiter Schritt nach dem
+// Stück.
 const wahl = ref(false)
 const wahlFehler = ref('')
 const tage = ref(null)
+const gewaehlt = ref(null)
+const stuecke = ref(null)
 
 async function wahlOeffnen() {
   wahl.value = true
   wahlFehler.value = ''
   tage.value = null
+  gewaehlt.value = null
+  stuecke.value = null
   try {
     const resp = await fetch('/api/clips/aufnahmen')
     tage.value = resp.ok ? (await resp.json()).tage : []
@@ -36,12 +42,32 @@ const abendeMitAufnahme = computed(() =>
   tage.value ? props.abende.filter((a) => tage.value.includes(a.watched_at.slice(0, 10))) : [],
 )
 
-async function erstellen(abend) {
+async function abendWaehlen(abend) {
+  wahlFehler.value = ''
+  gewaehlt.value = abend
+  stuecke.value = null
+  let liste = []
+  try {
+    const resp = await fetch(`/api/clips/von-film/${abend.movie_id}`)
+    liste = resp.ok ? (await resp.json()).stuecke : []
+  } catch {
+    liste = []
+  }
+  // Ein Stück: direkt los. Sonst wählt man, welches.
+  if (liste.length <= 1) return erstellen(abend, liste[0]?.start)
+  stuecke.value = liste
+}
+
+function minuten(sekunden) {
+  return `${Math.max(1, Math.round(sekunden / 60))} Min`
+}
+
+async function erstellen(abend, start = null) {
   wahlFehler.value = ''
   const resp = await fetch('/api/clips/von-film', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ movie_id: abend.movie_id }),
+    body: JSON.stringify({ movie_id: abend.movie_id, start }),
   })
   if (!resp.ok) {
     const daten = await resp.json().catch(() => ({}))
@@ -119,17 +145,37 @@ onUnmounted(() => abbestellen?.())
       <div v-if="wahl" class="abendwahl-overlay" @click.self="wahl = false">
         <div class="abendwahl">
           <header>
-            <span>Zu welchem Abend?</span>
+            <span>{{ stuecke ? 'Welche Aufnahme?' : 'Zu welchem Abend?' }}</span>
             <button type="button" class="zu" @click="wahl = false">×</button>
           </header>
           <p v-if="wahlFehler" class="abendwahl-fehler">{{ wahlFehler }}</p>
-          <p v-if="tage === null" class="abendwahl-hinweis">Suche Aufnahmen …</p>
+
+          <!-- Zweiter Schritt: der Stream lief an dem Abend mehrmals -->
+          <template v-if="stuecke">
+            <p class="abendwahl-hinweis">
+              {{ gewaehlt.title }} · {{ datum(gewaehlt.watched_at) }} · der Stream lief
+              {{ stuecke.length }}-mal
+            </p>
+            <ul>
+              <li v-for="s in stuecke" :key="s.start">
+                <button type="button" @click="erstellen(gewaehlt, s.start)">
+                  <span class="abend-text">
+                    <span class="abend-titel">ab {{ uhrzeit(s.start) }} Uhr</span>
+                    <span class="abend-datum">{{ minuten(s.dauer) }}</span>
+                  </span>
+                </button>
+              </li>
+            </ul>
+            <button type="button" class="zurueck" @click="stuecke = null">← Anderer Abend</button>
+          </template>
+
+          <p v-else-if="tage === null" class="abendwahl-hinweis">Suche Aufnahmen …</p>
           <p v-else-if="!abendeMitAufnahme.length" class="abendwahl-hinweis">
             Zu keinem Abend gibt es eine Aufnahme.
           </p>
-          <ul>
+          <ul v-else>
             <li v-for="a in abendeMitAufnahme" :key="a.id">
-              <button type="button" @click="erstellen(a)">
+              <button type="button" @click="abendWaehlen(a)">
                 <img v-if="a.poster_path" :src="posterUrl(a.poster_path, 'w154')" alt="" />
                 <span class="abend-text">
                   <span class="abend-titel">{{ a.title }}</span>
@@ -358,6 +404,18 @@ h3 {
   line-height: 1;
 }
 
+.abendwahl .zurueck {
+  align-self: flex-start;
+  padding: 0.3rem 0.5rem;
+  color: var(--muted);
+  font-size: 0.85rem;
+  border-radius: 6px;
+}
+
+.abendwahl .zurueck:hover {
+  color: var(--text);
+}
+
 .abendwahl-fehler {
   color: var(--accent);
   font-size: 0.85rem;