feat: improve download all progress bar

qoomon · Aug 7, 2024 · 64729b2 · 64729b2
1 parent 3637198
commit 64729b2
Showing 1 changed file with 28 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -120,6 +120,7 @@
             border-color: var(--primary-color) !important;
             color: var(--primary-color) !important;
         }
+
         #app .button.is-primary.is-outlined.is-loading::after {
             border-color: transparent transparent var(--primary-color) var(--primary-color) !important;
         }
@@ -317,7 +318,7 @@ <h2 class="subtitle" v-html="config.subtitleHTML"></h2>
                                     icon-left="angle-left"
                                     @click="previousPage"
                                     :disabled="previousContinuationTokens.length === 0"
-                                    >
+                            >
                             </b-button>
                             <b-button
                                     type="is-primary" rounded
@@ -334,10 +335,13 @@ <h2 class="subtitle" v-html="config.subtitleHTML"></h2>
 
             <b-progress v-if="downloadAllFilesProgress !== null"
                         type="is-info"
-                        :value="downloadAllFilesProgress * 110"
+                        :value="downloadAllFilesProgress * 105"
                         show-value
-            >{{ new Intl.NumberFormat('en-US', { style: 'percent', minimumFractionDigits: 1})
-                    .format(downloadAllFilesProgress) }}
+                        style="margin-bottom: 1rem;"
+            >
+                <div style="width: 70vw; display: flex; justify-content: space-around;">
+                    <span>{{ `${downloadAllFilesReceivedCount} / ${downloadAllFilesCount} Files` }}</span>
+                </div>
             </b-progress>
 
             <!-- Content Table -->
@@ -739,6 +743,8 @@ <h2 class="subtitle" v-html="config.subtitleHTML"></h2>
 
                     windowWidth: window.innerWidth,
 
+                    downloadAllFilesCount: null,
+                    downloadAllFilesReceivedCount: null,
                     downloadAllFilesProgress: null,
                 }
             },
@@ -804,34 +810,40 @@ <h2 class="subtitle" v-html="config.subtitleHTML"></h2>
                     }
                 },
                 async downloadAllFiles() {
+
+
                     const archiveFiles = this.pathContentTableData
                         .filter(item => item.type === 'content')
                         .map(item => item.url);
 
+                    this.downloadAllFilesCount = archiveFiles.length;
+                    this.downloadAllFilesReceivedCount = 0;
                     this.downloadAllFilesProgress = 0;
 
-                    console.debug('create archive...')
+                    let totalContentLength = 0;
+                    let totalReceivedLength = 0;
+
+                    const archiveName = this.pathPrefix.split('/')
+                        .filter(part => part.trim()).pop();
+                    console.debug(`create archive for ${archiveName}...`)
                     const archiveData = []
                     const archive = new fflate.Zip((err, data, final) => {
                         if (err) throw err;
                         archiveData.push(data);
                     });
 
-                    let totalContentLength = 0;
-                    let totalReceivedLength = 0;
-
                     await Promise.all(archiveFiles.map(async (url) => {
-                        console.debug(`downloading ${url}...`);
-
-                        const fileName = url.split('/').pop(); // Extract file name from URL
+                        const fileName = url.split('/')
+                            .filter(part => part.trim()).pop();
+                        console.debug(`downloading ${fileName}...`);
                         const fileStream = new fflate.ZipPassThrough(fileName);
                         archive.add(fileStream);
 
                         const fileResponse = await fetch(url);
                         totalContentLength += parseInt(fileResponse.headers.get('Content-Length'));
                         const fileReader = fileResponse.body.getReader();
 
-                        while(true) {
+                        while (true) {
                             const {done, value} = await fileReader.read();
                             if (done) {
                                 fileStream.push(new Uint8Array(), true);
@@ -842,17 +854,20 @@ <h2 class="subtitle" v-html="config.subtitleHTML"></h2>
                             totalReceivedLength += value.length;
                             this.downloadAllFilesProgress = totalReceivedLength / totalContentLength;
                         }
+                        this.downloadAllFilesReceivedCount++;
                     })).then(() => archive.end());
                     console.debug('done!')
 
                     const archiveBlob = new Blob(archiveData, {type: 'application/octet-stream'});
                     const objectUrl = window.URL.createObjectURL(archiveBlob);
                     const link = document.createElement('a');
                     link.href = objectUrl;
-                    link.download = `archive.zip`;
+                    link.download = `${archiveName}.zip`;
                     link.click();
                     window.URL.revokeObjectURL(objectUrl);
 
+                    this.downloadAllFilesCount = null;
+                    this.downloadAllFilesReceivedCount = null;
                     this.downloadAllFilesProgress = null;
                 },
                 async refresh() {