update audio-deleted flow

www/app/(app)/transcripts/[transcriptId]/correct/topicPlayer.tsx

@@ -183,7 +183,18 @@ const TopicPlayer = ({
     setIsPlaying(false);
   };
 
-  const isLoaded = !!(mp3.media && topicTime);
+  const isLoaded = !!(mp3.loading && topicTime);
+  const error = mp3.error;
+  if (error !== null) {
+    return <Text fontSize="sm" pt="1" pl="2">
+      Loading error: {error}
+    </Text>
+  }
+  if (mp3.audioDeleted) {
+    return <Text fontSize="sm" pt="1" pl="2">
+      This topic file has been deleted.
+    </Text>
+  }
   return (
     <Skeleton
       isLoaded={isLoaded}

www/app/(app)/transcripts/[transcriptId]/page.tsx

@@ -54,10 +54,30 @@ export default function TranscriptDetails(details: TranscriptDetails) {
     );
   }
 
+  if (mp3.audioDeleted) {
+    return (
+      <Modal
+        title="Can't find transcription: Transcription file is deleted"
+        text={`The recording is deleted.`}
+      />
+    );
+  }
+
   if (transcript?.loading || topics?.loading) {
     return <Modal title="Loading" text={"Loading transcript..."} />;
   }
 
+  if (mp3.error) {
+    return (
+      <Modal
+        title="Transcription error"
+        text={`There was an error loading the recording. Error: ${mp3.error}`}
+      />
+    );
+  }
+
+
+
   return (
     <>
       <Grid

www/app/(app)/transcripts/[transcriptId]/record/page.tsx

@@ -27,7 +27,7 @@ const TranscriptRecord = (details: TranscriptDetails) => {
 
   const webSockets = useWebSockets(details.params.transcriptId);
 
-  let mp3 = useMp3(details.params.transcriptId, true);
+  const mp3 = useMp3(details.params.transcriptId, true);
 
   const router = useRouter();
 

www/app/(app)/transcripts/[transcriptId]/upload/page.tsx

@@ -21,7 +21,7 @@ const TranscriptUpload = (details: TranscriptUpload) => {
 
   const webSockets = useWebSockets(details.params.transcriptId);
 
-  let mp3 = useMp3(details.params.transcriptId, true);
+  const mp3 = useMp3(details.params.transcriptId, true);
 
   const router = useRouter();
 

www/app/(app)/transcripts/useMp3.ts

@@ -5,13 +5,19 @@ import getApi from "../../lib/useApi";
 export type Mp3Response = {
   media: HTMLMediaElement | null;
   loading: boolean;
+  error: string | null;
   getNow: () => void;
+  audioDeleted: boolean | null;
 };
 
-const useMp3 = (id: string, waiting?: boolean): Mp3Response => {
+const useMp3 = (transcriptId: string, waiting?: boolean): Mp3Response => {
   const [media, setMedia] = useState<HTMLMediaElement | null>(null);
   const [later, setLater] = useState(waiting);
-  const [loading, setLoading] = useState<boolean>(false);
+  const [audioLoading, setAudioLoading] = useState<boolean>(true);
+  const [audioLoadingError, setAudioLoadingError] = useState<null | string>(null);
+  const [transcriptMetadataLoading, setTranscriptMetadataLoading] = useState<boolean>(true);
+  const [transcriptMetadataLoadingError, setTranscriptMetadataLoadingError] = useState<string | null>(null);
+  const [audioDeleted, setAudioDeleted] = useState<boolean | null>(null);
   const api = getApi();
   const { api_url } = useContext(DomainContext);
   const accessTokenInfo = api?.httpRequest?.config?.TOKEN;
@@ -42,23 +48,69 @@ const useMp3 = (id: string, waiting?: boolean): Mp3Response => {
   }, [navigator.serviceWorker, !serviceWorker, accessTokenInfo]);
 
   useEffect(() => {
-    if (!id || !api || later) return;
+    if (!transcriptId || !api || later) return;
 
-    // createa a audio element and set the source
-    setLoading(true);
+
+    setTranscriptMetadataLoading(true);
+    
     const audioElement = document.createElement("audio");
-    audioElement.src = `${api_url}/v1/transcripts/${id}/audio/mp3`;
+    audioElement.src = `${api_url}/v1/transcripts/${transcriptId}/audio/mp3`;
     audioElement.crossOrigin = "anonymous";
     audioElement.preload = "auto";
+    
+    const handleCanPlay = () => {
+      setAudioLoading(false);
+      setAudioLoadingError(null);
+    };
+    
+    const handleError = () => {
+      setAudioLoading(false);
+      setAudioLoadingError("Failed to load audio");
+    };
+    
+    audioElement.addEventListener('canplay', handleCanPlay);
+    audioElement.addEventListener('error', handleError);
+    
     setMedia(audioElement);
-    setLoading(false);
-  }, [id, !api, later]);
+
+
+    setAudioLoading(true);
+
+    let stopped = false;
+    // Fetch transcript info in parallel
+    api.v1TranscriptGet({ transcriptId })
+      .then((transcript) => {
+        if (stopped) return;
+        setAudioDeleted(transcript.audio_deleted || false);
+        setTranscriptMetadataLoadingError(null);
+      })
+      .catch((error) => {
+        if (stopped) return;
+        console.error("Failed to fetch transcript:", error);
+        setAudioDeleted(null);
+        setTranscriptMetadataLoadingError(error.message);
+      })
+      .finally(() => {
+        if (stopped) return;
+        setTranscriptMetadataLoading(false);
+      })
+    
+    // Cleanup
+    return () => {
+      stopped = true;
+      audioElement.removeEventListener('canplay', handleCanPlay);
+      audioElement.removeEventListener('error', handleError);
+    };
+  }, [transcriptId, !api, later, api_url]);
 
   const getNow = () => {
     setLater(false);
   };
 
-  return { media, loading, getNow };
+  const loading = audioLoading || transcriptMetadataLoading;
+  const error = audioLoadingError || transcriptMetadataLoadingError;
+
+  return { media, loading, error, getNow, audioDeleted };
 };
 
 export default useMp3;

www/app/[roomName]/page.tsx

@@ -2,12 +2,11 @@
 
 import "@whereby.com/browser-sdk/embed";
 import { useCallback, useEffect, useRef, useState, useContext } from "react";
-import { Box, Button, Text, VStack, HStack, Spinner } from "@chakra-ui/react";
+import { Box, Button, Text, VStack, HStack, Spinner, useToast } from "@chakra-ui/react";
 import useRoomMeeting from "./useRoomMeeting";
 import { useRouter } from "next/navigation";
 import { notFound } from "next/navigation";
 import useSessionStatus from "../lib/useSessionStatus";
-import AudioConsentDialog from "../(app)/rooms/audioConsentDialog";
 import { DomainContext } from "../domainContext";
 import { useRecordingConsent } from "../recordingConsentContext";
 import useSessionAccessToken from "../lib/useSessionAccessToken";
@@ -26,13 +25,13 @@ export default function Room(details: RoomDetails) {
   const meeting = useRoomMeeting(roomName);
   const router = useRouter();
   const { isLoading, isAuthenticated } = useSessionStatus();
-  const [showConsentDialog, setShowConsentDialog] = useState(false);
   const [consentLoading, setConsentLoading] = useState(false);
   const { state: consentState, touch, hasConsent } = useRecordingConsent();
   const { api_url } = useContext(DomainContext);
   const { accessToken } = useSessionAccessToken();
   const { id: userId } = useSessionUser();
   const api = useApi();
+  const toast = useToast();
 
 
   const roomUrl = meeting?.response?.host_room_url
@@ -45,10 +44,10 @@ export default function Room(details: RoomDetails) {
     router.push("/browse");
   }, [router]);
 
-  const handleConsent = useCallback(async (meetingId: string, given: boolean) => {
+  const handleConsent = useCallback(async (meetingId: string, given: boolean, onClose?: () => void) => {
     if (!api) return;
 
-    setShowConsentDialog(false);
+    if (onClose) onClose();
     setConsentLoading(true);
 
     try {
@@ -77,18 +76,49 @@ export default function Room(details: RoomDetails) {
     }
   }, [isLoading, meeting?.error]);
 
-  // Show consent dialog when meeting is loaded and consent hasn't been answered yet
+  // Show consent toast when meeting is loaded and consent hasn't been answered yet
   useEffect(() => {
     if (
       consentState.ready &&
       meetingId &&
       !hasConsent(meetingId) &&
-      !showConsentDialog &&
       !consentLoading
     ) {
-      setShowConsentDialog(true);
+      const toastId = toast({
+        position: "top",
+        duration: null,
+        render: ({ onClose }) => (
+          <Box p={4} bg="white" borderRadius="md" boxShadow="md">
+            <VStack spacing={3} align="stretch">
+              <Text>
+                Can we have your permission to store this meeting's audio recording on our servers?
+              </Text>
+              <HStack spacing={4} justify="center">
+                <Button 
+                  colorScheme="green" 
+                  size="sm"
+                  onClick={() => handleConsent(meetingId, true, onClose)}
+                >
+                  Yes, store the audio
+                </Button>
+                <Button 
+                  colorScheme="red" 
+                  size="sm"
+                  onClick={() => handleConsent(meetingId, false, onClose)}
+                >
+                  No, delete after transcription
+                </Button>
+              </HStack>
+            </VStack>
+          </Box>
+        ),
+      });
+
+      return () => {
+        toast.close(toastId);
+      };
     }
-  }, [consentState.ready, meetingId, hasConsent, showConsentDialog, consentLoading]);
+  }, [consentState.ready, meetingId, hasConsent, consentLoading, toast, handleConsent]);
 
   useEffect(() => {
     if (isLoading || !isAuthenticated || !roomUrl) return;
@@ -131,13 +161,6 @@ export default function Room(details: RoomDetails) {
           style={{ width: "100vw", height: "100vh" }}
         />
       )}
-      {meetingId && consentState.ready && !hasConsent(meetingId) && !consentLoading && (
-        <AudioConsentDialog
-          isOpen={showConsentDialog}
-          onClose={() => {}} // No-op: ESC should not close without consent
-          onConsent={b => handleConsent(meetingId, b)}
-        />
-      )}
     </>
   );
 }

www/app/api/schemas.gen.ts

@@ -293,6 +293,17 @@ export const $GetTranscript = {
       ],
       title: "Room Name",
     },
+    audio_deleted: {
+      anyOf: [
+        {
+          type: "boolean",
+        },
+        {
+          type: "null",
+        },
+      ],
+      title: "Audio Deleted",
+    },
   },
   type: "object",
   required: [
@@ -1109,6 +1120,17 @@ export const $UpdateTranscript = {
       ],
       title: "Reviewed",
     },
+    audio_deleted: {
+      anyOf: [
+        {
+          type: "boolean",
+        },
+        {
+          type: "null",
+        },
+      ],
+      title: "Audio Deleted",
+    },
   },
   type: "object",
   title: "UpdateTranscript",

www/app/api/types.gen.ts

@@ -56,6 +56,7 @@ export type GetTranscript = {
   source_kind: SourceKind;
   room_id?: string | null;
   room_name?: string | null;
+  audio_deleted?: boolean | null;
 };
 
 export type GetTranscriptSegmentTopic = {
@@ -219,6 +220,7 @@ export type UpdateTranscript = {
   share_mode?: "public" | "semi-private" | "private" | null;
   participants?: Array<TranscriptParticipant> | null;
   reviewed?: boolean | null;
+  audio_deleted?: boolean | null;
 };
 
 export type UserInfo = {