get waveform from socket

www/app/[domain]/transcripts/[transcriptId]/page.tsx

@@ -30,7 +30,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
   const topics = useTopics(protectedPath, transcriptId);
   const waveform = useWaveform(protectedPath, transcriptId);
   const useActiveTopic = useState<Topic | null>(null);
-  const mp3 = useMp3(protectedPath, transcriptId);
+  const mp3 = useMp3(transcriptId);
 
   if (transcript?.error || topics?.error) {
     return (
@@ -59,7 +59,6 @@ export default function TranscriptDetails(details: TranscriptDetails) {
       .join("\n\n")
       .replace(/ +/g, " ")
       .trim() || "";
-  console.log("calf full transcript");
 
   return (
     <>
@@ -79,11 +78,11 @@ export default function TranscriptDetails(details: TranscriptDetails) {
               <Player
                 topics={topics?.topics || []}
                 useActiveTopic={useActiveTopic}
-                waveform={waveform?.waveform}
+                waveform={waveform.waveform.data}
                 media={mp3.media}
                 mediaDuration={transcript.response.duration}
               />
-            ) : mp3.error || waveform.error ? (
+            ) : waveform.error ? (
               <div>"error loading this recording"</div>
             ) : (
               <WaveformLoading />

www/app/[domain]/transcripts/[transcriptId]/record/page.tsx

@@ -11,11 +11,11 @@ import { Topic } from "../../webSocketTypes";
 import LiveTrancription from "../../liveTranscription";
 import DisconnectedIndicator from "../../disconnectedIndicator";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faGear, faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { faGear } from "@fortawesome/free-solid-svg-icons";
 import { lockWakeState, releaseWakeState } from "../../../../lib/wakeLock";
 import { useRouter } from "next/navigation";
 import Player from "../../player";
-import useMp3 from "../../useMp3";
+import useMp3, { Mp3Response } from "../../useMp3";
 import WaveformLoading from "../../waveformLoading";
 
 type TranscriptDetails = {
@@ -48,7 +48,7 @@ const TranscriptRecord = (details: TranscriptDetails) => {
   const [recordedTime, setRecordedTime] = useState(0);
   const [startTime, setStartTime] = useState(0);
   const [transcriptStarted, setTranscriptStarted] = useState(false);
-  const mp3 = useMp3(true, "");
+  let mp3 = useMp3(details.params.transcriptId, true);
 
   const router = useRouter();
 
@@ -74,6 +74,12 @@ const TranscriptRecord = (details: TranscriptDetails) => {
     } // history.replaceState({}, "", newUrl);
   }, [webSockets.status.value, transcript.response?.status]);
 
+  useEffect(() => {
+    if (webSockets.duration) {
+      mp3.getNow();
+    }
+  }, [webSockets.duration]);
+
   useEffect(() => {
     lockWakeState();
     return () => {
@@ -83,13 +89,13 @@ const TranscriptRecord = (details: TranscriptDetails) => {
 
   return (
     <>
-      {webSockets.waveform && mp3.media ? (
+      {webSockets.waveform && webSockets.duration && mp3?.media ? (
         <Player
           topics={webSockets.topics || []}
           useActiveTopic={useActiveTopic}
           waveform={webSockets.waveform}
           media={mp3.media}
-          mediaDuration={recordedTime}
+          mediaDuration={webSockets.duration}
         />
       ) : recordedTime ? (
         <WaveformLoading />