Fix seeking in review & trim step

Aims at fixing or at least helping with #517.

As suggested in #517, this introduces the
webm-duration-fix package to Studio. This should
fix the "Preview & Trim" step on Chrome (desktop),
allowing for playback and seeking in the recorded
video. Furthermore, the duration should now
be stored correctly in the video metadata.

This should not change behaviour in Firefox, as
it was already working in Firefox. I have not tested
other browsers.

Note that recordings downloaded directly from
Chrome may still not be playable by all and every
media player. This is not something this PR can fix.

package.json

@@ -46,6 +46,7 @@
     "react-icons": "^4.12.0",
     "react-select": "^5.8.0",
     "use-resize-observer": "^9.1.0",
+    "webm-duration-fix": "^1.0.4",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4"
   },

src/steps/recording/recorder.tsx

@@ -1,3 +1,4 @@
+import fixWebmDuration from "webm-duration-fix";
 import { Settings } from "../../settings";
 import { dimensionsOf } from "../../util";
 
@@ -61,9 +62,9 @@ export default class Recorder {
     }
   };
 
-  #onStop = (_event: Event) => {
+  #onStop = async (_event: Event) => {
     const mimeType = this.#data[0]?.type || this.#recorder.mimeType;
-    const media = new Blob(this.#data, { type: mimeType });
+    const media = await fixWebmDuration(new Blob(this.#data, { type: mimeType }));
     const url = URL.createObjectURL(media);
 
     this.#reset();