feat(download zip): configuration to download media on a zip or one b…

…ye one without zipping

package.json

@@ -89,6 +89,7 @@
   "dependencies": {
     "bootswatch": "^5.3.3",
     "byte-size": "^8.1.1",
+    "file-saver": "^2.0.5",
     "jszip": "^3.10.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -113,6 +114,7 @@
     "@semantic-release/github": "^10.0.2",
     "@semantic-release/release-notes-generator": "^13.0.0",
     "@types/byte-size": "^8.1.2",
+    "@types/file-saver": "^2.0.7",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@types/webextension-polyfill": "^0.10.7",

src/App.tsx

@@ -9,8 +9,6 @@ function App() {
 
   const key = useRef(`${window.crypto.randomUUID()}`);
 
-
-
   return (
     <main className={ui.addOn}>
       <Header />
@@ -35,7 +33,7 @@ function App() {
 
         <button
           className="btn btn-primary"
-          onClick={() => hook.handleDownloadAll()}
+          onClick={async () => await hook.handleDownloadAll()}
         >
           Download all
         </button>

src/customHooks/useAddOn/index.ts

@@ -2,17 +2,17 @@ import browser from "webextension-polyfill";
 import { CrawledImageDom } from "../../typesContentScript";
 import { useContext, useEffect, useState } from "react";
 import { MessageBrowserActions } from "../../helpers/content_script/types";
-import { downloadBase64 } from "../../helpers/files";
+import { downloadBase64, zipGallery } from "../../helpers/files";
 import { ContextGlobal } from "../../structure/configuration/Global";
+import { saveAs } from "file-saver";
 
 export default function useAddOn() {
   const [state, setState] = useState<CrawledImageDom[]>([]);
 
-  const global = useContext(ContextGlobal)
+  const global = useContext(ContextGlobal);
 
   useEffect(() => {
-
-    if(global===undefined) return
+    if (global === undefined) return;
 
     browser.runtime.onMessage.addListener(function (
       message: MessageBrowserActions<"crawledContent">
@@ -44,13 +44,23 @@ export default function useAddOn() {
     const crawledContent: CrawledImageDom[] =
       typeof dto === "string" ? JSON.parse(dto) : dto;
 
-    const parsed = global?.showThumbnails ? crawledContent : crawledContent.filter(item=>item.height > 320 && item.width > 320)
+    const parsed = global?.showThumbnails
+      ? crawledContent
+      : crawledContent.filter((item) => item.height > 320 && item.width > 320);
 
     setState(parsed);
   }
 
-  function handleDownloadAll() {
-    state.forEach((data) => downloadBase64(data.blob));
+  async function handleDownloadAll() {
+    if (global?.zipBulkDownloads) {
+      const toZip = state.map((item) => item.blob);
+
+      const zippedFiles = await zipGallery(toZip);
+
+      saveAs(zippedFiles, `${window.crypto.randomUUID()}.zip`);
+    } else {
+      state.forEach((data) => downloadBase64(data.blob));
+    }
   }
 
   return {

src/helpers/files/index.ts

@@ -1,3 +1,21 @@
+import JSZip from "jszip";
+
+export async function zipGallery(gallery: string[]): Promise<Blob> {
+  const zip = new JSZip();
+  for (let i = 0; i < gallery.length; i++) {
+
+    const name = `${i+1}`.padStart(10,"0");
+
+    zip.file(`${name}.jpg`, gallery[i].split(",")[1], {
+      base64: true,
+    });
+  }
+
+  const data = await zip.generateAsync({ type: "blob" });
+
+  return data;
+}
+
 /**
  *
  * @param base64String - Bas64 file
@@ -87,5 +105,5 @@ export function downloadBase64(base64: string) {
   document.body.removeChild(link);
   URL.revokeObjectURL(url);
 
-  return blob
+  return blob;
 }

src/index.css

@@ -2,6 +2,25 @@
   --primaryBackground: rgb(247, 247, 247);
 }
 
+/* Default font size */
+* {
+  font-size: 16px;
+}
+
+/* Media query for smaller screens */
+@media screen and (max-width: 768px) {
+  * {
+    font-size: 14px;
+  }
+}
+
+/* Media query for even smaller screens */
+@media screen and (max-width: 480px) {
+  * {
+    font-size: 12px;
+  }
+}
+
 *,
 *::before,
 *::after {
@@ -112,7 +131,7 @@ textarea {
   background-color: transparent;
 }
 
-svg{
+svg {
   height: 20px;
 }
 
@@ -124,7 +143,7 @@ svg{
     --primaryBackground: rgb(50, 50, 50);
   }
 
-  *:not(label, input,select,option) {
+  *:not(label, input, select, option) {
     color: white !important;
   }
 }