Release 0.5.10

src/lib/components/UsageEditorDialog.svelte

@@ -2,6 +2,7 @@
 	import { enhance, type SubmitFunction } from '$app/forms';
 	import { untrack } from 'svelte';
 	import MarkdownEditorField from './MarkdownEditorField.svelte';
+	import InlineTitleEditor from './InlineTitleEditor.svelte';
 	import NavIcon from './NavIcon.svelte';
 	import PieceEditorDialog from './PieceEditorDialog.svelte';
 	import type { PieceUsage } from '#lib/server/shows.js';
@@ -29,6 +30,9 @@
 		untrack(() => ({ ...usage, tools: usage.tools.map((tool) => ({ ...tool })) }))
 	);
 	let dirty = $state(false);
+	let selectedMedia = $derived(
+		draft.media.find((media) => media.id === draft.presentationMediaId) ?? null
+	);
 
 	function durationInMinutes(seconds: number) {
 		return Number((seconds / 60).toFixed(2));
@@ -67,18 +71,7 @@
 >
 	{#snippet header()}
 		<p class="eyebrow">Sendungsfassung</p>
-		<label class="piece-dialog-title">
-			<span class="sr-only">Titel</span>
-			<textarea
-				form={formId}
-				name="title"
-				required
-				rows="1"
-				maxlength="200"
-				aria-label="Titel"
-				bind:value={draft.title}
-				oninput={() => (dirty = true)}></textarea>
-		</label>
+		<InlineTitleEditor form={formId} bind:value={draft.title} oncommit={() => (dirty = true)} />
 		<h2 class="sr-only" id={`usage-editor-title-${usage.id}`}>{draft.title}</h2>
 	{/snippet}
 
@@ -250,6 +243,7 @@
 						value={draft.presentationSourceTimecodeSeconds ?? ''}
 					/>
 					<input type="hidden" name="presentationSiteName" value={draft.presentationSiteName} />
+					<input type="hidden" name="presentationMediaId" value={draft.presentationMediaId ?? ''} />
 					{#if draft.presentationMode !== 'text'}
 						<div class="presentation-settings">
 							<div class="presentation-source-summary wide-field">
@@ -297,6 +291,33 @@
 						<input type="hidden" name="presentationImageUrl" value={draft.presentationImageUrl} />
 					{/if}
 				</div>
+				{#if draft.media.length}<fieldset class="usage-media-picker">
+						<legend>Hochgeladenes Präsentationsbild</legend>
+						<label
+							><input
+								type="radio"
+								checked={!draft.presentationMediaId}
+								onchange={() => {
+									draft.presentationMediaId = null;
+									dirty = true;
+								}}
+							/> Kein Bild</label
+						>
+						<div class="media-grid">
+							{#each draft.media as media (media.id)}<label class="media-presentation-choice"
+									><input
+										type="radio"
+										checked={draft.presentationMediaId === media.id}
+										onchange={() => {
+											draft.presentationMediaId = media.id;
+											dirty = true;
+										}}
+									/><img src={`/media/${media.originalMediaId}`} alt={media.altText} /><span
+										>Auswählen</span
+									></label
+								>{/each}
+						</div>
+					</fieldset>{/if}
 				<aside class="piece-presentation-preview" aria-label="Präsentationsvorschau">
 					<p class="output-kicker">Vorschau · {draft.presentationMode}</p>
 					<h4>{draft.outputTitle || draft.title}</h4>
@@ -304,8 +325,18 @@
 						<p class="preview-markdown-source">
 							{draft.presentation || 'Noch kein öffentlicher Text.'}
 						</p>
+						{#if selectedMedia}<img
+								src={`/media/${selectedMedia.originalMediaId}`}
+								alt={selectedMedia.altText}
+							/>{/if}
 					{:else}
-						{#if draft.presentationImageUrl}<img src={draft.presentationImageUrl} alt="" />{/if}
+						{#if selectedMedia}<img
+								src={`/media/${selectedMedia.originalMediaId}`}
+								alt={selectedMedia.altText}
+							/>{:else if draft.presentationImageUrl}<img
+								src={draft.presentationImageUrl}
+								alt=""
+							/>{/if}
 						<p>
 							{draft.presentationDescription ||
 								draft.presentationSourceUrl ||