Link recorded meeting to a transcript

www/app/[domain]/transcripts/[transcriptId]/meeting/page.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import "@whereby.com/browser-sdk/embed";
+import { useCallback, useEffect, useRef } from "react";
+import useTranscript from "../../useTranscript";
+import useMeeting from "../../useMeeting";
+
+export type TranscriptDetails = {
+  params: {
+    transcriptId: string;
+  };
+};
+
+export default function TranscriptMeeting(details: TranscriptDetails) {
+  const wherebyRef = useRef<HTMLElement>(null);
+
+  const transcript = useTranscript(details.params.transcriptId);
+  const meeting = useMeeting(transcript?.response?.meeting_id);
+  const roomUrl = meeting?.response?.host_room_url
+    ? meeting?.response?.host_room_url
+    : meeting?.response?.room_url;
+
+  const handleLeave = useCallback((event) => {
+    console.log("LEFT", event);
+  }, []);
+
+  useEffect(() => {
+    wherebyRef.current?.addEventListener("leave", handleLeave);
+
+    return () => {
+      wherebyRef.current?.removeEventListener("leave", handleLeave);
+    };
+  }, [handleLeave]);
+
+  return (
+    <>
+      {roomUrl && (
+        <whereby-embed
+          ref={wherebyRef}
+          room={roomUrl}
+          style={{ width: "100%", height: "98%" }}
+        />
+      )}
+    </>
+  );
+}

www/app/[domain]/transcripts/createTranscript.ts

@@ -9,6 +9,7 @@ type UseCreateTranscript = {
   loading: boolean;
   error: Error | null;
   create: (transcriptCreationDetails: CreateTranscript) => void;
+  createMeeting: (transcriptCreationDetails: CreateTranscript) => void;
 };
 
 const useCreateTranscript = (): UseCreateTranscript => {
@@ -39,7 +40,28 @@ const useCreateTranscript = (): UseCreateTranscript => {
       });
   };
 
-  return { transcript, loading, error, create };
+  const createMeeting = (transcriptCreationDetails: CreateTranscript) => {
+    if (loading || !api) return;
+
+    setLoading(true);
+
+    api
+      .v1TranscriptsCreateMeeting({ requestBody: transcriptCreationDetails })
+      .then((transcript) => {
+        setTranscript(transcript);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(
+          err,
+          "There was an issue creating a transcript, please try again.",
+        );
+        setErrorState(err);
+        setLoading(false);
+      });
+  };
+
+  return { transcript, loading, error, create, createMeeting };
 };
 
 export default useCreateTranscript;

www/app/[domain]/transcripts/new/page.tsx

@@ -32,6 +32,7 @@ const TranscriptCreate = () => {
 
   const [loadingRecord, setLoadingRecord] = useState(false);
   const [loadingUpload, setLoadingUpload] = useState(false);
+  const [loadingMeeting, setLoadingMeeting] = useState(false);
 
   const send = () => {
     if (loadingRecord || createTranscript.loading || permissionDenied) return;
@@ -45,8 +46,17 @@ const TranscriptCreate = () => {
     createTranscript.create({ name, target_language: targetLanguage });
   };
 
+  const startMeeting = () => {
+    if (loadingMeeting || createTranscript.loading || permissionDenied) return;
+    setLoadingMeeting(true);
+    createTranscript.createMeeting({ name, target_language: targetLanguage });
+  };
+
   useEffect(() => {
-    const action = loadingRecord ? "record" : "upload";
+    let action = "record";
+    if (loadingUpload) action = "upload";
+    if (loadingMeeting) action = "meeting";
+
     createTranscript.transcript &&
       router.push(`/transcripts/${createTranscript.transcript.id}/${action}`);
   }, [createTranscript.transcript]);
@@ -152,6 +162,16 @@ const TranscriptCreate = () => {
               >
                 {loadingUpload ? "Loading..." : "Upload File"}
               </Button>
+              <Text align="center" m="2">
+                OR
+              </Text>
+              <Button
+                colorScheme="blue"
+                onClick={startMeeting}
+                isDisabled={loadingRecord || loadingUpload || loadingMeeting}
+              >
+                {loadingUpload ? "Loading..." : "Start Whereby Meeting"}
+              </Button>
             </div>
           )}
         </section>

www/app/[domain]/transcripts/useMeeting.ts

@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react";
+import { useError } from "../../(errors)/errorContext";
+import { GetMeeting } from "../../api";
+import { shouldShowError } from "../../lib/errorUtils";
+import useApi from "../../lib/useApi";
+
+type ErrorMeeting = {
+  error: Error;
+  loading: false;
+  response: null;
+  reload: () => void;
+};
+
+type LoadingMeeting = {
+  response: null;
+  loading: true;
+  error: false;
+  reload: () => void;
+};
+
+type SuccessMeeting = {
+  response: GetMeeting;
+  loading: false;
+  error: null;
+  reload: () => void;
+};
+
+const useMeeting = (
+  id: string | null | undefined,
+): ErrorMeeting | LoadingMeeting | SuccessMeeting => {
+  const [response, setResponse] = useState<GetMeeting | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setErrorState] = useState<Error | null>(null);
+  const [reload, setReload] = useState(0);
+  const { setError } = useError();
+  const api = useApi();
+  const reloadHandler = () => setReload((prev) => prev + 1);
+
+  useEffect(() => {
+    if (!id || !api) return;
+
+    if (!response) {
+      setLoading(true);
+    }
+
+    api
+      .v1MeetingGet({ meetingId: id })
+      .then((result) => {
+        setResponse(result);
+        setLoading(false);
+        console.debug("Meeting Loaded:", result);
+      })
+      .catch((error) => {
+        const shouldShowHuman = shouldShowError(error);
+        if (shouldShowHuman) {
+          setError(error, "There was an error loading the meeting");
+        } else {
+          setError(error);
+        }
+        setErrorState(error);
+      });
+  }, [id, !api, reload]);
+
+  return { response, loading, error, reload: reloadHandler } as
+    | ErrorMeeting
+    | LoadingMeeting
+    | SuccessMeeting;
+};
+
+export default useMeeting;