From 0eb670ca196316f4bf2778647fc5518ec27b565a Mon Sep 17 00:00:00 2001
From: Mathieu Virbel <mat@meltingrocks.com>
Date: Thu, 17 Jul 2025 10:04:59 -0600
Subject: [PATCH] fix: don't attempt to load waveform/mp3 if audio was deleted
 (#495)

---
 .../(app)/transcripts/[transcriptId]/page.tsx | 77 ++++++++--------
 www/app/(app)/transcripts/topicList.tsx       | 10 ++-
 www/app/(app)/transcripts/useMp3.ts           | 87 ++++++++++---------
 www/app/(app)/transcripts/useWaveform.ts      | 21 ++---
 4 files changed, 107 insertions(+), 88 deletions(-)

diff --git a/www/app/(app)/transcripts/[transcriptId]/page.tsx b/www/app/(app)/transcripts/[transcriptId]/page.tsx
index f2716178..dddd1470 100644
--- a/www/app/(app)/transcripts/[transcriptId]/page.tsx
+++ b/www/app/(app)/transcripts/[transcriptId]/page.tsx
@@ -12,7 +12,7 @@ import FinalSummary from "./finalSummary";
 import TranscriptTitle from "../transcriptTitle";
 import Player from "../player";
 import { useRouter } from "next/navigation";
-import { Flex, Grid, GridItem, Skeleton, Text } from "@chakra-ui/react";
+import { Box, Flex, Grid, GridItem, Skeleton, Text } from "@chakra-ui/react";
 
 type TranscriptDetails = {
   params: {
@@ -29,10 +29,13 @@ export default function TranscriptDetails(details: TranscriptDetails) {
   const transcriptStatus = transcript.response?.status;
   const waiting = statusToRedirect.includes(transcriptStatus || "");
 
-  const topics = useTopics(transcriptId);
-  const waveform = useWaveform(transcriptId, waiting);
-  const useActiveTopic = useState<Topic | null>(null);
   const mp3 = useMp3(transcriptId, waiting);
+  const topics = useTopics(transcriptId);
+  const waveform = useWaveform(
+    transcriptId,
+    waiting || mp3.loading || mp3.audioDeleted === true,
+  );
+  const useActiveTopic = useState<Topic | null>(null);
 
   useEffect(() => {
     if (waiting) {
@@ -76,23 +79,24 @@ export default function TranscriptDetails(details: TranscriptDetails) {
         mt={4}
         mb={4}
       >
-        {waveform.waveform &&
-        mp3.media &&
-        !mp3.audioDeleted &&
-        topics.topics ? (
-          <Player
-            topics={topics?.topics}
-            useActiveTopic={useActiveTopic}
-            waveform={waveform.waveform}
-            media={mp3.media}
-            mediaDuration={transcript.response.duration}
-          />
-        ) : waveform.error ? (
-          <div>error loading this recording</div>
-        ) : mp3.audioDeleted ? (
-          <div>Audio was deleted</div>
-        ) : (
-          <Skeleton h={14} />
+        {!mp3.audioDeleted && (
+          <>
+            {waveform.waveform && mp3.media && topics.topics ? (
+              <Player
+                topics={topics?.topics}
+                useActiveTopic={useActiveTopic}
+                waveform={waveform.waveform}
+                media={mp3.media}
+                mediaDuration={transcript.response.duration}
+              />
+            ) : !mp3.loading && (waveform.error || mp3.error) ? (
+              <Box p={4} bg="red.100" borderRadius="md">
+                <Text>Error loading this recording</Text>
+              </Box>
+            ) : (
+              <Skeleton h={14} />
+            )}
+          </>
         )}
         <Grid
           templateColumns={{ base: "minmax(0, 1fr)", md: "repeat(2, 1fr)" }}
@@ -108,19 +112,24 @@ export default function TranscriptDetails(details: TranscriptDetails) {
           borderColor={"gray.bg"}
           borderRadius={8}
         >
-          <GridItem
-            display="flex"
-            flexDir="row"
-            alignItems={"center"}
-            colSpan={{ base: 1, md: 2 }}
-          >
-            <TranscriptTitle
-              title={transcript.response.title || "Unnamed Transcript"}
-              transcriptId={transcriptId}
-              onUpdate={(newTitle) => {
-                transcript.reload();
-              }}
-            />
+          <GridItem colSpan={{ base: 1, md: 2 }}>
+            <Flex direction="column" gap={0}>
+              <Flex alignItems="center" gap={2}>
+                <TranscriptTitle
+                  title={transcript.response.title || "Unnamed Transcript"}
+                  transcriptId={transcriptId}
+                  onUpdate={(newTitle) => {
+                    transcript.reload();
+                  }}
+                />
+              </Flex>
+              {mp3.audioDeleted && (
+                <Text fontSize="xs" color="gray.600" fontStyle="italic">
+                  No audio is available because one or more participants didn't
+                  consent to keep the audio
+                </Text>
+              )}
+            </Flex>
           </GridItem>
           <TopicList
             topics={topics.topics || []}
diff --git a/www/app/(app)/transcripts/topicList.tsx b/www/app/(app)/transcripts/topicList.tsx
index e3c88ba3..5a29cccd 100644
--- a/www/app/(app)/transcripts/topicList.tsx
+++ b/www/app/(app)/transcripts/topicList.tsx
@@ -55,8 +55,8 @@ export function TopicList({
   };
 
   useEffect(() => {
-    if (activeTopic) scrollToTopic();
-  }, [activeTopic]);
+    if (activeTopic && autoscroll) scrollToTopic();
+  }, [activeTopic, autoscroll]);
 
   // scroll top is not rounded, heights are, so exact match won't work.
   // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
@@ -105,8 +105,10 @@ export function TopicList({
   const requireLogin = featureEnabled("requireLogin");
 
   useEffect(() => {
-    setActiveTopic(topics[topics.length - 1]);
-  }, [topics]);
+    if (autoscroll) {
+      setActiveTopic(topics[topics.length - 1]);
+    }
+  }, [topics, autoscroll]);
 
   return (
     <Flex
diff --git a/www/app/(app)/transcripts/useMp3.ts b/www/app/(app)/transcripts/useMp3.ts
index 244e95b0..3e8344ad 100644
--- a/www/app/(app)/transcripts/useMp3.ts
+++ b/www/app/(app)/transcripts/useMp3.ts
@@ -54,62 +54,65 @@ const useMp3 = (transcriptId: string, waiting?: boolean): Mp3Response => {
   useEffect(() => {
     if (!transcriptId || !api || later) return;
 
-    let deleted: boolean | null = null;
+    let stopped = false;
+    let audioElement: HTMLAudioElement | null = null;
+    let handleCanPlay: (() => void) | null = null;
+    let handleError: (() => void) | null = null;
 
     setTranscriptMetadataLoading(true);
-
-    const audioElement = document.createElement("audio");
-    audioElement.src = `${api_url}/v1/transcripts/${transcriptId}/audio/mp3`;
-    audioElement.crossOrigin = "anonymous";
-    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");
-    };
-
-    audioElement.addEventListener("canplay", handleCanPlay);
-    audioElement.addEventListener("error", handleError);
-
-    setMedia(audioElement);
-
     setAudioLoading(true);
 
-    let stopped = false;
-    // Fetch transcript info in parallel
+    // First fetch transcript info to check if audio is deleted
     api
       .v1TranscriptGet({ transcriptId })
       .then((transcript) => {
-        if (stopped) return;
-        deleted = transcript.audio_deleted || false;
+        if (stopped) {
+          return;
+        }
+
+        const deleted = transcript.audio_deleted || false;
         setAudioDeleted(deleted);
         setTranscriptMetadataLoadingError(null);
+
         if (deleted) {
+          // Audio is deleted, don't attempt to load it
           setMedia(null);
           setAudioLoadingError(null);
+          setAudioLoading(false);
+          return;
+        }
+
+        // Audio is not deleted, proceed to load it
+        audioElement = document.createElement("audio");
+        audioElement.src = `${api_url}/v1/transcripts/${transcriptId}/audio/mp3`;
+        audioElement.crossOrigin = "anonymous";
+        audioElement.preload = "auto";
+
+        handleCanPlay = () => {
+          if (stopped) return;
+          setAudioLoading(false);
+          setAudioLoadingError(null);
+        };
+
+        handleError = () => {
+          if (stopped) return;
+          setAudioLoading(false);
+          setAudioLoadingError("Failed to load audio");
+        };
+
+        audioElement.addEventListener("canplay", handleCanPlay);
+        audioElement.addEventListener("error", handleError);
+
+        if (!stopped) {
+          setMedia(audioElement);
         }
-        // if deleted, media will or already returned error
       })
       .catch((error) => {
         if (stopped) return;
         console.error("Failed to fetch transcript:", error);
         setAudioDeleted(null);
         setTranscriptMetadataLoadingError(error.message);
+        setAudioLoading(false);
       })
       .finally(() => {
         if (stopped) return;
@@ -118,10 +121,14 @@ const useMp3 = (transcriptId: string, waiting?: boolean): Mp3Response => {
 
     return () => {
       stopped = true;
-      audioElement.removeEventListener("canplay", handleCanPlay);
-      audioElement.removeEventListener("error", handleError);
+      if (audioElement) {
+        audioElement.src = "";
+        if (handleCanPlay)
+          audioElement.removeEventListener("canplay", handleCanPlay);
+        if (handleError) audioElement.removeEventListener("error", handleError);
+      }
     };
-  }, [transcriptId, !api, later, api_url]);
+  }, [transcriptId, api, later, api_url]);
 
   const getNow = () => {
     setLater(false);
diff --git a/www/app/(app)/transcripts/useWaveform.ts b/www/app/(app)/transcripts/useWaveform.ts
index 9139a2fb..19b2a265 100644
--- a/www/app/(app)/transcripts/useWaveform.ts
+++ b/www/app/(app)/transcripts/useWaveform.ts
@@ -10,16 +10,22 @@ type AudioWaveFormResponse = {
   error: Error | null;
 };
 
-const useWaveform = (id: string, waiting: boolean): AudioWaveFormResponse => {
+const useWaveform = (id: string, skip: boolean): AudioWaveFormResponse => {
   const [waveform, setWaveform] = useState<AudioWaveform | null>(null);
-  const [loading, setLoading] = useState<boolean>(true);
+  const [loading, setLoading] = useState<boolean>(false);
   const [error, setErrorState] = useState<Error | null>(null);
   const { setError } = useError();
   const api = useApi();
 
   useEffect(() => {
-    if (!id || !api || waiting) return;
+    if (!id || !api || skip) {
+      setLoading(false);
+      setErrorState(null);
+      setWaveform(null);
+      return;
+    }
     setLoading(true);
+    setErrorState(null);
     api
       .v1TranscriptGetAudioWaveform({ transcriptId: id })
       .then((result) => {
@@ -29,14 +35,9 @@ const useWaveform = (id: string, waiting: boolean): AudioWaveFormResponse => {
       })
       .catch((err) => {
         setErrorState(err);
-        const shouldShowHuman = shouldShowError(err);
-        if (shouldShowHuman) {
-          setError(err, "There was an error loading the waveform");
-        } else {
-          setError(err);
-        }
+        setLoading(false);
       });
-  }, [id, !api, waiting]);
+  }, [id, api, skip]);
 
   return { waveform, loading, error };
 };