TMP

Author: Max-7

client/src/components/files/operations/UploadStatus.vue

@@ -2,7 +2,13 @@
 
 <template>
   <div class="upload-status">
-    <template v-if="status && status.totalBytes === 0">
+    <template v-if="status.totalBytes > 0">
+      <div>
+        {{ $msTranslate({ key: 'FoldersPage.ImportFile.syncing.filesLeft', count: status.totalFiles }) }}
+        {{ $msTranslate(formatETA(rateCalculator.getEta(status.totalBytes))) }}
+      </div>
+    </template>
+    <template v-else>
       <ion-icon
         :icon="checkmarkCircle"
         class="upload-status__icon checkmark-icon"
@@ -14,89 +20,24 @@
         @click="$emit('close')"
       />
     </template>
-    <template v-else-if="status && status.totalBytes > 0">
-      <transition
-        name="step-fade"
-        mode="out-in"
-      >
-        <div
-          class="upload-status-step"
-          :key="stepIndex"
-        >
-          <ion-icon
-            :icon="currentStep.icon"
-            class="upload-status-step__icon step-icon"
-          />
-          <ion-text class="title-h5 upload-status-step__text">{{ $msTranslate(currentStep.label) }}</ion-text>
-        </div>
-      </transition>
-    </template>
   </div>
 </template>
 
 <script setup lang="ts">
 import { TransferRateCalculator } from '@/common/transferRate';
 import { UploadProgress } from '@/parsec';
+import { formatETA } from '@/services/translation';
 import { IonIcon, IonText } from '@ionic/vue';
-import { checkmarkCircle, close, cloudUpload, lockClosed, reader, shieldCheckmark } from 'ionicons/icons';
-import { computed, onUnmounted, ref, watch } from 'vue';
-
-const UPLOAD_STEP_DURATION = 4000;
-const UPLOAD_STEPS = [
-  { icon: reader, label: 'FoldersPage.ImportFile.syncing.step1' },
-  { icon: lockClosed, label: 'FoldersPage.ImportFile.syncing.step2' },
-  { icon: shieldCheckmark, label: 'FoldersPage.ImportFile.syncing.step3' },
-  { icon: cloudUpload, label: 'FoldersPage.ImportFile.syncing.step4' },
-];
-
-const stepIndex = ref(0);
-let stepIntervalId: ReturnType<typeof setInterval> | null = null;
-
-const currentStep = computed(() => UPLOAD_STEPS[stepIndex.value]);
+import { checkmarkCircle, close } from 'ionicons/icons';
 
-function startStepCycle(): void {
-  stepIndex.value = 0;
-  stepIntervalId = setInterval(() => {
-    if (stepIndex.value === UPLOAD_STEPS.length - 1) {
-      stepIndex.value = 0;
-    } else {
-      stepIndex.value += 1;
-    }
-  }, UPLOAD_STEP_DURATION);
-}
-
-function stopStepCycle(): void {
-  if (stepIntervalId !== null) {
-    clearInterval(stepIntervalId);
-    stepIntervalId = null;
-  }
-}
-
-const props = defineProps<{
-  status?: UploadProgress;
+defineProps<{
+  status: UploadProgress;
   rateCalculator: TransferRateCalculator;
 }>();
 
 defineEmits<{
-  (e: 'close'): boolean;
+  (e: 'close'): void;
 }>();
-
-watch(
-  () => props.status,
-  (newValue) => {
-    if (newValue && newValue.totalBytes > 0) {
-      if (!stepIntervalId) {
-        startStepCycle();
-      }
-    } else {
-      stopStepCycle();
-    }
-  },
-);
-
-onUnmounted(() => {
-  stopStepCycle();
-});
 </script>
 
 <style scoped lang="scss">
@@ -161,14 +102,4 @@ onUnmounted(() => {
     margin-left: auto;
   }
 }
-
-.step-fade-enter-active,
-.step-fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.step-fade-enter-from,
-.step-fade-leave-to {
-  opacity: 0;
-}
 </style>

client/src/locales/en-US.json

@@ -1114,10 +1114,7 @@
             },
             "synced": "All files synchronized and secured",
             "syncing": {
-                "step1": "Analyzing and verifying",
-                "step2": "Splitting and encrypting",
-                "step3": "Securing all files and metadata",
-                "step4": "Synchronizing with the cloud"
+                "filesLeft": "One file left|{count} files left"
             },
             "noTasks": "No tasks",
             "noCurrentTasks": "No tasks in this category",

client/src/locales/fr-FR.json

@@ -1115,10 +1115,7 @@
             },
             "synced": "Fichiers synchronisés et sécurisés",
             "syncing": {
-                "step1": "Analyse et vérification",
-                "step2": "Découpage et chiffrement",
-                "step3": "Sécurisation des fichiers et de leurs métadonnées",
-                "step4": "Synchronisation avec le cloud"
+                "filesLeft": "Un fichier restant|{count} fichiers restant"
             },
             "noTasks": "Aucune tâche",
             "noCurrentTasks": "Aucun tâche dans cette catégorie",

client/src/services/translation.ts

@@ -86,6 +86,9 @@ export function longLocaleCodeToShort(longCode: Locale): string {
 }
 
 export function formatETA(seconds: number): Translatable {
+  if (seconds === Infinity || seconds < 0) {
+    return '';
+  }
   const entries = Object.entries(Duration.fromObject({ seconds }).rescale().toObject())
     .filter(([k, v]) => v > 0 && k !== 'milliseconds')
     .slice(0, 2);

client/src/views/files/FileOperationMenu.vue

@@ -25,8 +25,8 @@
     </div>
 
     <upload-status
+      v-if="showUploadStatus"
       class="upload-menu-status"
-      v-if="uploadProgressStatus && showUploadStatus"
       :status="uploadProgressStatus"
       :rate-calculator="rateCalculator as TransferRateCalculator"
       @close="showUploadStatus = false"
@@ -163,12 +163,12 @@ const currentItems = computed(() => {
 });
 
 let canceller!: FileEventRegistrationCanceller;
-let uploadProgressIntervalId: any = null;
+let uploadProgressTimeoutId: any = null;
 const isFileOperationManagerActive = ref(false);
 const uploadMenuList = ref();
-const uploadProgressStatus = ref<UploadProgress | undefined>(undefined);
+const uploadProgressStatus = ref<UploadProgress>({ totalBytes: 0, totalFiles: 0 });
 const rateCalculator = ref<TransferRateCalculator>(new TransferRateCalculator());
-const showUploadStatus = ref(true);
+const showUploadStatus = ref(false);
 
 function toggleMenu(): void {
   if (menu.isMinimized()) {
@@ -210,19 +210,25 @@ async function updateProgress(): Promise<void> {
       showUploadStatus.value = true;
     }
   } else {
-    uploadProgressStatus.value = undefined;
+    uploadProgressStatus.value = { totalBytes: 0, totalFiles: 0 };
     rateCalculator.value.clear();
   }
+  if (uploadProgressStatus.value.totalBytes > 0) {
+    // If we're still uploading, we poll faster for a smooth display
+    uploadProgressTimeoutId = setTimeout(updateProgress, 500);
+  } else {
+    // Otherwise we can stop the timeout, it will get reactivated on a new file operation
+    uploadProgressTimeoutId = null;
+  }
 }
 
 onMounted(async () => {
   canceller = await fileOperationManager.value.registerCallback(onFileOperationEvent);
-  uploadProgressIntervalId = setInterval(updateProgress, 400);
 });
 
 onUnmounted(async () => {
   canceller.cancel();
-  clearInterval(uploadProgressIntervalId);
+  clearTimeout(uploadProgressTimeoutId);
 });
 
 async function onFileOperationEvent(
@@ -231,6 +237,9 @@ async function onFileOperationEvent(
   eventData?: FileOperationEventData,
 ): Promise<void> {
   isFileOperationManagerActive.value = true;
+  if (!uploadProgressTimeoutId) {
+    uploadProgressTimeoutId = setTimeout(updateProgress, 1000);
+  }
   if (!operationData) {
     if (event !== FileOperationEvents.AllFinished) {
       window.electronAPI.log('warn', `Got event ${event} without operation data`);