From 5d77b8be0c8fb593efd337bc3cf14e6b42de5bf0 Mon Sep 17 00:00:00 2001
From: Sergey Mankovsky <sergey@monadical.com>
Date: Fri, 5 Jul 2024 17:29:29 +0200
Subject: [PATCH] Separate upload file and record pages

---
 .../transcripts/[transcriptId]/page.tsx       |   3 +-
 .../[transcriptId]/upload/page.tsx            | 113 ++++++++++++++++++
 .../[domain]/transcripts/fileUploadButton.tsx |  24 +++-
 www/app/[domain]/transcripts/new/page.tsx     |  47 +++++---
 www/app/[domain]/transcripts/recorder.tsx     |   4 -
 5 files changed, 162 insertions(+), 29 deletions(-)
 create mode 100644 www/app/[domain]/transcripts/[transcriptId]/upload/page.tsx

diff --git a/www/app/[domain]/transcripts/[transcriptId]/page.tsx b/www/app/[domain]/transcripts/[transcriptId]/page.tsx
index 519fe7e1..f695786d 100644
--- a/www/app/[domain]/transcripts/[transcriptId]/page.tsx
+++ b/www/app/[domain]/transcripts/[transcriptId]/page.tsx
@@ -27,8 +27,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
 
   const transcript = useTranscript(transcriptId);
   const transcriptStatus = transcript.response?.status;
-  const waiting =
-    !transcriptStatus || statusToRedirect.includes(transcriptStatus);
+  const waiting = statusToRedirect.includes(transcriptStatus || "");
 
   const topics = useTopics(transcriptId);
   const waveform = useWaveform(transcriptId, waiting);
diff --git a/www/app/[domain]/transcripts/[transcriptId]/upload/page.tsx b/www/app/[domain]/transcripts/[transcriptId]/upload/page.tsx
new file mode 100644
index 00000000..c6e9eb69
--- /dev/null
+++ b/www/app/[domain]/transcripts/[transcriptId]/upload/page.tsx
@@ -0,0 +1,113 @@
+"use client";
+import { useEffect, useState } from "react";
+import useTranscript from "../../useTranscript";
+import { useWebSockets } from "../../useWebSockets";
+import "../../../../styles/button.css";
+import { lockWakeState, releaseWakeState } from "../../../../lib/wakeLock";
+import { useRouter } from "next/navigation";
+import useMp3 from "../../useMp3";
+import { Center, VStack, Text, Heading, Button } from "@chakra-ui/react";
+import FileUploadButton from "../../fileUploadButton";
+
+type TranscriptUpload = {
+  params: {
+    transcriptId: string;
+  };
+};
+
+const TranscriptUpload = (details: TranscriptUpload) => {
+  const transcript = useTranscript(details.params.transcriptId);
+  const [transcriptStarted, setTranscriptStarted] = useState(false);
+
+  const webSockets = useWebSockets(details.params.transcriptId);
+
+  let mp3 = useMp3(details.params.transcriptId, true);
+
+  const router = useRouter();
+
+  const [status, setStatus] = useState(
+    webSockets.status.value || transcript.response?.status || "idle",
+  );
+
+  useEffect(() => {
+    if (!transcriptStarted && webSockets.transcriptTextLive.length !== 0)
+      setTranscriptStarted(true);
+  }, [webSockets.transcriptTextLive]);
+
+  useEffect(() => {
+    //TODO HANDLE ERROR STATUS BETTER
+    const newStatus =
+      webSockets.status.value || transcript.response?.status || "idle";
+    setStatus(newStatus);
+    if (newStatus && (newStatus == "ended" || newStatus == "error")) {
+      console.log(newStatus, "redirecting");
+
+      const newUrl = "/transcripts/" + details.params.transcriptId;
+      router.replace(newUrl);
+    }
+  }, [webSockets.status.value, transcript.response?.status]);
+
+  useEffect(() => {
+    if (webSockets.waveform && webSockets.waveform) mp3.getNow();
+  }, [webSockets.waveform, webSockets.duration]);
+
+  useEffect(() => {
+    lockWakeState();
+    return () => {
+      releaseWakeState();
+    };
+  }, []);
+
+  return (
+    <>
+      <VStack
+        align={"left"}
+        w="full"
+        h="full"
+        mb={4}
+        background="gray.bg"
+        border={"2px solid"}
+        borderColor={"gray.bg"}
+        borderRadius={8}
+        p="4"
+      >
+        <Heading size={"lg"}>Upload meeting</Heading>
+        <Center h={"full"} w="full">
+          <VStack spacing={10}>
+            {status && status == "idle" && (
+              <>
+                <Text>
+                  Please select the file, supported formats: .mp3, m4a, .wav,
+                  .mp4, .mov or .webm
+                </Text>
+                <FileUploadButton transcriptId={details.params.transcriptId} />
+              </>
+            )}
+            {status && status == "uploaded" && (
+              <Text>File is uploaded, processing...</Text>
+            )}
+            {(status == "recording" || status == "processing") && (
+              <>
+                <Heading size={"lg"}>Processing your recording...</Heading>
+                <Text>
+                  You can safely return to the library while your file is being
+                  processed.
+                </Text>
+                <Button
+                  colorScheme="blue"
+                  onClick={() => {
+                    router.push("/browse");
+                  }}
+                >
+                  Browse
+                </Button>
+              </>
+            )}
+          </VStack>
+        </Center>
+      </VStack>
+    </>
+  );
+};
+
+export default TranscriptUpload;
diff --git a/www/app/[domain]/transcripts/fileUploadButton.tsx b/www/app/[domain]/transcripts/fileUploadButton.tsx
index 419245e2..3faba127 100644
--- a/www/app/[domain]/transcripts/fileUploadButton.tsx
+++ b/www/app/[domain]/transcripts/fileUploadButton.tsx
@@ -1,16 +1,15 @@
-import React from "react";
+import React, { useState } from "react";
 import useApi from "../../lib/useApi";
-import { Button } from "@chakra-ui/react";
+import { Button, CircularProgress } from "@chakra-ui/react";
 
 type FileUploadButton = {
   transcriptId: string;
-  disabled?: boolean;
 };
 
 export default function FileUploadButton(props: FileUploadButton) {
   const fileInputRef = React.useRef<HTMLInputElement>(null);
   const api = useApi();
-
+  const [progress, setProgress] = useState(0);
   const triggerFileUpload = () => {
     fileInputRef.current?.click();
   };
@@ -27,6 +26,12 @@ export default function FileUploadButton(props: FileUploadButton) {
         // Add other properties if required by the type definition
       };
 
+      api?.httpRequest.config.interceptors.request.use((request) => {
+        request.onUploadProgress = (progressEvent) => {
+          setProgress((progressEvent.progress || 0) * 100);
+        };
+        return request;
+      });
       api?.v1TranscriptRecordUpload({
         transcriptId: props.transcriptId,
         formData: uploadData,
@@ -40,9 +45,16 @@ export default function FileUploadButton(props: FileUploadButton) {
         onClick={triggerFileUpload}
         colorScheme="blue"
         mr={2}
-        isDisabled={props.disabled}
+        isDisabled={progress > 0}
       >
-        Upload File
+        {progress > 0 && progress < 100 ? (
+          <>
+            Uploading...&nbsp;
+            <CircularProgress size="20px" value={progress} />
+          </>
+        ) : (
+          <>Select File</>
+        )}
       </Button>
 
       <input
diff --git a/www/app/[domain]/transcripts/new/page.tsx b/www/app/[domain]/transcripts/new/page.tsx
index 2dd298bf..4287578e 100644
--- a/www/app/[domain]/transcripts/new/page.tsx
+++ b/www/app/[domain]/transcripts/new/page.tsx
@@ -12,7 +12,7 @@ import SelectSearch from "react-select-search";
 import { supportedLatinLanguages } from "../../../supportedLanguages";
 import { useFiefIsAuthenticated } from "@fief/fief/nextjs/react";
 import { featureEnabled } from "../../domainContext";
-
+import { Button, Text } from "@chakra-ui/react";
 const TranscriptCreate = () => {
   const router = useRouter();
   const isAuthenticated = useFiefIsAuthenticated();
@@ -30,21 +30,29 @@ const TranscriptCreate = () => {
 
   const createTranscript = useCreateTranscript();
 
-  const [loadingSend, setLoadingSend] = useState(false);
+  const [loadingRecord, setLoadingRecord] = useState(false);
+  const [loadingUpload, setLoadingUpload] = useState(false);
 
   const send = () => {
-    if (loadingSend || createTranscript.loading || permissionDenied) return;
-    setLoadingSend(true);
+    if (loadingRecord || createTranscript.loading || permissionDenied) return;
+    setLoadingRecord(true);
+    createTranscript.create({ name, target_language: targetLanguage });
+  };
+
+  const uploadFile = () => {
+    if (loadingUpload || createTranscript.loading || permissionDenied) return;
+    setLoadingUpload(true);
     createTranscript.create({ name, target_language: targetLanguage });
   };
 
   useEffect(() => {
+    const action = loadingRecord ? "record" : "upload";
     createTranscript.transcript &&
-      router.push(`/transcripts/${createTranscript.transcript.id}/record`);
+      router.push(`/transcripts/${createTranscript.transcript.id}/${action}`);
   }, [createTranscript.transcript]);
 
   useEffect(() => {
-    if (createTranscript.error) setLoadingSend(false);
+    if (createTranscript.error) setLoadingRecord(false);
   }, [createTranscript.error]);
 
   const { loading, permissionOk, permissionDenied, requestPermission } =
@@ -55,10 +63,7 @@ const TranscriptCreate = () => {
       <div className="lg:grid lg:grid-cols-2 lg:grid-rows-1 lg:gap-4 lg:h-full h-auto flex flex-col">
         <section className="flex flex-col w-full lg:h-full items-center justify-evenly p-4 md:px-6 md:py-8">
           <div className="flex flex-col max-w-xl items-center justify-center">
-            <h1 className="text-2xl font-bold mb-2">
-              Welcome to reflector.media
-            </h1>
-            <button>Test upload</button>
+            <h1 className="text-2xl font-bold mb-2">Welcome to Reflector</h1>
             <p>
               Reflector is a transcription and summarization pipeline that
               transforms audio into knowledge.
@@ -101,7 +106,6 @@ const TranscriptCreate = () => {
                   />
                 </div>
               </label>
-
               <label className="mb-3">
                 <p>Do you want to enable live translation?</p>
                 <SelectSearch
@@ -112,7 +116,6 @@ const TranscriptCreate = () => {
                   placeholder="Choose your language"
                 />
               </label>
-
               {loading ? (
                 <p className="">Checking permissions...</p>
               ) : permissionOk ? (
@@ -131,13 +134,23 @@ const TranscriptCreate = () => {
                   Request Microphone Permission
                 </button>
               )}
-              <button
-                className="mt-4 bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white font-bold py-2 px-4 rounded"
+              <Button
+                colorScheme="blue"
                 onClick={send}
-                disabled={!permissionOk || loadingSend}
+                isDisabled={!permissionOk || loadingRecord || loadingUpload}
               >
-                {loadingSend ? "Loading..." : "Confirm"}
-              </button>
+                {loadingRecord ? "Loading..." : "Record Meeting"}
+              </Button>
+              <Text align="center" m="2">
+                OR
+              </Text>
+              <Button
+                colorScheme="blue"
+                onClick={uploadFile}
+                isDisabled={!permissionOk || loadingRecord || loadingUpload}
+              >
+                {loadingUpload ? "Loading..." : "Upload File"}
+              </Button>
             </div>
           )}
         </section>
diff --git a/www/app/[domain]/transcripts/recorder.tsx b/www/app/[domain]/transcripts/recorder.tsx
index d583bb74..0f8b23cb 100644
--- a/www/app/[domain]/transcripts/recorder.tsx
+++ b/www/app/[domain]/transcripts/recorder.tsx
@@ -266,10 +266,6 @@ export default function Recorder(props: RecorderProps) {
         mr={2}
         onClick={handleRecClick}
       />
-      <FileUploadButton
-        transcriptId={props.transcriptId}
-        disabled={isRecording}
-      ></FileUploadButton>
       {!isRecording && (window as any).chrome && (
         <IconButton
           aria-label={"Record Tab"}