Add: zip packer

package.json

@@ -66,6 +66,7 @@
   "private": true,
   "dependencies": {
     "browserslist": "^4.28.1",
+    "client-zip": "^2.5.0",
     "css-prop-parser": "^0.1.0",
     "image-extensions": "^1.1.0",
     "modern-tar": "^0.7.2",

src/background.js

@@ -14,6 +14,12 @@ import {createDialog} from "./lib/popup-dialog.js";
 import {compileStringTemplate} from "./lib/string-template.js";
 import {expandEnv, expandDate} from "./lib/expand-env.mjs";
 import {getTarPacker} from "./lib/tar-packer.js";
+import {getZipPacker} from "./lib/zip-packer.js";
+
+const PACKERS = {
+  tar: getTarPacker,
+  zip: getZipPacker
+}
 
 const MENU_ACTIONS = {
 	PICK_FROM_CURRENT_TAB: {
@@ -532,12 +538,11 @@ function getRawPacker() {
 }
 
 function getPacker() {
-  if (pref.get("packer") === "tar") {
-    try {
-      return getTarPacker();
-    } catch (err) {
-      console.warn(err);
-    }
+  try {
+    const getPacker = PACKERS[pref.get("packer")];
+    return getPacker();
+  } catch (err) {
+    console.warn(err);
   }
   return getRawPacker();
 }

src/lib/pref.js

@@ -37,7 +37,7 @@ const DEFAULT = {
   isolateTabs: false,
   filenameConflictAction: "uniquify",
   lowResPreview: true,
-  packer: IS_ANDROID ? "tar" : "none",
+  packer: IS_ANDROID ? "zip" : "none",
   saveAs: false,
   selectByDefault: true,
   singleClick: false,

src/lib/tar-packer.js

@@ -4,7 +4,7 @@ export function getTarPacker() {
   if (typeof navigator.storage?.getDirectory !== 'function') {
     throw new Error('File System Access API is not supported in this browser.');
   }
-  const tarName = `temp-${Date.now()}-${Math.random().toString(16).slice(2)}.tar`;
+  const tempName = `temp-${Date.now()}-${Math.random().toString(16).slice(2)}.tar`;
   const {readable, controller} = createTarPacker();
   let pendingPipe = null;
   return {
@@ -17,7 +17,7 @@ export function getTarPacker() {
 
   async function prepare() {
     const root = await navigator.storage.getDirectory();
-    const handle = await root.getFileHandle(tarName, {create: true});
+    const handle = await root.getFileHandle(tempName, {create: true});
     const writable = await handle.createWritable();
     pendingPipe = readable.pipeTo(writable);
   }
@@ -35,6 +35,6 @@ export function getTarPacker() {
   async function save() {
     controller.finalize();
     await pendingPipe;
-    return {tarName, downloadName: `image-picka-${new Date().toISOString()}.tar`};
+    return {tempName, downloadName: `image-picka-${new Date().toISOString()}.tar`};
   }
 }

src/lib/zip-packer.js

@@ -0,0 +1,51 @@
+import {makeZip} from "client-zip"
+import {defer} from "./defer.js";
+
+const EXT = "zip";
+
+export function getZipPacker() {
+  if (typeof navigator.storage?.getDirectory !== 'function') {
+    throw new Error('File System Access API is not supported in this browser.');
+  }
+  const tempName = `temp-${Date.now()}-${Math.random().toString(16).slice(2)}.${EXT}`;
+  let pendingPipe = null;
+  let itemReady = defer();
+  let zipReady = defer();
+  return {
+    prepare,
+    pack,
+    save,
+    waitResponse: true,
+    singleThread: true,
+  }
+
+  async function prepare() {
+    const root = await navigator.storage.getDirectory();
+    const handle = await root.getFileHandle(tempName, {create: true});
+    const writable = await handle.createWritable();
+    const zipStream = makeZip(async function*() {
+      let item;
+      while ((item = await itemReady.promise)) {
+        yield item;
+        zipReady.resolve();
+        zipReady = defer();
+      }
+    }());
+    pendingPipe = zipStream.pipeTo(writable);
+  }
+
+  async function pack({blob, filename}) {
+    itemReady.resolve({
+      name: filename,
+      input: blob,
+    });
+    itemReady = defer();
+    await zipReady.promise;
+  }
+
+  async function save() {
+    itemReady.resolve(null); // signal end of items
+    await pendingPipe;
+    return {tempName, downloadName: `image-picka-${new Date().toISOString()}.${EXT}`};
+  }
+}

src/options.js

@@ -380,6 +380,7 @@ const root = createUI({
           label: _("optionPackerLabel"),
           options: {
             none: _("optionPackerNone"),
+            zip: _("optionPackerZip"),
             tar: _("optionPackerTar")
           },
           help: _("optionPackerHelp")

src/picker.js

@@ -179,14 +179,14 @@ function init({tabs: originalTabs, env}) {
           env,
           batchId: BATCH_ID
         });
-        if (result?.tarName) {
+        if (result?.tempName) {
           const root = await navigator.storage.getDirectory();
-          const fileHandle = await root.getFileHandle(result.tarName);
+          const fileHandle = await root.getFileHandle(result.tempName);
           const file = await fileHandle.getFile();
           const url = URL.createObjectURL(file);
           const a = document.createElement("a");
           a.href = url;
-          a.download = result.downloadName || result.tarName;
+          a.download = result.downloadName || result.tempName;
           a.style.display = "none";
           document.body.appendChild(a);
           a.click();
@@ -195,7 +195,7 @@ function init({tabs: originalTabs, env}) {
           await timeout(1000);
           URL.revokeObjectURL(url);
           // NOTE: can't remove file until download complete
-          // await root.removeEntry(result.tarName);
+          // await root.removeEntry(result.tempName);
         }
         if (!IS_ANDROID) {
           // NOTE: closing the tab will close the download confirmation in Firefox Android

src/static/_locales/en/messages.json

@@ -121,6 +121,9 @@
   },
   "optionPackerTar": {
     "message": "TAR archive"
+  },
+  "optionPackerZip": {
+    "message": "ZIP archive"
   },
 	"optionPreviewMaxHeightUpperBoundLabel": {
 		"message": "The maximum value of the thumbnail size slider",