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();