limit thread amount

Author: Lenni009

src/App.vue

@@ -8,6 +8,7 @@ import type { FileObj } from './types/file';
 import { computed, ref, watch } from 'vue';
 import { compressFile } from './functions/imageCompression';
 import { comressToZip } from './functions/zipCompression';
+import { paginate } from './functions/paginate';
 import { useI18n } from './hooks/useI18n';
 
 const { t } = useI18n();
@@ -20,13 +21,13 @@ const zipData = ref('');
 const isZipCompressing = ref(false);
 const anyUncompressed = computed(() => files.value.some((file) => !file.isCompressed));
 
+const availableThreads = Math.max(navigator.hardwareConcurrency - 2, 1);
+
 async function editFileObj(fileObj: FileObj) {
   try {
     const compressedFile = await compressFile(fileObj.file);
-    const item = files.value.find((item) => item.id === fileObj.id);
-    if (!item) return;
-    item.file = compressedFile;
-    item.isCompressed = true;
+    fileObj.file = compressedFile;
+    fileObj.isCompressed = true;
   } catch {
     fileObj.isTooLarge = true;
   }
@@ -37,9 +38,13 @@ async function compressFiles() {
 
   const uncompressedFiles = files.value.filter((fileObj: FileObj) => !fileObj.isCompressed);
 
-  const promises = uncompressedFiles.map(editFileObj);
+  const paginatedFileArray = paginate(uncompressedFiles, availableThreads);
+
+  for (const subArray of paginatedFileArray) {
+    const promises = subArray.map(editFileObj);
+    await Promise.all(promises);
+  }
 
-  await Promise.all(promises);
   isCompressing.value = false;
 }
 

src/components/FileItem.vue

@@ -21,7 +21,7 @@ watchEffect(() => {
   }
 });
 
-const fileData = computed(() => URL.createObjectURL(props.fileObj.file));
+const objectUrl = computed(() => URL.createObjectURL(props.fileObj.file));
 
 const computeFileSize = (size: number) =>
   (size / (1024 * 1024)).toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 }); // NoSonar this is to convert byte to MB
@@ -31,12 +31,12 @@ const computeFileSize = (size: number) =>
   <div class="file-item">
     <div class="item-set">
       <a
-        :href="fileData"
+        :href="objectUrl"
         rel="noopener noreferrer"
         target="_blank"
       >
         <img
-          :src="fileData"
+          :src="objectUrl"
           alt="Image preview"
           class="preview"
           width="200"
@@ -64,7 +64,7 @@ const computeFileSize = (size: number) =>
       <a
         :class="{ secondary: !fileObj.isCompressed }"
         :disabled="!fileObj.isCompressed || undefined"
-        :href="fileObj.isCompressed ? fileData : undefined"
+        :href="fileObj.isCompressed ? objectUrl : undefined"
         role="button"
         download
         >{{ t('translation.download') }}</a

src/functions/paginate.ts

@@ -0,0 +1,15 @@
+import type { FileObj } from '@/types/file';
+
+export function paginate(files: FileObj[], chunkSize: number): FileObj[][] {
+  const paginatedArray: FileObj[][] = files.reduce((resultArray: FileObj[][], file, index) => {
+    const chunkIndex = Math.floor(index / chunkSize);
+
+    resultArray[chunkIndex] ??= []; // start a new chunk
+
+    resultArray[chunkIndex].push(file);
+
+    return resultArray;
+  }, []);
+
+  return paginatedArray;
+}