d1b24c905f
transcription_read_label ("Transkription lesen") for the read-only entry
control and transcription_panel_title ("Transkription") for the plain
header readers see instead of the Lesen/Bearbeiten toggle.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
111 lines
3.3 KiB
Svelte
111 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
|
|
type Props = {
|
|
documentId: string;
|
|
canWrite: boolean;
|
|
isPdf: boolean;
|
|
hasTranscription: boolean;
|
|
transcribeMode: boolean;
|
|
filePath?: string | null;
|
|
originalFilename?: string | null;
|
|
fileUrl: string;
|
|
};
|
|
|
|
let {
|
|
documentId,
|
|
canWrite,
|
|
isPdf,
|
|
hasTranscription,
|
|
transcribeMode = $bindable(),
|
|
filePath = null,
|
|
originalFilename = null,
|
|
fileUrl
|
|
}: Props = $props();
|
|
|
|
const canOpenTranscription = $derived((canWrite || hasTranscription) && isPdf);
|
|
const transcriptionLabel = $derived(
|
|
canWrite ? m.transcription_mode_label() : m.transcription_read_label()
|
|
);
|
|
</script>
|
|
|
|
{#if canOpenTranscription && !transcribeMode}
|
|
<button
|
|
onclick={() => (transcribeMode = true)}
|
|
aria-label={transcriptionLabel}
|
|
aria-pressed={false}
|
|
class="hidden items-center gap-1.5 rounded border border-primary px-3 py-1.5 font-sans text-[16px] font-medium text-ink transition hover:bg-primary hover:text-primary-fg focus-visible:ring-2 focus-visible:ring-primary md:flex"
|
|
>
|
|
<svg
|
|
class="h-5 w-5 shrink-0"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
|
|
/>
|
|
</svg>
|
|
{transcriptionLabel}
|
|
</button>
|
|
{/if}
|
|
|
|
{#if transcribeMode}
|
|
<button
|
|
onclick={() => (transcribeMode = false)}
|
|
aria-label={m.transcription_mode_stop()}
|
|
aria-pressed={true}
|
|
class="flex items-center gap-1.5 rounded bg-primary px-3 py-1.5 font-sans text-[16px] font-medium text-primary-fg transition focus-visible:ring-2 focus-visible:ring-primary"
|
|
>
|
|
<svg
|
|
class="h-5 w-5 shrink-0"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
|
|
/>
|
|
</svg>
|
|
{m.transcription_mode_stop()}
|
|
</button>
|
|
{/if}
|
|
|
|
{#if canWrite && !transcribeMode}
|
|
<a
|
|
href="/documents/{documentId}/edit"
|
|
aria-label={m.btn_edit()}
|
|
class="flex items-center gap-1.5 rounded border border-primary bg-transparent px-3 py-1.5 text-[16px] font-medium text-ink transition hover:bg-primary hover:text-primary-fg focus-visible:ring-2 focus-visible:ring-primary"
|
|
>
|
|
<img
|
|
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Edit-Content-MD.svg"
|
|
alt=""
|
|
aria-hidden="true"
|
|
class="h-5 w-5"
|
|
/>
|
|
<span class="hidden sm:inline">{m.btn_edit()}</span>
|
|
</a>
|
|
{/if}
|
|
|
|
{#if filePath && !transcribeMode}
|
|
<a
|
|
href={fileUrl}
|
|
download={originalFilename}
|
|
class="hidden rounded border border-transparent bg-muted p-1.5 text-ink transition hover:bg-accent focus-visible:ring-2 focus-visible:ring-primary md:block"
|
|
title={m.doc_download_title()}
|
|
>
|
|
<img
|
|
src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Download-MD.svg"
|
|
alt=""
|
|
aria-hidden="true"
|
|
class="h-5 w-5 shrink-0"
|
|
/>
|
|
</a>
|
|
{/if}
|