From 89e88b4f01a71aa24fa7382efda9c8f3d34b436a 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] 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..8b8a6656c 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" :open-modal="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 91cfa446f..914265d25 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
@@ -971,7 +965,6 @@ watch(
 )
 
 watch(isVisible, (newValue) => {
-  emits('update:openModal', newValue)
   if (!newValue) {
     resetProgressBars()
     isMultipleSelectionMode.value = false
@@ -981,17 +974,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
 
@@ -1031,7 +1013,7 @@ watch(
       unloadVideoBlob()
     }
   },
-  { immediate: true, deep: true }
+  { deep: true }
 )
 
 // Keep last processed video selected after refresh
@@ -1114,8 +1096,11 @@ watch(
 )
 
 onMounted(async () => {
-  loadingData.value = true
   await fetchVideosAndLogData()
+  if (availableVideos.value.length > 0) {
+    await loadVideoBlobIntoPlayer(availableVideos.value[0].fileName)
+  }
+  showOnScreenProgress.value = false
 })
 
 onBeforeUnmount(() => {