diff --git a/src/stores/video.ts b/src/stores/video.ts index 029fb0d36..decff9b1c 100644 --- a/src/stores/video.ts +++ b/src/stores/video.ts @@ -268,6 +268,11 @@ export const useVideoStore = defineStore('video', () => { return totalSizeBytes } + const videoStorageFileSize = async (filename: string): Promise => { + const file = await videoStoringDB.getItem(filename) + return file ? (file as Blob).size : undefined + } + // Used to store chunks of an ongoing recording, that will be merged into a video file when the recording is stopped const tempVideoChunksDB = localforage.createInstance({ driver: localforage.INDEXEDDB, @@ -372,6 +377,7 @@ export const useVideoStore = defineStore('video', () => { downloadFilesFromVideoDB, clearTemporaryVideoDB, temporaryVideoDBSize, + videoStorageFileSize, getMediaStream, getStreamData, isRecording, diff --git a/src/views/ConfigurationVideoView.vue b/src/views/ConfigurationVideoView.vue index b2ee47188..d03a04664 100644 --- a/src/views/ConfigurationVideoView.vue +++ b/src/views/ConfigurationVideoView.vue @@ -32,7 +32,7 @@ /> -
+

No videos available.

Use the MiniVideoRecorder widget to record some videos and them come back here to download or discard those. @@ -42,6 +42,7 @@ Filename + Size - + - {{ filename }} + {{ file.filename }} + {{ formatBytes(file.size) }} @@ -113,7 +115,13 @@ const videoStore = useVideoStore() const { allowedIceIps, availableIceIps } = storeToRefs(videoStore) // List available videos and telemetry logs to be downloaded -const namesAvailableVideosAndLogs = ref([]) +/* eslint-disable jsdoc/require-jsdoc */ +interface VideoStorageFile { + filename: string + size: number +} +/* eslint-enable jsdoc/require-jsdoc */ +const availableVideosAndLogs = ref([]) const temporaryDbSize = ref(0) const selectedFilesNames = ref([]) @@ -124,11 +132,17 @@ onMounted(async () => { // Fetch available videos and telemetry logs from the storage const fetchVideoAndLogsData = async (): Promise => { - const availableData: string[] = [] + const availableData: VideoStorageFile[] = [] await videoStore.videoStoringDB.iterate((_, fileName) => { - availableData.push(fileName) + availableData.push({ + filename: fileName, + size: 0, + }) }) - namesAvailableVideosAndLogs.value = availableData + for (const file of availableData) { + file.size = (await videoStore.videoStorageFileSize(file.filename)) ?? 0 + } + availableVideosAndLogs.value = availableData } // Fetch temporary video data from the storage