fix: recording button bug (#21609)

* fix: recording btn visible bug

* fix: check for showRecordingButton

* refactor: create a reusable function

apps/web/modules/videos/ai/ai-transcribe.tsx

@@ -61,7 +61,16 @@ const BUTTONS = {
   },
 };
 
-export const CalAiTranscribe = () => {
+export type DailyCustomTrayButtonVisualState = "default" | "sidebar-open" | "active";
+
+export interface DailyCustomTrayButton {
+  iconPath: string;
+  iconPathDarkMode?: string;
+  label: string;
+  tooltip: string;
+  visualState?: DailyCustomTrayButtonVisualState;
+}
+export const CalAiTranscribe = ({ showRecordingButton }: { showRecordingButton: boolean }) => {
   const daily = useDaily();
   const { t } = useLocale();
 
@@ -73,6 +82,23 @@ export const CalAiTranscribe = () => {
   const transcription = useTranscription();
   const recording = useRecording();
 
+  const updateCustomTrayButtons = ({
+    recording,
+    transcription,
+  }: {
+    recording: DailyCustomTrayButton;
+    transcription: DailyCustomTrayButton;
+  }) => {
+    daily?.updateCustomTrayButtons({
+      ...(showRecordingButton
+        ? {
+            recording,
+          }
+        : {}),
+      transcription,
+    });
+  };
+
   useDailyEvent(
     "app-message",
     useCallback((ev) => {
@@ -82,28 +108,28 @@ export const CalAiTranscribe = () => {
   );
 
   useDailyEvent("transcription-started", (ev) => {
-    daily?.updateCustomTrayButtons({
+    updateCustomTrayButtons({
       recording: recording?.isRecording ? BUTTONS.STOP_RECORDING : BUTTONS.START_RECORDING,
       transcription: BUTTONS.STOP_TRANSCRIPTION,
     });
   });
 
   useDailyEvent("recording-started", (ev) => {
-    daily?.updateCustomTrayButtons({
+    updateCustomTrayButtons({
       recording: BUTTONS.STOP_RECORDING,
       transcription: transcription?.isTranscribing ? BUTTONS.STOP_TRANSCRIPTION : BUTTONS.START_TRANSCRIPTION,
     });
   });
 
   useDailyEvent("transcription-stopped", (ev) => {
-    daily?.updateCustomTrayButtons({
+    updateCustomTrayButtons({
       recording: recording?.isRecording ? BUTTONS.STOP_RECORDING : BUTTONS.START_RECORDING,
       transcription: BUTTONS.START_TRANSCRIPTION,
     });
   });
 
   useDailyEvent("recording-stopped", (ev) => {
-    daily?.updateCustomTrayButtons({
+    updateCustomTrayButtons({
       recording: BUTTONS.START_RECORDING,
       transcription: transcription?.isTranscribing ? BUTTONS.STOP_TRANSCRIPTION : BUTTONS.START_TRANSCRIPTION,
     });
@@ -111,7 +137,7 @@ export const CalAiTranscribe = () => {
 
   const toggleRecording = async () => {
     if (recording?.isRecording) {
-      daily?.updateCustomTrayButtons({
+      updateCustomTrayButtons({
         recording: BUTTONS.WAIT_FOR_RECORDING_TO_STOP,
         transcription: transcription?.isTranscribing
           ? BUTTONS.STOP_TRANSCRIPTION
@@ -119,7 +145,7 @@ export const CalAiTranscribe = () => {
       });
       await daily?.stopRecording();
     } else {
-      daily?.updateCustomTrayButtons({
+      updateCustomTrayButtons({
         recording: BUTTONS.WAIT_FOR_RECORDING_TO_START,
         transcription: transcription?.isTranscribing
           ? BUTTONS.STOP_TRANSCRIPTION
@@ -135,16 +161,17 @@ export const CalAiTranscribe = () => {
 
   const toggleTranscription = async () => {
     if (transcription?.isTranscribing) {
-      daily?.updateCustomTrayButtons({
+      updateCustomTrayButtons({
         recording: recording?.isRecording ? BUTTONS.STOP_RECORDING : BUTTONS.START_RECORDING,
         transcription: BUTTONS.WAIT_FOR_TRANSCRIPTION_TO_STOP,
       });
       daily?.stopTranscription();
     } else {
-      daily?.updateCustomTrayButtons({
+      updateCustomTrayButtons({
         recording: recording?.isRecording ? BUTTONS.STOP_RECORDING : BUTTONS.START_RECORDING,
         transcription: BUTTONS.WAIT_FOR_TRANSCRIPTION_TO_START,
       });
+
       daily?.startTranscription();
     }
   };

apps/web/modules/videos/views/videos-single-view.tsx

@@ -106,7 +106,7 @@ export default function JoinCall(props: PageProps) {
       <div
         className="mx-auto hidden sm:block"
         style={{ zIndex: 2, left: "30%", position: "absolute", bottom: 100, width: "auto" }}>
-        <CalAiTranscribe />
+        <CalAiTranscribe showRecordingButton={showRecordingButton} />
       </div>
       <div style={{ zIndex: 2, position: "relative" }}>
         {calVideoLogo ? (