Merge branch 'main' of github.com:Monadical-SAS/reflector into sara/recorder-memory

www/app/lib/time.ts

@@ -9,3 +9,18 @@ export const formatTime = (seconds: number): string => {
 
   return timeString;
 };
+
+export const formatTimeDifference = (seconds: number): string => {
+  let hours = Math.floor(seconds / 3600);
+  let minutes = Math.floor((seconds % 3600) / 60);
+  let secs = Math.floor(seconds % 60);
+
+  let timeString =
+    hours > 0
+      ? `${hours < 10 ? "\u00A0" : ""}${hours}h ago`
+      : minutes > 0
+      ? `${minutes < 10 ? "\u00A0" : ""}${minutes}m ago`
+      : `<1m ago`;
+
+  return timeString;
+};

www/app/lib/utils.ts

@@ -0,0 +1,3 @@
+export function isDevelopment() {
+  return process.env.NEXT_PUBLIC_ENV === "development";
+}

www/app/transcripts/new/page.tsx

@@ -16,6 +16,7 @@ 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";
 
 const TranscriptCreate = () => {
   const [stream, setStream] = useState<MediaStream | null>(null);
@@ -36,6 +37,7 @@ const TranscriptCreate = () => {
   const transcript = useTranscript(stream, api);
   const webRTC = useWebRTC(stream, transcript?.response?.id, api);
   const webSockets = useWebSockets(transcript?.response?.id);
+  const router = useRouter();
   const {
     loading,
     permissionOk,
@@ -53,6 +55,17 @@ const TranscriptCreate = () => {
       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 () => {
@@ -67,7 +80,7 @@ const TranscriptCreate = () => {
           <Recorder
             setStream={setStream}
             onStop={() => {
-              webRTC?.peer?.send(JSON.stringify({ cmd: "STOP" }));
+              webRTC?.send(JSON.stringify({ cmd: "STOP" }));
               setStream(null);
               setHasRecorded(true);
             }}

www/app/transcripts/recorder.tsx

@@ -198,13 +198,6 @@ export default function Recorder(props: RecorderProps) {
     if (!record) return;
 
     return record.on("stopRecording", () => {
-      const link = document.getElementById("download-recording");
-      if (!link) return;
-
-      link.setAttribute("href", record.getRecordedUrl());
-      link.setAttribute("download", "reflector-recording.webm");
-      link.style.visibility = "visible";
-
       renderMarkers();
     });
   }, [record]);
@@ -313,16 +306,6 @@ export default function Recorder(props: RecorderProps) {
               <FontAwesomeIcon icon={faDownload} className="h-5 w-auto" />
             </a>
           )}
-
-          {!props.transcriptId && (
-            <a
-              id="download-recording"
-              title="Download recording"
-              className="invisible text-center text-blue-400 hover:text-blue-700 ml-2 md:ml:4 p-2 rounded-lg outline-blue-400"
-            >
-              <FontAwesomeIcon icon={faDownload} className="h-5 w-auto" />
-            </a>
-          )}
         </>
       )}
       {!hasRecorded && (

www/app/transcripts/useAudioDevice.ts

@@ -78,11 +78,23 @@ const useAudioDevice = () => {
     deviceId: string,
   ): Promise<MediaStream | null> => {
     try {
+      const urlParams = new URLSearchParams(window.location.search);
+
+      const noiseSuppression = urlParams.get("noiseSuppression") === "true";
+      const echoCancellation = urlParams.get("echoCancellation") === "true";
+
+      console.debug(
+        "noiseSuppression",
+        noiseSuppression,
+        "echoCancellation",
+        echoCancellation,
+      );
+
       const stream = await navigator.mediaDevices.getUserMedia({
         audio: {
           deviceId,
-          noiseSuppression: false,
-          echoCancellation: false,
+          noiseSuppression,
+          echoCancellation,
         },
       });
       return stream;

www/app/transcripts/useWebSockets.ts

@@ -177,6 +177,16 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
           case "FINAL_LONG_SUMMARY":
             if (message.data) {
               setFinalSummary(message.data);
+            }
+            break;
+
+          case "FINAL_TITLE":
+            console.debug("FINAL_TITLE event:", message.data);
+            break;
+
+          case "STATUS":
+            console.log("STATUS event:", message.data);
+            if (message.data.value === "ended") {
               const newUrl = "/transcripts/" + transcriptId;
               router.push(newUrl);
               console.debug(
@@ -186,13 +196,6 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
                 newUrl,
               );
             }
-            break;
-
-          case "FINAL_TITLE":
-            console.debug("FINAL_TITLE event:", message.data);
-            break;
-
-          case "STATUS":
             setStatus(message.data);
             break;
 

www/app/transcripts/webSocketTypes.ts

@@ -17,3 +17,8 @@ export type FinalSummary = {
 export type Status = {
   value: string;
 };
+
+export type TranslatedTopic = {
+  text: string;
+  translation: string;
+};