feat(filesharing): progress bar during download/decrypt + per-file downloads (#241)

rubenhensen · web-flow · commit 52bfed7f98af · 2026-06-02T16:42:15.000+02:00
* feat(filesharing): progress bar during download/decrypt + per-file downloads Replaces the empty/spinner state during decryption with a labeled progress bar ("Downloading and decrypting locally…"). Wires up pg-js's new onDownloadProgress callback; falls back to an indeterminate animated bar when the server doesn't send Content-Length. Switches to pg-js's auto-unzip: result.files is now {name, blob}[] and result.download() triggers one browser download per file. The fallback Decrypt component's ~70-line in-component ZIP extractor is removed (pg-js auto-unwraps the data.bin single-entry case). * chore: point pg-js at feat branch for cross-repo CI (revert before merge) Temporary git-URL dep so this PR's CI can compile against the unpublished pg-js progress/auto-unzip types. Revert this commit (or bump to the released pg-js version) before merging. See: encryption4all/postguard-js#86 * chore: bump @e4a/pg-js to ^2.0.0 Replaces the temporary git-URL pin with the released version that ships the new onDownloadProgress callback, auto-unzip, and DecryptFileResult shape (encryption4all/postguard-js#86 merged as v2.0.0). * chore(decrypt-progress): drop dead class and orphan i18n key - Remove `class:indeterminate` directive on the bar track — no matching rule exists; the indeterminate visual lives on the inner `.bar-indeterminate` element. - Remove the now-unreferenced `filesharing.decryptpanel.decrypting` key from en.json and nl.json (the download page swapped its spinner+text for the DecryptionProgress component). * fix(decrypt-progress): add ARIA progressbar semantics for WCAG AA
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -70,7 +70,7 @@
     },
     "dependencies": {
         "@deltablot/dropzone": "^7.4.3",
-        "@e4a/pg-js": "^1.11.0",
+        "@e4a/pg-js": "^2.0.0",
         "@iconify/svelte": "^5.2.1",
         "@privacybydesign/yivi-css": "^1.0.1",
         "country-flag-icons": "^1.6.17",
diff --git a/src/lib/components/fallback/Decrypt.svelte b/src/lib/components/fallback/Decrypt.svelte
@@ -13,6 +13,7 @@
     import { pg } from '$lib/postguard'
 
     import YiviQRCode from '$lib/components/filesharing/YiviQRCode.svelte'
+    import DecryptionProgress from '$lib/components/filesharing/DecryptionProgress.svelte'
     import Chip from '$lib/components/Chip.svelte'
     import { isMobile } from '$lib/browser-detect'
 
@@ -44,6 +45,8 @@
     let { rightMode = $bindable(), readable, uuid, recipient } = $props()
 
     let opened = $state()
+    /** @type {number | undefined} */
+    let decryptPct = $state(undefined)
 
     function checkRecipients() {
         const recipients = [...policies.keys()].filter((k) => k)
@@ -86,24 +89,29 @@
     }
 
     async function startDecryption() {
+        decryptPct = undefined
         try {
             const result = await opened.decrypt({
                 element: '#yivi-fallback',
                 recipient: key,
                 enableCache: true,
+                /** @param {number | undefined} pct */
+                onDownloadProgress: (pct) => {
+                    if (decryptState !== STATES.Decrypting) {
+                        decryptState = STATES.Decrypting
+                    }
+                    decryptPct = pct
+                },
             })
 
-            decryptState = STATES.Decrypting
-
-            // pg-js wraps `data:`-mode uploads as a single-file zip
-            // (`data.bin` = the raw bytes) before encrypting, because the
-            // upload pipeline always works on Files. uuid-mode decrypts
-            // therefore yield DecryptFileResult{blob, files} and not
-            // DecryptDataResult{plaintext}. Unwrap the zip here so the
-            // downstream parseMail sees real MIME bytes.
-            const plaintext = result.plaintext
-                ? result.plaintext
-                : await extractFromZip(result.blob, 'data.bin')
+            // pg-js auto-unwraps `data:`-mode payloads (single-entry zip
+            // with `data.bin`) into DecryptDataResult.plaintext. Email
+            // fallback uploads are always `data:` mode, so this branch is
+            // the expected one. If we ever receive a multi-file result
+            // here, fall back to the first entry's bytes.
+            const plaintext =
+                result.plaintext ??
+                new Uint8Array(await result.files[0].blob.arrayBuffer())
 
             const outStream = new TextDecoder().decode(plaintext)
             decryptedMail = await email.parseMail(outStream)
@@ -114,82 +122,6 @@
         }
     }
 
-    /** Extract a single file from a ZIP blob and return its uncompressed
-     *  bytes. Reads via the central directory (where conflux — pg-js's zip
-     *  writer — records the real sizes) because the local file headers in
-     *  streaming-mode zips carry zeros. Supports stored (method 0) and
-     *  deflate (method 8); DecompressionStream('deflate-raw') is the right
-     *  decoder for ZIP-embedded deflate. */
-    async function extractFromZip(blob, filename) {
-        const buf = await blob.arrayBuffer()
-        const view = new DataView(buf)
-        const bytes = new Uint8Array(buf)
-        const decoder = new TextDecoder('utf-8')
-
-        // Find EOCD (End of Central Directory): signature 0x06054b50,
-        // located in the last ~64 KB of the file.
-        let eocdOffset = -1
-        for (
-            let i = bytes.length - 22;
-            i >= Math.max(0, bytes.length - 65557);
-            i--
-        ) {
-            if (view.getUint32(i, true) === 0x06054b50) {
-                eocdOffset = i
-                break
-            }
-        }
-        if (eocdOffset === -1) throw new Error('ZIP EOCD record not found')
-
-        const cdOffset = view.getUint32(eocdOffset + 16, true)
-        const numEntries = view.getUint16(eocdOffset + 10, true)
-
-        let pos = cdOffset
-        for (let i = 0; i < numEntries; i++) {
-            if (view.getUint32(pos, true) !== 0x02014b50) break // CDR signature
-
-            const method = view.getUint16(pos + 10, true)
-            const compressedSize = view.getUint32(pos + 20, true)
-            const nameLen = view.getUint16(pos + 28, true)
-            const extraLen = view.getUint16(pos + 30, true)
-            const commentLen = view.getUint16(pos + 32, true)
-            const lfhOffset = view.getUint32(pos + 42, true)
-            const name = decoder.decode(
-                bytes.slice(pos + 46, pos + 46 + nameLen)
-            )
-
-            if (name === filename) {
-                // Re-parse the local file header to find the data start;
-                // its name + extra fields can differ in length from the
-                // CDR entry.
-                const lfhNameLen = view.getUint16(lfhOffset + 26, true)
-                const lfhExtraLen = view.getUint16(lfhOffset + 28, true)
-                const dataStart = lfhOffset + 30 + lfhNameLen + lfhExtraLen
-                const compressed = bytes.slice(
-                    dataStart,
-                    dataStart + compressedSize
-                )
-
-                if (method === 0) return compressed
-                if (method === 8) {
-                    const stream = new Blob([compressed])
-                        .stream()
-                        .pipeThrough(new DecompressionStream('deflate-raw'))
-                    return new Uint8Array(
-                        await new Response(stream).arrayBuffer()
-                    )
-                }
-                throw new Error(
-                    `Unsupported zip compression method ${method} for ${filename}`
-                )
-            }
-
-            pos += 46 + nameLen + extraLen + commentLen
-        }
-
-        throw new Error(`File "${filename}" not found in zip`)
-    }
-
     async function storeMail(unparsed) {
         const hash = await decrypt.digestMessage(unparsed)
         const found = $emails.find((e) => e.hash === hash)
@@ -321,22 +253,7 @@
             />
         </div>
     {:else if decryptState === STATES.Decrypting}
-        <div class="spinner-wrapper">
-            <svg class="spinner" viewBox="0 0 24 24" width="36" height="36">
-                <circle
-                    class="spinner-circle"
-                    cx="12"
-                    cy="12"
-                    r="10"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="3"
-                ></circle>
-            </svg>
-        </div>
-        <p class="status-text">
-            {$_('fallback.decrypt.decrypting', { default: 'Decrypting...' })}
-        </p>
+        <DecryptionProgress percentage={decryptPct} />
     {:else if decryptState === STATES.Fail}
         <div class="decrypt-card error-card">
             <p class="error-text">
diff --git a/src/lib/components/filesharing/DecryptionProgress.svelte b/src/lib/components/filesharing/DecryptionProgress.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+    import { _ } from 'svelte-i18n'
+
+    interface props {
+        percentage: number | undefined
+    }
+
+    let { percentage }: props = $props()
+
+    let determinate = $derived(typeof percentage === 'number')
+</script>
+
+<div class="container">
+    <p class="label" id="decryption-progress-label">
+        {$_('filesharing.decryptpanel.downloadingAndDecrypting')}
+    </p>
+    {#if determinate}
+        <div
+            class="bar-track"
+            role="progressbar"
+            aria-labelledby="decryption-progress-label"
+            aria-valuemin="0"
+            aria-valuemax="100"
+            aria-valuenow={Math.round(
+                Math.max(0, Math.min(100, percentage ?? 0))
+            )}
+        >
+            <div
+                class="bar-fill"
+                style="width: {Math.max(0, Math.min(100, percentage ?? 0))}%"
+            ></div>
+        </div>
+    {:else}
+        <div
+            class="bar-track"
+            role="progressbar"
+            aria-labelledby="decryption-progress-label"
+            aria-valuemin="0"
+            aria-valuemax="100"
+        >
+            <div class="bar-indeterminate"></div>
+        </div>
+    {/if}
+    {#if determinate}
+        <p class="percent">{Math.round(percentage ?? 0)}%</p>
+    {/if}
+</div>
+
+<style lang="scss">
+    .container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 1.5rem 0;
+        width: 100%;
+    }
+
+    .label {
+        margin: 0;
+        color: var(--pg-text-secondary);
+        font-family: var(--pg-font-family);
+        font-size: var(--pg-font-size-md);
+        text-align: center;
+    }
+
+    .bar-track {
+        position: relative;
+        width: 100%;
+        height: 8px;
+        background: var(--pg-strong-background);
+        border-radius: 4px;
+        overflow: hidden;
+    }
+
+    .bar-fill {
+        height: 100%;
+        background: var(--pg-text);
+        border-radius: 4px;
+        transition: width 0.15s ease-out;
+    }
+
+    .bar-indeterminate {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 40%;
+        background: var(--pg-text);
+        border-radius: 4px;
+        animation: slide 1.4s ease-in-out infinite;
+    }
+
+    @keyframes slide {
+        0% {
+            transform: translateX(-100%);
+        }
+        100% {
+            transform: translateX(250%);
+        }
+    }
+
+    .percent {
+        margin: 0;
+        color: var(--pg-text-secondary);
+        font-family: var(--pg-font-family);
+        font-size: var(--pg-font-size-sm);
+    }
+</style>
diff --git a/src/lib/locales/en.json b/src/lib/locales/en.json
@@ -156,7 +156,7 @@
             "irmaInstructionQr": "Decrypt the files by verifying your e-mail address. Scan the QR code below with the free Yivi app on your phone.",
             "irmaInstructionMobile": "Decrypt the files by verifying your e-mail address. Please click the button below to open the Yivi-app.",
             "noIrma": "Don't have the Yivi-app yet?",
-            "decrypting": "Your files are being downloaded and decrypted afterwards.",
+            "downloadingAndDecrypting": "Downloading and decrypting locally…",
             "succes": "Successfully downloaded and decrypted",
             "askDownload": "Download",
             "askDownloadText": "Press the button below to start decrypting and downloading your files",
diff --git a/src/lib/locales/nl.json b/src/lib/locales/nl.json
@@ -156,7 +156,7 @@
             "irmaInstructionQr": "Ontsleutel de bestanden door je e-mailadres te verifiëren. Scan de onderstaande QR-code met de gratis Yivi-app op je telefoon.",
             "irmaInstructionMobile": "Ontsleutel het bestand door je e-mailadres te tonen. Click daarvoor op de onderstaande knop om naar de identificatie app Yivi te gaan.",
             "noIrma": "Nog geen Yivi-app?",
-            "decrypting": "Jouw bestand wordt gedownload en vervolgens ontsleuteld.",
+            "downloadingAndDecrypting": "Bezig met downloaden en lokaal ontsleutelen…",
             "succes": "Succesvol gedownload en ontsleuteld",
             "askDownload": "Download",
             "askDownloadText": "Druk op onderstaande knop om de bestanden te ontsleutelen en downloaden.",
diff --git a/src/routes/(app)/download/+page.svelte b/src/routes/(app)/download/+page.svelte
