From a51524e673ab3624995bbc96e3f9963e6c2aa727 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Sun, 18 Aug 2024 14:39:27 +0530
Subject: [PATCH] fix: cal video bug fix and improvements (#16234)

---
 apps/web/modules/videos/ai/ai-transcribe.tsx | 72 ++++++++++++++------
 1 file changed, 51 insertions(+), 21 deletions(-)

diff --git a/apps/web/modules/videos/ai/ai-transcribe.tsx b/apps/web/modules/videos/ai/ai-transcribe.tsx
index 380f7d3c54..5ffc6aa124 100644
--- a/apps/web/modules/videos/ai/ai-transcribe.tsx
+++ b/apps/web/modules/videos/ai/ai-transcribe.tsx
@@ -23,6 +23,18 @@ const BUTTONS = {
     iconPath: TRANSCRIPTION_STOPPED_ICON,
     iconPathDarkMode: TRANSCRIPTION_STOPPED_ICON,
   },
+  WAIT_FOR_TRANSCRIPTION_TO_START: {
+    label: "Starting..",
+    tooltip: "Please wait while we start transcription",
+    iconPath: TRANSCRIPTION_STOPPED_ICON,
+    iconPathDarkMode: TRANSCRIPTION_STOPPED_ICON,
+  },
+  WAIT_FOR_TRANSCRIPTION_TO_STOP: {
+    label: "Stopping..",
+    tooltip: "Please wait while we stop transcription",
+    iconPath: TRANSCRIPTION_STOPPED_ICON,
+    iconPathDarkMode: TRANSCRIPTION_STOPPED_ICON,
+  },
   START_RECORDING: {
     label: "Record",
     tooltip: "Start recording",
@@ -35,6 +47,12 @@ const BUTTONS = {
     iconPath: RECORDING_DEFAULT_ICON,
     iconPathDarkMode: RECORDING_DEFAULT_ICON,
   },
+  WAIT_FOR_RECORDING_TO_STOP: {
+    label: "Stopping..",
+    tooltip: "Please wait while we stop recording",
+    iconPath: RECORDING_DEFAULT_ICON,
+    iconPathDarkMode: RECORDING_DEFAULT_ICON,
+  },
   STOP_RECORDING: {
     label: "Stop",
     tooltip: "Stop recording",
@@ -93,6 +111,12 @@ export const CalAiTranscribe = () => {
 
   const toggleRecording = async () => {
     if (recording?.isRecording) {
+      daily?.updateCustomTrayButtons({
+        recording: BUTTONS.WAIT_FOR_RECORDING_TO_STOP,
+        transcription: transcription?.isTranscribing
+          ? BUTTONS.STOP_TRANSCRIPTION
+          : BUTTONS.START_TRANSCRIPTION,
+      });
       await daily?.stopRecording();
     } else {
       daily?.updateCustomTrayButtons({
@@ -111,8 +135,16 @@ export const CalAiTranscribe = () => {
 
   const toggleTranscription = async () => {
     if (transcription?.isTranscribing) {
+      daily?.updateCustomTrayButtons({
+        recording: recording?.isRecording ? BUTTONS.STOP_RECORDING : BUTTONS.START_RECORDING,
+        transcription: BUTTONS.WAIT_FOR_TRANSCRIPTION_TO_STOP,
+      });
       daily?.stopTranscription();
     } else {
+      daily?.updateCustomTrayButtons({
+        recording: recording?.isRecording ? BUTTONS.STOP_RECORDING : BUTTONS.START_RECORDING,
+        transcription: BUTTONS.WAIT_FOR_TRANSCRIPTION_TO_START,
+      });
       daily?.startTranscription();
     }
   };
@@ -146,25 +178,23 @@ export const CalAiTranscribe = () => {
     });
   }, [transcriptHeight]);
 
-  return (
-    <>
-      <div
-        id="cal-ai-transcription"
-        style={{
-          textShadow: "0 0 20px black, 0 0 20px black, 0 0 20px black",
-          backgroundColor: "rgba(0,0,0,0.6)",
-        }}
-        ref={transcriptRef}
-        className="flex max-h-full justify-center overflow-x-hidden overflow-y-scroll p-2 text-center text-white">
-        {transcript
-          ? transcript.split("\n").map((line, i) => (
-              <Fragment key={`transcript-${i}`}>
-                {i > 0 && <br />}
-                {line}
-              </Fragment>
-            ))
-          : ""}
-      </div>
-    </>
-  );
+  return transcript ? (
+    <div
+      id="cal-ai-transcription"
+      style={{
+        textShadow: "0 0 20px black, 0 0 20px black, 0 0 20px black",
+        backgroundColor: "rgba(0,0,0,0.6)",
+      }}
+      ref={transcriptRef}
+      className="flex max-h-full justify-center overflow-x-hidden overflow-y-scroll p-2 text-center text-white">
+      {transcript
+        ? transcript.split("\n").map((line, i) => (
+            <Fragment key={`transcript-${i}`}>
+              {i > 0 && <br />}
+              {line}
+            </Fragment>
+          ))
+        : ""}
+    </div>
+  ) : null;
 };