Merge pull request #32 from NMSCD/dev

Add error handling; paginate concurrent compressions

Author: Lenni009

.github/workflows/build.yml

@@ -19,7 +19,7 @@ jobs:
 
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Build App
         run: |

.github/workflows/test-build.yml

@@ -19,7 +19,7 @@ jobs:
 
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Test Build
         uses: Lenni009/test-build-vite-action@main

.vscode/extensions.json

@@ -5,30 +5,25 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "run-p type-check build-only",
+    "build": "vue-tsc && vite build",
     "preview": "vite preview",
-    "build-only": "vite build",
-    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@picocss/pico": "^2.0.0",
+    "@picocss/pico": "^2.0.6",
     "jszip": "^3.10.1",
     "pinia": "^2.1.6",
-    "sass": "^1.64.1",
-    "simple-image-compressor": "^1.0.1",
-    "vue": "^3.3.4",
-    "vue-i18n": "^9.8.0"
+    "sass": "^1.71.1",
+    "simple-image-compressor": "^1.4.2",
+    "vue": "^3.4.21",
+    "vue-i18n": "^9.10.1"
   },
   "devDependencies": {
-    "@tsconfig/node20": "^20.1.2",
-    "@types/node": "^20.10.5",
+    "@types/node": "^20.11.25",
     "@vitejs/plugin-vue": "^5.0.3",
-    "@vue/tsconfig": "^0.5.1",
-    "npm-run-all": "^4.1.5",
     "prettier": "^3.0.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.10",
-    "vue-tsc": "^1.8.6"
+    "typescript": "^5.4.2",
+    "vite": "^5.1.5",
+    "vue-tsc": "^2.0.6"
   }
 }

package-lock.json

@@ -5,9 +5,10 @@ import FileItem from './components/FileItem.vue';
 import { useFileDataStore } from './stores/fileData';
 import { storeToRefs } from 'pinia';
 import type { FileObj } from './types/file';
-import { computed, ref, watch } from 'vue';
-import { useImageCompression } from './composables/useImageCompression';
-import { useZipCompression } from './composables/useZipCompression';
+import { computed, ref } from 'vue';
+import { compressFile } from './functions/imageCompression';
+import { compressToZip } from './functions/zipCompression';
+import { paginate } from './functions/paginate';
 import { useI18n } from './hooks/useI18n';
 
 const { t } = useI18n();
@@ -20,44 +21,46 @@ 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 useImageCompression(fileObj.file);
-    const item = files.value.find((item) => item.id === fileObj.id);
-    if (!item) return;
-    item.file = compressedFile;
-    item.isCompressed = true;
+    const compressedFile = await compressFile(fileObj.file);
+    fileObj.file = compressedFile;
+    fileObj.isCompressed = true;
   } catch {
-    fileObj.isTooLarge = true;
+    fileObj.isError = true;
   }
 }
 
 async function compressFiles() {
   isCompressing.value = true;
 
-  const promises = [];
-
   const uncompressedFiles = files.value.filter((fileObj: FileObj) => !fileObj.isCompressed);
 
-  for (const fileObj of uncompressedFiles) {
-    promises.push(editFileObj(fileObj));
+  // option 1 (no errors, slower)
+  const paginatedFileArray = paginate(uncompressedFiles, availableThreads);
+
+  for (const subArray of paginatedFileArray) {
+    const promises = subArray.map(editFileObj);
+    await Promise.all(promises);
   }
 
-  await Promise.all(promises);
+  // option 2 (errors, faster -> better option once the errors are fixed in Firefox)
+  // const promises = uncompressedFiles.map(editFileObj);
+  // await Promise.all(promises);
+
   isCompressing.value = false;
+
+  URL.revokeObjectURL(zipData.value);
+  isZipCompressing.value = true;
+  zipData.value = await compressToZip();
+  isZipCompressing.value = false;
 }
 
 function removeItem(file: FileObj) {
   files.value = files.value.filter((item) => item !== file);
 }
-
-watch(anyUncompressed, async (newVal) => {
-  if (files.value.length && !newVal) {
-    isZipCompressing.value = true;
-    zipData.value = await useZipCompression();
-    isZipCompressing.value = false;
-  }
-});
 </script>
 
 <template>
@@ -92,7 +95,7 @@ watch(anyUncompressed, async (newVal) => {
       </button>
       <a
         :aria-busy="isZipCompressing"
-        :aria-disabled="!zipData"
+        :disabled="!zipData || undefined"
         :href="zipData || undefined"
         role="button"
         download

package.json

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watchEffect } from 'vue';
+import { computed, ref, watchEffect, watch, onUnmounted } from 'vue';
 import type { FileObj } from '@/types/file';
 import { useI18n } from '@/hooks/useI18n';
 
@@ -21,57 +21,65 @@ watchEffect(() => {
   }
 });
 
-const fileData = computed(() => URL.createObjectURL(props.fileObj.file));
+const objectUrl = computed(() => URL.createObjectURL(props.fileObj.file));
+
+watch(objectUrl, (_, oldUrl) => URL.revokeObjectURL(oldUrl));
 
 const computeFileSize = (size: number) =>
   (size / (1024 * 1024)).toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 }); // NoSonar this is to convert byte to MB
+
+onUnmounted(() => URL.revokeObjectURL(objectUrl.value));
 </script>
 
 <template>
   <div class="file-item">
-    <a
-      :href="fileData"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <img
-        :src="fileData"
-        alt="Image preview"
-        class="preview"
-        width="200"
-      />
-    </a>
-    <div>
-      <div>
-        <span class="field-title">{{ t('translation.name') }}</span> {{ fileObj.file.name }}
-      </div>
+    <div class="item-set">
+      <a
+        :href="objectUrl"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <img
+          :src="objectUrl"
+          alt="Image preview"
+          class="preview"
+          width="200"
+        />
+      </a>
       <div>
-        <span class="field-title">{{ t('translation.originalsize') }}</span> {{ computeFileSize(orgSize) }}MB
-      </div>
-      <div v-if="compSize">
-        <span class="field-title">{{ t('translation.compressedsize') }}</span> {{ computeFileSize(compSize) }}MB
+        <div>
+          <span class="field-title">{{ t('translation.name') }}</span> {{ fileObj.file.name }}
+        </div>
+        <div>
+          <span class="field-title">{{ t('translation.originalsize') }}</span> {{ computeFileSize(orgSize) }}MB
+        </div>
+        <div v-if="compSize">
+          <span class="field-title">{{ t('translation.compressedsize') }}</span> {{ computeFileSize(compSize) }}MB
+        </div>
+        <div
+          v-if="fileObj.isError"
+          class="error"
+        >
+          <span class="field-title">{{ t('translation.error') }}</span> {{ t('translation.hasFailed') }}
+        </div>
       </div>
-      <div
-        v-if="fileObj.isTooLarge"
-        class="error"
+    </div>
+    <div class="item-set">
+      <a
+        :class="{ secondary: !fileObj.isCompressed }"
+        :disabled="!fileObj.isCompressed || undefined"
+        :download="fileObj.file.name"
+        :href="fileObj.isCompressed ? objectUrl : undefined"
+        role="button"
+        >{{ t('translation.download') }}</a
       >
-        <span class="field-title">{{ t('translation.error') }}</span> {{ t('translation.filetoolarge') }}
-      </div>
+      <button
+        class="secondary delete-button"
+        @click="$emit('remove')"
+      >
+        ❌
+      </button>
     </div>
-    <a
-      :class="{ secondary: !fileObj.isCompressed }"
-      :disabled="!fileObj.isCompressed || undefined"
-      :href="fileObj.isCompressed ? fileData : undefined"
-      role="button"
-      download
-      >{{ t('translation.download') }}</a
-    >
-    <button
-      class="secondary delete-button"
-      @click="$emit('remove')"
-    >
-      ❌
-    </button>
   </div>
 </template>
 
@@ -85,9 +93,15 @@ const computeFileSize = (size: number) =>
   padding-inline: 1rem;
   align-items: center;
   width: 100%;
-  justify-content: center;
+  justify-content: space-between;
   flex-wrap: wrap;
 
+  .item-set {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+
   .field-title {
     font-weight: bold;
   }

src/App.vue

@@ -32,7 +32,7 @@ function addFiles(uploadedFiles: FileList) {
     const fileObj: FileObj = {
       id: id++,
       isCompressed: false,
-      isTooLarge: false,
+      isError: false,
       file,
     };
     files.value.push(fileObj);

src/components/FileItem.vue

@@ -1,14 +1,14 @@
 import { compressImage, imageTypes } from 'simple-image-compressor';
 import { maxSize } from '@/variables/constants';
 
-export async function useImageCompression(file: File, quality: number = 1): Promise<File> {
+export async function compressFile(file: File, quality: number = 1): Promise<File> {
   if (file.size < maxSize) return file; // if below 10 MB, don't do anything
   const res = await compressImage(file, {
     quality,
     type: imageTypes.JPEG,
   });
   const lowerQuality = quality - 0.01; // NoSonar reduce quality by 1%;
-  if (res.size > maxSize) return await useImageCompression(file, lowerQuality); // compress original file with lower quality setting to avoid double compression
+  if (res.size > maxSize) return await compressFile(file, lowerQuality); // compress original file with lower quality setting to avoid double compression
   const fileName = file.name.split('.').slice(0, -1).join('.');
   const newFileName = fileName + '-min.jpg';
   return new File([res], newFileName, { type: imageTypes.JPEG });

src/components/FileUpload.vue

@@ -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;
+}