From 58cc3d98544c9762b7313f2f2e98ad716b66feb5 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Wed, 29 Jan 2025 16:30:54 -0300
Subject: [PATCH 1/8] electron: Move code to src folder

---
 {electron => src/electron}/main.ts                  | 0
 {electron => src/electron}/preload.ts               | 0
 {electron => src/electron}/services/auto-update.ts  | 0
 {electron => src/electron}/services/config-store.ts | 0
 {electron => src/electron}/services/network.ts      | 2 +-
 {electron => src/electron}/services/storage.ts      | 0
 vite.config.ts                                      | 4 ++--
 7 files changed, 3 insertions(+), 3 deletions(-)
 rename {electron => src/electron}/main.ts (100%)
 rename {electron => src/electron}/preload.ts (100%)
 rename {electron => src/electron}/services/auto-update.ts (100%)
 rename {electron => src/electron}/services/config-store.ts (100%)
 rename {electron => src/electron}/services/network.ts (95%)
 rename {electron => src/electron}/services/storage.ts (100%)

diff --git a/electron/main.ts b/src/electron/main.ts
similarity index 100%
rename from electron/main.ts
rename to src/electron/main.ts
diff --git a/electron/preload.ts b/src/electron/preload.ts
similarity index 100%
rename from electron/preload.ts
rename to src/electron/preload.ts
diff --git a/electron/services/auto-update.ts b/src/electron/services/auto-update.ts
similarity index 100%
rename from electron/services/auto-update.ts
rename to src/electron/services/auto-update.ts
diff --git a/electron/services/config-store.ts b/src/electron/services/config-store.ts
similarity index 100%
rename from electron/services/config-store.ts
rename to src/electron/services/config-store.ts
diff --git a/electron/services/network.ts b/src/electron/services/network.ts
similarity index 95%
rename from electron/services/network.ts
rename to src/electron/services/network.ts
index 4f56dbbf4..e0ae4084f 100644
--- a/electron/services/network.ts
+++ b/src/electron/services/network.ts
@@ -1,7 +1,7 @@
 import { ipcMain } from 'electron'
 import { networkInterfaces } from 'os'
 
-import { NetworkInfo } from '../../src/types/network'
+import { NetworkInfo } from '../../types/network'
 /**
  * Get the network information
  * @returns {NetworkInfo} The network information
diff --git a/electron/services/storage.ts b/src/electron/services/storage.ts
similarity index 100%
rename from electron/services/storage.ts
rename to src/electron/services/storage.ts
diff --git a/vite.config.ts b/vite.config.ts
index 628b3a513..e32fb6d92 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -18,7 +18,7 @@ const baseConfig = {
     (isElectron || isBuilding) &&
       electron([
         {
-          entry: 'electron/main.ts',
+          entry: 'src/electron/main.ts',
           vite: {
             build: {
               outDir: 'dist/electron',
@@ -34,7 +34,7 @@ const baseConfig = {
           },
         },
         {
-          entry: 'electron/preload.ts',
+          entry: 'src/electron/preload.ts',
           vite: {
             build: {
               outDir: 'dist/electron',

From 4e64a946893592b65f55817cc333301790bc12f0 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Thu, 30 Jan 2025 13:40:19 -0300
Subject: [PATCH 2/8] video-library: Don't show download button on the Electron
 app

The video is already in the disk and using this would cause the video to be loaded into memory unnecessarily.
---
 src/components/VideoLibraryModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VideoLibraryModal.vue b/src/components/VideoLibraryModal.vue
index a44575a30..b68d5349f 100644
--- a/src/components/VideoLibraryModal.vue
+++ b/src/components/VideoLibraryModal.vue
@@ -577,7 +577,7 @@ const fileActionButtons = computed(() => [
     size: 28,
     tooltip: 'Download selected videos with logs',
     confirmAction: false,
-    show: true,
+    show: !isElectron(),
     disabled: showOnScreenProgress.value === true || isPreparingDownload.value === true,
     action: () => downloadVideoAndTelemetryFiles(),
   },

From e3c1f5afcee137a63a55dc4903547adec538aa0d Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Thu, 30 Jan 2025 13:40:46 -0300
Subject: [PATCH 3/8] video-library: Fix app library showing buttons that were
 marked not to be shown

---
 src/components/VideoLibraryModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VideoLibraryModal.vue b/src/components/VideoLibraryModal.vue
index b68d5349f..2af30b772 100644
--- a/src/components/VideoLibraryModal.vue
+++ b/src/components/VideoLibraryModal.vue
@@ -314,7 +314,7 @@
                 </div>
                 <div class="flex flex-row mt-2">
                   <button
-                    v-for="button in fileActionButtons"
+                    v-for="button in fileActionButtons.filter((b) => b.show)"
                     :key="button.name"
                     class="flex flex-col justify-center ml-6 align-center"
                     :disabled="button.disabled"

From a89aca24599fc62af03f12597ffe8fa2fa36f860 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Thu, 30 Jan 2025 14:22:10 -0300
Subject: [PATCH 4/8] electron: Update last window state on move events instead
 of close events

This way, even if the application is closed by an external player, the last known state is preserved.
---
 src/electron/main.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/electron/main.ts b/src/electron/main.ts
index bb0571877..9e659e668 100644
--- a/src/electron/main.ts
+++ b/src/electron/main.ts
@@ -36,7 +36,7 @@ function createWindow(): void {
     y: store.get('windowBounds')?.y ?? screen.getPrimaryDisplay().bounds.y,
   })
 
-  mainWindow.on('close', () => {
+  mainWindow.on('move', () => {
     const windowBounds = mainWindow!.getBounds()
     const { x, y, width, height } = windowBounds
     store.set('windowBounds', { x, y, width, height })

From 7fe1ac1b007d5972e7340e34c5e7d0acfd13bdb1 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Thu, 30 Jan 2025 15:22:31 -0300
Subject: [PATCH 5/8] video-library: Only load video into memory when user
 selects it

This prevents unnecessarily loading big video files into memory, which was happening already on the application startup, causing severe performance issues.
---
 src/components/VideoLibraryModal.vue | 132 +++++++++++++--------------
 src/types/video.ts                   |   8 +-
 2 files changed, 65 insertions(+), 75 deletions(-)

diff --git a/src/components/VideoLibraryModal.vue b/src/components/VideoLibraryModal.vue
index 2af30b772..65d3e9b0e 100644
--- a/src/components/VideoLibraryModal.vue
+++ b/src/components/VideoLibraryModal.vue
@@ -92,19 +92,18 @@
               <div class="flex flex-col w-full h-full px-4 overflow-auto align-center">
                 <div v-for="video in availableVideos" :key="video.fileName" class="mb-4 video-container">
                   <div class="relative video-wrapper">
-                    <video
-                      :id="`video-library-${video.fileName}`"
-                      class="border-4 border-white rounded-md cursor-pointer border-opacity-[0.1] hover:border-opacity-[0.4] transition duration-75 hover:ease-in"
+                    <div
+                      :id="`video-library-thumbnail-${video.fileName}`"
+                      class="border-4 border-white rounded-md cursor-pointer border-opacity-[0.1] hover:border-opacity-[0.4] transition duration-75 hover:ease-in aspect-video"
                       :class="
                         selectedVideos.find((v) => v.fileName === video.fileName)
                           ? ['border-opacity-[0.4]', 'w-[220px]']
                           : ['border-opacity-[0.1]', 'w-[190px]']
                       "
-                      preload="auto"
-                      :poster="!video.isProcessed ? video.thumbnail : undefined"
+                      :src="video.thumbnail ?? undefined"
                     >
-                      <source :src="video.url" />
-                    </video>
+                      <img v-if="video.thumbnail" :src="video.thumbnail" />
+                    </div>
                     <div
                       v-if="selectedVideos.find((v) => v.fileName === video.fileName) && !isMultipleSelectionMode"
                       class="play-button"
@@ -201,9 +200,16 @@
             <!-- Video Player -->
             <div v-if="availableVideos.length > 0" class="flex flex-col justify-between mt-5 align-center w-[720px]">
               <div>
+                <div v-if="loadingVideoBlob" class="text-center w-full aspect-video flex justify-center items-center">
+                  Loading video...
+                </div>
                 <video
-                  v-if="
-                    !isMultipleSelectionMode && selectedVideos.length === 1 && !isMultipleSelectionMode && !loadingData
+                  v-show="
+                    !isMultipleSelectionMode &&
+                    selectedVideos.length === 1 &&
+                    !isMultipleSelectionMode &&
+                    !loadingData &&
+                    !loadingVideoBlob
                   "
                   id="video-player"
                   ref="videoPlayerRef"
@@ -212,9 +218,7 @@
                   :preload="selectedVideos[0].isProcessed ? 'auto' : 'none'"
                   :poster="selectedVideos[0]?.thumbnail || undefined"
                   class="border-[14px] border-white border-opacity-10 rounded-lg min-h-[382px] aspect-video"
-                >
-                  <source :src="selectedVideos[0]?.url || undefined" />
-                </video>
+                ></video>
                 <v-btn
                   v-if="
                     !loadingData &&
@@ -504,9 +508,6 @@ const emits = defineEmits(['update:openModal'])
 const { showDialog, closeDialog } = useInteractionDialog()
 const { width: windowWidth } = useWindowSize()
 
-// Track the blob URLs to revoke them when the modal is closed
-const blobURLs = ref<string[]>([])
-
 /* eslint-disable jsdoc/require-jsdoc  */
 interface CustomHammerInstance {
   destroy(): void
@@ -546,6 +547,8 @@ const showOnScreenProgress = ref(false)
 const lastSelectedVideo = ref<VideoLibraryFile | null>(null)
 const errorProcessingVideos = ref(false)
 const deleteButtonLoading = ref(false)
+const videoBlobURL = ref<string | null>(null)
+const loadingVideoBlob = ref(false)
 
 const dialogStyle = computed(() => {
   const scale = interfaceStore.isOnSmallScreen ? windowWidth.value / 1100 : 1
@@ -610,8 +613,6 @@ const closeModal = (): void => {
   isVisible.value = false
   emits('update:openModal', false)
   currentTab.value = 'videos'
-  blobURLs.value.forEach((url) => URL.revokeObjectURL(url))
-  blobURLs.value = []
   deselectAllVideos()
   lastSelectedVideo.value = null
   isMultipleSelectionMode.value = false
@@ -635,9 +636,8 @@ const parseMissionAndDateFromTitle = (title: string): string => {
 const playVideo = (): void => {
   if (selectedVideos.value.length === 1 && !isMultipleSelectionMode.value) {
     const videoPlayer = document.getElementById(`video-player`) as HTMLVideoElement
-    if (videoPlayer) {
-      videoPlayer.play().catch((e: Error) => console.error('Error auto-playing video:', e))
-    }
+    if (!videoPlayer) return
+    videoPlayer.play().catch((e: Error) => console.error('Error auto-playing video:', e))
   }
 }
 
@@ -699,11 +699,12 @@ const processSingleVideo = async (): Promise<void> => {
   if (selectedVideos.value.length === 1 && !selectedVideos.value[0].isProcessed) {
     showOnScreenProgress.value = true
   }
-  processVideos()
+  await processVideos()
+  await loadVideoBlobIntoPlayer(selectedVideos.value[0].fileName)
 }
 
 // Process multiple videos with progress bars dialog
-const processMultipleVideosDialog = (): void => {
+const processMultipleVideosDialog = async (): Promise<void> => {
   numberOfFilesToProcess.value = selectedVideos.value.length
   progressInteractionDialogTitle.value = 'Processing Videos'
   progressInteractionDialogActions.value = [
@@ -716,7 +717,8 @@ const processMultipleVideosDialog = (): void => {
   ]
   showProcessingInteractionDialog.value = false
   showProgressInteractionDialog.value = true
-  processVideos()
+  await processVideos()
+  await loadVideoBlobIntoPlayer(selectedVideos.value[0].fileName)
 }
 
 const showProcessVideosWarningDialog = (): void => {
@@ -736,7 +738,7 @@ const showProcessVideosWarningDialog = (): void => {
       class: 'font-bold',
       action: async () => {
         showProcessingInteractionDialog.value = false
-        processMultipleVideosDialog()
+        await processMultipleVideosDialog()
       },
     },
   ]
@@ -916,44 +918,17 @@ const fetchVideosAndLogData = async (): Promise<void> => {
   const keys = await videoStore.videoStorage.keys()
   for (const key of keys) {
     if (videoStore.isVideoFilename(key)) {
-      videoFilesOperations.push(
-        (async () => {
-          const videoBlob = await videoStore.videoStorage.getItem(key)
-          let url = ''
-          let isProcessed = true
-          if (videoBlob instanceof Blob) {
-            url = URL.createObjectURL(videoBlob)
-            blobURLs.value.push(url)
-          } else {
-            console.error('Video data is not a Blob:', videoBlob)
-          }
-          const size = (await videoStore.videoStorageFileSize(key)) ?? 0
-          return { fileName: key, size, url, isProcessed }
-        })()
-      )
+      videoFilesOperations.push({ fileName: key, isProcessed: true })
     }
     if (key.endsWith('.ass')) {
-      logFileOperations.push(
-        (async () => {
-          const videoBlob = await videoStore.videoStorage.getItem(key)
-          let url = ''
-          if (videoBlob instanceof Blob) {
-            url = URL.createObjectURL(videoBlob)
-            blobURLs.value.push(url)
-          } else {
-            console.error('Video data is not a Blob:', videoBlob)
-          }
-          const size = (await videoStore.videoStorageFileSize(key)) ?? 0
-          return { fileName: key, url, size }
-        })()
-      )
+      logFileOperations.push({ fileName: key })
     }
   }
 
   // Fetch unprocessed videos
   const unprocessedVideos = await videoStore.unprocessedVideos
   const unprocessedVideoOperations = Object.entries(unprocessedVideos).map(async ([hash, videoInfo]) => {
-    return { ...videoInfo, ...{ hash: hash, url: '', isProcessed: false } }
+    return { ...videoInfo, ...{ hash: hash, isProcessed: false } }
   })
 
   const videos = await Promise.all(videoFilesOperations)
@@ -1019,20 +994,43 @@ watch(
   }
 )
 
+const loadVideoBlobIntoPlayer = async (videoFileName: string): Promise<void> => {
+  loadingVideoBlob.value = true
+
+  try {
+    const videoPlayer = document.getElementById(`video-player`) as HTMLVideoElement
+    const videoBlob = await videoStore.videoStorage.getItem(videoFileName)
+
+    if (videoBlob instanceof Blob && videoPlayer) {
+      videoBlobURL.value = URL.createObjectURL(videoBlob)
+      videoPlayer.src = videoBlobURL.value
+      videoPlayer.load()
+    }
+  } catch (error) {
+    const msg = 'Error loading video blob into player'
+    showSnackbar({ message: msg, duration: 3000, variant: 'error', closeButton: true })
+  } finally {
+    loadingVideoBlob.value = false
+  }
+}
+
+const unloadVideoBlob = (): void => {
+  if (!videoBlobURL.value) return
+  URL.revokeObjectURL(videoBlobURL.value)
+  videoBlobURL.value = null
+}
+
 watch(
   selectedVideos,
-  (newVal) => {
+  async (newVal) => {
     if (newVal.length === 1) {
+      lastSelectedVideo.value = newVal[0]
+      await loadVideoBlobIntoPlayer(newVal[0].fileName)
       if (errorProcessingVideos.value) {
         resetProgressBars()
       }
-      lastSelectedVideo.value = newVal[0]
-      const videoSrc = newVal[0].url
-      const videoPlayer = videoPlayerRef.value
-      if (videoPlayer) {
-        videoPlayer.src = videoSrc
-        videoPlayer.load()
-      }
+    } else {
+      unloadVideoBlob()
     }
   },
   { immediate: true, deep: true }
@@ -1067,11 +1065,11 @@ watch(
   async () => {
     await nextTick()
     availableVideos.value.forEach((video) => {
-      const videoElement = document.getElementById(`video-library-${video.fileName}`)
-      if (videoElement) {
+      const videoThumbnailElement = document.getElementById(`video-library-thumbnail-${video.fileName}`)
+      if (videoThumbnailElement) {
         hammerInstances.value[video.fileName]?.destroy()
 
-        const hammerManager = new Hammer.Manager(videoElement)
+        const hammerManager = new Hammer.Manager(videoThumbnailElement)
         hammerManager.add(new Hammer.Tap())
         hammerManager.add(new Hammer.Press({ time: 500 }))
 
@@ -1124,14 +1122,12 @@ onMounted(async () => {
 
 onBeforeUnmount(() => {
   currentTab.value = 'videos'
-  // Revoke each blob URL
-  blobURLs.value.forEach((url) => URL.revokeObjectURL(url))
-  blobURLs.value = []
   // Properly destroy Hammer instances
   Object.values(hammerInstances.value).forEach((instance) => {
     instance.destroy()
   })
   interfaceStore.videoLibraryVisibility = false
+  unloadVideoBlob()
 })
 </script>
 
diff --git a/src/types/video.ts b/src/types/video.ts
index 5b58ba90d..44bff8a8c 100644
--- a/src/types/video.ts
+++ b/src/types/video.ts
@@ -81,17 +81,11 @@ export interface UnprocessedVideoInfo extends CommonVideoInfo {
 }
 
 export interface VideoLibraryFile extends CommonVideoInfo {
-  size?: number
-  url: string
   hash?: string
   isProcessed: boolean
 }
 
-export interface VideoLibraryLogFile extends CommonVideoInfo {
-  size?: number
-  url?: string
-  hash?: string
-}
+export interface VideoLibraryLogFile extends CommonVideoInfo {}
 
 export interface VideoProgress {
   filename: string

From b9e38e4778ebb3fc6655277f2c833ff73a5de4c3 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Thu, 30 Jan 2025 15:41:14 -0300
Subject: [PATCH 6/8] video-library: Do not auto-mount dialog on startup

As it deals with heavy data, we have to take more care with it, and not load it when not necessary.
---
 src/App.vue                          |  2 +-
 src/components/VideoLibraryModal.vue | 27 ++++++---------------------
 2 files changed, 7 insertions(+), 22 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ab419744c..f3be793b0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -315,7 +315,7 @@
   </v-app>
   <About v-if="showAboutDialog" @update:show-about-dialog="showAboutDialog = $event" />
   <Tutorial :show-tutorial="interfaceStore.isTutorialVisible" />
-  <VideoLibraryModal :open-modal="interfaceStore.isVideoLibraryVisible" />
+  <VideoLibraryModal v-if="interfaceStore.isVideoLibraryVisible" />
   <VehicleDiscoveryDialog v-model="showDiscoveryDialog" show-auto-search-option />
   <UpdateNotification v-if="isElectron()" />
 </template>
diff --git a/src/components/VideoLibraryModal.vue b/src/components/VideoLibraryModal.vue
index 65d3e9b0e..627980208 100644
--- a/src/components/VideoLibraryModal.vue
+++ b/src/components/VideoLibraryModal.vue
@@ -500,11 +500,6 @@ const videoStore = useVideoStore()
 const interfaceStore = useAppInterfaceStore()
 const { showSnackbar } = useSnackbar()
 
-const props = defineProps({
-  openModal: Boolean,
-})
-const emits = defineEmits(['update:openModal'])
-
 const { showDialog, closeDialog } = useInteractionDialog()
 const { width: windowWidth } = useWindowSize()
 
@@ -520,7 +515,7 @@ interface HammerInstances {
 /* eslint-enable jsdoc/require-jsdoc  */
 const availableVideos = ref<VideoLibraryFile[]>([])
 const availableLogFiles = ref<VideoLibraryLogFile[]>([])
-const isVisible = ref(props.openModal)
+const isVisible = ref(true)
 const selectedVideos = ref<VideoLibraryFile[]>([])
 const videoPlayerRef = ref<HTMLVideoElement | null>(null)
 const currentTab = ref('videos')
@@ -611,7 +606,6 @@ const openVideoFolder = (): void => {
 
 const closeModal = (): void => {
   isVisible.value = false
-  emits('update:openModal', false)
   currentTab.value = 'videos'
   deselectAllVideos()
   lastSelectedVideo.value = null
@@ -973,7 +967,6 @@ watch(
 )
 
 watch(isVisible, (newValue) => {
-  emits('update:openModal', newValue)
   if (!newValue) {
     resetProgressBars()
     isMultipleSelectionMode.value = false
@@ -983,17 +976,6 @@ watch(isVisible, (newValue) => {
   }
 })
 
-watch(
-  () => props.openModal,
-  async (newVal) => {
-    isVisible.value = newVal
-    if (newVal === true) {
-      await fetchVideosAndLogData()
-      showOnScreenProgress.value = false
-    }
-  }
-)
-
 const loadVideoBlobIntoPlayer = async (videoFileName: string): Promise<void> => {
   loadingVideoBlob.value = true
 
@@ -1033,7 +1015,7 @@ watch(
       unloadVideoBlob()
     }
   },
-  { immediate: true, deep: true }
+  { deep: true }
 )
 
 // Keep last processed video selected after refresh
@@ -1116,8 +1098,11 @@ watch(
 )
 
 onMounted(async () => {
-  loadingData.value = true
   await fetchVideosAndLogData()
+  if (availableVideos.value.length > 0) {
+    await loadVideoBlobIntoPlayer(availableVideos.value[0].fileName)
+  }
+  showOnScreenProgress.value = false
 })
 
 onBeforeUnmount(() => {

From c07ae067741a3b2d84168c60f91e70ce45be8c7d Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Fri, 31 Jan 2025 14:51:17 -0300
Subject: [PATCH 7/8] video-library: Fix thumbnail storage and retrieval

Thumbnail was not being stored after the video was processed. The new approach removes the `thumbnail` property from the video file and instead saves a thumbnail file in the storage.
---
 src/components/VideoLibraryModal.vue | 36 ++++++++++++++++++------
 src/stores/video.ts                  | 41 ++++++++++++++++++++++------
 src/types/video.ts                   |  4 ---
 3 files changed, 60 insertions(+), 21 deletions(-)

diff --git a/src/components/VideoLibraryModal.vue b/src/components/VideoLibraryModal.vue
index 627980208..3334a3531 100644
--- a/src/components/VideoLibraryModal.vue
+++ b/src/components/VideoLibraryModal.vue
@@ -100,9 +100,18 @@
                           ? ['border-opacity-[0.4]', 'w-[220px]']
                           : ['border-opacity-[0.1]', 'w-[190px]']
                       "
-                      :src="video.thumbnail ?? undefined"
                     >
-                      <img v-if="video.thumbnail" :src="video.thumbnail" />
+                      <img
+                        v-if="video.isProcessed && videoThumbnailURLs[video.fileName]"
+                        :src="videoThumbnailURLs[video.fileName]"
+                      />
+                      <img
+                        v-else-if="!video.isProcessed && videoThumbnailURLs[video.hash]"
+                        :src="videoThumbnailURLs[video.hash]"
+                      />
+                      <div v-else class="w-full h-full flex justify-center items-center bg-black">
+                        <v-icon size="60" class="text-white/30">mdi-video</v-icon>
+                      </div>
                     </div>
                     <div
                       v-if="selectedVideos.find((v) => v.fileName === video.fileName) && !isMultipleSelectionMode"
@@ -207,18 +216,21 @@
                   v-show="
                     !isMultipleSelectionMode &&
                     selectedVideos.length === 1 &&
-                    !isMultipleSelectionMode &&
                     !loadingData &&
-                    !loadingVideoBlob
+                    !loadingVideoBlob &&
+                    selectedVideos[0].isProcessed
                   "
                   id="video-player"
                   ref="videoPlayerRef"
                   width="660px"
                   :controls="selectedVideos[0].isProcessed ? true : false"
                   :preload="selectedVideos[0].isProcessed ? 'auto' : 'none'"
-                  :poster="selectedVideos[0]?.thumbnail || undefined"
                   class="border-[14px] border-white border-opacity-10 rounded-lg min-h-[382px] aspect-video"
                 ></video>
+                <div
+                  v-if="!isMultipleSelectionMode && selectedVideos.length === 1 && !selectedVideos[0].isProcessed"
+                  class="w-[660px] border-[14px] border-white border-opacity-10 rounded-lg min-h-[382px] aspect-video"
+                />
                 <v-btn
                   v-if="
                     !loadingData &&
@@ -484,7 +496,7 @@
 import { useWindowSize } from '@vueuse/core'
 import * as Hammer from 'hammerjs'
 import { computed, nextTick, onBeforeUnmount, onMounted } from 'vue'
-import { ref, watch } from 'vue'
+import { reactive, ref, watch } from 'vue'
 
 import { useInteractionDialog } from '@/composables/interactionDialog'
 import { useSnackbar } from '@/composables/snackbar'
@@ -544,6 +556,7 @@ const errorProcessingVideos = ref(false)
 const deleteButtonLoading = ref(false)
 const videoBlobURL = ref<string | null>(null)
 const loadingVideoBlob = ref(false)
+const videoThumbnailURLs = reactive<Record<string, string | null>>({})
 
 const dialogStyle = computed(() => {
   const scale = interfaceStore.isOnSmallScreen ? windowWidth.value / 1100 : 1
@@ -875,7 +888,10 @@ const discardVideosAndUpdateDB = async (): Promise<void> => {
   let unprocessedVideosToDiscard: string[] = []
 
   await selectedVideos.value.forEach((video: VideoLibraryFile) => {
-    if (video.isProcessed) processedVideosToDiscard.push(video.fileName)
+    if (video.isProcessed) {
+      processedVideosToDiscard.push(video.fileName)
+      processedVideosToDiscard.push(videoStore.videoThumbnailFilename(video.fileName))
+    }
     if (!video.isProcessed && video.hash) unprocessedVideosToDiscard.push(video.hash)
   })
 
@@ -912,7 +928,9 @@ const fetchVideosAndLogData = async (): Promise<void> => {
   const keys = await videoStore.videoStorage.keys()
   for (const key of keys) {
     if (videoStore.isVideoFilename(key)) {
-      videoFilesOperations.push({ fileName: key, isProcessed: true })
+      videoFilesOperations.push({ fileName: key, isProcessed: true, thumbnail: videoStore.videoStorage.getItem(key) })
+      const thumbnail = await videoStore.getVideoThumbnail(key, true)
+      videoThumbnailURLs[key] = thumbnail ? URL.createObjectURL(thumbnail) : null
     }
     if (key.endsWith('.ass')) {
       logFileOperations.push({ fileName: key })
@@ -922,6 +940,8 @@ const fetchVideosAndLogData = async (): Promise<void> => {
   // Fetch unprocessed videos
   const unprocessedVideos = await videoStore.unprocessedVideos
   const unprocessedVideoOperations = Object.entries(unprocessedVideos).map(async ([hash, videoInfo]) => {
+    const thumbnail = await videoStore.getVideoThumbnail(hash, false)
+    videoThumbnailURLs[hash] = thumbnail ? URL.createObjectURL(thumbnail) : null
     return { ...videoInfo, ...{ hash: hash, isProcessed: false } }
   })
 
diff --git a/src/stores/video.ts b/src/stores/video.ts
index 0d8cb4946..5fed2bcc6 100644
--- a/src/stores/video.ts
+++ b/src/stores/video.ts
@@ -203,13 +203,23 @@ export const useVideoStore = defineStore('video', () => {
     alertStore.pushAlert(new Alert(AlertLevel.Success, `Stopped recording stream ${streamName}.`))
   }
 
+  const videoThumbnailFilename = (videoFileName: string): string => {
+    return `thumbnail_${videoFileName}.jpeg`
+  }
+
+  const getVideoThumbnail = async (videoFileNameOrHash: string, isProcessed: boolean): Promise<Blob | null> => {
+    const db = isProcessed ? videoStorage : tempVideoStorage
+    const thumbnail = await db.getItem(videoThumbnailFilename(videoFileNameOrHash))
+    return thumbnail || null
+  }
+
   /**
    * Extracts a thumbnail from the first frame of a video.
    * @param {Blob} firstChunkBlob
    * @returns {Promise<string>} A promise that resolves with the base64-encoded image data of the thumbnail.
    */
-  const extractThumbnailFromVideo = async (firstChunkBlob: Blob): Promise<string> => {
-    return new Promise<string>((resolve, reject) => {
+  const extractThumbnailFromVideo = async (firstChunkBlob: Blob): Promise<Blob> => {
+    return new Promise<Blob>((resolve, reject) => {
       const videoObjectUrl = URL.createObjectURL(firstChunkBlob)
       const video = document.createElement('video')
 
@@ -241,9 +251,15 @@ export const useVideoStore = defineStore('video', () => {
         video.currentTime = 0
         seekResolve = () => {
           context.drawImage(video, 0, 0, width, height)
-          const base64ImageData = canvas.toDataURL('image/jpeg', 0.6)
-          resolve(base64ImageData)
-          URL.revokeObjectURL(videoObjectUrl)
+          const blobCallback = (blob: Blob | null): void => {
+            if (!blob) {
+              reject('Failed to create blob')
+              return
+            }
+            resolve(blob)
+            URL.revokeObjectURL(videoObjectUrl)
+          }
+          canvas.toBlob(blobCallback, 'image/jpeg', 0.6)
         }
       })
     })
@@ -304,7 +320,6 @@ export const useVideoStore = defineStore('video', () => {
       fileName,
       vWidth,
       vHeight,
-      thumbnail: '',
     }
     unprocessedVideos.value = { ...unprocessedVideos.value, ...{ [recordingHash]: videoInfo } }
 
@@ -391,7 +406,8 @@ export const useVideoStore = defineStore('video', () => {
           if (videoChunk) {
             const firstChunkBlob = new Blob([videoChunk as Blob])
             const thumbnail = await extractThumbnailFromVideo(firstChunkBlob)
-            updatedInfo.thumbnail = thumbnail
+            // Save thumbnail in the storage
+            await tempVideoStorage.setItem(videoThumbnailFilename(recordingHash), thumbnail)
             unprocessedVideos.value = { ...unprocessedVideos.value, ...{ [recordingHash]: updatedInfo } }
           }
         } catch (error) {
@@ -586,7 +602,7 @@ export const useVideoStore = defineStore('video', () => {
 
       debouncedUpdateFileProgress(info.fileName, 30, 'Grouping video chunks.')
       const keys = await tempVideoStorage.keys()
-      const filteredKeys = keys.filter((key) => key.includes(hash))
+      const filteredKeys = keys.filter((key) => key.includes(hash) && key !== videoThumbnailFilename(hash))
       for (const key of filteredKeys) {
         const blob = await tempVideoStorage.getItem(key)
         if (blob && blob.size > 0) {
@@ -628,7 +644,12 @@ export const useVideoStore = defineStore('video', () => {
       updateLastProcessingUpdate(hash)
 
       debouncedUpdateFileProgress(info.fileName, 75, `Saving video file.`)
-      await videoStorage.setItem(`${info.fileName}.${extensionContainer || 'webm'}`, durFixedBlob ?? mergedBlob)
+      const finalFileName = `${info.fileName}.${extensionContainer || 'webm'}`
+      await videoStorage.setItem(finalFileName, durFixedBlob ?? mergedBlob)
+
+      // Save thumbnail in the storage
+      const thumbnail = await extractThumbnailFromVideo(chunkBlobs[0])
+      await videoStorage.setItem(videoThumbnailFilename(finalFileName), thumbnail)
 
       updateLastProcessingUpdate(hash)
 
@@ -942,6 +963,8 @@ export const useVideoStore = defineStore('video', () => {
     overallProgress,
     processVideoChunksAndTelemetry,
     isVideoFilename,
+    getVideoThumbnail,
+    videoThumbnailFilename,
     activeStreams,
     renameStreamInternalNameById,
     lastRenamedStreamName,
diff --git a/src/types/video.ts b/src/types/video.ts
index 44bff8a8c..65f2655b4 100644
--- a/src/types/video.ts
+++ b/src/types/video.ts
@@ -63,10 +63,6 @@ export interface CommonVideoInfo {
    *  The height of the video
    */
   vHeight?: number
-  /**
-   *  Screen capture from first chunk of the video
-   */
-  thumbnail?: string
 }
 
 /* eslint-disable jsdoc/require-jsdoc  */

From 350ef54047e2c4e07f097fd0e4ecc5f763de5ff4 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Fri, 31 Jan 2025 18:11:27 -0300
Subject: [PATCH 8/8] video: Fix method for discarding unprocessed data

It was not working, as it was trying to remove a file with the name of the hash, and not files that included the hash.
---
 src/stores/video.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/stores/video.ts b/src/stores/video.ts
index 5fed2bcc6..e942666ee 100644
--- a/src/stores/video.ts
+++ b/src/stores/video.ts
@@ -457,8 +457,12 @@ export const useVideoStore = defineStore('video', () => {
   }
 
   const discardUnprocessedFilesFromVideoDB = async (hashes: string[]): Promise<void> => {
+    const allKeys = await tempVideoStorage.keys()
     for (const hash of hashes) {
-      await tempVideoStorage.removeItem(hash)
+      const keysToRemove = allKeys.filter((key) => key.includes(hash))
+      for (const key of keysToRemove) {
+        await tempVideoStorage.removeItem(key)
+      }
       delete unprocessedVideos.value[hash]
     }
   }