Merge branch 'main' into post-to-zulip

2025-12-22 21:29:05 +00:00 · 2023-12-04 21:06:10 +07:00
parent 999a3e05a4 84a1350df7
commit 7e29a0bf14
53 changed files with 2479 additions and 692 deletions
--- a/www/app/[domain]/transcripts/[transcriptId]/page.tsx
+++ b/www/app/[domain]/transcripts/[transcriptId]/page.tsx
@@ -5,15 +5,19 @@ import useTopics from "../useTopics";
 import useWaveform from "../useWaveform";
 import useMp3 from "../useMp3";
 import { TopicList } from "../topicList";
-import Recorder from "../recorder";
 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";
 import QRCode from "react-qr-code";
 import TranscriptTitle from "../transcriptTitle";
 import ShareModal from "./shareModal";
+import Player from "../player";
+import WaveformLoading from "../waveformLoading";
+import { useRouter } from "next/navigation";
+import { faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 type TranscriptDetails = {
  params: {
@@ -21,26 +25,28 @@ type TranscriptDetails = {
  };
 };

-const protectedPath = true;
-
 export default function TranscriptDetails(details: TranscriptDetails) {
  const transcriptId = details.params.transcriptId;
+  const router = useRouter();

-  const transcript = useTranscript(protectedPath, transcriptId);
-  const topics = useTopics(protectedPath, transcriptId);
-  const waveform = useWaveform(protectedPath, transcriptId);
+  const transcript = useTranscript(transcriptId);
+  const topics = useTopics(transcriptId);
+  const waveform = useWaveform(transcriptId);
  const useActiveTopic = useState<Topic | null>(null);
-  const mp3 = useMp3(protectedPath, transcriptId);
+  const mp3 = useMp3(transcriptId);
  const [showModal, setShowModal] = useState(false);

-  if (transcript?.error /** || topics?.error || waveform?.error **/) {
-    return (
-      <Modal
-        title="Transcription Not Found"
-        text="A trascription with this ID does not exist."
-      />
-    );
-  }
+  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);
+      // history.replaceState({}, "", newUrl);
+    }
+  }, [transcript.response?.status]);

  const fullTranscript =
    topics.topics
@@ -90,79 +96,102 @@ export default function TranscriptDetails(details: TranscriptDetails) {
 **Next Meeting:**
 Scheduled for December 5, 2023, to review progress and finalize the new product launch details.
 `;
-  }

-  return (
-    <>
-      {!transcriptId || transcript?.loading || topics?.loading ? (
-        <Modal title="Loading" text={"Loading transcript..."} />
-      ) : (
-        <>
-          <ShareModal
-            transcript={transcript.response}
-            topics={topics ? topics.topics : null}
-            show={showModal}
-            setShow={(v) => setShowModal(v)}
-            title={transcript?.response?.title}
-            summary={transcript?.response?.longSummary}
-            date={transcript?.response?.createdAt}
-            url={window.location.href}
-          />
-          <div className="flex flex-col">
-            {transcript?.response?.title && (
-              <TranscriptTitle
-                protectedPath={protectedPath}
-                title={transcript.response.title}
-                transcriptId={transcript.response.id}
-              />
-            )}
-            {!waveform?.loading && (
-              <Recorder
-                topics={topics?.topics || []}
-                useActiveTopic={useActiveTopic}
-                waveform={waveform?.waveform}
-                isPastMeeting={true}
-                transcriptId={transcript?.response?.id}
-                media={mp3?.media}
-                mediaDuration={transcript?.response?.duration}
-              />
-            )}
-          </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
+    if (transcript.error || topics?.error) {
+      return (
+        <Modal
+          title="Transcription Not Found"
+          text="A trascription with this ID does not exist."
+        />
+      );
+    }
+
+    if (!transcriptId || transcript?.loading || topics?.loading) {
+      return <Modal title="Loading" text={"Loading transcript..."} />;
+    }
+
+    return (
+      <>
+        <ShareModal
+          transcript={transcript.response}
+          topics={topics ? topics.topics : null}
+          show={showModal}
+          setShow={(v) => setShowModal(v)}
+          title={transcript?.response?.title}
+          summary={transcript?.response?.longSummary}
+          date={transcript?.response?.createdAt}
+          url={window.location.href}
+        />
+        <div className="flex flex-col">
+          {transcript?.response?.title && (
+            <TranscriptTitle
+              title={transcript.response.title}
+              transcriptId={transcript.response.id}
+            />
+          )}
+          {waveform.waveform && mp3.media ? (
+            <Player
              topics={topics?.topics || []}
              useActiveTopic={useActiveTopic}
-              autoscroll={false}
+              waveform={waveform.waveform.data}
+              media={mp3.media}
+              mediaDuration={transcript.response.duration}
            />
-            <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 && (
-                  <FinalSummary
-                    protectedPath={protectedPath}
-                    fullTranscript={fullTranscript}
-                    summary={transcript?.response?.longSummary}
-                    transcriptId={transcript?.response?.id}
-                    openZulipModal={() => setShowModal(true)}
-                  />
-                )}
-              </section>
+          ) : waveform.error ? (
+            <div>"error loading this recording"</div>
+          ) : (
+            <WaveformLoading />
+          )}
+        </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 || []}
+            useActiveTopic={useActiveTopic}
+            autoscroll={false}
+          />

-              <section className="flex items-center">
-                <div className="mr-4 hidden md:block h-auto">
-                  <QRCode
-                    value={`${location.origin}/transcripts/${details.params.transcriptId}`}
-                    level="L"
-                    size={98}
-                  />
+          <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 ? (
+                <FinalSummary
+                  fullTranscript={fullTranscript}
+                  summary={transcript.response.longSummary}
+                  transcriptId={transcript.response.id}
+                  openZulipModal={() => setShowModal(true)}
+                />
+              ) : (
+                <div className="flex flex-col h-full justify-center content-center">
+                  {transcript.response.status == "processing" ? (
+                    <p>Loading Transcript</p>
+                  ) : (
+                    <p>
+                      There was an error generating the final summary, please
+                      come back later
+                    </p>
+                  )}
                </div>
-                <div className="flex-grow max-w-full">
-                  <ShareLink />
-                </div>
-              </section>
-            </div>
+              )}
+            </section>
+
+            <section className="flex items-center">
+              <div className="mr-4 hidden md:block h-auto">
+                <QRCode
+                  value={`${location.origin}/transcripts/${details.params.transcriptId}`}
+                  level="L"
+                  size={98}
+                />
+              </div>
+              <div className="flex-grow max-w-full">
+                <ShareLink
+                  transcriptId={transcript?.response?.id}
+                  userId={transcript?.response?.userId}
+                  shareMode={transcript?.response?.shareMode}
+                />
+              </div>
+            </section>
          </div>
-        </>
-      )}
-    </>
-  );
+        </div>
+      </>
+    );
+  }
 }
--- a/www/app/[domain]/transcripts/[transcriptId]/record/page.tsx
+++ b/www/app/[domain]/transcripts/[transcriptId]/record/page.tsx
@@ -8,12 +8,15 @@ 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";
+import Player from "../../player";
+import useMp3 from "../../useMp3";
+import WaveformLoading from "../../waveformLoading";

 type TranscriptDetails = {
  params: {
@@ -36,14 +39,18 @@ const TranscriptRecord = (details: TranscriptDetails) => {
    }
  }, []);

-  const transcript = useTranscript(true, details.params.transcriptId);
-  const webRTC = useWebRTC(stream, details.params.transcriptId, true);
+  const transcript = useTranscript(details.params.transcriptId);
+  const webRTC = useWebRTC(stream, details.params.transcriptId);
  const webSockets = useWebSockets(details.params.transcriptId);

  const { audioDevices, getAudioStream } = useAudioDevice();

-  const [hasRecorded, setHasRecorded] = useState(false);
+  const [recordedTime, setRecordedTime] = useState(0);
+  const [startTime, setStartTime] = useState(0);
  const [transcriptStarted, setTranscriptStarted] = useState(false);
+  let mp3 = useMp3(details.params.transcriptId, true);
+
+  const router = useRouter();

  useEffect(() => {
    if (!transcriptStarted && webSockets.transcriptText.length !== 0)
@@ -51,15 +58,27 @@ const TranscriptRecord = (details: TranscriptDetails) => {
  }, [webSockets.transcriptText]);

  useEffect(() => {
-    if (transcript?.response?.longSummary) {
-      const newUrl = `/transcripts/${transcript.response.id}`;
+    const statusToRedirect = ["ended", "error"];
+
+    //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.replace(newUrl);
+      // history.replaceState({}, "", newUrl);
+    } // history.replaceState({}, "", newUrl);
+  }, [webSockets.status.value, transcript.response?.status]);
+
+  useEffect(() => {
+    if (webSockets.duration) {
+      mp3.getNow();
    }
-  });
+  }, [webSockets.duration]);

  useEffect(() => {
    lockWakeState();
@@ -70,19 +89,31 @@ const TranscriptRecord = (details: TranscriptDetails) => {

  return (
    <>
-      <Recorder
-        setStream={setStream}
-        onStop={() => {
-          setStream(null);
-          setHasRecorded(true);
-          webRTC?.send(JSON.stringify({ cmd: "STOP" }));
-        }}
-        topics={webSockets.topics}
-        getAudioStream={getAudioStream}
-        useActiveTopic={useActiveTopic}
-        isPastMeeting={false}
-        audioDevices={audioDevices}
-      />
+      {webSockets.waveform && webSockets.duration && mp3?.media ? (
+        <Player
+          topics={webSockets.topics || []}
+          useActiveTopic={useActiveTopic}
+          waveform={webSockets.waveform}
+          media={mp3.media}
+          mediaDuration={webSockets.duration}
+        />
+      ) : recordedTime ? (
+        <WaveformLoading />
+      ) : (
+        <Recorder
+          setStream={setStream}
+          onStop={() => {
+            setStream(null);
+            setRecordedTime(Date.now() - startTime);
+            webRTC?.send(JSON.stringify({ cmd: "STOP" }));
+          }}
+          onRecord={() => {
+            setStartTime(Date.now());
+          }}
+          getAudioStream={getAudioStream}
+          audioDevices={audioDevices}
+        />
+      )}

      <div className="grid grid-cols-1 lg:grid-cols-2 grid-rows-mobile-inner lg:grid-rows-1 gap-2 lg:gap-4 h-full">
        <TopicList
@@ -94,7 +125,7 @@ const TranscriptRecord = (details: TranscriptDetails) => {
        <section
          className={`w-full h-full bg-blue-400/20 rounded-lg md:rounded-xl p-2 md:px-4`}
        >
-          {!hasRecorded ? (
+          {!recordedTime ? (
            <>
              {transcriptStarted && (
                <h2 className="md:text-lg font-bold">Transcription</h2>
@@ -128,6 +159,7 @@ const TranscriptRecord = (details: TranscriptDetails) => {
                couple of minutes. Please do not navigate away from the page
                during this time.
              </p>
+              {/* NTH If login required remove last sentence */}
            </div>
          )}
        </section>