video: Add option to zip multiple video files for download

This commit adds the option to zip multiple video files for download. By default, the files are downloaded separately, but when multiple files are selected (like when there's a subtitle file involved), they can now be zipped into a single file for convenience.

src/components/VideoLibraryModal.vue

@@ -793,7 +793,7 @@ const downloadVideoAndTelemetryFiles = async (): Promise<void> => {
   if (tempProcessedVideos.length > 0) {
     const dataLogFilesAdded = addLogDataToFileList(tempProcessedVideos)
 
-    await videoStore.downloadFilesFromVideoDB(dataLogFilesAdded)
+    await videoStore.downloadFilesFromVideoDB(dataLogFilesAdded, fillProgressData)
   }
   if (tempUnprocessedVideos.length > 0) {
     await videoStore.downloadTempVideo(tempUnprocessedVideos, fillProgressData)

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[]>([])
@@ -396,9 +397,17 @@ export const useVideoStore = defineStore('video', () => {
     }
   }
 
-  const downloadFilesFromVideoDB = async (fileNames: string[]): Promise<void> => {
+  const downloadFilesFromVideoDB = async (
+    fileNames: string[],
+    progressCallback?: DownloadProgressCallback
+  ): Promise<void> => {
     console.debug(`Downloading files from the video recovery database: ${fileNames.join(', ')}`)
-    await downloadFiles(videoStoringDB, fileNames)
+    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> => {
@@ -790,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>