wip loading and redirects

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

@@ -6,7 +6,7 @@ import useWaveform from "../useWaveform";
 import useMp3 from "../useMp3";
 import { TopicList } from "../topicList";
 import { Topic } from "../webSocketTypes";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import "../../../styles/button.css";
 import FinalSummary from "../finalSummary";
 import ShareLink from "../shareLink";
@@ -31,7 +31,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
   const useActiveTopic = useState<Topic | null>(null);
   const mp3 = useMp3(protectedPath, transcriptId);
 
-  if (transcript?.error /** || topics?.error || waveform?.error **/) {
+  if (transcript?.error || topics?.error) {
     return (
       <Modal
         title="Transcription Not Found"
@@ -40,16 +40,29 @@ export default function TranscriptDetails(details: TranscriptDetails) {
     );
   }
 
+  useEffect(() => {
+    const statusToRedirect = ["idle", "recording", "processing"];
+    if (statusToRedirect.includes(transcript.response?.status)) {
+      const newUrl = "/transcripts/" + details.params.transcriptId + "/record";
+      // Shallow redirection does not work on NextJS 13
+      // https://github.com/vercel/next.js/discussions/48110
+      // https://github.com/vercel/next.js/discussions/49540
+      // router.push(newUrl, undefined, { shallow: true });
+      history.replaceState({}, "", newUrl);
+    }
+  }, [transcript.response?.status]);
+
   const fullTranscript =
     topics.topics
       ?.map((topic) => topic.transcript)
       .join("\n\n")
       .replace(/ +/g, " ")
       .trim() || "";
+  console.log("calf full transcript");
 
   return (
     <>
-      {!transcriptId || transcript?.loading || topics?.loading ? (
+      {transcript?.loading || topics?.loading ? (
         <Modal title="Loading" text={"Loading transcript..."} />
       ) : (
         <>
@@ -61,7 +74,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
                 transcriptId={transcript.response.id}
               />
             )}
-            {!waveform?.loading && (
+            {waveform.waveform && mp3.media ? (
               <Player
                 topics={topics?.topics || []}
                 useActiveTopic={useActiveTopic}
@@ -69,23 +82,32 @@ export default function TranscriptDetails(details: TranscriptDetails) {
                 media={mp3.media}
                 mediaDuration={transcript.response.duration}
               />
+            ) : mp3.error || waveform.error ? (
+              "error loading this recording"
+            ) : (
+              "Loading Recording"
             )}
           </div>
           <div className="grid grid-cols-1 lg:grid-cols-2 grid-rows-2 lg:grid-rows-1 gap-2 lg:gap-4 h-full">
             <TopicList
-              topics={topics?.topics || []}
+              topics={topics.topics || []}
               useActiveTopic={useActiveTopic}
               autoscroll={false}
             />
+
             <div className="w-full h-full grid grid-rows-layout-one grid-cols-1 gap-2 lg:gap-4">
               <section className=" bg-blue-400/20 rounded-lg md:rounded-xl p-2 md:px-4 h-full">
-                {transcript?.response?.longSummary && (
+                {transcript.response.longSummary ? (
                   <FinalSummary
                     protectedPath={protectedPath}
                     fullTranscript={fullTranscript}
-                    summary={transcript?.response?.longSummary}
-                    transcriptId={transcript?.response?.id}
+                    summary={transcript.response.longSummary}
+                    transcriptId={transcript.response.id}
                   />
+                ) : transcript.response.status == "processing" ? (
+                  "Loading Transcript"
+                ) : (
+                  "error final summary"
                 )}
               </section>
 

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

@@ -8,12 +8,12 @@ import { useWebSockets } from "../../useWebSockets";
 import useAudioDevice from "../../useAudioDevice";
 import "../../../../styles/button.css";
 import { Topic } from "../../webSocketTypes";
-import getApi from "../../../../lib/getApi";
 import LiveTrancription from "../../liveTranscription";
 import DisconnectedIndicator from "../../disconnectedIndicator";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGear } from "@fortawesome/free-solid-svg-icons";
 import { lockWakeState, releaseWakeState } from "../../../../lib/wakeLock";
+import { useRouter } from "next/navigation";
 
 type TranscriptDetails = {
   params: {
@@ -45,21 +45,31 @@ const TranscriptRecord = (details: TranscriptDetails) => {
   const [hasRecorded, setHasRecorded] = useState(false);
   const [transcriptStarted, setTranscriptStarted] = useState(false);
 
+  const router = useRouter();
+
   useEffect(() => {
     if (!transcriptStarted && webSockets.transcriptText.length !== 0)
       setTranscriptStarted(true);
   }, [webSockets.transcriptText]);
 
   useEffect(() => {
-    if (transcript?.response?.longSummary) {
-      const newUrl = `/transcripts/${transcript.response.id}`;
+    const statusToRedirect = ["ended", "error"];
+    console.log(webSockets.status, "hey");
+    console.log(transcript.response, "ho");
+
+    //TODO if has no topic and is error, get back to new
+    if (
+      statusToRedirect.includes(transcript.response?.status) ||
+      statusToRedirect.includes(webSockets.status.value)
+    ) {
+      const newUrl = "/transcripts/" + details.params.transcriptId;
       // Shallow redirection does not work on NextJS 13
       // https://github.com/vercel/next.js/discussions/48110
       // https://github.com/vercel/next.js/discussions/49540
-      // router.push(newUrl, undefined, { shallow: true });
-      history.replaceState({}, "", newUrl);
+      router.push(newUrl, undefined);
+      // history.replaceState({}, "", newUrl);
     }
-  });
+  }, [webSockets.status.value, transcript.response?.status]);
 
   useEffect(() => {
     lockWakeState();
@@ -77,10 +87,7 @@ const TranscriptRecord = (details: TranscriptDetails) => {
           setHasRecorded(true);
           webRTC?.send(JSON.stringify({ cmd: "STOP" }));
         }}
-        topics={webSockets.topics}
         getAudioStream={getAudioStream}
-        useActiveTopic={useActiveTopic}
-        isPastMeeting={false}
         audioDevices={audioDevices}
       />
 
@@ -128,6 +135,7 @@ const TranscriptRecord = (details: TranscriptDetails) => {
                 couple of minutes. Please do not navigate away from the page
                 during this time.
               </p>
+              {/* TODO If login required remove last sentence */}
             </div>
           )}
         </section>