diff --git a/www/app/[domain]/transcripts/[transcriptId]/page.tsx b/www/app/[domain]/transcripts/[transcriptId]/page.tsx index 079b41e8..b0986e94 100644 --- a/www/app/[domain]/transcripts/[transcriptId]/page.tsx +++ b/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(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) { - ) : mp3.error || waveform.error ? ( + ) : waveform.error ? (
"error loading this recording"
) : ( diff --git a/www/app/[domain]/transcripts/[transcriptId]/record/page.tsx b/www/app/[domain]/transcripts/[transcriptId]/record/page.tsx index 147f8827..2c5b73e0 100644 --- a/www/app/[domain]/transcripts/[transcriptId]/record/page.tsx +++ b/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 ? ( ) : recordedTime ? ( diff --git a/www/app/[domain]/transcripts/player.tsx b/www/app/[domain]/transcripts/player.tsx index 6143836e..02151a68 100644 --- a/www/app/[domain]/transcripts/player.tsx +++ b/www/app/[domain]/transcripts/player.tsx @@ -14,7 +14,7 @@ type PlayerProps = { Topic | null, React.Dispatch>, ]; - waveform: AudioWaveform; + waveform: AudioWaveform["data"]; media: HTMLMediaElement; mediaDuration: number; }; @@ -29,7 +29,6 @@ export default function Player(props: PlayerProps) { ); const [activeTopic, setActiveTopic] = props.useActiveTopic; const topicsRef = useRef(props.topics); - // Waveform setup useEffect(() => { if (waveformRef.current) { @@ -40,7 +39,7 @@ export default function Player(props: PlayerProps) { // This is not ideal, but it works for now. const _wavesurfer = WaveSurfer.create({ container: waveformRef.current, - peaks: props.waveform.data, + peaks: props.waveform, hideScrollbar: true, autoCenter: true, barWidth: 2, diff --git a/www/app/[domain]/transcripts/useMp3.ts b/www/app/[domain]/transcripts/useMp3.ts index 570a6a25..23249f94 100644 --- a/www/app/[domain]/transcripts/useMp3.ts +++ b/www/app/[domain]/transcripts/useMp3.ts @@ -1,24 +1,19 @@ import { useContext, useEffect, useState } from "react"; -import { useError } from "../../(errors)/errorContext"; import { DomainContext } from "../domainContext"; import getApi from "../../lib/getApi"; import { useFiefAccessTokenInfo } from "@fief/fief/build/esm/nextjs/react"; -import { shouldShowError } from "../../lib/errorUtils"; -type Mp3Response = { - url: string | null; +export type Mp3Response = { media: HTMLMediaElement | null; loading: boolean; - error: Error | null; + getNow: () => void; }; -const useMp3 = (protectedPath: boolean, id: string): Mp3Response => { - const [url, setUrl] = useState(null); +const useMp3 = (id: string, waiting?: boolean): Mp3Response => { const [media, setMedia] = useState(null); + const [later, setLater] = useState(waiting); const [loading, setLoading] = useState(false); - const [error, setErrorState] = useState(null); - const { setError } = useError(); - const api = getApi(protectedPath); + const api = getApi(true); const { api_url } = useContext(DomainContext); const accessTokenInfo = useFiefAccessTokenInfo(); const [serviceWorkerReady, setServiceWorkerReady] = useState(false); @@ -42,8 +37,8 @@ const useMp3 = (protectedPath: boolean, id: string): Mp3Response => { }); }, [navigator.serviceWorker, serviceWorkerReady, accessTokenInfo]); - const getMp3 = (id: string) => { - if (!id || !api) return; + useEffect(() => { + if (!id || !api || later) return; // createa a audio element and set the source setLoading(true); @@ -53,13 +48,13 @@ const useMp3 = (protectedPath: boolean, id: string): Mp3Response => { audioElement.preload = "auto"; setMedia(audioElement); setLoading(false); + }, [id, api, later]); + + const getNow = () => { + setLater(false); }; - useEffect(() => { - getMp3(id); - }, [id, api]); - - return { url, media, loading, error }; + return { media, loading, getNow }; }; export default useMp3; diff --git a/www/app/[domain]/transcripts/useWebSockets.ts b/www/app/[domain]/transcripts/useWebSockets.ts index 3f3d20fc..f33a1347 100644 --- a/www/app/[domain]/transcripts/useWebSockets.ts +++ b/www/app/[domain]/transcripts/useWebSockets.ts @@ -11,7 +11,8 @@ export type UseWebSockets = { topics: Topic[]; finalSummary: FinalSummary; status: Status; - waveform: AudioWaveform | null; + waveform: AudioWaveform["data"] | null; + duration: number | null; }; export const useWebSockets = (transcriptId: string | null): UseWebSockets => { @@ -23,6 +24,7 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => { const [isProcessing, setIsProcessing] = useState(false); const [topics, setTopics] = useState([]); const [waveform, setWaveForm] = useState(null); + const [duration, setDuration] = useState(null); const [finalSummary, setFinalSummary] = useState({ summary: "", }); @@ -351,6 +353,22 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => { } break; + case "WAVEFORM": + console.debug( + "WAVEFORM event length:", + message.data.waveform.length, + ); + if (message.data) { + setWaveForm(message.data.waveform); + } + break; + case "DURATION": + console.debug("DURATION event:", message.data); + if (message.data) { + setDuration(message.data.duration); + } + break; + case "STATUS": console.log("STATUS event:", message.data); if (message.data.value === "error") { @@ -415,5 +433,6 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => { title, status, waveform, + duration, }; };