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;

www/app/api/schemas.gen.ts

@@ -87,6 +87,52 @@ export const $DeletionStatus = {
   title: "DeletionStatus",
 } as const;
 
+export const $GetMeeting = {
+  properties: {
+    id: {
+      type: "string",
+      title: "Id",
+    },
+    room_name: {
+      type: "string",
+      title: "Room Name",
+    },
+    room_url: {
+      type: "string",
+      title: "Room Url",
+    },
+    host_room_url: {
+      type: "string",
+      title: "Host Room Url",
+    },
+    viewer_room_url: {
+      type: "string",
+      title: "Viewer Room Url",
+    },
+    start_date: {
+      type: "string",
+      format: "date-time",
+      title: "Start Date",
+    },
+    end_date: {
+      type: "string",
+      format: "date-time",
+      title: "End Date",
+    },
+  },
+  type: "object",
+  required: [
+    "id",
+    "room_name",
+    "room_url",
+    "host_room_url",
+    "viewer_room_url",
+    "start_date",
+    "end_date",
+  ],
+  title: "GetMeeting",
+} as const;
+
 export const $GetTranscript = {
   properties: {
     id: {
@@ -203,6 +249,17 @@ export const $GetTranscript = {
       type: "boolean",
       title: "Reviewed",
     },
+    meeting_id: {
+      anyOf: [
+        {
+          type: "string",
+        },
+        {
+          type: "null",
+        },
+      ],
+      title: "Meeting Id",
+    },
   },
   type: "object",
   required: [
@@ -220,6 +277,7 @@ export const $GetTranscript = {
     "target_language",
     "participants",
     "reviewed",
+    "meeting_id",
   ],
   title: "GetTranscript",
 } as const;

www/app/api/services.gen.ts

@@ -4,10 +4,14 @@ import type { CancelablePromise } from "./core/CancelablePromise";
 import type { BaseHttpRequest } from "./core/BaseHttpRequest";
 import type {
   MetricsResponse,
+  V1MeetingGetData,
+  V1MeetingGetResponse,
   V1TranscriptsListData,
   V1TranscriptsListResponse,
   V1TranscriptsCreateData,
   V1TranscriptsCreateResponse,
+  V1TranscriptsCreateMeetingData,
+  V1TranscriptsCreateMeetingResponse,
   V1TranscriptGetData,
   V1TranscriptGetResponse,
   V1TranscriptUpdateData,
@@ -67,6 +71,28 @@ export class DefaultService {
     });
   }
 
+  /**
+   * Meeting Get
+   * @param data The data for the request.
+   * @param data.meetingId
+   * @returns GetMeeting Successful Response
+   * @throws ApiError
+   */
+  public v1MeetingGet(
+    data: V1MeetingGetData,
+  ): CancelablePromise<V1MeetingGetResponse> {
+    return this.httpRequest.request({
+      method: "GET",
+      url: "/v1/meetings/{meeting_id}",
+      path: {
+        meeting_id: data.meetingId,
+      },
+      errors: {
+        422: "Validation Error",
+      },
+    });
+  }
+
   /**
    * Transcripts List
    * @param data The data for the request.
@@ -112,6 +138,27 @@ export class DefaultService {
     });
   }
 
+  /**
+   * Transcripts Create Meeting
+   * @param data The data for the request.
+   * @param data.requestBody
+   * @returns GetTranscript Successful Response
+   * @throws ApiError
+   */
+  public v1TranscriptsCreateMeeting(
+    data: V1TranscriptsCreateMeetingData,
+  ): CancelablePromise<V1TranscriptsCreateMeetingResponse> {
+    return this.httpRequest.request({
+      method: "POST",
+      url: "/v1/transcripts/meeting",
+      body: data.requestBody,
+      mediaType: "application/json",
+      errors: {
+        422: "Validation Error",
+      },
+    });
+  }
+
   /**
    * Transcript Get
    * @param data The data for the request.

www/app/api/types.gen.ts

@@ -24,6 +24,16 @@ export type DeletionStatus = {
   status: string;
 };
 
+export type GetMeeting = {
+  id: string;
+  room_name: string;
+  room_url: string;
+  host_room_url: string;
+  viewer_room_url: string;
+  start_date: string;
+  end_date: string;
+};
+
 export type GetTranscript = {
   id: string;
   user_id: string | null;
@@ -40,6 +50,7 @@ export type GetTranscript = {
   target_language: string | null;
   participants: Array<TranscriptParticipant> | null;
   reviewed: boolean;
+  meeting_id: string | null;
 };
 
 export type GetTranscriptSegmentTopic = {
@@ -167,6 +178,12 @@ export type Word = {
 
 export type MetricsResponse = unknown;
 
+export type V1MeetingGetData = {
+  meetingId: string;
+};
+
+export type V1MeetingGetResponse = GetMeeting;
+
 export type V1TranscriptsListData = {
   /**
    * Page number
@@ -186,6 +203,12 @@ export type V1TranscriptsCreateData = {
 
 export type V1TranscriptsCreateResponse = GetTranscript;
 
+export type V1TranscriptsCreateMeetingData = {
+  requestBody: CreateTranscript;
+};
+
+export type V1TranscriptsCreateMeetingResponse = GetTranscript;
+
 export type V1TranscriptGetData = {
   transcriptId: string;
 };
@@ -336,6 +359,21 @@ export type $OpenApiTs = {
       };
     };
   };
+  "/v1/meetings/{meeting_id}": {
+    get: {
+      req: V1MeetingGetData;
+      res: {
+        /**
+         * Successful Response
+         */
+        200: GetMeeting;
+        /**
+         * Validation Error
+         */
+        422: HTTPValidationError;
+      };
+    };
+  };
   "/v1/transcripts": {
     get: {
       req: V1TranscriptsListData;
@@ -364,6 +402,21 @@ export type $OpenApiTs = {
       };
     };
   };
+  "/v1/transcripts/meeting": {
+    post: {
+      req: V1TranscriptsCreateMeetingData;
+      res: {
+        /**
+         * Successful Response
+         */
+        200: GetTranscript;
+        /**
+         * Validation Error
+         */
+        422: HTTPValidationError;
+      };
+    };
+  };
   "/v1/transcripts/{transcript_id}": {
     get: {
       req: V1TranscriptGetData;

www/app/providers.tsx

@@ -3,6 +3,12 @@
 import { ChakraProvider } from "@chakra-ui/react";
 import theme from "./styles/theme";
 
+import { WherebyProvider } from "@whereby.com/browser-sdk/react";
+
 export function Providers({ children }: { children: React.ReactNode }) {
-  return <ChakraProvider theme={theme}>{children}</ChakraProvider>;
+  return (
+    <ChakraProvider theme={theme}>
+      <WherebyProvider>{children}</WherebyProvider>
+    </ChakraProvider>
+  );
 }