fix: not able to click start recording button (#15244)

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

@@ -2,7 +2,7 @@ import { useTranscription } from "@daily-co/daily-react";
 import { useDaily, useDailyEvent } from "@daily-co/daily-react";
 import React, { Fragment, useCallback, useRef, useState, useLayoutEffect, useEffect } from "react";
 
-import { WEBAPP_URL } from "@calcom/lib/constants";
+import { TRANSCRIPTION_STARTED_ICON, TRANSCRIPTION_STOPPED_ICON } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 export const CalAiTranscribe = () => {
@@ -29,8 +29,8 @@ export const CalAiTranscribe = () => {
       transcription: {
         label: "Stop",
         tooltip: "Stop transcription",
-        iconPath: `${WEBAPP_URL}/sparkles-red.svg`,
-        iconPathDarkMode: `${WEBAPP_URL}/sparkles-red.svg`,
+        iconPath: TRANSCRIPTION_STARTED_ICON,
+        iconPathDarkMode: TRANSCRIPTION_STARTED_ICON,
       },
     });
   });
@@ -40,8 +40,8 @@ export const CalAiTranscribe = () => {
       transcription: {
         label: "Cal.ai",
         tooltip: "Transcription powered by AI",
-        iconPath: `${WEBAPP_URL}/sparkles`,
-        iconPathDarkMode: `${WEBAPP_URL}/sparkles`,
+        iconPath: TRANSCRIPTION_STOPPED_ICON,
+        iconPathDarkMode: TRANSCRIPTION_STOPPED_ICON,
       },
     });
   });
@@ -82,7 +82,7 @@ export const CalAiTranscribe = () => {
   return (
     <>
       <div
-        id="cal-ai-thing"
+        id="cal-ai-transcription"
         style={{
           textShadow: "0 0 20px black, 0 0 20px black, 0 0 20px black",
         }}

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

@@ -8,7 +8,8 @@ import { useState, useEffect, useRef } from "react";
 
 import dayjs from "@calcom/dayjs";
 import classNames from "@calcom/lib/classNames";
-import { APP_NAME, SEO_IMG_OGIMG_VIDEO, WEBSITE_URL, WEBAPP_URL } from "@calcom/lib/constants";
+import { APP_NAME, SEO_IMG_OGIMG_VIDEO, WEBSITE_URL } from "@calcom/lib/constants";
+import { TRANSCRIPTION_STOPPED_ICON } from "@calcom/lib/constants";
 import { formatToLocalizedDate, formatToLocalizedTime } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
@@ -52,8 +53,8 @@ export default function JoinCall(props: PageProps) {
           transcription: {
             label: "Cal.ai",
             tooltip: "Transcription powered by AI",
-            iconPath: `${WEBAPP_URL}/sparkles.svg`,
-            iconPathDarkMode: `${WEBAPP_URL}/sparkles.svg`,
+            iconPath: TRANSCRIPTION_STOPPED_ICON,
+            iconPathDarkMode: TRANSCRIPTION_STOPPED_ICON,
           },
         },
       }),
@@ -87,7 +88,7 @@ export default function JoinCall(props: PageProps) {
         <meta property="twitter:description" content={t("quick_video_meeting")} />
       </Head>
       <DailyProvider callObject={daily}>
-        <div className="mx-auto" style={{ zIndex: 2, position: "absolute", bottom: 60, width: "100%" }}>
+        <div className="mx-auto" style={{ zIndex: 2, position: "absolute", bottom: 100, width: "100%" }}>
           <CalAiTranscribe />
         </div>
         <div style={{ zIndex: 2, position: "relative" }}>

packages/lib/constants.ts

@@ -157,3 +157,11 @@ export const ORG_MINIMUM_PUBLISHED_TEAMS_SELF_SERVE = 2;
  * Counter start from current day and we would like to not go beyond 2 months(max days possible) from current day.
  */
 export const ROLLING_WINDOW_PERIOD_MAX_DAYS_TO_CHECK = 30 + 31;
+
+export const TRANSCRIPTION_STARTED_ICON = IS_PRODUCTION
+  ? `${WEBAPP_URL}/sparkles-red.svg`
+  : `https://app.cal.com/sparkles-red.svg`;
+
+export const TRANSCRIPTION_STOPPED_ICON = IS_PRODUCTION
+  ? `${WEBAPP_URL}/sparkles.svg`
+  : `https://app.cal.com/sparkles.svg`;