selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2025-12-20 20:29:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Bring back live transcription

Browse Source
This commit is contained in:
Sergey Mankovsky
2024-06-17 17:20:30 +02:00
parent 0be6f72d87
commit 130c4f2bd9
1 changed files with 36 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
"use client"; "use client";
import React, { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Recorder from "../../recorder"; import Recorder from "../../recorder";
import { TopicList } from "../../topicList"; import { TopicList } from "../../topicList";
import useTranscript from "../../useTranscript"; import useTranscript from "../../useTranscript";
@@ -11,7 +11,8 @@ import { useRouter } from "next/navigation";
import Player from "../../player"; import Player from "../../player";
import useMp3 from "../../useMp3"; import useMp3 from "../../useMp3";
import WaveformLoading from "../../waveformLoading"; import WaveformLoading from "../../waveformLoading";
import { Box, Grid } from "@chakra-ui/react"; import { Box, Text, Grid } from "@chakra-ui/react";
import LiveTrancription from "../../liveTranscription";
type TranscriptDetails = { type TranscriptDetails = {
params: { params: {
@@ -21,7 +22,7 @@ type TranscriptDetails = {
const TranscriptRecord = (details: TranscriptDetails) => { const TranscriptRecord = (details: TranscriptDetails) => {
const transcript = useTranscript(details.params.transcriptId); const transcript = useTranscript(details.params.transcriptId);
const [transcriptStarted, setTranscriptStarted] = useState(false);
const useActiveTopic = useState<Topic | null>(null); const useActiveTopic = useState<Topic | null>(null);
const webSockets = useWebSockets(details.params.transcriptId); const webSockets = useWebSockets(details.params.transcriptId);
@@ -34,6 +35,11 @@ const TranscriptRecord = (details: TranscriptDetails) => {
webSockets.status.value || transcript.response?.status || "idle" webSockets.status.value || transcript.response?.status || "idle"
); );
useEffect(() => {
if (!transcriptStarted && webSockets.transcriptTextLive.length !== 0)
setTranscriptStarted(true);
}, [webSockets.transcriptTextLive]);
useEffect(() => { useEffect(() => {
//TODO HANDLE ERROR STATUS BETTER //TODO HANDLE ERROR STATUS BETTER
const newStatus = const newStatus =
@@ -83,9 +89,17 @@ const TranscriptRecord = (details: TranscriptDetails) => {
// todo: only start recording animation when you get "recorded" status // todo: only start recording animation when you get "recorded" status
<Recorder transcriptId={details.params.transcriptId} status={status} /> <Recorder transcriptId={details.params.transcriptId} status={status} />
)} )}
<Box <Grid
templateColumns={{ base: "minmax(0, 1fr)", md: "repeat(2, 1fr)" }}
templateRows={{
base: "minmax(0, 1fr) minmax(0, 1fr)",
md: "minmax(0, 1fr)",
}}
gap={2}
padding={4} padding={4}
paddingBottom={0}
background="gray.bg" background="gray.bg"
border={"2px solid"}
borderColor={"gray.bg"} borderColor={"gray.bg"}
borderRadius={8} borderRadius={8}
> >
@@ -97,7 +111,24 @@ const TranscriptRecord = (details: TranscriptDetails) => {
status={status} status={status}
currentTranscriptText={webSockets.accumulatedText} currentTranscriptText={webSockets.accumulatedText}
/> />
</Box> <Box>
{!transcriptStarted ? (
<Box textAlign={"center"} textColor="gray">
<Text>
The conversation transcript will appear here shortly after you
start recording.
</Text>
</Box>
) : (
status === "recording" && (
<LiveTrancription
text={webSockets.transcriptTextLive}
translateText={webSockets.translateText}
/>
)
)}
</Box>
</Grid>
</Grid> </Grid>
); );
}; };