From 15e3236ab9fd2326c70cdc66d010d22a9c687895 Mon Sep 17 00:00:00 2001 From: Andreas Date: Thu, 28 Dec 2023 16:04:27 +0700 Subject: [PATCH] Final touches and testing --- .../transcripts/[transcriptId]/page.tsx | 2 +- www/app/[domain]/transcripts/player.tsx | 2 +- www/app/[domain]/transcripts/shareLink.tsx | 20 +++--- .../[domain]/transcripts/transcriptTitle.tsx | 4 +- www/app/[domain]/transcripts/useTranscript.ts | 2 +- .../[domain]/transcripts/useTranscriptList.ts | 4 +- www/app/[domain]/transcripts/useWebRTC.ts | 2 +- www/app/[domain]/transcripts/useWebSockets.ts | 70 +++++++++---------- www/app/lib/useApi.ts | 1 - www/app/lib/zulip.ts | 4 +- 10 files changed, 54 insertions(+), 57 deletions(-) diff --git a/www/app/[domain]/transcripts/[transcriptId]/page.tsx b/www/app/[domain]/transcripts/[transcriptId]/page.tsx index 356cb7b5..464f4504 100644 --- a/www/app/[domain]/transcripts/[transcriptId]/page.tsx +++ b/www/app/[domain]/transcripts/[transcriptId]/page.tsx @@ -92,7 +92,7 @@ export default function TranscriptDetails(details: TranscriptDetails) { diff --git a/www/app/[domain]/transcripts/player.tsx b/www/app/[domain]/transcripts/player.tsx index 02151a68..632dfd8a 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["data"]; + waveform: AudioWaveform; media: HTMLMediaElement; mediaDuration: number; }; diff --git a/www/app/[domain]/transcripts/shareLink.tsx b/www/app/[domain]/transcripts/shareLink.tsx index 887a6336..8d14d034 100644 --- a/www/app/[domain]/transcripts/shareLink.tsx +++ b/www/app/[domain]/transcripts/shareLink.tsx @@ -7,7 +7,7 @@ import "../../styles/button.css"; import "../../styles/form.scss"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faSpinner } from "@fortawesome/free-solid-svg-icons"; -import { DefaultService, UpdateTranscript } from "../../api"; +import { UpdateTranscript } from "../../api"; import { ShareMode, toShareMode } from "../../lib/shareMode"; import useApi from "../../lib/useApi"; type ShareLinkProps = { @@ -18,7 +18,6 @@ type ShareLinkProps = { const ShareLink = (props: ShareLinkProps) => { const [isCopied, setIsCopied] = useState(false); - const [api, setApi] = useState(null); const inputRef = useRef(null); const [currentUrl, setCurrentUrl] = useState(""); const requireLogin = featureEnabled("requireLogin"); @@ -26,11 +25,10 @@ const ShareLink = (props: ShareLinkProps) => { const [shareMode, setShareMode] = useState(props.shareMode); const [shareLoading, setShareLoading] = useState(false); const userinfo = useFiefUserinfo(); + const api = useApi(); useEffect(() => { setCurrentUrl(window.location.href); - const api = useApi(); - setApi(api); }, []); useEffect(() => { @@ -51,14 +49,13 @@ const ShareLink = (props: ShareLinkProps) => { }; const updateShareMode = async (selectedShareMode: string) => { + if (!api) + throw new Error("ShareLink's API should always be ready at this point"); + setShareLoading(true); const requestBody: UpdateTranscript = { share_mode: toShareMode(selectedShareMode), }; - const api = useApi(); - - if (!api) - throw new Error("ShareLink's API should always be ready at this point"); const updatedTranscript = await api.v1TranscriptUpdate( props.transcriptId, @@ -68,7 +65,6 @@ const ShareLink = (props: ShareLinkProps) => { setShareLoading(false); }; const privacyEnabled = featureEnabled("privacy"); - const apiReady = api != null; return (
{

This transcript is public. Everyone can access it.

)} - {isOwner && - apiReady( + {isOwner && api && ( +
{ />
)} -
, + )} )} diff --git a/www/app/[domain]/transcripts/transcriptTitle.tsx b/www/app/[domain]/transcripts/transcriptTitle.tsx index 9b95315b..fa456049 100644 --- a/www/app/[domain]/transcripts/transcriptTitle.tsx +++ b/www/app/[domain]/transcripts/transcriptTitle.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useState } from "react"; import { UpdateTranscript } from "../../api"; import useApi from "../../lib/useApi"; @@ -11,8 +11,10 @@ const TranscriptTitle = (props: TranscriptTitle) => { const [displayedTitle, setDisplayedTitle] = useState(props.title); const [preEditTitle, setPreEditTitle] = useState(props.title); const [isEditing, setIsEditing] = useState(false); + const api = useApi(); const updateTitle = async (newTitle: string, transcriptId: string) => { + if (!api) return; try { const requestBody: UpdateTranscript = { title: newTitle, diff --git a/www/app/[domain]/transcripts/useTranscript.ts b/www/app/[domain]/transcripts/useTranscript.ts index 9c40c85a..c70e2c17 100644 --- a/www/app/[domain]/transcripts/useTranscript.ts +++ b/www/app/[domain]/transcripts/useTranscript.ts @@ -52,7 +52,7 @@ const useTranscript = ( } setErrorState(error); }); - }, [id, api]); + }, [id, !api]); return { response, loading, error } as | ErrorTranscript diff --git a/www/app/[domain]/transcripts/useTranscriptList.ts b/www/app/[domain]/transcripts/useTranscriptList.ts index 1a2ce9c0..7621a9f8 100644 --- a/www/app/[domain]/transcripts/useTranscriptList.ts +++ b/www/app/[domain]/transcripts/useTranscriptList.ts @@ -18,8 +18,8 @@ const useTranscriptList = (page: number): TranscriptList => { const api = useApi(); useEffect(() => { - setLoading(true); if (!api) return; + setLoading(true); api .v1TranscriptsList(page) .then((response) => { @@ -32,7 +32,7 @@ const useTranscriptList = (page: number): TranscriptList => { setError(err); setErrorState(err); }); - }, [api, page]); + }, [!api, page]); return { response, loading, error }; }; diff --git a/www/app/[domain]/transcripts/useWebRTC.ts b/www/app/[domain]/transcripts/useWebRTC.ts index 016bee8a..a51b1c6f 100644 --- a/www/app/[domain]/transcripts/useWebRTC.ts +++ b/www/app/[domain]/transcripts/useWebRTC.ts @@ -13,7 +13,7 @@ const useWebRTC = ( const api = useApi(); useEffect(() => { - if (!stream || !transcriptId || !api) { + if (!stream || !transcriptId) { return; } diff --git a/www/app/[domain]/transcripts/useWebSockets.ts b/www/app/[domain]/transcripts/useWebSockets.ts index 26b69c05..a2bccf37 100644 --- a/www/app/[domain]/transcripts/useWebSockets.ts +++ b/www/app/[domain]/transcripts/useWebSockets.ts @@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from "react"; import { Topic, FinalSummary, Status } from "./webSocketTypes"; import { useError } from "../../(errors)/errorContext"; import { DomainContext } from "../domainContext"; -import { AudioWaveform } from "../../api"; +import { AudioWaveform, GetTranscriptSegmentTopic } from "../../api"; export type UseWebSockets = { transcriptText: string; @@ -11,7 +11,7 @@ export type UseWebSockets = { topics: Topic[]; finalSummary: FinalSummary; status: Status; - waveform: AudioWaveform["data"] | null; + waveform: AudioWaveform | null; duration: number | null; }; @@ -57,6 +57,39 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => { useEffect(() => { document.onkeyup = (e) => { if (e.key === "a" && process.env.NEXT_PUBLIC_ENV === "development") { + const segments : GetTranscriptSegmentTopic[] = [ + { + speaker: 1, + start: 0, + text: "This is the transcription of an example title", + }, + { + speaker: 2, + start: 10, + text: "This is the second speaker", + }, + { + speaker: 3, + start: 90, + text: "This is the third speaker", + }, + { + speaker: 4, + start: 90, + text: "This is the fourth speaker", + }, + { + speaker: 5, + start: 123, + text: "This is the fifth speaker", + }, + { + speaker: 6, + start: 300, + text: "This is the sixth speaker", + } + ]; + setTranscriptText("Lorem Ipsum"); setTopics([ { @@ -67,39 +100,6 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => { title: "Topic 1: Introduction to Quantum Mechanics", transcript: "A brief overview of quantum mechanics and its principles.", - segments: [ - { - speaker: 1, - start: 0, - text: "This is the transcription of an example title", - }, - { - speaker: 2, - start: 10, - text: "This is the second speaker", - }, - , - { - speaker: 3, - start: 90, - text: "This is the third speaker", - }, - { - speaker: 4, - start: 90, - text: "This is the fourth speaker", - }, - { - speaker: 5, - start: 123, - text: "This is the fifth speaker", - }, - { - speaker: 6, - start: 300, - text: "This is the sixth speaker", - }, - ], }, { id: "2", diff --git a/www/app/lib/useApi.ts b/www/app/lib/useApi.ts index 7a0cc42e..9898f735 100644 --- a/www/app/lib/useApi.ts +++ b/www/app/lib/useApi.ts @@ -8,7 +8,6 @@ export default function useApi(): DefaultService | null { const accessTokenInfo = useFiefAccessTokenInfo(); const api_url = useContext(DomainContext).api_url; const requireLogin = featureEnabled("requireLogin"); - const [ready, setReady] = useState(false); const [api, setApi] = useState(null); const { hasAuthCookie } = useContext(CookieContext); diff --git a/www/app/lib/zulip.ts b/www/app/lib/zulip.ts index 4b3cbe78..48ec94fb 100644 --- a/www/app/lib/zulip.ts +++ b/www/app/lib/zulip.ts @@ -30,7 +30,7 @@ export function getZulipMessage( topics: GetTranscriptTopic[] | null, includeTopics: boolean, ) { - const date = new Date(transcript.createdAt); + const date = new Date(transcript.created_at); // Get the timezone offset in minutes and convert it to hours and minutes const timezoneOffset = -date.getTimezoneOffset(); @@ -72,7 +72,7 @@ export function getZulipMessage( } let summary = "```spoiler Summary\n"; - summary += transcript.longSummary; + summary += transcript.long_summary; summary += "```\n\n"; const message = headerText + summary + topicText + "-----\n";