From 14ebfa53a8c2f9abad2342ebe7d3ab4a018e52f5 Mon Sep 17 00:00:00 2001 From: Sara Date: Mon, 13 Nov 2023 17:33:12 +0100 Subject: [PATCH] wip loading and redirects --- .../transcripts/[transcriptId]/page.tsx | 38 +++++++++++++++---- .../[transcriptId]/record/page.tsx | 26 ++++++++----- www/app/[domain]/transcripts/useTranscript.ts | 27 ++++++++++--- www/app/[domain]/transcripts/useWebSockets.ts | 30 +++++++++------ 4 files changed, 87 insertions(+), 34 deletions(-) diff --git a/www/app/[domain]/transcripts/[transcriptId]/page.tsx b/www/app/[domain]/transcripts/[transcriptId]/page.tsx index bebfe261..add5a824 100644 --- a/www/app/[domain]/transcripts/[transcriptId]/page.tsx +++ b/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(null); const mp3 = useMp3(protectedPath, transcriptId); - if (transcript?.error /** || topics?.error || waveform?.error **/) { + if (transcript?.error || topics?.error) { return ( { + 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 ? ( ) : ( <> @@ -61,7 +74,7 @@ export default function TranscriptDetails(details: TranscriptDetails) { transcriptId={transcript.response.id} /> )} - {!waveform?.loading && ( + {waveform.waveform && mp3.media ? ( + ) : mp3.error || waveform.error ? ( + "error loading this recording" + ) : ( + "Loading Recording" )}
+
- {transcript?.response?.longSummary && ( + {transcript.response.longSummary ? ( + ) : transcript.response.status == "processing" ? ( + "Loading Transcript" + ) : ( + "error final summary" )}
diff --git a/www/app/[domain]/transcripts/[transcriptId]/record/page.tsx b/www/app/[domain]/transcripts/[transcriptId]/record/page.tsx index 41a2d053..10297f5c 100644 --- a/www/app/[domain]/transcripts/[transcriptId]/record/page.tsx +++ b/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.

+ {/* TODO If login required remove last sentence */}
)} diff --git a/www/app/[domain]/transcripts/useTranscript.ts b/www/app/[domain]/transcripts/useTranscript.ts index af60cd3b..987e57f3 100644 --- a/www/app/[domain]/transcripts/useTranscript.ts +++ b/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 = { - response: GetTranscript | null; - loading: boolean; - error: Error | null; +type ErrorTranscript = { + error: Error; + loading: false; + 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(null); const [loading, setLoading] = useState(true); const [error, setErrorState] = useState(null); @@ -46,7 +58,10 @@ const useTranscript = ( }); }, [id, !api]); - return { response, loading, error }; + return { response, loading, error } as + | ErrorTranscript + | LoadingTranscript + | SuccessTranscript; }; export default useTranscript; diff --git a/www/app/[domain]/transcripts/useWebSockets.ts b/www/app/[domain]/transcripts/useWebSockets.ts index bcf6b163..cb74f86d 100644 --- a/www/app/[domain]/transcripts/useWebSockets.ts +++ b/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(""); const [translateText, setTranslateText] = useState(""); + const [title, setTitle] = useState(""); const [textQueue, setTextQueue] = useState([]); const [translationQueue, setTranslationQueue] = useState([]); const [isProcessing, setIsProcessing] = useState(false); @@ -24,7 +26,6 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => { }); const [status, setStatus] = useState({ 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 }; };