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;