Merge branch 'master' into add-username-in-sidebar

frontend/src/components/prompts/BaseModal.vue

@@ -1,13 +1,13 @@
 <template>
   <VueFinalModal
+    class="vfm-modal"
     overlay-transition="vfm-fade"
     content-transition="vfm-fade"
     @closed="layoutStore.closeHovers"
     :focus-trap="{
       initialFocus: '#focus-prompt',
       fallbackFocus: 'div.vfm__content',
     }"
-    style="z-index: 9999999"
   >
     <slot />
   </VueFinalModal>

frontend/src/components/prompts/DeleteUser.vue

@@ -17,7 +17,7 @@
       </button>
       <button
         class="button button--flat"
-        @click="layoutStore.currentPrompt?.confirm()"
+        @click="layoutStore.currentPrompt?.confirm"
         tabindex="2"
       >
         {{ t("buttons.delete") }}

frontend/src/components/prompts/UploadFiles.vue

@@ -10,6 +10,12 @@
         <div class="upload-info">
           <div class="upload-speed">{{ uploadSpeed.toFixed(2) }} MB/s</div>
           <div class="upload-eta">{{ formattedETA }} remaining</div>
+          <div class="upload-percentage">
+            {{ getProgressDecimal }}% Completed
+          </div>
+          <div class="upload-fraction">
+            {{ getTotalProgressBytes }} / {{ getTotalSize }}
+          </div>
         </div>
         <button
           class="action"
@@ -72,6 +78,10 @@ export default {
       "filesInUploadCount",
       "uploadSpeed",
       "getETA",
+      "getProgress",
+      "getProgressDecimal",
+      "getTotalProgressBytes",
+      "getTotalSize",
     ]),
     ...mapWritableState(useFileStore, ["reload"]),
     formattedETA() {
@@ -91,7 +101,7 @@ export default {
     },
   },
   methods: {
-    ...mapActions(useUploadStore, ["reset"]),  // Mapping reset action from upload store
+    ...mapActions(useUploadStore, ["reset"]), // Mapping reset action from upload store
     toggle: function () {
       this.open = !this.open;
     },
@@ -100,8 +110,8 @@ export default {
         abortAllUploads();
         buttons.done("upload");
         this.open = false;
-        this.reset();  // Resetting the upload store state
-        this.reload = true;  // Trigger reload in the file store
+        this.reset(); // Resetting the upload store state
+        this.reload = true; // Trigger reload in the file store
       }
     },
   },

frontend/src/css/base.css

@@ -178,3 +178,7 @@ html[dir="rtl"] .breadcrumbs a {
 .vue-number-input__button::after {
   background: var(--textSecondary) !important;
 }
+
+.vfm-modal {
+  z-index: 9999999 !important;
+}

frontend/src/css/styles.css

@@ -234,6 +234,10 @@ main .spinner .bounce2 {
   height: 100%;
 }
 
+#previewer .vjs-error-display {
+  margin-top: 40%;
+}
+
 #previewer .preview .info {
   position: absolute;
   top: 50%;
@@ -265,6 +269,7 @@ main .spinner .bounce2 {
 #previewer .pdf {
   width: 100%;
   height: 100%;
+  margin-top: 4em;
 }
 
 #previewer h2.message {

frontend/src/stores/upload.ts

@@ -13,6 +13,15 @@ const beforeUnload = (event: Event) => {
   // event.returnValue = "";
 };
 
+// Utility function to format bytes into a readable string
+function formatSize(bytes: number): string {
+  if (bytes === 0) return "0 Bytes";
+
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + " " + sizes[i];
+}
+
 export const useUploadStore = defineStore("upload", {
   // convert to a function
   state: (): {
@@ -47,6 +56,31 @@ export const useUploadStore = defineStore("upload", {
       const sum = state.progress.reduce((acc, val) => +acc + +val) as number;
       return Math.ceil((sum / totalSize) * 100);
     },
+    getProgressDecimal: (state) => {
+      if (state.progress.length === 0) {
+        return 0;
+      }
+
+      const totalSize = state.sizes.reduce((a, b) => a + b, 0);
+
+      // TODO: this looks ugly but it works with ts now
+      const sum = state.progress.reduce((acc, val) => +acc + +val) as number;
+      return ((sum / totalSize) * 100).toFixed(2);
+    },
+    getTotalProgressBytes: (state) => {
+      if (state.progress.length === 0 || state.sizes.length === 0) {
+        return "0 Bytes";
+      }
+      const sum = state.progress.reduce((acc, val) => +acc + +val, 0) as number;
+      return formatSize(sum);
+    },
+    getTotalSize: (state) => {
+      if (state.sizes.length === 0) {
+        return "0 Bytes";
+      }
+      const totalSize = state.sizes.reduce((a, b) => a + b, 0);
+      return formatSize(totalSize);
+    },
     filesInUploadCount: (state) => {
       return Object.keys(state.uploads).length + state.queue.length;
     },

frontend/src/utils/auth.ts

@@ -1,7 +1,7 @@
 import { useAuthStore } from "@/stores/auth";
 import router from "@/router";
 import { JwtPayload, jwtDecode } from "jwt-decode";
-import { baseURL } from "./constants";
+import { baseURL, noAuth } from "./constants";
 import { StatusError } from "@/api/utils";
 
 export function parseToken(token: string) {
@@ -98,5 +98,9 @@ export function logout() {
   authStore.clearUser();
 
   localStorage.setItem("jwt", "");
-  router.push({ path: "/login" });
+  if (noAuth) {
+    window.location.reload();
+  } else {
+    router.push({path: "/login"});
+  }
 }