Merge pull request #13 from NMSCD/dev

use custom file compressor package

Author: Lenni009

.editorconfig

@@ -5,4 +5,5 @@ charset = utf-8
 indent_style = space
 indent_size = 2
 end_of_line = lf
-trim_trailing_whitespace = true
+insert_final_newline = true
+trim_trailing_whitespace = true

.github/dependabot.yml

@@ -0,0 +1,18 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: 'npm' # See documentation for possible values
+    directory: '/' # Location of package manifests
+    target-branch: 'dev'
+    schedule:
+      interval: 'weekly'
+
+  - package-ecosystem: 'github-actions'
+    directory: '/'
+    target-branch: 'dev'
+    schedule:
+      interval: 'weekly'

package-lock.json

@@ -12,18 +12,18 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@picocss/pico": "^1.5.10",
-    "image-conversion": "^2.1.1",
+    "@picocss/pico": "^2.0.0",
     "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"
   },
   "devDependencies": {
     "@tsconfig/node20": "^20.1.2",
     "@types/node": "^20.10.5",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue": "^5.0.3",
     "@vue/tsconfig": "^0.5.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.0",

package.json

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watchEffect } from 'vue';
-import type { FileObj } from '../types/file';
-import { useI18n } from '../hooks/useI18n';
+import type { FileObj } from '@/types/file';
+import { useI18n } from '@/hooks/useI18n';
 
 const { t } = useI18n();
 
@@ -59,8 +59,8 @@ const computeFileSize = (size: number) =>
       </div>
     </div>
     <a
-      :aria-disabled="!fileObj.isCompressed"
       :class="{ secondary: !fileObj.isCompressed }"
+      :disabled="!fileObj.isCompressed || undefined"
       :href="fileObj.isCompressed ? fileData : undefined"
       role="button"
       download
@@ -80,12 +80,13 @@ const computeFileSize = (size: number) =>
   display: flex;
   gap: 2rem;
   border: 1px solid;
-  border-radius: var(--border-radius);
+  border-radius: var(--pico-border-radius);
   padding: 0.25rem;
   padding-inline: 1rem;
   align-items: center;
   width: 100%;
-  justify-content: space-between;
+  justify-content: center;
+  flex-wrap: wrap;
 
   .field-title {
     font-weight: bold;

src/components/FileItem.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useFileDataStore } from '../stores/fileData';
+import { useFileDataStore } from '@/stores/fileData';
 import { storeToRefs } from 'pinia';
-import type { FileObj } from '../types/file';
-import { useI18n } from '../hooks/useI18n';
+import type { FileObj } from '@/types/file';
+import { useI18n } from '@/hooks/useI18n';
 
 const dragActive = ref(false);
 
@@ -69,7 +69,7 @@ function addFiles(uploadedFiles: FileList) {
   justify-content: center;
   align-items: center;
   height: 200px;
-  border-radius: var(--border-radius);
+  border-radius: var(--pico-border-radius);
   border: 2px dashed;
   cursor: pointer;
   transition:
@@ -90,7 +90,7 @@ function addFiles(uploadedFiles: FileList) {
     width: max-content;
     height: auto;
     padding: 5px;
-    border-radius: var(--border-radius);
+    border-radius: var(--pico-border-radius);
     border: 1px solid;
 
     &::file-selector-button {

src/components/FileUpload.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { watch, ref } from 'vue';
-import { useI18n } from '../hooks/useI18n';
+import { useI18n } from '@/hooks/useI18n';
 import ThemeSwitch from './ThemeSwitch.vue';
 
 const { t, locale } = useI18n();

src/components/NavBar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useI18n } from '../hooks/useI18n';
+import { useI18n } from '@/hooks/useI18n';
 
 const { t } = useI18n();
 

src/components/ThemeSwitch.vue

@@ -1,16 +1,15 @@
-import { compress, EImageType } from 'image-conversion';
+import { compressImage, imageTypes } from 'simple-image-compressor';
+import { maxSize } from '@/variables/constants';
 
 export async function useImageCompression(file: File, quality: number = 1): Promise<File> {
-  const maxSize = 10000000;
   if (file.size < maxSize) return file; // if below 10 MB, don't do anything
-  const res = await compress(file, {
+  const res = await compressImage(file, {
     quality,
-    type: EImageType.JPEG,
-    scale: 1,
+    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
   const fileName = file.name.split('.').slice(0, -1).join('.');
   const newFileName = fileName + '-min.jpg';
-  return new File([res], newFileName, { type: EImageType.JPEG });
+  return new File([res], newFileName, { type: imageTypes.JPEG });
 }

src/composables/useImageCompression.ts

@@ -1,6 +1,6 @@
 import JSZip from 'jszip';
 import { storeToRefs } from 'pinia';
-import { useFileDataStore } from '../stores/fileData';
+import { useFileDataStore } from '@/stores/fileData';
 
 export async function useZipCompression(): Promise<string> {
   const zip = new JSZip();