97 lines
3.2 KiB
Svelte
97 lines
3.2 KiB
Svelte
<script lang="ts">
|
||
import PreviewNotice from '#lib/components/PreviewNotice.svelte';
|
||
import { formatClock } from '#lib/format.js';
|
||
import { resolve } from '$app/paths';
|
||
import type { PageData } from './$types';
|
||
|
||
let { data }: { data: PageData } = $props();
|
||
let promptSize = $state(1.55);
|
||
</script>
|
||
|
||
<svelte:head><title>Live-Vorschau | Sendewerk</title></svelte:head>
|
||
|
||
<div class="page-wrap live-page">
|
||
<header class="live-header">
|
||
<div>
|
||
<p class="eyebrow"><span class="live-pulse"></span> Live-Modus · Vorschau</p>
|
||
<h1>{data.show.title}</h1>
|
||
</div>
|
||
<div class="live-header-actions">
|
||
<div class="font-control" aria-label="Prompter-Schriftgröße">
|
||
<button
|
||
type="button"
|
||
onclick={() => (promptSize = Math.max(1.15, promptSize - 0.1))}
|
||
aria-label="Schrift verkleinern">A−</button
|
||
>
|
||
<button
|
||
type="button"
|
||
onclick={() => (promptSize = Math.min(2.1, promptSize + 0.1))}
|
||
aria-label="Schrift vergrößern">A+</button
|
||
>
|
||
</div>
|
||
<a href={resolve('/sendungen/[id]', { id: data.show.id })}>Planung schließen</a>
|
||
</div>
|
||
</header>
|
||
|
||
<PreviewNotice area="Live-Modus" />
|
||
|
||
<div class="live-grid">
|
||
{#if data.current}<section class="live-current" style={`--prompt-size: ${promptSize}rem`}>
|
||
<div class="live-kicker">
|
||
<span>Aktuell · {data.current.section}</span><strong
|
||
>{formatClock(data.current.durationSeconds)}</strong
|
||
>
|
||
</div>
|
||
<h2>{data.current.title}</h2>
|
||
<div class="prompter-copy">{data.current.intro}</div>
|
||
<div class="moderation-card">
|
||
<span>Moderationsstichpunkte</span>
|
||
<p>{data.current.moderation}</p>
|
||
</div>
|
||
<details class="research-details">
|
||
<summary>Recherche öffnen</summary>
|
||
<p>
|
||
Die Recherche bleibt im echten Live-Modus standardmäßig geschlossen und bewahrt beim
|
||
Öffnen die Leseposition.
|
||
</p>
|
||
</details>
|
||
<div class="transition-card">
|
||
<span>Überleitung</span>
|
||
<p>{data.current.transition}</p>
|
||
</div>
|
||
</section>{:else}<section class="live-current live-empty">
|
||
<p class="eyebrow">Noch kein Piece eingeplant</p>
|
||
<h2>Diese Sendung hat noch keinen moderierbaren Inhalt.</h2>
|
||
<p>In der Planung kann zuerst ein sendefertiges Piece hinzugefügt werden.</p>
|
||
</section>{/if}
|
||
|
||
<aside class="live-rail">
|
||
<div class="next-card">
|
||
<span>Als Nächstes</span>
|
||
{#if data.next}
|
||
<h3>{data.next.title}</h3>
|
||
<p>{data.next.section} · {formatClock(data.next.durationSeconds)}</p>
|
||
{:else}
|
||
<h3>Sendungsende</h3>
|
||
<p>Kein weiteres Stück eingeplant.</p>
|
||
{/if}
|
||
</div>
|
||
<div class="live-progress">
|
||
<header><span>Ablauf</span><strong>2 / 4</strong></header>
|
||
<div class="progress-track"><span></span></div>
|
||
{#each data.show.sections as section, index (section.id)}
|
||
<div class:active={index === 1} class="rail-section">
|
||
<span>{String(index + 1).padStart(2, '0')}</span>
|
||
<div>
|
||
<strong>{section.name}</strong><small>{formatClock(section.durationSeconds)}</small>
|
||
</div>
|
||
</div>
|
||
{/each}
|
||
</div>
|
||
<div class="readonly-actions" aria-label="Spätere Live-Aktionen">
|
||
<span>Zurück</span><strong>In Etappe 5 steuerbar</strong><span>Erledigen</span>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</div>
|