renders thumbnails

src/lib/components/AttachmentPreview.svelte

@@ -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

@@ -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>