Separate album downloading logic from user display. Allow downloading individual user albums.

sas/static/bundled/sas/pictures-download-index.ts

@@ -0,0 +1,46 @@
+import { HttpReader, ZipWriter } from "@zip.js/zip.js";
+import { showSaveFilePicker } from "native-file-system-adapter";
+import type { PictureSchema } from "#openapi";
+
+document.addEventListener("alpine:init", () => {
+  Alpine.data("pictures_download", () => ({
+    isDownloading: false,
+
+    async downloadZip() {
+      this.isDownloading = true;
+      const bar = this.$refs.progress;
+      bar.value = 0;
+      bar.max = this.pictures.length;
+
+      const incrementProgressBar = (_total: number): undefined => {
+        bar.value++;
+        return undefined;
+      };
+
+      const fileHandle = await showSaveFilePicker({
+        _preferPolyfill: false,
+        suggestedName: interpolate(
+          gettext("pictures.%(extension)s"),
+          { extension: "zip" },
+          true,
+        ),
+        excludeAcceptAllOption: false,
+      });
+      const zipWriter = new ZipWriter(await fileHandle.createWritable());
+
+      await Promise.all(
+        this.pictures.map((p: PictureSchema) => {
+          const imgName = `${p.album}/IMG_${p.date.replace(/[:\-]/g, "_")}${p.name.slice(p.name.lastIndexOf("."))}`;
+          return zipWriter.add(imgName, new HttpReader(p.full_size_url), {
+            level: 9,
+            lastModDate: new Date(p.date),
+            onstart: incrementProgressBar,
+          });
+        }),
+      );
+
+      await zipWriter.close();
+      this.isDownloading = false;
+    },
+  }));
+});