video-recovery: Reuse DB from store in components

Author: rafaellehmkuhl

src/components/mini-widgets/MiniVideoRecorder.vue

@@ -57,7 +57,6 @@ import { useMouseInElement, useTimestamp } from '@vueuse/core'
 import { format, intervalToDuration } from 'date-fns'
 import { saveAs } from 'file-saver'
 import fixWebmDuration from 'fix-webm-duration'
-import localforage from 'localforage'
 import { storeToRefs } from 'pinia'
 import Swal, { type SweetAlertResult } from 'sweetalert2'
 import { computed, onBeforeMount, onBeforeUnmount, ref, toRefs, watch } from 'vue'
@@ -103,14 +102,6 @@ const isRecording = computed(() => {
   return mediaRecorder.value !== undefined && mediaRecorder.value.state === 'recording'
 })
 
-const cockpitVideoDB = localforage.createInstance({
-  driver: localforage.INDEXEDDB,
-  name: 'CockpitVideoDB',
-  storeName: 'cockpit-video-db',
-  version: 1.0,
-  description: 'Local backups of Cockpit video recordings to be retrieved in case of failure.',
-})
-
 onBeforeMount(async () => {
   // Set initial widget options if they don't exist
   if (Object.keys(miniWidget.value.options).length === 0) {
@@ -205,7 +196,7 @@ const startRecording = async (): Promise<SweetAlertResult | void> => {
   let chunks: Blob[] = []
   mediaRecorder.value.ondataavailable = async (e) => {
     chunks.push(e.data)
-    await cockpitVideoDB.setItem(fileName, chunks)
+    await videoStore.videoRecoveryDB.setItem(fileName, chunks)
   }
 
   mediaRecorder.value.onstop = () => {
@@ -216,7 +207,7 @@ const startRecording = async (): Promise<SweetAlertResult | void> => {
     fixWebmDuration(blob, Date.now() - timeRecordingStart.value.getTime()).then((fixedBlob) => {
       saveAs(fixedBlob, `${fileName}.webm`)
       saveAs(logBlob, `${fileName}.ass`)
-      cockpitVideoDB.removeItem(fileName)
+      videoStore.videoRecoveryDB.removeItem(fileName)
     })
     chunks = []
     mediaRecorder.value = undefined

src/stores/video.ts

@@ -76,5 +76,5 @@ export const useVideoStore = defineStore('video', () => {
     }
   }, 5000)
 
-  return { availableIceIps, allowedIceIps }
+  return { availableIceIps, allowedIceIps, videoRecoveryDB }
 })