rehlert/bea-edit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

renders thumbnails

Browse Source
This commit is contained in:
rehlert
2026-06-12 13:33:00 +02:00
parent 0cbbc6f46d
commit 1a9f0e876c
4 changed files with 136 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/AttachmentPreview.svelte
+55 -19
View File
@@ -10,13 +10,26 @@
let { attachment, class: className = "" }: Props = $props();
let canvasElement = $state<HTMLCanvasElement | null>(null);
let imageUrl = $state<string | null>(null);
let previewError = $state<string | null>(null);
onMount(() => {
let objectUrl: string | null = null;
let cancelled = false;
const revokeObjectUrl = () => {
if (objectUrl) {
URL.revokeObjectURL(objectUrl);
objectUrl = null;
}
};
const setBlobImage = (blob: Blob) => {
revokeObjectUrl();
objectUrl = URL.createObjectURL(blob);
imageUrl = objectUrl;
};
(async () => {
const pdfjsLib = await import("pdfjs-dist");
const { getDocument, GlobalWorkerOptions } = pdfjsLib;
@@ -25,14 +38,14 @@
const loadPreview = async () => {
previewError = null;
imageUrl = null;
if (attachment.kind === "image") {
const imageBuffer = attachment.data.buffer.slice(
attachment.data.byteOffset,
attachment.data.byteOffset + attachment.data.byteLength,
) as ArrayBuffer;
objectUrl = URL.createObjectURL(new Blob([imageBuffer]));
imageUrl = objectUrl;
setBlobImage(new Blob([imageBuffer]));
return;
}
@@ -41,17 +54,42 @@
const pdfDocument = await loadingTask.promise;
const page = await pdfDocument.getPage(1);
if (cancelled || !canvasElement) {
if (cancelled) {
void loadingTask.destroy();
return;
}
const viewport = page.getViewport({ scale: 0.4 });
const viewport = page.getViewport({ scale: 1 });
const canvasElement = document.createElement("canvas");
canvasElement.width = viewport.width;
canvasElement.height = viewport.height;
await page.render({ canvas: canvasElement, viewport }).promise;
const canvasContext = canvasElement.getContext("2d");
if (!canvasContext) {
throw new Error("Could not create thumbnail canvas context.");
}
await page.render({ canvas: canvasElement, canvasContext, viewport }).promise;
if (cancelled) {
void loadingTask.destroy();
return;
}
const blob = await new Promise<Blob>((resolve, reject) => {
canvasElement.toBlob((result) => {
if (result) {
resolve(result);
return;
}
reject(new Error("Could not create thumbnail blob."));
}, "image/png");
});
setBlobImage(blob);
await loadingTask.destroy();
} catch (error) {
@@ -65,27 +103,25 @@
return () => {
cancelled = true;
if (objectUrl) {
URL.revokeObjectURL(objectUrl);
}
revokeObjectUrl();
};
});
</script>
<div class={className}>
{#if attachment.kind === "image"}
{#if imageUrl}
<img
alt={attachment.name}
class="block h-full w-full rounded-md border border-primary-100 bg-white object-contain"
src={imageUrl}
/>
{/if}
{:else if previewError}
{#if previewError}
<div class="flex h-full min-h-0 items-center justify-center rounded-md border border-dashed border-primary-200 bg-primary-50 px-3 py-4 text-center text-[12px] text-primary-800">
{previewError}
</div>
{:else if imageUrl}
<img
alt={attachment.name}
class="block rounded-md border border-primary-100 bg-white object-contain"
src={imageUrl}
/>
{:else}
<canvas bind:this={canvasElement} class="block rounded-md border border-primary-100 bg-white"></canvas>
<div class="flex items-center justify-center rounded-md border border-dashed border-primary-200 bg-primary-50 px-3 py-4 text-center text-[12px] text-primary-800">
Vorschau wird erstellt
</div>
{/if}
</div>
src/lib/components/ProcessedZipArchiveEditor.svelte
+10 -5
View File
@@ -4,11 +4,14 @@
type Props = {
archive: ProcessedZipArchive;
thumbnailWidth: number;
onArchiveChange?: (archive: ProcessedZipArchive) => void;
};
let {
archive, onArchiveChange = () => {
archive,
thumbnailWidth = 200,
onArchiveChange = () => {
}
}: Props = $props();
@@ -112,6 +115,7 @@
class={`flex flex-col shrink-0 items-stretch gap-2 rounded-xl border bg-primary-50 p-2 ${
dropIndex === index ? "border-primary-400 ring-1 ring-primary-200" : "border-primary-100"
} ${dragIndex === index ? "opacity-60" : ""}`}
style={`width: ${thumbnailWidth}px;`}
draggable="true"
ondragstart={(event) => handleDragStart(index, event)}
ondragover={(event) => handleDragOver(index, event)}
@@ -128,13 +132,14 @@
::
</button>
<div class="min-w-0 text-[13px] font-medium leading-tight text-primary-900">
<div
class="truncate text-[13px] font-medium leading-tight text-primary-900"
title={attachment.name}
>
{attachment.name}
</div>
</div>
<div class="shrink-0">
<AttachmentPreview {attachment} class="h-full w-full"/>
</div>
<AttachmentPreview {attachment} />
</li>
{/each}
</ul>
src/routes/+page.svelte
+59 -1
View File
@@ -1,12 +1,41 @@
<script lang="ts">
import { onMount } from "svelte";
import Card from "$lib/components/Card.svelte";
import ProcessedZipArchiveEditor from "$lib/components/ProcessedZipArchiveEditor.svelte";
import ZipDropzone from "$lib/components/ZipDropzone.svelte";
import { extractZipArchive, type ProcessedZipArchive } from "$lib/zip-processing";
const THUMBNAIL_WIDTH_STORAGE_KEY = "thumbnailWidth";
let selectedZipFiles: File[] = $state([]);
let processedZipFiles: ProcessedZipArchive[] = $state([]);
let pendingZipCount = $state(0);
let thumbnailWidth = $state(200);
let thumbnailWidthHydrated = $state(false);
const clampThumbnailWidth = (value: number) => Math.min(400, Math.max(100, value));
onMount(() => {
const storedValue = localStorage.getItem(THUMBNAIL_WIDTH_STORAGE_KEY);
if (storedValue !== null) {
const parsedValue = Number(storedValue);
if (Number.isFinite(parsedValue)) {
thumbnailWidth = clampThumbnailWidth(parsedValue);
}
}
thumbnailWidthHydrated = true;
});
$effect(() => {
if (!thumbnailWidthHydrated) {
return;
}
localStorage.setItem(THUMBNAIL_WIDTH_STORAGE_KEY, String(thumbnailWidth));
});
const handleFilesSelected = (files: File[]) => {
selectedZipFiles = [...selectedZipFiles, ...files];
@@ -59,6 +88,7 @@
{#each processedZipFiles as file, index}
<ProcessedZipArchiveEditor
archive={file}
{thumbnailWidth}
onArchiveChange={(updatedArchive) => updateProcessedZipFile(index, updatedArchive)}
/>
{/each}
@@ -70,6 +100,34 @@
{/snippet}
<section class="px-4">
<h1 class="h1 text-[20px] font-bold py-6 text-primary-900">beA-Edit</h1>
<div class="flex flex-wrap items-center justify-between gap-3 py-6">
<h1 class="h1 text-[20px] font-bold text-primary-900">beA-Edit</h1>
<details class="relative">
<summary class="flex cursor-pointer list-none items-center rounded-md border border-primary-200 bg-white px-3 py-2 text-sm font-semibold text-primary-800 shadow-sm transition hover:border-primary-300 hover:bg-primary-50">
<span class="sr-only">Settings</span>
<span>⚙️</span>
</summary>
<div class="absolute right-0 z-10 mt-2 w-64 rounded-xl border border-primary-100 bg-white p-4 shadow-lg">
<label class="flex flex-col gap-2">
<div class="flex items-center justify-between gap-3 text-sm font-medium text-primary-900">
<span>Thumbnail width</span>
<span class="tabular-nums text-primary-700">{thumbnailWidth}px</span>
</div>
<input
class="w-full accent-primary-700"
type="range"
min="100"
max="400"
step="1"
bind:value={thumbnailWidth}
/>
</label>
</div>
</details>
</div>
<Card {content} class="h-full"/>
</section>