video: Wan users when videos are being processed in background

src/stores/video.ts

@@ -425,6 +425,17 @@ export const useVideoStore = defineStore('video', () => {
     })
   })
 
+  const areThereVideosProcessing = computed(() => {
+    const dateNow = new Date(timeNow.value)
+
+    return keysAllUnprocessedVideos.value.some((recordingHash) => {
+      const info = unprocessedVideos.value[recordingHash]
+      const dateLastProcessingUpdate = new Date(info.dateLastProcessignUpdate ?? 0)
+      const secondsSinceLastProcessingUpdate = differenceInSeconds(dateNow, dateLastProcessingUpdate)
+      return info.dateFinish !== undefined && secondsSinceLastProcessingUpdate < 10
+    })
+  })
+
   // Process videos that were being recorded when the app was closed
   const processUnprocessedVideos = async (): Promise<void> => {
     if (keysFailedUnprocessedVideos.value.isEmpty()) return
@@ -595,6 +606,7 @@ export const useVideoStore = defineStore('video', () => {
     downloadTempVideoDB,
     keysAllUnprocessedVideos,
     keysFailedUnprocessedVideos,
+    areThereVideosProcessing,
     processUnprocessedVideos,
     discardUnprocessedVideos,
     temporaryVideoDBSize,

src/views/ConfigurationVideoView.vue

@@ -50,6 +50,16 @@
         </div>
       </div>
 
+      <div v-if="videoStore.areThereVideosProcessing" class="max-w-[50%] bg-slate-100 rounded-md p-6 border mb-8">
+        <div class="flex justify-center w-full mb-4 text-2xl font-semibold text-center align-center text-slate-500">
+          <span>Processing videos</span>
+          <span class="ml-2 mdi mdi-loading animate-spin" />
+        </div>
+        <p class="text-center text-slate-400">
+          There are videos being processed in background. Please wait until they are finished to download or discard.
+        </p>
+      </div>
+
       <div v-if="availableVideosAndLogs.isEmpty()" class="max-w-[50%] bg-slate-100 rounded-md p-6 border">
         <p class="mb-4 text-2xl font-semibold text-center text-slate-500">No videos available.</p>
         <p class="text-center text-slate-400">