Release 0.5.1

src/routes/fundus/+page.server.ts

@@ -10,6 +10,7 @@ import {
 	setPieceArchived,
 	type PieceTemplateId
 } from '#lib/server/content.js';
+import { getPieceUsageContexts } from '#lib/server/shows.js';
 
 export const load: PageServerLoad = ({ locals, url }) => {
 	requireUser(locals.user);
@@ -18,21 +19,25 @@ export const load: PageServerLoad = ({ locals, url }) => {
 		formatId: url.searchParams.get('format') ?? '',
 		topicId: url.searchParams.get('topic') ?? '',
 		categoryId: url.searchParams.get('category') ?? '',
-		status: url.searchParams.get('status') ?? ''
+		status: url.searchParams.get('status') ?? '',
+		includeUsed: url.searchParams.get('includeUsed') === '1',
+		includePlanned: url.searchParams.get('includePlanned') === '1'
 	};
+	const pieces = listPieces({
+		statuses:
+			filters.status === 'ready'
+				? ['ready']
+				: filters.status === 'preparing'
+					? ['preparing']
+					: ['preparing', 'ready'],
+		query: filters.query,
+		formatId: filters.formatId,
+		topicId: filters.topicId,
+		categoryId: filters.categoryId
+	});
+	const usageContexts = getPieceUsageContexts(pieces.map((piece) => piece.id));
 	return {
-		pieces: listPieces({
-			statuses:
-				filters.status === 'ready'
-					? ['ready']
-					: filters.status === 'preparing'
-						? ['preparing']
-						: ['preparing', 'ready'],
-			query: filters.query,
-			formatId: filters.formatId,
-			topicId: filters.topicId,
-			categoryId: filters.categoryId
-		}),
+		pieces: pieces.map((piece) => ({ ...piece, ...usageContexts[piece.id] })),
 		taxonomy: getTaxonomy(),
 		templates: pieceTemplates,
 		filters

src/routes/fundus/+page.svelte

@@ -1,9 +1,48 @@
 <script lang="ts">
+	import { goto, replaceState } from '$app/navigation';
 	import { resolve } from '$app/paths';
+	import { page } from '$app/state';
+	import { onMount, untrack } from 'svelte';
+	import PieceUsageHistory from '#lib/components/PieceUsageHistory.svelte';
 	import { formatClock } from '#lib/format.js';
 	import type { PageProps } from './$types';
 
 	let { data, form }: PageProps = $props();
+	let showUsedPieces = $state(untrack(() => data.filters.includeUsed));
+	let showPlannedPieces = $state(untrack(() => data.filters.includePlanned));
+	let visiblePieces = $derived(
+		data.pieces.filter(
+			(piece) =>
+				(showUsedPieces || piece.sentHistory.length === 0) &&
+				(showPlannedPieces || !piece.isPlannedInActiveShow)
+		)
+	);
+	onMount(() => {
+		const syncFiltersFromHistory = () => {
+			const search = new URL(window.location.href).searchParams;
+			showUsedPieces = search.get('includeUsed') === '1';
+			showPlannedPieces = search.get('includePlanned') === '1';
+		};
+		window.addEventListener('popstate', syncFiltersFromHistory);
+		return () => window.removeEventListener('popstate', syncFiltersFromHistory);
+	});
+
+	function setSourceFilter(name: 'includeUsed' | 'includePlanned', checked: boolean) {
+		if (name === 'includeUsed') showUsedPieces = checked;
+		else showPlannedPieces = checked;
+		const url = new URL(page.url.href);
+		if (checked) url.searchParams.set(name, '1');
+		else url.searchParams.delete(name);
+		// This URL is cloned from the current page; only same-route filter parameters change.
+		// eslint-disable-next-line svelte/no-navigation-without-resolve
+		replaceState(url, page.state);
+	}
+
+	async function resetFilters() {
+		await goto(resolve('/fundus'), { invalidateAll: true });
+		showUsedPieces = false;
+		showPlannedPieces = false;
+	}
 	const statusLabel = {
 		ready: 'Sendefertig',
 		preparing: 'In Vorbereitung',
@@ -20,8 +59,8 @@
 			<h1>Fundus</h1>
 			<p class="page-intro">Vorbereitete Inhalte für kommende Sendungen.</p>
 		</div>
-		<div class="heading-stat" aria-label={`${data.pieces.length} gefundene Inhalte`}>
-			<strong>{data.pieces.length}</strong><span>Inhalte</span>
+		<div class="heading-stat" aria-label={`${visiblePieces.length} gefundene Inhalte`}>
+			<strong>{visiblePieces.length}</strong><span>Inhalte</span>
 		</div>
 	</header>
 	{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
@@ -41,7 +80,12 @@
 		</div>
 	</details>
 
-	<form class="library-filters" method="GET" aria-label="Fundus durchsuchen und filtern">
+	<form
+		id="library-filters"
+		class="library-filters"
+		method="GET"
+		aria-label="Fundus durchsuchen und filtern"
+	>
 		<label class="search-field"
 			><span aria-hidden="true">⌕</span><span class="sr-only">Fundus durchsuchen</span><input
 				name="q"
@@ -84,12 +128,36 @@
 			></label
 		>
 		<button class="secondary-button" type="submit">Anwenden</button>
-		<a class="text-link" href={resolve('/fundus')}>Zurücksetzen</a>
+		<button class="text-button" type="button" onclick={resetFilters}>Zurücksetzen</button>
 	</form>
+	<div class="library-filter-options" aria-label="Fundusauswahl erweitern">
+		<label class="filter-checkbox">
+			<input
+				type="checkbox"
+				name="includeUsed"
+				value="1"
+				form="library-filters"
+				checked={showUsedPieces}
+				onchange={(event) => setSourceFilter('includeUsed', event.currentTarget.checked)}
+			/>
+			<span>Auch verwendete Inhalte zeigen</span>
+		</label>
+		<label class="filter-checkbox">
+			<input
+				type="checkbox"
+				name="includePlanned"
+				value="1"
+				form="library-filters"
+				checked={showPlannedPieces}
+				onchange={(event) => setSourceFilter('includePlanned', event.currentTarget.checked)}
+			/>
+			<span>Auch eingeplante Inhalte zeigen</span>
+		</label>
+	</div>
 
-	{#if data.pieces.length}
+	{#if visiblePieces.length}
 		<div class="piece-grid">
-			{#each data.pieces as piece (piece.id)}
+			{#each visiblePieces as piece (piece.id)}
 				<article
 					class="piece-card"
 					style={`--category: ${piece.categories[0]?.color ?? '#8b8f98'}`}
@@ -104,6 +172,7 @@
 					<div class="piece-primary">
 						<h2><a href={resolve('/fundus/[id]', { id: piece.id })}>{piece.title}</a></h2>
 						<p>{piece.summary || 'Noch keine Kurzbeschreibung.'}</p>
+						<PieceUsageHistory history={piece.sentHistory} />
 					</div>
 					<div class="piece-classification">
 						<span class="category-label"

src/routes/fundus/[id]/+page.server.ts

@@ -6,6 +6,7 @@ import {
 	duplicatePiece,
 	getPiece,
 	getTaxonomy,
+	loadPiecePresentationMetadata,
 	savePiece,
 	setPieceArchived,
 	uploadPieceImage,
@@ -65,6 +66,20 @@ function pieceInput(data: FormData): PieceInput {
 		moderationNotes: text(data, 'moderationNotes'),
 		transitionText: text(data, 'transitionText'),
 		presentationText: text(data, 'presentationText'),
+		presentationMode: text(data, 'presentationMode') as PieceInput['presentationMode'],
+		presentationSourcePosition: text(data, 'presentationSourcePosition')
+			? Number(data.get('presentationSourcePosition'))
+			: null,
+		presentationTitle: text(data, 'presentationTitle'),
+		presentationDescription: text(data, 'presentationDescription'),
+		presentationImageUrl: text(data, 'presentationImageUrl'),
+		presentationSiteName: text(data, 'presentationSiteName'),
+		presentationProvider: text(data, 'presentationProvider'),
+		presentationProviderId: text(data, 'presentationProviderId'),
+		presentationTitleManual: text(data, 'presentationTitleManual') === '1',
+		presentationDescriptionManual: text(data, 'presentationDescriptionManual') === '1',
+		presentationImageManual: text(data, 'presentationImageManual') === '1',
+		presentationMetadataFetchedAtUtc: text(data, 'presentationMetadataFetchedAtUtc') || null,
 		topicIds: data.getAll('topicIds').map(String),
 		categoryIds: data.getAll('categoryIds').map(String),
 		sources
@@ -87,6 +102,11 @@ function saveError(cause: unknown) {
 			status: 400,
 			error: 'Quellen benötigen einen Namen und eine vollständige HTTP- oder HTTPS-Adresse.'
 		};
+	if (code === 'INVALID_PRESENTATION')
+		return {
+			status: 400,
+			error: 'Für Linkvorschau und Video muss eine vorhandene gültige Quelle ausgewählt sein.'
+		};
 	if (code.startsWith('INVALID_'))
 		return { status: 400, error: 'Mindestens ein Feld ist ungültig oder zu lang.' };
 	return {
@@ -116,6 +136,31 @@ export const actions = {
 			return fail(problem.status, { intent: 'save', ...problem });
 		}
 	},
+	loadPreview: async ({ locals, params, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		try {
+			await loadPiecePresentationMetadata(params.id, Number(data.get('revision')));
+		} catch (cause) {
+			const code = cause instanceof Error ? cause.message : '';
+			if (code === 'FETCH_BLOCKED') {
+				return fail(400, {
+					intent: 'loadPreview',
+					error: 'Interne oder private Netzwerkziele dürfen nicht abgerufen werden.'
+				});
+			}
+			if (code.startsWith('FETCH_')) {
+				return fail(400, {
+					intent: 'loadPreview',
+					error:
+						'Die Vorschau konnte nicht sicher geladen werden. Die manuellen Angaben bleiben erhalten.'
+				});
+			}
+			const problem = saveError(cause);
+			return fail(problem.status, { intent: 'loadPreview', ...problem });
+		}
+		redirect(303, `/fundus/${params.id}`);
+	},
 	upload: async ({ locals, params, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();

src/routes/fundus/[id]/+page.svelte

@@ -15,6 +15,7 @@
 	let saveState = $state<'idle' | 'dirty' | 'saving' | 'saved' | 'error' | 'conflict'>('idle');
 	let saveMessage = $state('Alle Änderungen gespeichert');
 	let editorForm: HTMLFormElement;
+	let previewForm: HTMLFormElement;
 	let saveButton: HTMLButtonElement;
 	let timer: ReturnType<typeof setTimeout> | undefined;
 	let generation = 0;
@@ -42,7 +43,17 @@
 		if (!saving) submitSave();
 	});
 
-	function scheduleSave() {
+	function scheduleSave(event?: Event) {
+		const control = event?.target;
+		if (event?.type === 'change' && !(control instanceof HTMLSelectElement)) return;
+		if (
+			control instanceof HTMLInputElement &&
+			control.name === 'presentationMode' &&
+			control.value !== 'text' &&
+			draft.presentationSourcePosition === null
+		) {
+			return;
+		}
 		generation += 1;
 		saveState = 'dirty';
 		saveMessage = 'Ungespeicherte Änderungen';
@@ -62,9 +73,25 @@
 
 	function removeSource(index: number) {
 		sources.splice(index, 1);
+		if (draft.presentationSourcePosition === index) draft.presentationSourcePosition = null;
+		else if (
+			draft.presentationSourcePosition !== null &&
+			draft.presentationSourcePosition > index
+		) {
+			draft.presentationSourcePosition -= 1;
+		}
 		scheduleSave();
 	}
 
+	function presentationSourceChanged() {
+		draft.presentationMetadataFetchedAtUtc = null;
+		draft.presentationProvider = '';
+		draft.presentationProviderId = '';
+		if (!draft.presentationTitleManual) draft.presentationTitle = '';
+		if (!draft.presentationDescriptionManual) draft.presentationDescription = '';
+		if (!draft.presentationImageManual) draft.presentationImageUrl = '';
+	}
+
 	const enhanceSave: SubmitFunction = () => {
 		const submittedGeneration = generation;
 		saving = true;
@@ -248,7 +275,45 @@
 						bind:value={draft.transitionText}></textarea>
 					<MarkdownPreview html={rendered.transition} /></label
 				>
-				<label class="wide-field"
+			</div>
+		</section>
+
+		<section class="editor-section presentation-editor">
+			<div class="section-title split-section-title">
+				<div>
+					<p class="eyebrow">Präsentation</p>
+					<h2>Darstellung in heinzlive</h2>
+					<small>Nur die ausdrücklich ausgewählte Quelle wird präsentiert.</small>
+				</div>
+				<a
+					class="secondary-button"
+					href={resolve('/fundus/[id]/praesentation', { id: data.piece.id })}
+					target="_blank"
+					rel="noopener">Präsentation testen</a
+				>
+			</div>
+			<div class="presentation-mode-picker" role="group" aria-label="Darstellung">
+				{#each [['text', 'Text'], ['link', 'Linkvorschau'], ['video', 'Video']] as mode (mode[0])}
+					<label
+						><input
+							type="radio"
+							name="presentationMode"
+							value={mode[0]}
+							bind:group={draft.presentationMode}
+						/>{mode[1]}</label
+					>
+				{/each}
+			</div>
+			{#if draft.presentationMode === 'text'}
+				<input
+					type="hidden"
+					name="presentationSourcePosition"
+					value={draft.presentationSourcePosition ?? ''}
+				/>
+				<input type="hidden" name="presentationTitle" value={draft.presentationTitle} />
+				<input type="hidden" name="presentationDescription" value={draft.presentationDescription} />
+				<input type="hidden" name="presentationImageUrl" value={draft.presentationImageUrl} />
+				<label class="presentation-text-field"
 					><span>Präsentationstext</span><textarea
 						name="presentationText"
 						rows="7"
@@ -256,7 +321,85 @@
 						bind:value={draft.presentationText}></textarea>
 					<MarkdownPreview html={rendered.presentation} /></label
 				>
-			</div>
+			{:else}
+				<input type="hidden" name="presentationText" value={draft.presentationText} />
+				<div class="presentation-settings">
+					<label class="wide-field"
+						>Quelle<select
+							name="presentationSourcePosition"
+							bind:value={draft.presentationSourcePosition}
+							onchange={presentationSourceChanged}
+						>
+							<option value={null}>Quelle auswählen</option>
+							{#each sources as source, index (index)}
+								{#if source.url}<option value={index}>{source.label || source.url}</option>{/if}
+							{/each}
+						</select></label
+					>
+					<label
+						>Titel<input
+							name="presentationTitle"
+							maxlength="300"
+							bind:value={draft.presentationTitle}
+							oninput={() => (draft.presentationTitleManual = true)}
+						/></label
+					>
+					<label
+						>Bild-URL<input
+							name="presentationImageUrl"
+							type="url"
+							maxlength="2000"
+							bind:value={draft.presentationImageUrl}
+							oninput={() => (draft.presentationImageManual = true)}
+						/></label
+					>
+					<label class="wide-field"
+						>Anreißer<textarea
+							name="presentationDescription"
+							rows="3"
+							maxlength="1000"
+							bind:value={draft.presentationDescription}
+							oninput={() => (draft.presentationDescriptionManual = true)}></textarea></label
+					>
+					<div class="presentation-preview-actions wide-field">
+						<button
+							class="secondary-button"
+							type="button"
+							onclick={() => previewForm.requestSubmit()}
+							disabled={actionsBlocked || draft.presentationSourcePosition === null}
+							>Vorschau laden</button
+						>
+						<small>
+							{draft.presentationMetadataFetchedAtUtc
+								? `Zuletzt geladen: ${new Date(draft.presentationMetadataFetchedAtUtc).toLocaleString('de-DE')}`
+								: 'Noch keine Metadaten geladen.'}
+						</small>
+					</div>
+				</div>
+			{/if}
+			<input
+				type="hidden"
+				name="presentationTitleManual"
+				value={draft.presentationTitleManual ? '1' : '0'}
+			/>
+			<input
+				type="hidden"
+				name="presentationDescriptionManual"
+				value={draft.presentationDescriptionManual ? '1' : '0'}
+			/>
+			<input
+				type="hidden"
+				name="presentationImageManual"
+				value={draft.presentationImageManual ? '1' : '0'}
+			/>
+			<input type="hidden" name="presentationSiteName" value={draft.presentationSiteName} />
+			<input type="hidden" name="presentationProvider" value={draft.presentationProvider} />
+			<input type="hidden" name="presentationProviderId" value={draft.presentationProviderId} />
+			<input
+				type="hidden"
+				name="presentationMetadataFetchedAtUtc"
+				value={draft.presentationMetadataFetchedAtUtc ?? ''}
+			/>
 		</section>
 
 		<section class="editor-section source-editor">
@@ -303,6 +446,15 @@
 			>
 		</div>
 	</form>
+	<form
+		bind:this={previewForm}
+		id="preview-load-form"
+		method="POST"
+		action="?/loadPreview"
+		use:enhance
+	>
+		<input type="hidden" name="revision" value={revision} />
+	</form>
 
 	<section class="editor-section media-editor">
 		<div class="section-title">

src/routes/fundus/[id]/praesentation/+page.server.ts

@@ -0,0 +1,44 @@
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+import { requireUser } from '#lib/server/auth.js';
+import { getPiece } from '#lib/server/content.js';
+import { renderMarkdown } from '#lib/server/markdown.js';
+import { buildEmbedUrl, type PresentationContent } from '#lib/server/presentation.js';
+
+export const load: PageServerLoad = ({ locals, params }) => {
+	requireUser(locals.user);
+	const piece = getPiece(params.id);
+	if (!piece) error(404, 'Piece nicht gefunden');
+	const source =
+		piece.presentationSourcePosition === null
+			? null
+			: (piece.sources[piece.presentationSourcePosition] ?? null);
+	const content: PresentationContent & {
+		sources: typeof piece.sources;
+		images: { id: string; altText: string }[];
+	} = {
+		mode: piece.presentationMode,
+		title: piece.title,
+		html: renderMarkdown(piece.presentationText),
+		source,
+		previewTitle: piece.presentationTitle,
+		description: piece.presentationDescription,
+		imageUrl: piece.presentationImageUrl,
+		siteName: piece.presentationSiteName,
+		provider:
+			piece.presentationProvider === 'youtube' || piece.presentationProvider === 'tiktok'
+				? piece.presentationProvider
+				: '',
+		providerId: piece.presentationProviderId,
+		embedUrl: buildEmbedUrl(
+			piece.presentationProvider === 'youtube' || piece.presentationProvider === 'tiktok'
+				? piece.presentationProvider
+				: '',
+			piece.presentationProviderId,
+			source?.timecodeSeconds ?? null
+		),
+		sources: piece.sources,
+		images: piece.media.map((item) => ({ id: item.id, altText: item.altText }))
+	};
+	return { pieceId: piece.id, content };
+};

src/routes/fundus/[id]/praesentation/+page.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import PresentationDisplay from '#lib/components/PresentationDisplay.svelte';
+	import type { PageProps } from './$types';
+
+	let { data }: PageProps = $props();
+</script>
+
+<svelte:head>
+	<title>Präsentation testen | Sendewerk</title>
+	<meta name="robots" content="noindex, nofollow, noarchive" />
+</svelte:head>
+
+<main class="heinzlive-output presentation-test-output">
+	<div class="presentation-test-status" role="status">Isolierte Testansicht</div>
+	<PresentationDisplay
+		content={data.content}
+		imageSrc={data.content.mode === 'text'
+			? '/media'
+			: `/fundus/${data.pieceId}/praesentation/preview-image`}
+	/>
+</main>

src/routes/fundus/[id]/praesentation/preview-image/+server.ts

@@ -0,0 +1,26 @@
+import { error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { requireUser } from '#lib/server/auth.js';
+import { getPiece } from '#lib/server/content.js';
+import { fetchPresentationImage } from '#lib/server/presentation.js';
+
+export const GET: RequestHandler = async ({ locals, params }) => {
+	requireUser(locals.user);
+	const piece = getPiece(params.id);
+	if (!piece?.presentationImageUrl) error(404, 'Vorschaubild nicht verfügbar');
+	try {
+		const image = await fetchPresentationImage(piece.presentationImageUrl);
+		return new Response(new Uint8Array(image.data), {
+			headers: {
+				'Content-Type': image.mimeType,
+				'Content-Length': String(image.data.byteLength),
+				'Cache-Control': 'private, max-age=300',
+				'X-Content-Type-Options': 'nosniff',
+				'Cross-Origin-Resource-Policy': 'same-origin',
+				'Content-Security-Policy': "default-src 'none'; sandbox"
+			}
+		});
+	} catch {
+		error(404, 'Vorschaubild nicht verfügbar');
+	}
+};