video: refactor: Address PR review requests

rafaellehmkuhl · rafaellehmkuhl · commit 9fbaedd524ee · 2025-10-07T13:06:19.000-03:00
diff --git a/src/components/VideoLibraryModal.vue b/src/components/VideoLibraryModal.vue
@@ -188,7 +188,7 @@
             <!-- Videos Tab with Sub-tabs -->
             <div class="flex flex-col h-full w-full">
               <!-- Sub-tabs Navigation -->
-              <div class="px-4 pt-4 pb-2">
+              <div class="px-4 pt-2 pb-2">
                 <v-tabs v-model="currentVideoSubTab" color="white" fixed-tabs class="video-sub-tabs">
                   <v-tab
                     v-for="tab in videoSubTabs"
@@ -283,7 +283,7 @@
                               @click.stop="playVideoInDefaultPlayer(video.fileName)"
                             >
                               <v-tooltip open-delay="500" activator="parent" location="bottom"> Play video </v-tooltip>
-                              <v-icon>mdi-play</v-icon>
+                              <v-icon size="22">mdi-play</v-icon>
                             </v-btn>
                             <v-btn
                               icon
@@ -560,6 +560,18 @@
                               </div>
                             </div>
                             <div class="flex gap-2 mt-4">
+                              <v-btn
+                                icon
+                                variant="outlined"
+                                size="small"
+                                :disabled="isProcessingChunks"
+                                @click="processChunkGroup(group)"
+                              >
+                                <v-tooltip open-delay="500" activator="parent" location="bottom">
+                                  Process video chunks
+                                </v-tooltip>
+                                <v-icon>mdi-file-cog</v-icon>
+                              </v-btn>
                               <v-btn
                                 icon
                                 variant="outlined"
@@ -681,7 +693,7 @@
                             <v-icon class="mr-2">mdi-plus</v-icon>
                             Process Another ZIP File
                           </v-btn>
-                          <v-btn variant="outlined" size="small" @click="goToVideosTab">
+                          <v-btn variant="outlined" size="small" @click="currentVideoSubTab = 'processed'">
                             <v-icon class="mr-2">mdi-video</v-icon>
                             View Videos
                           </v-btn>
@@ -878,7 +890,7 @@ import { computed, markRaw, nextTick, onBeforeUnmount, onMounted, reactive, ref,
 import { useInteractionDialog } from '@/composables/interactionDialog'
 import { useSnackbar } from '@/composables/snackbar'
 import { useVideoChunkManager } from '@/composables/videoChunkManager'
-import { formatBytes, isElectron } from '@/libs/utils'
+import { formatBytes, formatDate, isElectron } from '@/libs/utils'
 import { useAppInterfaceStore } from '@/stores/appInterface'
 import { useSnapshotStore } from '@/stores/snapshot'
 import { useVideoStore } from '@/stores/video'
@@ -905,11 +917,11 @@ const {
   zipProcessingComplete,
   zipProcessingProgress,
   zipProcessingMessage,
-  formatDate,
   fetchChunkGroups,
   deleteChunkGroup,
   deleteAllChunks,
   downloadChunkGroup,
+  processChunkGroup,
   openVideoChunksFolder,
   processVideoChunksZip,
   processAnotherZip,
@@ -1373,15 +1385,6 @@ const deselectAllPictures = (): void => {
   isMultipleSelectionMode.value = false
 }
 
-/**
- * Go to Videos tab to view the processed video
- */
-const goToVideosTab = async (): Promise<void> => {
-  currentTab.value = 'videos'
-  currentVideoSubTab.value = 'processed'
-  await fetchVideosAndLogData()
-}
-
 /**
  * Handle ZIP processing with callback to refresh videos
  */
@@ -1534,6 +1537,14 @@ watch(currentTab, async (newTab) => {
   }
 })
 
+watch(currentVideoSubTab, async (newSubTab) => {
+  if (newSubTab === 'processed') {
+    await fetchVideosAndLogData()
+  } else if (newSubTab === 'raw') {
+    await fetchChunkGroups()
+  }
+})
+
 // Gestures library (hammer.js) for video selection
 watch(
   [availableVideos, currentVideoSubTab],
diff --git a/src/components/mini-widgets/MiniVideoRecorder.vue b/src/components/mini-widgets/MiniVideoRecorder.vue
@@ -183,11 +183,63 @@ watch(nameSelectedStream, (newName) => {
   mediaStream.value = undefined
 })
 
-// Fetch number of temporary videos on storage
+// Fetch number of videos on storage (chunk groups + processed videos without overlap)
 const fetchNumberOfTempVideos = async (): Promise<void> => {
-  const keys = await videoStore.videoStorage.keys()
-  const nProcessedVideos = keys.filter((k) => videoStore.isVideoFilename(k)).length
-  numberOfVideosOnDB.value = nProcessedVideos
+  // Get processed videos from videoStorage
+  const processedKeys = await videoStore.videoStorage.keys()
+  const processedVideos = processedKeys.filter((k) => videoStore.isVideoFilename(k))
+
+  // Get chunk groups from tempVideoStorage
+  const tempKeys = await videoStore.tempVideoStorage.keys()
+  const chunkGroups: Set<string> = new Set()
+
+  for (const key of tempKeys) {
+    if (key.includes('thumbnail_')) continue
+
+    const parts = key.split('_')
+    if (parts.length < 2) continue
+
+    const hash = parts[0]
+    const chunkNumber = parseInt(parts[parts.length - 1], 10)
+    if (isNaN(chunkNumber)) continue
+
+    // Check if this chunk actually exists and has content
+    try {
+      const blob = (await videoStore.tempVideoStorage.getItem(key)) as Blob
+      if (blob && blob.size > 0) {
+        chunkGroups.add(hash)
+      }
+    } catch (error) {
+      console.warn(`Failed to check chunk ${key}:`, error)
+    }
+  }
+
+  // Count processed videos that don't have corresponding chunk groups
+  const processedVideoHashes = new Set<string>()
+  for (const videoKey of processedVideos) {
+    // Extract hash from processed video filename
+    // Processed videos have format like "MissionName (Date) #hash.webm"
+    // We need to extract the hash after the # symbol
+    const hashMatch = videoKey.match(/#([a-f0-9]+)\./)
+    if (hashMatch && hashMatch[1]) {
+      processedVideoHashes.add(hashMatch[1])
+    }
+  }
+
+  // Count unique videos: chunk groups + processed videos that don't have chunk groups
+  const uniqueVideos = new Set<string>()
+
+  // Add all chunk groups
+  chunkGroups.forEach((hash) => uniqueVideos.add(hash))
+
+  // Add processed videos that don't have corresponding chunk groups
+  processedVideoHashes.forEach((hash) => {
+    if (!chunkGroups.has(hash)) {
+      uniqueVideos.add(hash)
+    }
+  })
+
+  numberOfVideosOnDB.value = uniqueVideos.size
 }
 
 // eslint-disable-next-line jsdoc/require-jsdoc
diff --git a/src/composables/videoChunkManager.ts b/src/composables/videoChunkManager.ts
@@ -34,11 +34,11 @@ export const useVideoChunkManager = (): {
   zipProcessingComplete: any
   zipProcessingProgress: any
   zipProcessingMessage: any
-  formatDate: (date: Date) => string
   fetchChunkGroups: () => Promise<void>
   deleteChunkGroup: (group: ChunkGroup) => Promise<void>
   deleteAllChunks: () => Promise<void>
   downloadChunkGroup: (group: ChunkGroup) => Promise<void>
+  processChunkGroup: (group: ChunkGroup) => Promise<void>
   openVideoChunksFolder: () => Promise<void>
   processVideoChunksZip: (onComplete?: () => Promise<void>) => Promise<void>
   processAnotherZip: () => void
@@ -59,25 +59,6 @@ export const useVideoChunkManager = (): {
   const zipProcessingProgress = ref(0)
   const zipProcessingMessage = ref('')
 
-  /**
-   * Format date for display
-   * @param {Date} date
-   * @returns {string} Formatted date string
-   */
-  const formatDate = (date: Date): string => {
-    if (date.getTime() === 0) {
-      return 'Unknown creation datetime'
-    }
-    return new Intl.DateTimeFormat('en-US', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
-      second: '2-digit',
-    }).format(date)
-  }
-
   /**
    * Get timestamp for a chunk
    * @param {string} key
@@ -445,6 +426,93 @@ export const useVideoChunkManager = (): {
     }
   }
 
+  /**
+   * Process a chunk group using the live video processor
+   * @param {ChunkGroup} group
+   * @returns {Promise<void>} Promise that resolves when processing is complete
+   */
+  const processChunkGroup = async (group: ChunkGroup): Promise<void> => {
+    if (!isElectron() || !window.electronAPI) {
+      openSnackbar({ message: 'Manual processing is only available in Electron', variant: 'error' })
+      return
+    }
+
+    try {
+      isProcessingChunks.value = true
+
+      // Generate filename based on the chunk group
+      const timeString = group.firstChunkDate.toLocaleDateString('en-US', {
+        month: 'short',
+        day: '2-digit',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+      })
+      const fileName = group.fileName || `Cockpit (${timeString}) #${group.hash}`
+
+      // Get the chunk file paths from the group's chunks array, sorted by chunk number
+      const sortedChunks = group.chunks.sort((a, b) => {
+        const aNum = parseInt(a.key.split('_').pop() || '0', 10)
+        const bNum = parseInt(b.key.split('_').pop() || '0', 10)
+        return aNum - bNum
+      })
+
+      if (sortedChunks.length === 0) {
+        throw new Error('No chunk files found for processing')
+      }
+
+      // Read first chunk using the electron storage API to get the blob
+      const firstChunkBlob = (await videoStore.tempVideoStorage.getItem(sortedChunks[0].key)) as Blob
+      if (!firstChunkBlob) {
+        throw new Error('Failed to read first chunk')
+      }
+
+      // Start FFmpeg streaming process with first chunk
+      const { id: processId, outputPath } = await window.electronAPI.startVideoRecording(
+        firstChunkBlob,
+        group.hash,
+        fileName,
+        false // Don't keep chunk backup since we're processing existing chunks
+      )
+
+      // Stream remaining chunks to FFmpeg in order
+      for (let i = 1; i < sortedChunks.length; i++) {
+        const chunkBlob = (await videoStore.tempVideoStorage.getItem(sortedChunks[i].key)) as Blob
+        if (!chunkBlob) {
+          console.warn(`Failed to read chunk ${i}, skipping`)
+          continue
+        }
+
+        await window.electronAPI.appendChunkToVideoRecording(processId, chunkBlob, i)
+      }
+
+      // Finalize the streaming process
+      await window.electronAPI.finalizeVideoRecording(processId)
+
+      // Find and copy telemetry file if it exists
+      try {
+        const videoKeys = await videoStore.videoStorage.keys()
+        const assFile = videoKeys.find((key) => key.includes(group.hash) && key.endsWith('.ass'))
+        if (assFile) {
+          await window.electronAPI.copyTelemetryFile(assFile, outputPath)
+        }
+      } catch (error) {
+        console.warn('Failed to copy telemetry file:', error)
+      }
+
+      openSnackbar({
+        message: `Video processed successfully! Output: ${outputPath}`,
+        variant: 'success',
+      })
+    } catch (error) {
+      const msg = `Failed to process video chunks: ${error instanceof Error ? error.message : 'Unknown error'}`
+      openSnackbar({ message: msg, variant: 'error' })
+    } finally {
+      isProcessingChunks.value = false
+    }
+  }
+
   /**
    * Reset ZIP processing state
    */
@@ -466,11 +534,11 @@ export const useVideoChunkManager = (): {
     zipProcessingMessage,
 
     // Methods
-    formatDate,
     fetchChunkGroups,
     deleteChunkGroup,
     deleteAllChunks,
     downloadChunkGroup,
+    processChunkGroup,
     openVideoChunksFolder,
     processVideoChunksZip,
     processAnotherZip,
diff --git a/src/electron/services/video-chunks-zip.ts b/src/electron/services/video-chunks-zip.ts
@@ -79,13 +79,16 @@ const createVideoChunksZip = async (hash: string): Promise<string> => {
 
     zipfile.outputStream.pipe(outputStream)
 
-    let addedFiles = 0
-    const totalFiles = chunkFiles.length + (assFileName ? 1 : 0)
+    let completedChunks = 0
+    let assFileProcessed = false
+    const totalChunks = chunkFiles.length
 
-    // Function to check if all files have been added
+    // Function to check if all processing is complete
     const checkComplete = (): void => {
-      addedFiles++
-      if (addedFiles >= totalFiles) {
+      const allChunksProcessed = completedChunks >= totalChunks
+      const assFileDone = !assFileName || assFileProcessed
+
+      if (allChunksProcessed && assFileDone) {
         zipfile.end()
       }
     }
@@ -102,15 +105,17 @@ const createVideoChunksZip = async (hash: string): Promise<string> => {
             mtime: stats.mtime,
           })
           console.debug(`Added chunk ${chunkFile} to ZIP`)
-          checkComplete()
         })
         .catch((error) => {
           console.error(`Failed to add chunk ${chunkFile} to ZIP:`, error)
+        })
+        .finally(() => {
+          completedChunks++
           checkComplete()
         })
     })
 
-    // Add .ass telemetry file if found
+    // Add .ass telemetry file if found - ALWAYS process this regardless of chunk failures
     if (assFileName) {
       const assFilePath = join(cockpitFolderPath, 'videos', assFileName)
 
@@ -121,12 +126,18 @@ const createVideoChunksZip = async (hash: string): Promise<string> => {
             mtime: stats.mtime,
           })
           console.debug(`Added .ass file ${assFileName} to ZIP`)
-          checkComplete()
         })
         .catch((error) => {
           console.warn(`Failed to add .ass file ${assFileName} to ZIP:`, error)
+        })
+        .finally(() => {
+          assFileProcessed = true
           checkComplete()
         })
+    } else {
+      // No .ass file to process, mark as done
+      assFileProcessed = true
+      checkComplete()
     }
 
     // Handle ZIP completion
diff --git a/src/libs/utils.ts b/src/libs/utils.ts
@@ -281,3 +281,22 @@ export const frequencyHzToIntervalUs = (frequencyHz: number): number => {
  * @returns {number} Normalized angle in degrees
  */
 export const norm360 = (deg: number): number => ((deg % 360) + 360) % 360
+
+/**
+ * Format date for display
+ * @param {Date} date
+ * @returns {string} Formatted date string
+ */
+export const formatDate = (date: Date): string => {
+  if (date.getTime() === 0) {
+    return 'Unknown creation datetime'
+  }
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  }).format(date)
+}
