From 658cd784fdd23e52603faf666cdeecb44bd08664 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Fri, 15 Sep 2023 13:40:48 -0300
Subject: [PATCH] Use `fix-webm-duration` lib to fix video blob duration

---
 src/components/mini-widgets/MiniVideoRecorder.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/mini-widgets/MiniVideoRecorder.vue b/src/components/mini-widgets/MiniVideoRecorder.vue
index 5da72a66a..5b262695b 100644
--- a/src/components/mini-widgets/MiniVideoRecorder.vue
+++ b/src/components/mini-widgets/MiniVideoRecorder.vue
@@ -56,6 +56,7 @@
 import { useMouseInElement, useTimestamp } from '@vueuse/core'
 import { format, intervalToDuration } from 'date-fns'
 import { saveAs } from 'file-saver'
+import fixWebmDuration from 'fix-webm-duration'
 import Swal, { type SweetAlertResult } from 'sweetalert2'
 import { computed, onBeforeMount, onBeforeUnmount, ref, toRefs, watch } from 'vue'
 import adapter from 'webrtc-adapter'
@@ -184,8 +185,10 @@ const startRecording = async (): Promise<SweetAlertResult | void> => {
 
   mediaRecorder.value.onstop = () => {
     const blob = new Blob(chunks, { type: 'video/webm' })
+    fixWebmDuration(blob, Date.now() - timeRecordingStart.value.getTime()).then((fixedBlob) => {
+      saveAs(fixedBlob, `${missionName} (${format(timeRecordingStart.value, 'LLL dd, yyyy - HH꞉mm꞉ss O')})`)
+    })
     chunks = []
-    saveAs(blob, `${missionName} (${format(timeRecordingStart.value, 'LLL dd, yyyy - HH꞉mm꞉ss O')})`)
     mediaRecorder.value = undefined
     if (selectedStream.value?.id === 'screenStream' && mediaStream.value !== undefined) {
       // If recording the screen stream, stop the tracks also, so the browser removes the recording warning.