fix(video-upload): protect react-media-recorder hook from SSR

app/web/src/components/upload/MediaRecorder.tsx

@@ -0,0 +1,15 @@
+/*
+ * Copyright [2023] [Privacypal Authors]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */

app/web/src/components/upload/UploadVideoForm.tsx

@@ -31,12 +31,13 @@ import {
 // https://github.com/DeltaCircuit/react-media-recorder/issues/105
 // was having a strange bug with this, but someone made a version
 // specifically to fix the bug since the maintainers weren't fixing them
-import { StatusMessages, useReactMediaRecorder } from "react-media-recorder-2";
+// import { StatusMessages, useReactMediaRecorder } from "react-media-recorder-2";
 import React from "react";
 import { CSS } from "@lib/utils";
 import { UploadIcon } from "@patternfly/react-icons";
 import { BsCameraVideo } from "react-icons/bs";
 import { FileUploader } from "./FileUploader";
+import { useMediaRecorder } from "@lib/media-recorder";
 
 // const ACCEPTED_MIME_TYPES = ["video/mp4", "video/x-msvideo", "video/quicktime"]; // mp4, avi, mov
 
@@ -98,7 +99,7 @@ function destroyMediaStream(stream?: MediaStream | null) {
   });
 }
 
-function recordButtonText(status: StatusMessages): string {
+function recordButtonText(status: string): string {
   switch (status) {
     case "recording":
       return "Stop recording";
@@ -160,27 +161,13 @@ export const UploadVideoForm = ({
     stopRecording,
     mediaBlobUrl,
     previewStream: liveStream, // rename to liveStream as we have a different previewStream object for an actual preview
-  } = (() => {
-    const isWindowDefined = typeof window !== "undefined";
-    if (!isWindowDefined) {
-      return {
-        status: "idle" as StatusMessages,
-        startRecording: () => {},
-        stopRecording: () => {},
-        mediaBlobUrl: "",
-        previewStream: null,
-      };
-    }
-
-    const mediaRecorderState = useReactMediaRecorder({
-      video: { frameRate: 24 },
-      onStop: (_: string, blob: Blob) => {
-        const f = new File([blob], "recorded.webm", { type: "video/webm" });
-        setRecordFile(f);
-      },
-    }); // force a lower but still standard fps to improve performance
-    return mediaRecorderState;
-  })();
+  } = useMediaRecorder({
+    frameRate: 24,
+    onStop: (_: string, blob: Blob) => {
+      const f = new File([blob], "recorded.webm", { type: "video/webm" });
+      setRecordFile(f);
+    },
+  });
 
   useEffect(() => {
     if (recordMode) {

app/web/src/lib/media-recorder.ts

@@ -0,0 +1,79 @@
+/*
+ * Copyright [2023] [Privacypal Authors]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useEffect, useState } from "react";
+
+export interface MediaRecorderHook {
+  status: string;
+  startRecording: () => void;
+  stopRecording: () => void;
+  mediaBlobUrl?: string;
+  previewStream: MediaStream | null;
+}
+
+/**
+ * The default media recorder hook. This is used during SSR.
+ * @returns The default media recorder hook.
+ */
+const defaultMediaRecorderHook = (): MediaRecorderHook => {
+  return {
+    status: "idle",
+    startRecording: () => {},
+    stopRecording: () => {},
+    mediaBlobUrl: "",
+    previewStream: null,
+  };
+};
+
+interface MediaRecorderProps {
+  frameRate: number;
+  onStop: (_: string, blob: Blob) => void;
+}
+
+/**
+ * A wrapper to the `react-media-recorder-2` hook that makes it SRR-safe. It will dynamically import the hook only in a browser/edge context.
+ * @param props The framerate and `onStop` callback for the media recorder.
+ * @returns The protected media recorder hook.
+ */
+export const useMediaRecorder = ({ frameRate, onStop }: MediaRecorderProps) => {
+  const [hook, setHook] = useState<MediaRecorderHook>(
+    defaultMediaRecorderHook(),
+  );
+
+  useEffect(() => {
+    // check for browser context
+    const isBrowser: boolean = typeof window !== "undefined";
+    const workerCompatible: boolean = isBrowser && window.Worker !== undefined;
+
+    const importMediaRecorder = async () => {
+      // import the media recorder hook only if it is a browser context
+      if (workerCompatible) {
+        const { useReactMediaRecorder } = await import(
+          "react-media-recorder-2"
+        );
+
+        // prepare the hook as usual using the params passed from the client
+        const mediaRecorderState = useReactMediaRecorder({
+          video: { frameRate },
+          onStop,
+        });
+        setHook(mediaRecorderState);
+      }
+    };
+    importMediaRecorder();
+  }, []);
+
+  return hook;
+};