From fd2f8abd3124603396770dee4bb8c09b770ba648 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Wed, 10 Apr 2024 19:21:34 -0300
Subject: [PATCH] mini-video-recorder: Consider both processed and unprocessed
 videos on available count

---
 src/components/mini-widgets/MiniVideoRecorder.vue | 15 +++++++++++----
 src/stores/video.ts                               |  1 +
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/mini-widgets/MiniVideoRecorder.vue b/src/components/mini-widgets/MiniVideoRecorder.vue
index 6272ecb85..d09f8ba9c 100644
--- 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
index 32354bf28..6af859df1 100644
--- 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,