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}
+                    summary={transcript.response.longSummary}
-                    transcriptId={transcript?.response?.id}
+                    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 statusToRedirect = ["ended", "error"];
-      const newUrl = `/transcripts/${transcript.response.id}`;
+    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 });
+      router.push(newUrl, undefined);
-      history.replaceState({}, "", newUrl);
+      // 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>

www/app/[domain]/transcripts/useTranscript.ts

@@ -5,16 +5,28 @@ import { useError } from "../../(errors)/errorContext";
 import getApi from "../../lib/getApi";
 import { shouldShowError } from "../../lib/errorUtils";
 
-type Transcript = {
+type ErrorTranscript = {
-  response: GetTranscript | null;
+  error: Error;
-  loading: boolean;
+  loading: false;
-  error: Error | null;
+  response: any;
+};
+
+type LoadingTranscript = {
+  response: any;
+  loading: true;
+  error: false;
+};
+
+type SuccessTranscript = {
+  response: GetTranscript;
+  loading: false;
+  error: null;
 };
 
 const useTranscript = (
   protectedPath: boolean,
   id: string | null,
-): Transcript => {
+): ErrorTranscript | LoadingTranscript | SuccessTranscript => {
   const [response, setResponse] = useState<GetTranscript | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setErrorState] = useState<Error | null>(null);
@@ -46,7 +58,10 @@ const useTranscript = (
       });
   }, [id, !api]);
 
-  return { response, loading, error };
+  return { response, loading, error } as
+    | ErrorTranscript
+    | LoadingTranscript
+    | SuccessTranscript;
 };
 
 export default useTranscript;

www/app/[domain]/transcripts/useWebSockets.ts

@@ -4,9 +4,10 @@ import { useError } from "../../(errors)/errorContext";
 import { useRouter } from "next/navigation";
 import { DomainContext } from "../domainContext";
 
-type UseWebSockets = {
+export type UseWebSockets = {
   transcriptText: string;
   translateText: string;
+  title: string;
   topics: Topic[];
   finalSummary: FinalSummary;
   status: Status;
@@ -15,6 +16,7 @@ type UseWebSockets = {
 export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
   const [transcriptText, setTranscriptText] = useState<string>("");
   const [translateText, setTranslateText] = useState<string>("");
+  const [title, setTitle] = useState<string>("");
   const [textQueue, setTextQueue] = useState<string[]>([]);
   const [translationQueue, setTranslationQueue] = useState<string[]>([]);
   const [isProcessing, setIsProcessing] = useState(false);
@@ -24,7 +26,6 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
   });
   const [status, setStatus] = useState<Status>({ value: "initial" });
   const { setError } = useError();
-  const router = useRouter();
 
   const { websocket_url } = useContext(DomainContext);
 
@@ -294,7 +295,7 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
     if (!transcriptId) return;
 
     const url = `${websocket_url}/v1/transcripts/${transcriptId}/events`;
-    const ws = new WebSocket(url);
+    let ws = new WebSocket(url);
 
     ws.onopen = () => {
       console.debug("WebSocket connection opened");
@@ -343,24 +344,23 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
 
           case "FINAL_TITLE":
             console.debug("FINAL_TITLE event:", message.data);
+            if (message.data) {
+              setTitle(message.data.title);
+            }
             break;
 
           case "STATUS":
             console.log("STATUS event:", message.data);
-            if (message.data.value === "ended") {
-              const newUrl = "/transcripts/" + transcriptId;
-              router.push(newUrl);
-              console.debug("FINAL_LONG_SUMMARY event:", message.data);
-            }
             if (message.data.value === "error") {
-              const newUrl = "/transcripts/" + transcriptId;
-              router.push(newUrl);
               setError(
                 Error("Websocket error status"),
                 "There was an error processing this meeting.",
               );
             }
             setStatus(message.data);
+            if (message.data.value === "ended") {
+              ws.close();
+            }
             break;
 
           default:
@@ -388,8 +388,16 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
         default:
           setError(
             new Error(`WebSocket closed unexpectedly with code: ${event.code}`),
+            "Disconnected",
           );
       }
+      console.log(
+        "Socket is closed. Reconnect will be attempted in 1 second.",
+        event.reason,
+      );
+      setTimeout(function () {
+        ws = new WebSocket(url);
+      }, 1000);
     };
 
     return () => {
@@ -397,5 +405,5 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
     };
   }, [transcriptId]);
 
-  return { transcriptText, translateText, topics, finalSummary, status };
+  return { transcriptText, translateText, topics, finalSummary, title, status };
 };