Refine live controls and compact show cards

2026-10-24 19:09:44 +02:00
1 parent 01b5606a3b
commit fd47910d09
@@ -466,20 +466,21 @@

 ## Erweiterte Live-Steuerung 0.5.12

-| Kriterium                                      | Stand                         |
-| ---------------------------------------------- | ----------------------------- |
-| Gemeinsame persistente Pause                   | implementiert, nicht geprüft  |
-| Abschnitts- und Gesamtreset bleiben unabhängig | implementiert, nicht geprüft  |
-| Gesamt-/Restzeit ohne Doppelerfassung          | implementiert, nicht geprüft  |
-| Ende, Wiederaufnahme und neuer Lauf getrennt   | implementiert, nicht geprüft  |
-| Privates Feld „Interaktion“ durch alle Kopien  | implementiert, nicht geprüft  |
-| Öffentliche Positivliste unverändert           | implementiert, nicht geprüft  |
-| Classic-Regular-Icons und Drawer-Schließen     | implementiert, nicht geprüft  |
+| Kriterium                                      | Stand                        |
+| ---------------------------------------------- | ---------------------------- |
+| Gemeinsame persistente Pause                   | implementiert, nicht geprüft |
+| Abschnitts- und Gesamtreset bleiben unabhängig | implementiert, nicht geprüft |
+| Gesamt-/Restzeit ohne Doppelerfassung          | implementiert, nicht geprüft |
+| Ende, Wiederaufnahme und neuer Lauf getrennt   | implementiert, nicht geprüft |
+| Privates Feld „Interaktion“ durch alle Kopien  | implementiert, nicht geprüft |
+| Öffentliche Positivliste unverändert           | implementiert, nicht geprüft |
+| Classic-Regular-Icons und Drawer-Schließen     | gezielt im Browser geprüft   |

-Für diese Erweiterung wurden auf ausdrücklichen Auftrag keine Tests erstellt und
-keine Typ-, Test-, Build-, Migrations- oder Browserläufe ausgeführt. Die oben
-dokumentierten früheren Prüfungen von 0.5.12 wurden nicht als Nachweis für die
-neuen Funktionen wiederverwendet.
+Für die ursprüngliche Erweiterung wurden auf ausdrücklichen Auftrag zunächst
+keine Prüfungen ausgeführt. Die nachfolgenden Korrekturen weisen inzwischen
+Migration, Typen, Build, bestehendes Liveverhalten und die betroffenen
+Oberflächen gezielt nach; die übrigen neuen Timer- und Statusfälle bleiben ohne
+vollständige erneute Matrix.

 ## Live-500-Korrektur 0.5.12

@@ -491,3 +492,17 @@ neuen Funktionen wiederverwendet.
 - `npm run check`: 0 Fehler und 0 Warnungen.
 - `npm run test:unit -- --run src/lib/server/live.spec.ts`: 6 Tests erfolgreich.
 - `npm run build`: erfolgreich mit `@sveltejs/adapter-node`.
+
+## Live-Icons und kompakte Sendungskarten 0.5.12
+
+- `npm run check`: 0 Fehler und 0 Warnungen.
+- `npm run test:unit -- --run src/lib/server/live.spec.ts`: 6 Tests erfolgreich.
+- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`.
+- Gezielter Chromium-Ablauf der Sendungsübersicht mit Desktopkalender, mobiler
+  Agenda und Rückkehr zur Liste: erfolgreich.
+- Vollständiger bestehender Live-Regie-Ablauf einschließlich 900 × 450,
+  670 × 450 und 390 × 700 Pixeln: erfolgreich; Iconleiste, Kopfhöhe,
+  Viewportgrenzen und horizontaler Überlauf geprüft.
+- Zusätzliche visuelle Chromium-Prüfung bei 656 × 400 und 390 × 700 Pixeln:
+  Sendungskarte unter 130 Pixel hoch, Menü-/Ausgabe-/Timericons sichtbar und
+  Pausebutton wechselt bedienbar zu Fortsetzen.
@@ -12,6 +12,10 @@ Livezustände bleiben technisch getrennt.

 ### Highlights

+- Ausgabe, Gesamtzeit, Abschnittszeit und Menü tragen in der Live-Kopfleiste
+  jetzt die passenden lokalen Classic-Regular-Icons. Pause beziehungsweise
+  Fortsetzen ist zusätzlich als direkter Iconbutton neben der Abschnittszeit
+  erreichbar.
 - Die Live-Regie verwendet die gesamte Fensterfläche ohne normale
  App-Seitenleiste, mobilen App-Header oder Bottomnavigation.
 - Zwei kompakte Kopfzeilen halten Abschnitt, „Danach“, Menü, Ausgabe,
@@ -94,6 +98,9 @@ Livezustände bleiben technisch getrennt.

 ### Sendungsübersicht

+- Sendungskarten bleiben auf kleinen Bildschirmen kompakt: Status, Titel und
+  Termin stehen neben den horizontal angeordneten Abschnitts- und Zeitangaben,
+  statt die Karte durch vollständiges Stapeln unnötig zu erhöhen.
 - „Liste | Kalender“ schaltet zwischen der bekannten Sendungsliste und einer
  Monatsansicht um; die Auswahl bleibt am angemeldeten Konto gespeichert.
 - Auf dem Desktop zeigt ein vollständiges Montag-bis-Sonntag-Raster alle Termine
@@ -121,11 +128,11 @@ Livezustände bleiben technisch getrennt.

 ### Prüfung

- Für die Timer-, Sendungssteuerungs- und Interaktionserweiterung wurden auf
-  ausdrücklichen Auftrag keine Tests, Builds, Migrationen oder Browserprüfungen
-  ausgeführt.
- Die folgenden Nachweise stammen vom vorherigen 0.5.12-Stand und decken diese
-  Ergänzungen nicht ab.
+- Die ergänzte Iconleiste, Pause/Fortsetzen und die kompakte Sendungskarte wurden
+  gezielt in Chromium bei 670 × 450, 390 × 700 und 656 × 400 Pixeln geprüft.
+  Typprüfung, sechs Live-Verhaltenstests und Produktionsbuild sind erfolgreich.
+- Die vollständige Matrix wurde für diese Ergänzung nicht erneut ausgeführt; die
+  folgenden Gesamtnachweise stammen vom vorherigen 0.5.12-Stand.
 - 44 Unit- und Verhaltenstests sowie 17 Chromium-E2E-Abläufe sind erfolgreich.
 - Die Live-Regie wurde bei 1440 × 900, 900 × 450, 670 × 450 und 390 × 700 Pixeln
  mit langen Titeln, sichtbarem Regiemenü, unabhängigen Scrollflächen und
@@ -9,6 +9,11 @@ Etappe 6 wurde nicht begonnen.

 ## Live-Regie und Sendungskalender 0.5.12

+- die Live-Kopfleiste zeigt Classic-Regular-Icons für Ausgabe, Gesamtzeit,
+  Abschnitt, Menü und Ablauf; Pause/Fortsetzen liegt zusätzlich als direkter,
+  beschrifteter Iconbutton neben der Abschnittszeit
+- Sendungskarten ordnen Fakten auf kleinen Bildschirmen wieder horizontal an und
+  vermeiden dadurch die zuvor unnötig hohe Kartenfläche
 - Reparaturmigration `0014_live_show_timer_repair.sql` ergänzt fehlende
  Gesamttimertabellen auch dann, wenn `0013` bereits in einem früheren
  Zwischenstand protokolliert wurde; der 500-Fehler beim Laden von `/live` ist
@@ -72,9 +77,10 @@ Etappe 6 wurde nicht begonnen.
 Etappe 6 bleibt unverändert unbegonnen.

 Die bestehende lokale Prüfmatrix umfasst 44 Verhaltenstests und 17
-Chromium-Abläufe. Für die Timer-, Sendungssteuerungs- und Interaktionserweiterung
-wurden auf ausdrücklichen Auftrag keine Tests, Builds oder Browserprüfungen
-ausgeführt; dieser neue Stand ist daher noch nicht verifiziert.
+Chromium-Abläufe. Die nachträgliche Icon-, Pause- und Kartenkorrektur wurde
+zusätzlich mit Typprüfung, sechs Live-Verhaltenstests, Produktionsbuild und
+gezielten Chromium-Abläufen bei 670 × 450, 390 × 700 und 656 × 400 Pixeln
+geprüft. Die vollständige Matrix wurde dafür nicht erneut ausgeführt.
 Reales OBS, echte YouTube-/TikTok-Wiedergabe sowie Safari auf einem iOS-Gerät
 bleiben mangels verfügbarer Umgebung offen.

@@ -1057,6 +1057,13 @@ textarea:focus {
 	text-transform: uppercase;
 }

+.timer-label {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.25rem;
+}
+
 .live-output-state strong {
 	overflow: hidden;
 	font-size: 0.75rem;
@@ -1151,6 +1158,39 @@ textarea:focus {
 	text-align: center;
 }

+.section-timer-control {
+	display: flex;
+	align-items: stretch;
+	gap: 0.3rem;
+}
+
+.section-timer-control form {
+	display: flex;
+}
+
+.live-timer-toggle {
+	display: grid;
+	width: 2.15rem;
+	padding: 0;
+	place-items: center;
+	border: 1px solid var(--line);
+	border-radius: 0.65rem;
+	background: color-mix(in srgb, #d65c55 12%, var(--panel-soft));
+	color: #d65c55;
+	cursor: pointer;
+	font-size: 0.85rem;
+}
+
+.live-timer-toggle.paused {
+	background: color-mix(in srgb, var(--accent) 10%, var(--panel-soft));
+	color: var(--accent-strong);
+}
+
+.live-timer-toggle:hover,
+.live-timer-toggle:focus-visible {
+	border-color: currentColor;
+}
+
 .total-countdown {
 	color: var(--text);
 	cursor: pointer;
@@ -1185,17 +1225,20 @@ textarea:focus {
 	color: #d24d45;
 }

-.live-output-state > span {
-	width: 0.5rem;
-	height: 0.5rem;
+.live-output-state > .live-output-icon {
+	display: grid;
+	width: 1.5rem;
+	height: 1.5rem;
 	flex: 0 0 auto;
-	border-radius: 50%;
-	background: var(--text-faint);
+	place-items: center;
+	border-radius: 0.45rem;
+	background: var(--panel-soft);
+	color: var(--text-faint);
 }

-.live-output-control.active .live-output-state > span {
-	background: var(--accent);
-	box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent) 12%, transparent);
+.live-output-control.active .live-output-icon {
+	background: color-mix(in srgb, var(--accent) 12%, var(--panel-soft));
+	color: var(--accent-strong);
 }

 .live-output-control {
@@ -1256,7 +1299,10 @@ textarea:focus {
 }

 .live-menu-trigger {
+	display: flex;
 	width: fit-content;
+	align-items: center;
+	gap: 0.32rem;
 	padding: 0.48rem 0.65rem;
 	border: 1px solid var(--line);
 	border-radius: 0.65rem;
@@ -2093,6 +2139,16 @@ textarea:focus {
 	}
 }

+@media (max-width: 30rem) {
+	.live-status-row {
+		grid-template-columns: minmax(0, 1fr) auto auto;
+	}
+
+	.live-output-control {
+		grid-column: 1 / -1;
+	}
+}
+
@media (max-width: 23rem) {
 	.live-context-summary {
 		display: grid;
@@ -6296,11 +6352,16 @@ textarea:focus {
 	.show-card,
 	.show-card-facts {
 		align-items: flex-start;
-		flex-direction: column;
 	}
 	.show-card-facts {
-		width: 100%;
-		gap: 0.4rem;
+		flex-direction: row;
+		align-items: center;
+		gap: 0.7rem;
+	}
+	.show-card-facts span {
+		display: flex;
+		align-items: baseline;
+		gap: 0.25rem;
 	}
 	.show-settings-form .wide-field,
 	.usage-edit-form .wide-field {
@@ -431,14 +431,15 @@
 				aria-expanded={menuOpen}
 				onclick={toggleLiveMenu}
 			>
-				Menü
+				<AppIcon name="bars" />
+				<span>Menü</span>
 			</button>
 		</div>

 		<div class="live-status-row">
 			<div class:active={Boolean(presentedUsage)} class="live-output-control">
 				<div class="live-output-state" aria-live="polite">
-					<span aria-hidden="true"></span>
+					<span class="live-output-icon" aria-hidden="true"><AppIcon name="display" /></span>
 					<div>
 						<small>Ausgabe</small>
 						<strong title={presentedUsage?.title ?? undefined}
@@ -455,7 +456,9 @@
 						<input type="hidden" name="usageId" value="" />
 						<input type="hidden" name="revision" value={data.live.liveRevision} />
 						<input type="hidden" name="commandId" value={data.commandId} />
-						<button class="text-button" type="submit" disabled={Boolean(data.live.endedAtUtc)}>Präsentation leeren</button>
+						<button class="text-button" type="submit" disabled={Boolean(data.live.endedAtUtc)}
+							>Präsentation leeren</button
+						>
 					</form>{/if}
 			</div>

@@ -467,8 +470,14 @@
 					? 'Gelaufene Gesamtzeit, zu Restzeit wechseln'
 					: 'Geschätzte Restzeit, zu gelaufener Zeit wechseln'}
 			>
-				<span>{timerDisplay === 'elapsed' ? 'Gelaufen' : 'Restzeit'}</span>
-				<strong>{formatCountdown(timerDisplay === 'elapsed' ? totalElapsedSeconds : remainingSeconds)}</strong>
+				<span class="timer-label"
+					><AppIcon name="timer" /> {timerDisplay === 'elapsed' ? 'Gelaufen' : 'Restzeit'}</span
+				>
+				<strong
+					>{formatCountdown(
+						timerDisplay === 'elapsed' ? totalElapsedSeconds : remainingSeconds
+					)}</strong
+				>
 				{#if timerDisplay === 'remaining' && data.live.remainingEstimate.unplannedSectionCount}
 					<small title="Verbleibende Abschnitte ohne geplante Abschnittsdauer"
 						>+ {data.live.remainingEstimate.unplannedSectionCount} ungeplant</small
@@ -476,22 +485,42 @@
 				{/if}
 			</button>

-			<div
-				class:warning={hasActiveSectionTimer &&
-					sectionRemainingSeconds <= 120 &&
-					sectionRemainingSeconds >= 0}
-				class:overrun={hasActiveSectionTimer && sectionRemainingSeconds < 0}
-				class="section-countdown"
-				aria-live="off"
-			>
-				<span>Abschnitt</span>
-				<strong>
-					{#if hasActiveSectionTimer}
-						{sectionRemainingSeconds < 0
-							? `+${formatCountdown(Math.abs(sectionRemainingSeconds))}`
-							: formatCountdown(sectionRemainingSeconds)}
-					{:else}Kein Countdown{/if}
-				</strong>
+			<div class="section-timer-control">
+				<div
+					class:warning={hasActiveSectionTimer &&
+						sectionRemainingSeconds <= 120 &&
+						sectionRemainingSeconds >= 0}
+					class:overrun={hasActiveSectionTimer && sectionRemainingSeconds < 0}
+					class="section-countdown"
+					aria-live="off"
+				>
+					<span class="timer-label"><AppIcon name="timer" /> Abschnitt</span>
+					<strong>
+						{#if hasActiveSectionTimer}
+							{sectionRemainingSeconds < 0
+								? `+${formatCountdown(Math.abs(sectionRemainingSeconds))}`
+								: formatCountdown(sectionRemainingSeconds)}
+						{:else}Kein Countdown{/if}
+					</strong>
+				</div>
+				{#if data.live.startedAtUtc && !data.live.endedAtUtc}<form
+						method="POST"
+						action={liveAction(data.live.isPaused ? 'resume' : 'pause')}
+						use:enhance={enhanceCommand}
+					>
+						<input type="hidden" name="showId" value={data.live.show.id} />
+						<input type="hidden" name="revision" value={data.live.liveRevision} />
+						<input type="hidden" name="commandId" value={data.commandId} />
+						<button
+							class:paused={data.live.isPaused}
+							class="live-timer-toggle"
+							type="submit"
+							aria-label={data.live.isPaused ? 'Sendung fortsetzen' : 'Sendung pausieren'}
+							title={data.live.isPaused ? 'Sendung fortsetzen' : 'Sendung pausieren'}
+						>
+							<AppIcon name={data.live.isPaused ? 'play' : 'pause'} />
+						</button>
+					</form>{/if}
 			</div>

 			<button
@@ -561,7 +590,11 @@
 				{#if !data.live.startedAtUtc}
 					<form method="POST" action={liveAction('setStatus')} use:enhance={enhanceCommand}>
 						<input type="hidden" name="showId" value={data.live.show.id} />
-						<input type="hidden" name="status" value={data.live.show.status === 'ready' ? 'draft' : 'ready'} />
+						<input
+							type="hidden"
+							name="status"
+							value={data.live.show.status === 'ready' ? 'draft' : 'ready'}
+						/>
 						<input type="hidden" name="revision" value={data.live.liveRevision} />
 						<input type="hidden" name="showRevision" value={data.live.show.revision} />
 						<input type="hidden" name="commandId" value={data.commandId} />
@@ -573,30 +606,45 @@
 						<input type="hidden" name="showId" value={data.live.show.id} />
 						<input type="hidden" name="revision" value={data.live.liveRevision} />
 						<input type="hidden" name="commandId" value={data.commandId} />
-						<button class="secondary-button" type="submit"><AppIcon name="play" /> Sendung starten</button>
+						<button class="secondary-button" type="submit"
+							><AppIcon name="play" /> Sendung starten</button
+						>
 					</form>
 				{:else if data.live.endedAtUtc}
 					<form method="POST" action={liveAction('resumeEnded')} use:enhance={enhanceCommand}>
 						<input type="hidden" name="showId" value={data.live.show.id} />
 						<input type="hidden" name="revision" value={data.live.liveRevision} />
 						<input type="hidden" name="commandId" value={data.commandId} />
-						<button class="secondary-button" type="submit"><AppIcon name="play" /> Lauf fortsetzen</button>
+						<button class="secondary-button" type="submit"
+							><AppIcon name="play" /> Lauf fortsetzen</button
+						>
 					</form>
 					<form
 						method="POST"
 						action={liveAction('startNewRun')}
 						use:enhance={enhanceCommand}
 						onsubmit={(event) => {
-							if (!confirm('Neuen Durchlauf starten? Fortschritt und Zeitmessungen werden zurückgesetzt.')) event.preventDefault();
+							if (
+								!confirm(
+									'Neuen Durchlauf starten? Fortschritt und Zeitmessungen werden zurückgesetzt.'
+								)
+							)
+								event.preventDefault();
 						}}
 					>
 						<input type="hidden" name="showId" value={data.live.show.id} />
 						<input type="hidden" name="revision" value={data.live.liveRevision} />
 						<input type="hidden" name="commandId" value={data.commandId} />
-						<button class="text-button" type="submit"><AppIcon name="arrow-rotate-left" /> Neuer Durchlauf</button>
+						<button class="text-button" type="submit"
+							><AppIcon name="arrow-rotate-left" /> Neuer Durchlauf</button
+						>
 					</form>
 				{:else}
-					<form method="POST" action={liveAction(data.live.isPaused ? 'resume' : 'pause')} use:enhance={enhanceCommand}>
+					<form
+						method="POST"
+						action={liveAction(data.live.isPaused ? 'resume' : 'pause')}
+						use:enhance={enhanceCommand}
+					>
 						<input type="hidden" name="showId" value={data.live.show.id} />
 						<input type="hidden" name="revision" value={data.live.liveRevision} />
 						<input type="hidden" name="commandId" value={data.commandId} />
@@ -616,7 +664,9 @@
 							<input type="hidden" name="showId" value={data.live.show.id} />
 							<input type="hidden" name="revision" value={data.live.liveRevision} />
 							<input type="hidden" name="commandId" value={data.commandId} />
-							<button class="text-button" type="submit"><AppIcon name="arrow-rotate-left" /> Abschnittszeit zurücksetzen</button>
+							<button class="text-button" type="submit"
+								><AppIcon name="arrow-rotate-left" /> Abschnittszeit zurücksetzen</button
+							>
 						</form>{/if}
 					<form
 						method="POST"
@@ -629,20 +679,25 @@
 						<input type="hidden" name="showId" value={data.live.show.id} />
 						<input type="hidden" name="revision" value={data.live.liveRevision} />
 						<input type="hidden" name="commandId" value={data.commandId} />
-						<button class="text-button" type="submit"><AppIcon name="timer" /> Gesamtzeit zurücksetzen</button>
+						<button class="text-button" type="submit"
+							><AppIcon name="timer" /> Gesamtzeit zurücksetzen</button
+						>
 					</form>
 					<form
 						method="POST"
 						action={liveAction('end')}
 						use:enhance={enhanceCommand}
 						onsubmit={(event) => {
-							if (!confirm('Sendung wirklich beenden? Offene Pieces bleiben offen.')) event.preventDefault();
+							if (!confirm('Sendung wirklich beenden? Offene Pieces bleiben offen.'))
+								event.preventDefault();
 						}}
 					>
 						<input type="hidden" name="showId" value={data.live.show.id} />
 						<input type="hidden" name="revision" value={data.live.liveRevision} />
 						<input type="hidden" name="commandId" value={data.commandId} />
-						<button class="text-button danger-text" type="submit"><AppIcon name="stop" /> Sendung beenden</button>
+						<button class="text-button danger-text" type="submit"
+							><AppIcon name="stop" /> Sendung beenden</button
+						>
 					</form>
 				{/if}
 				{#if needsResume && !data.live.endedAtUtc}<form
@@ -924,7 +979,10 @@
 											<input type="hidden" name="usageId" value={usage.id} />
 											<input type="hidden" name="revision" value={data.live.liveRevision} />
 											<input type="hidden" name="commandId" value={data.commandId} />
-											<button type="submit" disabled={Boolean(data.live.endedAtUtc)} aria-label={`${usage.title} präsentieren`}
+											<button
+												type="submit"
+												disabled={Boolean(data.live.endedAtUtc)}
+												aria-label={`${usage.title} präsentieren`}
 												><AppIcon name="display" /></button
 											>
 										</form>