mini-video-recorder: Consider both processed and unprocessed videos o…

…n available count
bluerobotics · Apr 12, 2024 · fd2f8ab · fd2f8ab
1 parent 84128e9
commit fd2f8ab
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/components/mini-widgets/MiniVideoRecorder.vue b/src/components/mini-widgets/MiniVideoRecorder.vue
@@ -16,7 +16,7 @@
     <div v-else>
       <v-icon class="w-6 h-6 animate-spin" color="white">mdi-loading</v-icon>
     </div>
-    <template v-if="!isRecording">
+    <template v-if="!isRecording && !isProcessingVideo">
       <div
         v-if="nameSelectedStream"
         class="flex flex-col max-w-[50%] scroll-container transition-all border-blur cursor-pointer"
@@ -30,7 +30,7 @@
       {{ timePassedString }}
     </div>
     <div v-else-if="isProcessingVideo" class="w-16 text-justify text-slate-100">
-      <div class="text-center text-xs text-white select-none flex-nowrap">Processing video...</div>
+      <div class="text-xs text-center text-white select-none flex-nowrap">Processing video...</div>
     </div>
     <div v-if="numberOfVideosOnDB > 0" class="flex justify-center w-8">
       <v-divider vertical class="h-6" />
@@ -41,7 +41,7 @@
         class="cursor-pointer"
         @click="isVideoLibraryDialogOpen = true"
       >
-        <v-icon class="w-6 h-6 text-slate-100 ml-3" @click="isVideoLibraryDialogOpen = true">
+        <v-icon class="w-6 h-6 ml-3 text-slate-100" @click="isVideoLibraryDialogOpen = true">
           mdi-video-box
         </v-icon></v-badge
       >
@@ -151,6 +151,9 @@ const fetchNumebrOfTempVideos = async (): Promise<void> => {
   await videoStore.videoStoringDB.iterate((value, key) => {
     key.endsWith('.webm') && numberOfVideos++
   })
+  Object.values(videoStore.unprocessedVideos)
+    .filter((video) => video.dateFinish)
+    .forEach(() => numberOfVideos++)
   numberOfVideosOnDB.value = numberOfVideos
 }
 
@@ -176,7 +179,6 @@ const toggleRecording = async (): Promise<void> => {
   if (isRecording.value) {
     if (nameSelectedStream.value !== undefined) {
       videoStore.stopRecording(nameSelectedStream.value)
-      isProcessingVideo.value = true
     }
     return
   }
@@ -273,6 +275,11 @@ watch(
   }
 )
 
+watch(
+  () => videoStore.keysAllUnprocessedVideos,
+  () => fetchNumebrOfTempVideos()
+)
+
 watch(
   () => isVideoLibraryDialogOpen.value,
   async (newValue) => {

diff --git a/src/stores/video.ts b/src/stores/video.ts
@@ -587,6 +587,7 @@ export const useVideoStore = defineStore('video', () => {
     downloadFilesFromVideoDB,
     clearTemporaryVideoDB,
     downloadTempVideoDB,
+    unprocessedVideos,
     keysAllUnprocessedVideos,
     keysFailedUnprocessedVideos,
     areThereVideosProcessing,