chore: improve drag and drop progress bar display when only processin…

…g one file (such as a playlist)
sircharlo · Nov 6, 2024 · 8da7dbf · 8da7dbf
1 parent 156a1d9
commit 8da7dbf
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 58 deletions.
diff --git a/src/components/media/DragAndDropper.vue b/src/components/media/DragAndDropper.vue
@@ -7,7 +7,7 @@
       <template
         v-if="
           jwpubDocuments?.length === 0 ||
-          filesLoading > -1 ||
+          totalFiles ||
           (!!jwpubDb && jwpubLoading) ||
           !jwpubDb
         "
@@ -45,20 +45,19 @@
             class="col rounded-borders dashed-border items-center justify-center flex"
             style="height: 20vh"
           >
-            <template
-              v-if="
-                (-1 < filesLoading && filesLoading < 1) ||
-                (!!jwpubDb && jwpubLoading)
-              "
-            >
+            <template v-if="totalFiles || (!!jwpubDb && jwpubLoading)">
               <q-linear-progress
-                :value="filesLoading"
+                :indeterminate="totalFiles === 1"
+                :value="percentValue"
                 class="full-height"
                 color="primary"
               >
-                <div class="absolute-full flex flex-center">
+                <div
+                  v-if="totalFiles > 1"
+                  class="absolute-full flex flex-center"
+                >
                   <q-badge
-                    :label="(filesLoading * 100).toFixed(0) + '%'"
+                    :label="(percentValue * 100).toFixed(0) + '%'"
                     color="white"
                     text-color="primary"
                   />
@@ -155,21 +154,28 @@ import {
 import { errorCatcher } from 'src/helpers/error-catcher';
 import { addJwpubDocumentMediaToFiles } from 'src/helpers/jw-media';
 import { createTemporaryNotification } from 'src/helpers/notifications';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 const { openFileDialog } = window.electronApi;
 const { barStyle, thumbStyle } = useScrollbar();
 
-defineProps<{
-  filesLoading: number;
+const props = defineProps<{
+  currentFile: number;
   jwpubDocuments: DocumentItem[];
+  totalFiles: number;
 }>();
 
 const jwpubLoading = ref(false);
 
 const open = defineModel<boolean>({ required: true });
 const jwpubDb = defineModel<string>('jwpubDb', { required: true });
 
+const percentValue = computed(() => {
+  return props.currentFile && props.totalFiles
+    ? props.currentFile / props.totalFiles
+    : 0;
+});
+
 const getLocalFiles = async () => {
   openFileDialog()
     .then((result) => {

diff --git a/src/pages/MediaCalendarPage.vue b/src/pages/MediaCalendarPage.vue
@@ -420,8 +420,9 @@
   <DragAndDropper
     v-model="dragging"
     v-model:jwpub-db="jwpubImportDb"
-    :files-loading="filesLoading"
+    :current-file="currentFile"
     :jwpub-documents="jwpubImportDocuments"
+    :total-files="totalFiles"
     @drop="dropEnd"
   />
 </template>
@@ -547,7 +548,8 @@ const {
   readdir,
 } = window.electronApi;
 
-const filesLoading = ref(-1);
+const totalFiles = ref(0);
+const currentFile = ref(0);
 
 watch(
   () => mediaPlayingUniqueId.value,
@@ -1198,9 +1200,9 @@ const addToFiles = async (
   files: { filetype?: string; path: string }[] | FileList,
 ) => {
   if (!files) return;
+  totalFiles.value = files.length;
   // eslint-disable-next-line @typescript-eslint/prefer-for-of
   for (let i = 0; i < files.length; i++) {
-    filesLoading.value = i / files.length;
     const file = files[i];
     let filepath = file?.path;
     try {
@@ -1299,56 +1301,44 @@ const addToFiles = async (
               );
           }
         }
-        // jwpubImportLoading.value = false;
       } else if (isJwPlaylist(filepath) && selectedDateObject.value) {
-        getMediaFromJwPlaylist(
+        const additionalMedia = await getMediaFromJwPlaylist(
           filepath,
           selectedDateObject.value?.date,
           await getDatedAdditionalMediaDirectory(),
-        )
-          .then((additionalMedia) => {
-            addToAdditionMediaMap(additionalMedia);
-            additionalMedia
-              .filter(
-                (m) =>
-                  m.customDuration &&
-                  (m.customDuration.max || m.customDuration.min),
-              )
-              .forEach((m) => {
-                const { max, min } = m.customDuration ?? { max: 0, min: 0 };
-                const congregation = (customDurations.value[
-                  currentCongregation.value
-                ] ??= {});
-                const dateDurations = (congregation[selectedDate.value] ??= {});
-                dateDurations[m.uniqueId] = { max, min };
-              });
-          })
-          .catch((error) => {
-            errorCatcher(error);
+        ).catch((error) => {
+          throw error;
+        });
+        addToAdditionMediaMap(additionalMedia);
+        additionalMedia
+          .filter(
+            (m) =>
+              m.customDuration &&
+              (m.customDuration.max || m.customDuration.min),
+          )
+          .forEach((m) => {
+            const { max, min } = m.customDuration ?? { max: 0, min: 0 };
+            const congregation = (customDurations.value[
+              currentCongregation.value
+            ] ??= {});
+            const dateDurations = (congregation[selectedDate.value] ??= {});
+            dateDurations[m.uniqueId] = { max, min };
           });
       } else if (isArchive(filepath)) {
         const unzipDirectory = path.join(
           await getTempDirectory(),
           path.basename(filepath),
         );
         await fs.remove(unzipDirectory);
-        decompress(filepath, unzipDirectory)
-          .then(async () => {
-            try {
-              const files = await readdir(unzipDirectory);
-              const filePaths = files.map((file) => ({
-                path: path.join(unzipDirectory, file),
-              }));
-
-              await addToFiles(filePaths);
-              await fs.remove(unzipDirectory);
-            } catch (error) {
-              errorCatcher(error);
-            }
-          })
-          .catch((error) => {
-            errorCatcher(error);
-          });
+        await decompress(filepath, unzipDirectory).catch((error) => {
+          throw error;
+        });
+        const files = await readdir(unzipDirectory);
+        const filePaths = files.map((file) => ({
+          path: path.join(unzipDirectory, file),
+        }));
+        await addToFiles(filePaths);
+        await fs.remove(unzipDirectory);
       } else {
         createTemporaryNotification({
           caption: filepath ? path.basename(filepath) : filepath,
@@ -1366,10 +1356,9 @@ const addToFiles = async (
       });
       errorCatcher(error);
     }
-    filesLoading.value = (i + 1) / files.length;
+    currentFile.value = i + 1;
   }
-  dragging.value = false;
-  filesLoading.value = -1;
+  resetDragging();
 };
 
 const addOpeningSong = () => {
@@ -1439,5 +1428,7 @@ const resetDragging = () => {
   dragging.value = false;
   jwpubImportDb.value = '';
   jwpubImportDocuments.value = [];
+  currentFile.value = 0;
+  totalFiles.value = 0;
 };
 </script>