video: Allow user to choose between zipping multiple video files or not

src/stores/video.ts

@@ -44,6 +44,7 @@ export const useVideoStore = defineStore('video', () => {
   const allowedIceIps = useBlueOsStorage<string[]>('cockpit-allowed-stream-ips', [])
   const allowedIceProtocols = useBlueOsStorage<string[]>('cockpit-allowed-stream-protocols', [])
   const jitterBufferTarget = useBlueOsStorage<number | null>('cockpit-jitter-buffer-target', 0)
+  const zipMultipleFiles = useBlueOsStorage('cockpit-zip-multiple-video-files', false)
   const activeStreams = ref<{ [key in string]: StreamData | undefined }>({})
   const mainWebRTCManager = new WebRTCManager(webRTCSignallingURI, rtcConfiguration)
   const availableIceIps = ref<string[]>([])
@@ -371,7 +372,8 @@ export const useVideoStore = defineStore('video', () => {
   const downloadFiles = async (
     db: StorageDB,
     keys: string[],
-    zipFilenamePrefix: string,
+    shouldZip = false,
+    zipFilenamePrefix = 'Cockpit-Video-Files',
     progressCallback?: DownloadProgressCallback
   ): Promise<void> => {
     const maybeFiles = await Promise.all(
@@ -388,10 +390,10 @@ export const useVideoStore = defineStore('video', () => {
       return
     }
 
-    if (files.length === 1) {
-      saveAs(files[0].blob, files[0].filename)
-    } else {
+    if (shouldZip) {
       await createZipAndDownload(files, `${zipFilenamePrefix}.zip`, progressCallback)
+    } else {
+      files.forEach(({ blob, filename }) => saveAs(blob, filename))
     }
   }
 
@@ -400,20 +402,21 @@ export const useVideoStore = defineStore('video', () => {
     progressCallback?: DownloadProgressCallback
   ): Promise<void> => {
     console.debug(`Downloading files from the video recovery database: ${fileNames.join(', ')}`)
-    await downloadFiles(
-      videoStoringDB,
-      fileNames,
-      fileNames.length > 1 ? 'Cockpit-Video-Recordings' : 'Cockpit-Video-Recording',
-      progressCallback
-    )
+    if (zipMultipleFiles.value) {
+      const ZipFilename = fileNames.length > 1 ? 'Cockpit-Video-Recordings' : 'Cockpit-Video-Recording'
+      await downloadFiles(videoStoringDB, fileNames, true, ZipFilename, progressCallback)
+    } else {
+      await downloadFiles(videoStoringDB, fileNames)
+    }
   }
 
   const downloadTempVideo = async (hashes: string[], progressCallback?: DownloadProgressCallback): Promise<void> => {
     console.debug(`Downloading ${hashes.length} video chunks from the temporary database.`)
 
     for (const hash of hashes) {
       const fileNames = (await tempVideoChunksDB.keys()).filter((filename) => filename.includes(hash))
-      await downloadFiles(tempVideoChunksDB, fileNames, `Cockpit-Unprocessed-Video-Chunks-${hash}`, progressCallback)
+      const zipFilenamePrefix = `Cockpit-Unprocessed-Video-Chunks-${hash}`
+      await downloadFiles(tempVideoChunksDB, fileNames, true, zipFilenamePrefix, progressCallback)
     }
   }
 
@@ -796,6 +799,7 @@ export const useVideoStore = defineStore('video', () => {
     allowedIceIps,
     allowedIceProtocols,
     jitterBufferTarget,
+    zipMultipleFiles,
     namesAvailableStreams,
     videoStoringDB,
     tempVideoChunksDB,

src/views/ConfigurationVideoView.vue

@@ -48,7 +48,7 @@
             </div>
           </template>
         </ExpansiblePanel>
-        <ExpansiblePanel no-bottom-divider :is-expanded="!interfaceStore.isOnPhoneScreen">
+        <ExpansiblePanel :is-expanded="!interfaceStore.isOnPhoneScreen">
           <template #title>RTP Jitter Buffer (Target) duration:</template>
           <template #info>
             Increasing this value will result in increased video latency, but it can help to compensate the network
@@ -75,6 +75,20 @@
             </div>
           </template>
         </ExpansiblePanel>
+        <ExpansiblePanel no-bottom-divider :is-expanded="!interfaceStore.isOnPhoneScreen">
+          <template #title>File download options:</template>
+          <template #info>
+            Specifies wether Cockpit should create a zip file when downloading multiple videos or subtitle files.
+            <br />
+            Keep in mind that, specially for long videos, this will add a delay on the download, since the files need to
+            be zipped first. This can take just a couple seconds or even minutes, depending on the files sizes.
+          </template>
+          <template #content>
+            <div class="flex items-center justify-start w-[50%] ml-2">
+              <v-checkbox v-model="videoStore.zipMultipleFiles" label="Zip multiple files" class="text-sm mx-2" />
+            </div>
+          </template>
+        </ExpansiblePanel>
       </div>
     </template>
   </BaseConfigurationView>