better mp3 absense handling on transcription page

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

@@ -54,15 +54,6 @@ 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..."} />;
   }
@@ -87,7 +78,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
         mt={4}
         mb={4}
       >
-        {waveform.waveform && mp3.media && topics.topics ? (
+        {waveform.waveform && mp3.media && !mp3.audioDeleted && topics.topics ? (
           <Player
             topics={topics?.topics}
             useActiveTopic={useActiveTopic}
@@ -97,6 +88,8 @@ export default function TranscriptDetails(details: TranscriptDetails) {
           />
         ) : waveform.error ? (
           <div>"error loading this recording"</div>
+        ) : mp3.audioDeleted ? (
+          <div>Audio was deleted</div>
         ) : (
           <Skeleton h={14} />
         )}

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

@@ -8,7 +8,6 @@ import "../../../../styles/button.css";
 import { Topic } from "../../webSocketTypes";
 import { lockWakeState, releaseWakeState } from "../../../../lib/wakeLock";
 import { useRouter } from "next/navigation";
-import Player from "../../player";
 import useMp3 from "../../useMp3";
 import WaveformLoading from "../../waveformLoading";
 import { Box, Text, Grid, Heading, VStack, Flex } from "@chakra-ui/react";

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

@@ -47,9 +47,11 @@ const useMp3 = (transcriptId: string, waiting?: boolean): Mp3Response => {
     });
   }, [navigator.serviceWorker, !serviceWorker, accessTokenInfo]);
 
+
   useEffect(() => {
     if (!transcriptId || !api || later) return;
 
+    let deleted: boolean | null = null;
 
     setTranscriptMetadataLoading(true);
     
@@ -59,12 +61,20 @@ const useMp3 = (transcriptId: string, waiting?: boolean): Mp3Response => {
     audioElement.preload = "auto";
     
     const handleCanPlay = () => {
+      if (deleted) {
+        console.error('Illegal state: audio supposed to be deleted, but was loaded');
+        return;
+      }
       setAudioLoading(false);
       setAudioLoadingError(null);
     };
     
     const handleError = () => {
       setAudioLoading(false);
+      if (deleted) {
+        // we arrived here earlier, ignore
+        return;
+      }
       setAudioLoadingError("Failed to load audio");
     };
     
@@ -81,8 +91,14 @@ const useMp3 = (transcriptId: string, waiting?: boolean): Mp3Response => {
     api.v1TranscriptGet({ transcriptId })
       .then((transcript) => {
         if (stopped) return;
-        setAudioDeleted(transcript.audio_deleted || false);
+        deleted = transcript.audio_deleted || false;
+        setAudioDeleted(deleted);
         setTranscriptMetadataLoadingError(null);
+        if (deleted) {
+          setMedia(null);
+          setAudioLoadingError(null);
+        }
+        // if deleted, media will or already returned error
       })
       .catch((error) => {
         if (stopped) return;