adds meeting setup

www/app/transcripts/new/page.tsx

@@ -1,7 +1,5 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import Recorder from "../recorder";
-import { TopicList } from "../topicList";
 import useWebRTC from "../useWebRTC";
 import useTranscript from "../useTranscript";
 import { useWebSockets } from "../useWebSockets";
@@ -9,35 +7,37 @@ 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 About from "../../(aboutAndPrivacy)/about";
 import Privacy from "../../(aboutAndPrivacy)/privacy";
 import { lockWakeState, releaseWakeState } from "../../lib/wakeLock";
 import { useRouter } from "next/navigation";
+import createTranscript from "../createTranscript";
+import { GetTranscript } from "../../api";
+import { Router } from "next/router";
+import useCreateTranscript from "../createTranscript";
 
 const TranscriptCreate = () => {
-  const [stream, setStream] = useState<MediaStream | null>(null);
-  const [disconnected, setDisconnected] = useState<boolean>(false);
-  const useActiveTopic = useState<Topic | null>(null);
-
-  useEffect(() => {
-    if (process.env.NEXT_PUBLIC_ENV === "development") {
-      document.onkeyup = (e) => {
-        if (e.key === "d") {
-          setDisconnected((prev) => !prev);
-        }
-      };
-    }
-  }, []);
-
-  const api = getApi();
-  const transcript = useTranscript(stream, api);
-  const webRTC = useWebRTC(stream, transcript?.response?.id, api);
-  const webSockets = useWebSockets(transcript?.response?.id);
+  // const transcript = useTranscript(stream, api);
   const router = useRouter();
+  const api = getApi();
+
+  const [name, setName] = useState<string>();
+  const nameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setName(event.target.value);
+  };
+  const [targetLanguage, setTargetLanguage] = useState<string>();
+
+  const createTranscript = useCreateTranscript();
+
+  const send = () => {
+    if (createTranscript.loading || permissionDenied) return;
+    createTranscript.create({ name, targetLanguage });
+  };
+  useEffect(() => {
+    createTranscript.response &&
+      router.push(`/transcripts/${createTranscript.response.id}/record`);
+  }, [createTranscript.response]);
+
   const {
     loading,
     permissionOk,
@@ -47,151 +47,62 @@ const TranscriptCreate = () => {
     getAudioStream,
   } = useAudioDevice();
 
-  const [hasRecorded, setHasRecorded] = useState(false);
-  const [transcriptStarted, setTranscriptStarted] = useState(false);
-
-  useEffect(() => {
-    if (!transcriptStarted && webSockets.transcriptText.length !== 0)
-      setTranscriptStarted(true);
-  }, [webSockets.transcriptText]);
-
-  useEffect(() => {
-    if (transcript?.response?.id) {
-      const newUrl = `/transcripts/${transcript.response.id}`;
-      // 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);
-    }
-  });
-
-  useEffect(() => {
-    lockWakeState();
-    return () => {
-      releaseWakeState();
-    };
-  }, []);
-
   return (
     <>
-      {permissionOk ? (
-        <>
-          <Recorder
-            setStream={setStream}
-            onStop={() => {
-              webRTC?.send(JSON.stringify({ cmd: "STOP" }));
-              setStream(null);
-              setHasRecorded(true);
-            }}
-            topics={webSockets.topics}
-            getAudioStream={getAudioStream}
-            useActiveTopic={useActiveTopic}
-            isPastMeeting={false}
-            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
-              topics={webSockets.topics}
-              useActiveTopic={useActiveTopic}
-              autoscroll={true}
-            />
-
-            <section
-              className={`w-full h-full bg-blue-400/20 rounded-lg md:rounded-xl p-2 md:px-4`}
-            >
-              {!hasRecorded ? (
-                <>
-                  {transcriptStarted && (
-                    <h2 className="md:text-lg font-bold">Transcription</h2>
-                  )}
-                  <div className="flex flex-col justify-center align center text-center h-full">
-                    <div className="py-2 h-auto">
-                      {!transcriptStarted ? (
-                        <div className="text-center text-gray-500">
-                          The conversation transcript will appear here shortly
-                          after you start recording.
-                        </div>
-                      ) : (
-                        <LiveTrancription text={webSockets.transcriptText} />
-                      )}
-                    </div>
-                  </div>
-                </>
+      <div></div>
+      <div className="max-h-full overflow-auto">
+        <section className="flex flex-col w-full h-full items-center justify-evenly p-4 md:px-6 md:py-8">
+          <div>
+            <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>
+              <p>
+                Reflector is a transcription and summarization pipeline that
+                transforms audio into knowledge. The output is meeting minutes
+                and topic summaries enabling topic-specific analyses stored in
+                your systems of record. This is accomplished on your
+                infrastructure – without 3rd parties – keeping your data
+                private, secure, and organized.
+              </p>
+              <About buttonText="Learn more" />
+              <input type="text" onChange={nameChange} />
+              <button onClick={() => setTargetLanguage("fr")}>Language</button>
+              <h2 className="text-2xl font-bold mt-4 mb-2">
+                Audio Permissions
+              </h2>
+              {loading ? (
+                <p className="text-center">Checking permission...</p>
+              ) : permissionOk ? (
+                <> Microphone permission granted </>
               ) : (
-                <div className="flex flex-col justify-center align center text-center h-full text-gray-500">
-                  <div className="p-2 md:p-4">
-                    <FontAwesomeIcon
-                      icon={faGear}
-                      className="animate-spin-slow h-14 w-14 md:h-20 md:w-20"
-                    />
-                  </div>
-                  <p>
-                    We are generating the final summary for you. This may take a
-                    couple of minutes. Please do not navigate away from the page
-                    during this time.
+                <>
+                  <p className="text-center">
+                    In order to use Reflector, we kindly request permission to
+                    access your microphone during meetings and events.
+                    <br />
+                    <Privacy buttonText="Privacy policy" />
+                    <br />
+                    {permissionDenied
+                      ? "Permission to use your microphone was denied, please change the permission setting in your browser and refresh this page."
+                      : "Please grant permission to continue."}
                   </p>
-                </div>
+                  <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 m-auto"
+                    onClick={requestPermission}
+                    disabled={permissionDenied}
+                  >
+                    {permissionDenied ? "Access denied" : "Grant Permission"}
+                  </button>
+                </>
               )}
-            </section>
+            </div>
+            <button onClick={send} disabled={!permissionOk}>
+              {createTranscript.loading ? "loading" : "Send"}
+            </button>
           </div>
-
-          {disconnected && <DisconnectedIndicator />}
-        </>
-      ) : (
-        <>
-          <div></div>
-          <div className="max-h-full overflow-auto">
-            <section className="flex flex-col w-full h-full items-center justify-evenly p-4 md:px-6 md:py-8">
-              <div>
-                <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>
-                  <p>
-                    Reflector is a transcription and summarization pipeline that
-                    transforms audio into knowledge. The output is meeting
-                    minutes and topic summaries enabling topic-specific analyses
-                    stored in your systems of record. This is accomplished on
-                    your infrastructure – without 3rd parties – keeping your
-                    data private, secure, and organized.
-                  </p>
-                  <About buttonText="Learn more" />
-                  <h2 className="text-2xl font-bold mt-4 mb-2">
-                    Audio Permissions
-                  </h2>
-                  {loading ? (
-                    <p className="text-center">Checking permission...</p>
-                  ) : (
-                    <>
-                      <p className="text-center">
-                        In order to use Reflector, we kindly request permission
-                        to access your microphone during meetings and events.
-                        <br />
-                        <Privacy buttonText="Privacy policy" />
-                        <br />
-                        {permissionDenied
-                          ? "Permission to use your microphone was denied, please change the permission setting in your browser and refresh this page."
-                          : "Please grant permission to continue."}
-                      </p>
-                      <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 m-auto"
-                        onClick={requestPermission}
-                        disabled={permissionDenied}
-                      >
-                        {permissionDenied
-                          ? "Access denied"
-                          : "Grant Permission"}
-                      </button>
-                    </>
-                  )}
-                </div>
-              </div>
-            </section>
-          </div>
-        </>
-      )}
+        </section>
+      </div>
     </>
   );
 };