video: Allow downloading multiple files at once

If downloading multiple files, zip them into one.
bluerobotics · Feb 20, 2024 · bff2d7b · bff2d7b
1 parent 7d34fa7
commit bff2d7b
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 10 deletions.
diff --git a/src/stores/video.ts b/src/stores/video.ts
@@ -1,4 +1,5 @@
 import { useStorage } from '@vueuse/core'
+import { BlobReader, BlobWriter, ZipWriter } from '@zip.js/zip.js'
 import { format } from 'date-fns'
 import { saveAs } from 'file-saver'
 import fixWebmDuration from 'fix-webm-duration'
@@ -222,13 +223,30 @@ export const useVideoStore = defineStore('video', () => {
   }
 
   // Used to download a file from the video recovery database
-  const downloadFileFromVideoDB = async (fileName: string): Promise<void> => {
-    const file = await videoStoringDB.getItem(fileName)
-    if (!file) {
-      Swal.fire({ text: 'File not found.', icon: 'error' })
+  const downloadFilesFromVideoDB = async (fileNames: string[]): Promise<void> => {
+    console.debug(`Downloading files from the video recovery database: ${fileNames.join(', ')}`)
+    if (fileNames.length === 1) {
+      const file = await videoStoringDB.getItem(fileNames[0])
+      if (!file) {
+        Swal.fire({ text: 'File not found.', icon: 'error' })
+        return
+      }
+      saveAs(file as Blob, fileNames[0])
       return
     }
-    saveAs(file as Blob, fileName)
+    const zipWriter = new ZipWriter(new BlobWriter('application/zip'))
+    const filesPromises = fileNames
+      .filter(async (filename) => await videoStoringDB.getItem(filename))
+      .map(async (filename) => {
+        const file = await videoStoringDB.getItem(filename)
+        return { filename, file }
+      })
+    const files = await Promise.all(filesPromises)
+    for (const { filename, file } of files) {
+      await zipWriter.add(filename, new BlobReader(file as Blob))
+    }
+    const blob = await zipWriter.close()
+    saveAs(blob, 'Cockpit-Video-Recovery.zip')
   }
 
   // Used to clear the temporary video database
@@ -339,7 +357,7 @@ export const useVideoStore = defineStore('video', () => {
     videoStoringDB,
     tempVideoChunksDB,
     discardFilesFromVideoDB,
-    downloadFileFromVideoDB,
+    downloadFilesFromVideoDB,
     clearTemporaryVideoDB,
     getMediaStream,
     getStreamData,

diff --git a/src/views/ConfigurationVideoView.vue b/src/views/ConfigurationVideoView.vue
@@ -49,7 +49,13 @@
               @click="discardAndUpdateDB(selectedFilesNames)"
             />
           </fwb-table-head-cell>
-          <fwb-table-head-cell />
+          <fwb-table-head-cell>
+            <span
+              v-if="!selectedFilesNames.isEmpty()"
+              class="text-base rounded-md cursor-pointer hover:text-slate-500/50 mdi mdi-download"
+              @click="downloadAndUpdateDB(selectedFilesNames)"
+            />
+          </fwb-table-head-cell>
         </fwb-table-head>
         <fwb-table-body>
           <fwb-table-row v-for="filename in namesAvailableVideosAndLogs" :key="filename">
@@ -71,8 +77,9 @@
             </fwb-table-cell>
             <fwb-table-cell>
               <span
+                v-if="selectedFilesNames.isEmpty()"
                 class="rounded-md cursor-pointer hover:text-slate-500/50 mdi mdi-download"
-                @click="downloadAndUpdateDB(filename)"
+                @click="downloadAndUpdateDB([filename])"
               />
             </fwb-table-cell>
           </fwb-table-row>
@@ -134,9 +141,10 @@ const discardAndUpdateDB = async (filenames: string[]): Promise<void> => {
   selectedFilesNames.value = []
 }
 
-const downloadAndUpdateDB = async (filename: string): Promise<void> => {
-  await videoStore.downloadFileFromVideoDB(filename)
+const downloadAndUpdateDB = async (filenames: string[]): Promise<void> => {
+  await videoStore.downloadFilesFromVideoDB(filenames)
   await fetchVideoAndLogsData()
+  selectedFilesNames.value = []
 }
 
 const clearTemporaryVideoFiles = async (): Promise<void> => {