From 09286a6ed83bbf7dc0ebf7299fb3ae4a4ec1b004 Mon Sep 17 00:00:00 2001
From: MarconLP <13001502+MarconLP@users.noreply.github.com>
Date: Thu, 20 Apr 2023 00:13:50 +0200
Subject: [PATCH] add video duration metadata to blob

---
 package-lock.json           | 11 ++++++
 package.json                |  1 +
 src/components/Recorder.tsx | 71 +++++++++++++++++++++++++++++--------
 src/components/StopTime.tsx | 16 +++++----
 4 files changed, 79 insertions(+), 20 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0af3176..88c50be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "axios": "^1.3.5",
         "dayjs": "^1.11.7",
         "file-saver": "^2.0.5",
+        "fix-webm-duration": "^1.0.5",
         "micro": "^10.0.1",
         "micro-cors": "^0.1.1",
         "next": "^13.3.0",
@@ -4230,6 +4231,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/fix-webm-duration": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/fix-webm-duration/-/fix-webm-duration-1.0.5.tgz",
+      "integrity": "sha512-b6oula3OfSknx0aWoLsxvp4DVIYbwsf+UAkr6EDAK3iuMYk/OSNKzmeSI61GXK0MmFTEuzle19BPvTxMIKjkZg=="
+    },
     "node_modules/flat-cache": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
@@ -10338,6 +10344,11 @@
         "path-exists": "^4.0.0"
       }
     },
+    "fix-webm-duration": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/fix-webm-duration/-/fix-webm-duration-1.0.5.tgz",
+      "integrity": "sha512-b6oula3OfSknx0aWoLsxvp4DVIYbwsf+UAkr6EDAK3iuMYk/OSNKzmeSI61GXK0MmFTEuzle19BPvTxMIKjkZg=="
+    },
     "flat-cache": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
diff --git a/package.json b/package.json
index d4f43e0..9b6e9e5 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "axios": "^1.3.5",
     "dayjs": "^1.11.7",
     "file-saver": "^2.0.5",
+    "fix-webm-duration": "^1.0.5",
     "micro": "^10.0.1",
     "micro-cors": "^0.1.1",
     "next": "^13.3.0",
diff --git a/src/components/Recorder.tsx b/src/components/Recorder.tsx
index 2163a50..f2707e6 100644
--- a/src/components/Recorder.tsx
+++ b/src/components/Recorder.tsx
@@ -10,6 +10,7 @@ import axios from "axios";
 import dayjs from "dayjs";
 import { useRouter } from "next/router";
 import { api } from "~/utils/api";
+import fixWebmDuration from "fix-webm-duration";
 
 export default function Recorder() {
   const [steam, setStream] = useState<null | MediaStream>(null);
@@ -26,6 +27,7 @@ export default function Recorder() {
   const [submitting, setSubmitting] = useState<boolean>(false);
   const apiUtils = api.useContext();
   const getSignedUrl = api.video.getUploadUrl.useMutation();
+  const [duration, setDuration] = useState<number>(0);
 
   const handleRecording = async () => {
     const screenStream = await navigator.mediaDevices.getDisplayMedia({
@@ -62,7 +64,13 @@ export default function Recorder() {
     if (recorderRef.current === null) return;
     recorderRef.current.stopRecording(() => {
       if (recorderRef.current) {
-        setBlob(recorderRef.current.getBlob());
+        fixWebmDuration(
+          recorderRef.current.getBlob(),
+          duration * 1000,
+          (seekableBlob) => {
+            setBlob(seekableBlob);
+          }
+        );
         steam?.getTracks().map((track) => track.stop());
       }
     });
@@ -218,7 +226,11 @@ export default function Recorder() {
             className="flex cursor-pointer flex-row items-center justify-center rounded pr-2 text-lg hover:bg-gray-200"
           >
             <StopIcon className="h-8 w-8 text-[#ff623f]" aria-hidden="true" />
-            <StopTime running={!pause} />
+            <StopTime
+              running={!pause}
+              duration={duration}
+              setDuration={setDuration}
+            />
           </div>
           <div className="mx-2 h-6 w-px bg-[#E7E9EB]"></div>
           <div
@@ -253,18 +265,49 @@ export default function Recorder() {
               style={{ width: "700px", margin: "1em" }}
             />
           )}
-          <button
-            onClick={handleSave}
-            className="mt-2 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-          >
-            Download
-          </button>
-          <button
-            onClick={() => void handleUpload()}
-            className="ml-2 mt-2 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-          >
-            Upload
-          </button>
+          <div className="flex items-center justify-center">
+            <button
+              type="button"
+              className="inline-flex items-center rounded-md bg-indigo-500 px-4 py-2 text-sm font-semibold leading-6 text-white shadow transition duration-150 ease-in-out hover:bg-indigo-400 disabled:cursor-not-allowed"
+              onClick={() => void handleSave()}
+            >
+              Download
+            </button>
+            <button
+              type="button"
+              className="ml-2 inline-flex items-center rounded-md bg-indigo-500 px-4 py-2 text-sm font-semibold leading-6 text-white shadow transition duration-150 ease-in-out hover:bg-indigo-400 disabled:cursor-not-allowed"
+              disabled={submitting}
+              onClick={() => void handleUpload()}
+            >
+              {submitting ? (
+                <>
+                  <svg
+                    className="-ml-1 mr-3 h-5 w-5 animate-spin text-white"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                  >
+                    <circle
+                      className="opacity-25"
+                      cx="12"
+                      cy="12"
+                      r="10"
+                      stroke="currentColor"
+                      strokeWidth="4"
+                    ></circle>
+                    <path
+                      className="opacity-75"
+                      fill="currentColor"
+                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    ></path>
+                  </svg>
+                  Uploading...
+                </>
+              ) : (
+                <>Upload</>
+              )}
+            </button>
+          </div>
         </div>
       ) : null}
     </div>
diff --git a/src/components/StopTime.tsx b/src/components/StopTime.tsx
index a0a523a..9537b00 100644
--- a/src/components/StopTime.tsx
+++ b/src/components/StopTime.tsx
@@ -1,8 +1,12 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 
-export default function StopTime({ running }: { running?: boolean }) {
-  const [secs, setSecs] = useState<number>(0);
+interface Props {
+  running: boolean;
+  duration: number;
+  setDuration: React.Dispatch<React.SetStateAction<number>>;
+}
 
+export default function StopTime({ running, duration, setDuration }: Props) {
   const calculateTimeDuration = (secs: number): string => {
     const hr = Math.floor(secs / 3600).toString();
     let min = Math.floor((secs - parseInt(hr) * 3600) / 60).toString();
@@ -27,13 +31,13 @@ export default function StopTime({ running }: { running?: boolean }) {
 
   useEffect(() => {
     if (!running) return;
-    const interval = setInterval(() => setSecs((sec) => sec + 1), 1000);
+    const interval = setInterval(() => setDuration((sec) => sec + 1), 1000);
     return () => clearInterval(interval);
-  }, [running]);
+  }, [running, setDuration]);
 
   return (
     <div className="ml-1 flex w-10 items-center justify-center">
-      <span className="text-sm">{calculateTimeDuration(secs)}</span>
+      <span className="text-sm">{calculateTimeDuration(duration)}</span>
     </div>
   );
 }