release: add post-production workspace 0.9.0

2026-10-30 17:33:13 +01:00
1 parent abc31d920f
commit a6c8606f3c
@@ -0,0 +1,153 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import { untrack } from 'svelte';
+	import AppIcon from '#lib/components/AppIcon.svelte';
+	import PostNavigation from '#lib/components/PostNavigation.svelte';
+	import type { PageProps } from './$types';
+
+	let { data }: PageProps = $props();
+	let selectedId = $state(untrack(() => data.shows[0]?.showId ?? ''));
+	let selected = $derived(
+		data.shows.find((show) => show.showId === selectedId) ?? data.shows[0] ?? null
+	);
+
+	function date(value: string | null) {
+		if (!value) return 'Datum nicht verfügbar';
+		return new Intl.DateTimeFormat('de-DE', {
+			timeZone: 'Europe/Berlin',
+			dateStyle: 'long'
+		}).format(new Date(value));
+	}
+</script>
+
+<svelte:head><title>Postproduktion | Sendewerk</title></svelte:head>
+
+<div class="unified-workspace post-library-workspace">
+	<PostNavigation
+		query={data.query}
+		progress={data.progress}
+		sort={data.sort}
+		counts={data.counts}
+	/>
+	<section class="post-show-library workspace-content-pane" aria-labelledby="post-shows-title">
+		<header class="page-heading shows-heading post-page-heading">
+			<div>
+				<h1>Postproduktion</h1>
+				<p class="page-intro">YouTube, Social-Clips und Twitch-Highlights vorbereiten.</p>
+			</div>
+		</header>
+		<div class="post-library-content">
+			<div class="post-library-heading">
+				<div>
+					<p class="eyebrow">Abgeschlossene Streams</p>
+					<h2 id="post-shows-title">Streams</h2>
+				</div>
+				<span>{data.shows.length}</span>
+			</div>
+			{#if data.shows.length}
+				<div class="post-show-list">
+					{#each data.shows as show (show.showId)}
+						<a class="post-show-row" href={resolve('/post/[id]', { id: show.showId })}>
+							<div class="post-show-primary">
+								<span class="post-progress">{show.progress}</span>
+								<h3>{show.title}</h3>
+								<p>{date(show.startsAtUtc ?? show.completedAtUtc)}</p>
+							</div>
+							<dl class="post-show-counts">
+								<div>
+									<dt>Teile</dt>
+									<dd>{show.recordingPartCount}</dd>
+								</div>
+								<div>
+									<dt>Kontext</dt>
+									<dd>{show.sourceCount}</dd>
+								</div>
+								<div>
+									<dt>YouTube</dt>
+									<dd>{show.youtubeCount}</dd>
+								</div>
+								<div>
+									<dt>Clips</dt>
+									<dd>{show.clipCount}</dd>
+								</div>
+								<div>
+									<dt>Highlights</dt>
+									<dd>{show.highlightCount}</dd>
+								</div>
+							</dl>
+							<AppIcon name="chevron-right" />
+						</a>
+					{/each}
+				</div>
+			{:else}
+				<div class="empty-state compact">
+					<h2>Keine abgeschlossene Sendung gefunden</h2>
+					<p>Postproduktion beginnt mit einer in Live bewusst abgeschlossenen Sendung.</p>
+				</div>
+			{/if}
+		</div>
+	</section>
+	<aside
+		class="content-quick-inspector stream-inspector builder-pane"
+		aria-label="Post-Schnellübersicht"
+	>
+		{#if selected}<header class="stream-inspector-header">
+				<div>
+					<p class="eyebrow">Schnellübersicht</p>
+					<a
+						class="inspector-expand-button"
+						href={resolve('/post/[id]', { id: selected.showId })}
+						aria-label="Postproduktion vollständig öffnen"
+						title="Vollständig bearbeiten"><AppIcon name="expand" /></a
+					>
+				</div>
+				<h2>{selected.title}</h2>
+				<p>Material, Texte, Schnitt und Veröffentlichung.</p>
+			</header>
+			<div class="content-quick-inspector-scroll stream-inspector-form post-overview-inspector">
+				<section>
+					<span class="post-progress">{selected.progress}</span>
+					<p>{date(selected.startsAtUtc ?? selected.completedAtUtc)}</p>
+				</section>
+				<dl class="quick-fact-list">
+					<div>
+						<dt>Aufzeichnungsteile</dt>
+						<dd>{selected.recordingPartCount}</dd>
+					</div>
+					<div>
+						<dt>Kontextdateien</dt>
+						<dd>{selected.sourceCount}</dd>
+					</div>
+					<div>
+						<dt>YouTube-Videos</dt>
+						<dd>{selected.youtubeCount}</dd>
+					</div>
+					<div>
+						<dt>Social-Clips</dt>
+						<dd>{selected.clipCount}</dd>
+					</div>
+					<div>
+						<dt>Twitch-Highlights</dt>
+						<dd>{selected.highlightCount}</dd>
+					</div>
+				</dl>
+				<section class="workspace-guidance">
+					<h3>Vollständige Bearbeitung</h3>
+					<p>
+						Material, Texte, Uploads, Schnittdaten und Exporte öffnen in der großen
+						Bearbeitungsfläche.
+					</p>
+				</section>
+			</div>
+			<footer class="stream-inspector-actions single-action">
+				<a class="primary-button" href={resolve('/post/[id]', { id: selected.showId })}
+					>Postproduktion öffnen</a
+				>
+			</footer>
+		{:else}<div class="content-inspector-empty">
+				<AppIcon name="clapperboard" />
+				<h2>Stream auswählen</h2>
+				<p>Bearbeitungsstand und Inhalte erscheinen hier.</p>
+			</div>{/if}
+	</aside>
+</div>