Merge branch 'main' of github.com:Monadical-SAS/reflector into feat-sharing

2025-12-20 20:29:06 +00:00 · 2023-11-21 12:11:58 +01:00
parent de4079f611 55a3a59d52
commit fe7f1a0e78
47 changed files with 1163 additions and 614 deletions
--- a/www/app/(errors)/errorContext.tsx
+++ b/www/app/(errors)/errorContext.tsx
@@ -3,7 +3,8 @@ import React, { createContext, useContext, useState } from "react";

 interface ErrorContextProps {
  error: Error | null;
-  setError: React.Dispatch<React.SetStateAction<Error | null>>;
+  humanMessage?: string;
+  setError: (error: Error, humanMessage?: string) => void;
 }

 const ErrorContext = createContext<ErrorContextProps | undefined>(undefined);
@@ -22,9 +23,16 @@ interface ErrorProviderProps {

 export const ErrorProvider: React.FC<ErrorProviderProps> = ({ children }) => {
  const [error, setError] = useState<Error | null>(null);
+  const [humanMessage, setHumanMessage] = useState<string | undefined>();

+  const declareError = (error, humanMessage?) => {
+    setError(error);
+    setHumanMessage(humanMessage);
+  };
  return (
-    <ErrorContext.Provider value={{ error, setError }}>
+    <ErrorContext.Provider
+      value={{ error, setError: declareError, humanMessage }}
+    >
      {children}
    </ErrorContext.Provider>
  );
--- a/www/app/(errors)/errorMessage.tsx
+++ b/www/app/(errors)/errorMessage.tsx
@@ -4,29 +4,51 @@ import { useEffect, useState } from "react";
 import * as Sentry from "@sentry/react";

 const ErrorMessage: React.FC = () => {
-  const { error, setError } = useError();
+  const { error, setError, humanMessage } = useError();
  const [isVisible, setIsVisible] = useState<boolean>(false);

+  // Setup Shortcuts
+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      switch (event.key) {
+        case "^":
+          throw new Error("Unhandled Exception thrown by '^' shortcut");
+        case "$":
+          setError(
+            new Error("Unhandled Exception thrown by '$' shortcut"),
+            "You did this to yourself",
+          );
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyPress);
+    return () => document.removeEventListener("keydown", handleKeyPress);
+  }, []);
+
  useEffect(() => {
    if (error) {
-      setIsVisible(true);
-      Sentry.captureException(error);
-      console.error("Error", error.message, error);
+      if (humanMessage) {
+        setIsVisible(true);
+        Sentry.captureException(Error(humanMessage, { cause: error }));
+      } else {
+        Sentry.captureException(error);
+      }
+
+      console.error("Error", error);
    }
  }, [error]);

-  if (!isVisible || !error) return null;
+  if (!isVisible || !humanMessage) return null;

  return (
    <button
      onClick={() => {
        setIsVisible(false);
-        setError(null);
      }}
      className="max-w-xs z-50 fixed bottom-5 right-5 md:bottom-10 md:right-10 border-solid bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded transition-opacity duration-300 ease-out opacity-100 hover:opacity-80 focus-visible:opacity-80 cursor-pointer transform hover:scale-105 focus-visible:scale-105"
      role="alert"
    >
-      <span className="block sm:inline">{error?.message}</span>
+      <span className="block sm:inline">{humanMessage}</span>
    </button>
  );
 };
--- a/www/app/[domain]/browse/pagination.tsx
+++ b/www/app/[domain]/browse/pagination.tsx
@@ -40,7 +40,7 @@ export default function Pagination(props: PaginationProps) {
  return (
    <div className="flex justify-center space-x-4 my-4">
      <button
-        className={`w-10 h-10 rounded-full p-2 border border-gray-300 rounded-full disabled:bg-white ${
+        className={`w-10 h-10 rounded-full p-2 border border-gray-300 disabled:bg-white ${
          canGoPrevious ? "text-gray-500" : "text-gray-300"
        }`}
        onClick={() => handlePageChange(page - 1)}
@@ -52,7 +52,7 @@ export default function Pagination(props: PaginationProps) {
      {pageNumbers.map((pageNumber) => (
        <button
          key={pageNumber}
-          className={`w-10 h-10 rounded-full p-2 border rounded-full ${
+          className={`w-10 h-10 rounded-full p-2 border ${
            page === pageNumber ? "border-gray-600" : "border-gray-300"
          } rounded`}
          onClick={() => handlePageChange(pageNumber)}
@@ -62,7 +62,7 @@ export default function Pagination(props: PaginationProps) {
      ))}

      <button
-        className={`w-10 h-10 rounded-full p-2 border border-gray-300 rounded-full disabled:bg-white ${
+        className={`w-10 h-10 rounded-full p-2 border border-gray-300 disabled:bg-white ${
          canGoNext ? "text-gray-500" : "text-gray-300"
        }`}
        onClick={() => handlePageChange(page + 1)}
--- a/www/app/[domain]/transcripts/[transcriptId]/page.tsx
+++ b/www/app/[domain]/transcripts/[transcriptId]/page.tsx
@@ -5,14 +5,15 @@ 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 Player from "../player";
+import WaveformLoading from "../waveformLoading";

 type TranscriptDetails = {
  params: {
@@ -29,9 +30,9 @@ export default function TranscriptDetails(details: TranscriptDetails) {
  const topics = useTopics(protectedPath, transcriptId);
  const waveform = useWaveform(protectedPath, transcriptId);
  const useActiveTopic = useState<Topic | null>(null);
-  const mp3 = useMp3(protectedPath, transcriptId);
+  const mp3 = useMp3(transcriptId);

-  if (transcript?.error /** || topics?.error || waveform?.error **/) {
+  if (transcript?.error || topics?.error) {
    return (
      <Modal
        title="Transcription Not Found"
@@ -40,6 +41,18 @@ export default function TranscriptDetails(details: TranscriptDetails) {
    );
  }

+  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, { shallow: true });
+      history.replaceState({}, "", newUrl);
+    }
+  }, [transcript.response?.status]);
+
  const fullTranscript =
    topics.topics
      ?.map((topic) => topic.transcript)
@@ -49,7 +62,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {

  return (
    <>
-      {!transcriptId || transcript?.loading || topics?.loading ? (
+      {transcript?.loading || topics?.loading ? (
        <Modal title="Loading" text={"Loading transcript..."} />
      ) : (
        <>
@@ -61,32 +74,47 @@ export default function TranscriptDetails(details: TranscriptDetails) {
                transcriptId={transcript.response.id}
              />
            )}
-            {waveform?.loading === false && (
-              <Recorder
+            {waveform.waveform && mp3.media ? (
+              <Player
                topics={topics?.topics || []}
                useActiveTopic={useActiveTopic}
-                waveform={waveform?.waveform}
-                isPastMeeting={true}
-                transcriptId={transcript?.response?.id}
-                mp3Blob={mp3.blob}
+                waveform={waveform.waveform.data}
+                media={mp3.media}
+                mediaDuration={transcript.response.duration}
              />
+            ) : 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 || []}
+              topics={topics.topics || []}
              useActiveTopic={useActiveTopic}
              autoscroll={false}
            />
+
            <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 && (
+                {transcript.response.longSummary ? (
                  <FinalSummary
                    protectedPath={protectedPath}
                    fullTranscript={fullTranscript}
-                    summary={transcript?.response?.longSummary}
-                    transcriptId={transcript?.response?.id}
+                    summary={transcript.response.longSummary}
+                    transcriptId={transcript.response.id}
                  />
+                ) : (
+                  <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>
                )}
              </section>

--- 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, { Mp3Response } from "../../useMp3";
+import WaveformLoading from "../../waveformLoading";

 type TranscriptDetails = {
  params: {
@@ -42,8 +45,12 @@ const TranscriptRecord = (details: TranscriptDetails) => {

  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>
--- a/www/app/[domain]/transcripts/createTranscript.ts
+++ b/www/app/[domain]/transcripts/createTranscript.ts
@@ -45,7 +45,10 @@ const useCreateTranscript = (): CreateTranscript => {
        console.debug("New transcript created:", result);
      })
      .catch((err) => {
-        setError(err);
+        setError(
+          err,
+          "There was an issue creating a transcript, please try again.",
+        );
        setErrorState(err);
        setLoading(false);
      });
--- a/www/app/[domain]/transcripts/finalSummary.tsx
+++ b/www/app/[domain]/transcripts/finalSummary.tsx
@@ -87,7 +87,7 @@ export default function FinalSummary(props: FinalSummaryProps) {
    <div
      className={
        (isEditMode ? "overflow-y-none" : "overflow-y-auto") +
-        " h-auto max-h-full flex flex-col h-full"
+        " max-h-full flex flex-col h-full"
      }
    >
      <div className="flex flex-row flex-wrap-reverse justify-between items-center">
--- a/www/app/[domain]/transcripts/player.tsx
+++ b/www/app/[domain]/transcripts/player.tsx
@@ -0,0 +1,166 @@
+import React, { useRef, useEffect, useState } from "react";
+
+import WaveSurfer from "wavesurfer.js";
+import CustomRegionsPlugin from "../../lib/custom-plugins/regions";
+
+import { formatTime } from "../../lib/time";
+import { Topic } from "./webSocketTypes";
+import { AudioWaveform } from "../../api";
+import { waveSurferStyles } from "../../styles/recorder";
+
+type PlayerProps = {
+  topics: Topic[];
+  useActiveTopic: [
+    Topic | null,
+    React.Dispatch<React.SetStateAction<Topic | null>>,
+  ];
+  waveform: AudioWaveform["data"];
+  media: HTMLMediaElement;
+  mediaDuration: number;
+};
+
+export default function Player(props: PlayerProps) {
+  const waveformRef = useRef<HTMLDivElement>(null);
+  const [wavesurfer, setWavesurfer] = useState<WaveSurfer | null>(null);
+  const [isPlaying, setIsPlaying] = useState<boolean>(false);
+  const [currentTime, setCurrentTime] = useState<number>(0);
+  const [waveRegions, setWaveRegions] = useState<CustomRegionsPlugin | null>(
+    null,
+  );
+  const [activeTopic, setActiveTopic] = props.useActiveTopic;
+  const topicsRef = useRef(props.topics);
+  // Waveform setup
+  useEffect(() => {
+    if (waveformRef.current) {
+      // XXX duration is required to prevent recomputing peaks from audio
+      // However, the current waveform returns only the peaks, and no duration
+      // And the backend does not save duration properly.
+      // So at the moment, we deduct the duration from the topics.
+      // This is not ideal, but it works for now.
+      const _wavesurfer = WaveSurfer.create({
+        container: waveformRef.current,
+        peaks: props.waveform,
+        hideScrollbar: true,
+        autoCenter: true,
+        barWidth: 2,
+        height: "auto",
+        duration: props.mediaDuration,
+
+        ...waveSurferStyles.player,
+      });
+
+      // styling
+      const wsWrapper = _wavesurfer.getWrapper();
+      wsWrapper.style.cursor = waveSurferStyles.playerStyle.cursor;
+      wsWrapper.style.backgroundColor =
+        waveSurferStyles.playerStyle.backgroundColor;
+      wsWrapper.style.borderRadius = waveSurferStyles.playerStyle.borderRadius;
+
+      _wavesurfer.on("play", () => {
+        setIsPlaying(true);
+      });
+      _wavesurfer.on("pause", () => {
+        setIsPlaying(false);
+      });
+      _wavesurfer.on("timeupdate", setCurrentTime);
+
+      setWaveRegions(_wavesurfer.registerPlugin(CustomRegionsPlugin.create()));
+
+      _wavesurfer.toggleInteraction(true);
+
+      _wavesurfer.setMediaElement(props.media);
+
+      setWavesurfer(_wavesurfer);
+
+      return () => {
+        _wavesurfer.destroy();
+        setIsPlaying(false);
+        setCurrentTime(0);
+      };
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!wavesurfer) return;
+    if (!props.media) return;
+    wavesurfer.setMediaElement(props.media);
+  }, [props.media, wavesurfer]);
+
+  useEffect(() => {
+    topicsRef.current = props.topics;
+    renderMarkers();
+  }, [props.topics, waveRegions]);
+
+  const renderMarkers = () => {
+    if (!waveRegions) return;
+
+    waveRegions.clearRegions();
+
+    for (let topic of topicsRef.current) {
+      const content = document.createElement("div");
+      content.setAttribute("style", waveSurferStyles.marker);
+      content.onmouseover = () => {
+        content.style.backgroundColor =
+          waveSurferStyles.markerHover.backgroundColor;
+        content.style.zIndex = "999";
+        content.style.width = "300px";
+      };
+      content.onmouseout = () => {
+        content.setAttribute("style", waveSurferStyles.marker);
+      };
+      content.textContent = topic.title;
+
+      const region = waveRegions.addRegion({
+        start: topic.timestamp,
+        content,
+        color: "f00",
+        drag: false,
+      });
+      region.on("click", (e) => {
+        e.stopPropagation();
+        setActiveTopic(topic);
+        wavesurfer?.setTime(region.start);
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (activeTopic) {
+      wavesurfer?.setTime(activeTopic.timestamp);
+    }
+  }, [activeTopic]);
+
+  const handlePlayClick = () => {
+    wavesurfer?.playPause();
+  };
+
+  const timeLabel = () => {
+    if (props.mediaDuration)
+      return `${formatTime(currentTime)}/${formatTime(props.mediaDuration)}`;
+    return "";
+  };
+
+  return (
+    <div className="flex items-center w-full relative">
+      <div className="flex-grow items-end relative">
+        <div
+          ref={waveformRef}
+          className="flex-grow rounded-lg md:rounded-xl h-20"
+        ></div>
+        <div className="absolute right-2 bottom-0">{timeLabel()}</div>
+      </div>
+
+      <button
+        className={`${
+          isPlaying
+            ? "bg-orange-400 hover:bg-orange-500 focus-visible:bg-orange-500"
+            : "bg-green-400 hover:bg-green-500 focus-visible:bg-green-500"
+        } text-white ml-2 md:ml:4 md:h-[78px] md:min-w-[100px] text-lg`}
+        id="play-btn"
+        onClick={handlePlayClick}
+      >
+        {isPlaying ? "Pause" : "Play"}
+      </button>
+    </div>
+  );
+}
--- a/www/app/[domain]/transcripts/recorder.tsx
+++ b/www/app/[domain]/transcripts/recorder.tsx
@@ -6,31 +6,19 @@ import CustomRegionsPlugin from "../../lib/custom-plugins/regions";

 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMicrophone } from "@fortawesome/free-solid-svg-icons";
-import { faDownload } from "@fortawesome/free-solid-svg-icons";

 import { formatTime } from "../../lib/time";
-import { Topic } from "./webSocketTypes";
-import { AudioWaveform } from "../../api";
 import AudioInputsDropdown from "./audioInputsDropdown";
 import { Option } from "react-dropdown";
-import { useError } from "../../(errors)/errorContext";
 import { waveSurferStyles } from "../../styles/recorder";
-import useMp3 from "./useMp3";
+import { useError } from "../../(errors)/errorContext";

 type RecorderProps = {
-  setStream?: React.Dispatch<React.SetStateAction<MediaStream | null>>;
-  onStop?: () => void;
-  topics: Topic[];
-  getAudioStream?: (deviceId) => Promise<MediaStream | null>;
-  audioDevices?: Option[];
-  useActiveTopic: [
-    Topic | null,
-    React.Dispatch<React.SetStateAction<Topic | null>>,
-  ];
-  waveform?: AudioWaveform | null;
-  isPastMeeting: boolean;
-  transcriptId?: string | null;
-  mp3Blob?: Blob | null;
+  setStream: React.Dispatch<React.SetStateAction<MediaStream | null>>;
+  onStop: () => void;
+  onRecord?: () => void;
+  getAudioStream: (deviceId) => Promise<MediaStream | null>;
+  audioDevices: Option[];
 };

 export default function Recorder(props: RecorderProps) {
@@ -38,7 +26,7 @@ export default function Recorder(props: RecorderProps) {
  const [wavesurfer, setWavesurfer] = useState<WaveSurfer | null>(null);
  const [record, setRecord] = useState<RecordPlugin | null>(null);
  const [isRecording, setIsRecording] = useState<boolean>(false);
-  const [hasRecorded, setHasRecorded] = useState<boolean>(props.isPastMeeting);
+  const [hasRecorded, setHasRecorded] = useState<boolean>(false);
  const [isPlaying, setIsPlaying] = useState<boolean>(false);
  const [currentTime, setCurrentTime] = useState<number>(0);
  const [timeInterval, setTimeInterval] = useState<number | null>(null);
@@ -48,8 +36,6 @@ export default function Recorder(props: RecorderProps) {
  );
  const [deviceId, setDeviceId] = useState<string | null>(null);
  const [recordStarted, setRecordStarted] = useState(false);
-  const [activeTopic, setActiveTopic] = props.useActiveTopic;
-  const topicsRef = useRef(props.topics);
  const [showDevices, setShowDevices] = useState(false);
  const { setError } = useError();

@@ -73,11 +59,6 @@ export default function Recorder(props: RecorderProps) {
          if (!record.isRecording()) return;
          handleRecClick();
          break;
-        case "%":
-          setError(new Error("Error triggered by '%' shortcut"));
-          break;
-        case "^":
-          throw new Error("Unhandled Exception thrown by '^' shortcut");
        case "(":
          location.href = "/login";
          break;
@@ -109,7 +90,6 @@ export default function Recorder(props: RecorderProps) {
    if (waveformRef.current) {
      const _wavesurfer = WaveSurfer.create({
        container: waveformRef.current,
-        peaks: props.waveform?.data,
        hideScrollbar: true,
        autoCenter: true,
        barWidth: 2,
@@ -118,10 +98,8 @@ export default function Recorder(props: RecorderProps) {
        ...waveSurferStyles.player,
      });

-      if (!props.transcriptId) {
-        const _wshack: any = _wavesurfer;
-        _wshack.renderer.renderSingleCanvas = () => {};
-      }
+      const _wshack: any = _wavesurfer;
+      _wshack.renderer.renderSingleCanvas = () => {};

      // styling
      const wsWrapper = _wavesurfer.getWrapper();
@@ -141,12 +119,6 @@ export default function Recorder(props: RecorderProps) {
      setRecord(_wavesurfer.registerPlugin(RecordPlugin.create()));
      setWaveRegions(_wavesurfer.registerPlugin(CustomRegionsPlugin.create()));

-      if (props.isPastMeeting) _wavesurfer.toggleInteraction(true);
-
-      if (props.mp3Blob) {
-        _wavesurfer.loadBlob(props.mp3Blob);
-      }
-
      setWavesurfer(_wavesurfer);

      return () => {
@@ -158,58 +130,6 @@ export default function Recorder(props: RecorderProps) {
    }
  }, []);

-  useEffect(() => {
-    if (!wavesurfer) return;
-    if (!props.mp3Blob) return;
-    wavesurfer.loadBlob(props.mp3Blob);
-  }, [props.mp3Blob]);
-
-  useEffect(() => {
-    topicsRef.current = props.topics;
-    if (!isRecording) renderMarkers();
-  }, [props.topics, waveRegions]);
-
-  const renderMarkers = () => {
-    if (!waveRegions) return;
-
-    waveRegions.clearRegions();
-
-    for (let topic of topicsRef.current) {
-      const content = document.createElement("div");
-      content.setAttribute("style", waveSurferStyles.marker);
-      content.onmouseover = () => {
-        content.style.backgroundColor =
-          waveSurferStyles.markerHover.backgroundColor;
-        content.style.zIndex = "999";
-        content.style.width = "300px";
-      };
-      content.onmouseout = () => {
-        content.setAttribute("style", waveSurferStyles.marker);
-      };
-      content.textContent = topic.title;
-
-      const region = waveRegions.addRegion({
-        start: topic.timestamp,
-        content,
-        color: "f00",
-        drag: false,
-      });
-      region.on("click", (e) => {
-        e.stopPropagation();
-        setActiveTopic(topic);
-        wavesurfer?.setTime(region.start);
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (!record) return;
-
-    return record.on("stopRecording", () => {
-      renderMarkers();
-    });
-  }, [record]);
-
  useEffect(() => {
    if (isRecording) {
      const interval = window.setInterval(() => {
@@ -226,25 +146,24 @@ export default function Recorder(props: RecorderProps) {
    }
  }, [isRecording]);

-  useEffect(() => {
-    if (activeTopic) {
-      wavesurfer?.setTime(activeTopic.timestamp);
-    }
-  }, [activeTopic]);
-
  const handleRecClick = async () => {
    if (!record) return console.log("no record");

    if (record.isRecording()) {
      if (props.onStop) props.onStop();
      record.stopRecording();
+      if (screenMediaStream) {
+        screenMediaStream.getTracks().forEach((t) => t.stop());
+      }
      setIsRecording(false);
      setHasRecorded(true);
+      setScreenMediaStream(null);
+      setDestinationStream(null);
    } else {
+      if (props.onRecord) props.onRecord();
      const stream = await getCurrentStream();

      if (props.setStream) props.setStream(stream);
-      waveRegions?.clearRegions();
      if (stream) {
        await record.startRecording(stream);
        setIsRecording(true);
@@ -252,6 +171,76 @@ export default function Recorder(props: RecorderProps) {
    }
  };

+  const [screenMediaStream, setScreenMediaStream] =
+    useState<MediaStream | null>(null);
+
+  const handleRecordTabClick = async () => {
+    if (!record) return console.log("no record");
+    const stream: MediaStream = await navigator.mediaDevices.getDisplayMedia({
+      video: true,
+      audio: {
+        echoCancellation: true,
+        noiseSuppression: true,
+        sampleRate: 44100,
+      },
+    });
+
+    if (stream.getAudioTracks().length == 0) {
+      setError(new Error("No audio track found in screen recording."));
+      return;
+    }
+    setScreenMediaStream(stream);
+  };
+
+  const [destinationStream, setDestinationStream] =
+    useState<MediaStream | null>(null);
+
+  const startTabRecording = async () => {
+    if (!screenMediaStream) return;
+    if (!record) return;
+    if (destinationStream !== null) return console.log("already recording");
+
+    // connect mic audio (microphone)
+    const micStream = await getCurrentStream();
+    if (!micStream) {
+      console.log("no microphone audio");
+      return;
+    }
+
+    // Create MediaStreamSource nodes for the microphone and tab
+    const audioContext = new AudioContext();
+    const micSource = audioContext.createMediaStreamSource(micStream);
+    const tabSource = audioContext.createMediaStreamSource(screenMediaStream);
+
+    // Merge channels
+    // XXX If the length is not the same, we do not receive audio in WebRTC.
+    // So for now, merge the channels to have only one stereo source
+    const channelMerger = audioContext.createChannelMerger(1);
+    micSource.connect(channelMerger, 0, 0);
+    tabSource.connect(channelMerger, 0, 0);
+
+    // Create a MediaStreamDestination node
+    const destination = audioContext.createMediaStreamDestination();
+    channelMerger.connect(destination);
+
+    // Use the destination's stream for the WebRTC connection
+    setDestinationStream(destination.stream);
+  };
+
+  useEffect(() => {
+    if (!record) return;
+    if (!destinationStream) return;
+    if (props.setStream) props.setStream(destinationStream);
+    if (destinationStream) {
+      record.startRecording(destinationStream);
+      setIsRecording(true);
+    }
+  }, [record, destinationStream]);
+
+  useEffect(() => {
+    startTabRecording();
+  }, [record, screenMediaStream]);
+
  const handlePlayClick = () => {
    wavesurfer?.playPause();
  };
@@ -300,23 +289,9 @@ export default function Recorder(props: RecorderProps) {
            } text-white ml-2 md:ml:4 md:h-[78px] md:min-w-[100px] text-lg`}
            id="play-btn"
            onClick={handlePlayClick}
-            disabled={isRecording}
          >
            {isPlaying ? "Pause" : "Play"}
          </button>
-
-          {props.transcriptId && (
-            <a
-              title="Download recording"
-              className="text-center cursor-pointer text-blue-400 hover:text-blue-700 ml-2 md:ml:4 p-2 rounded-lg outline-blue-400"
-              download={`recording-${
-                props.transcriptId?.split("-")[0] || "0000"
-              }`}
-              href={`${process.env.NEXT_PUBLIC_API_URL}/v1/transcripts/${props.transcriptId}/audio/mp3`}
-            >
-              <FontAwesomeIcon icon={faDownload} className="h-5 w-auto" />
-            </a>
-          )}
        </>
      )}
      {!hasRecorded && (
@@ -332,6 +307,19 @@ export default function Recorder(props: RecorderProps) {
          >
            {isRecording ? "Stop" : "Record"}
          </button>
+          {!isRecording && (
+            <button
+              className={`${
+                isRecording
+                  ? "bg-red-400 hover:bg-red-500 focus-visible:bg-red-500"
+                  : "bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500"
+              } text-white ml-2 md:ml:4 md:h-[78px] md:min-w-[100px] text-lg`}
+              onClick={handleRecordTabClick}
+            >
+              Record
+              <br />a tab
+            </button>
+          )}
          {props.audioDevices && props.audioDevices?.length > 0 && deviceId && (
            <>
              <button
--- a/www/app/[domain]/transcripts/useMp3.ts
+++ b/www/app/[domain]/transcripts/useMp3.ts
@@ -1,80 +1,60 @@
 import { useContext, useEffect, useState } from "react";
-import {
-  DefaultApi,
-  // V1TranscriptGetAudioMp3Request,
-} from "../../api/apis/DefaultApi";
-import {} from "../../api";
-import { useError } from "../../(errors)/errorContext";
 import { DomainContext } from "../domainContext";
 import getApi from "../../lib/getApi";
 import { useFiefAccessTokenInfo } from "@fief/fief/build/esm/nextjs/react";

-type Mp3Response = {
-  url: string | null;
-  blob: Blob | null;
+export type Mp3Response = {
+  media: HTMLMediaElement | null;
  loading: boolean;
-  error: Error | null;
+  getNow: () => void;
 };

-const useMp3 = (protectedPath: boolean, id: string): Mp3Response => {
-  const [url, setUrl] = useState<string | null>(null);
-  const [blob, setBlob] = useState<Blob | null>(null);
+const useMp3 = (id: string, waiting?: boolean): Mp3Response => {
+  const [media, setMedia] = useState<HTMLMediaElement | null>(null);
+  const [later, setLater] = useState(waiting);
  const [loading, setLoading] = useState<boolean>(false);
-  const [error, setErrorState] = useState<Error | null>(null);
-  const { setError } = useError();
-  const api = getApi(protectedPath);
+  const api = getApi(true);
  const { api_url } = useContext(DomainContext);
  const accessTokenInfo = useFiefAccessTokenInfo();
-
-  const getMp3 = (id: string) => {
-    if (!id || !api) return;
-
-    setLoading(true);
-    // XXX Current API interface does not output a blob, we need to to is manually
-    // const requestParameters: V1TranscriptGetAudioMp3Request = {
-    //   transcriptId: id,
-    // };
-    // api
-    //   .v1TranscriptGetAudioMp3(requestParameters)
-    //   .then((result) => {
-    //     setUrl(result);
-    //     setLoading(false);
-    //     console.debug("Transcript Mp3 loaded:", result);
-    //   })
-    //   .catch((err) => {
-    //     setError(err);
-    //     setErrorState(err);
-    //   });
-    const localUrl = `${api_url}/v1/transcripts/${id}/audio/mp3`;
-    if (localUrl == url) return;
-    const headers = new Headers();
-
-    if (accessTokenInfo) {
-      headers.set("Authorization", "Bearer " + accessTokenInfo.access_token);
-    }
-
-    fetch(localUrl, {
-      method: "GET",
-      headers,
-    })
-      .then((response) => {
-        setUrl(localUrl);
-        response.blob().then((blob) => {
-          setBlob(blob);
-          setLoading(false);
-        });
-      })
-      .catch((err) => {
-        setError(err);
-        setErrorState(err);
-      });
-  };
+  const [serviceWorkerReady, setServiceWorkerReady] = useState(false);

  useEffect(() => {
-    getMp3(id);
-  }, [id, api]);
+    if ("serviceWorker" in navigator) {
+      navigator.serviceWorker.register("/service-worker.js").then(() => {
+        setServiceWorkerReady(true);
+      });
+    }
+  }, []);

-  return { url, blob, loading, error };
+  useEffect(() => {
+    if (!navigator.serviceWorker) return;
+    if (!navigator.serviceWorker.controller) return;
+    if (!serviceWorkerReady) return;
+    // Send the token to the service worker
+    navigator.serviceWorker.controller.postMessage({
+      type: "SET_AUTH_TOKEN",
+      token: accessTokenInfo?.access_token,
+    });
+  }, [navigator.serviceWorker, serviceWorkerReady, accessTokenInfo]);
+
+  useEffect(() => {
+    if (!id || !api || later) return;
+
+    // createa a audio element and set the source
+    setLoading(true);
+    const audioElement = document.createElement("audio");
+    audioElement.src = `${api_url}/v1/transcripts/${id}/audio/mp3`;
+    audioElement.crossOrigin = "anonymous";
+    audioElement.preload = "auto";
+    setMedia(audioElement);
+    setLoading(false);
+  }, [id, api, later]);
+
+  const getNow = () => {
+    setLater(false);
+  };
+
+  return { media, loading, getNow };
 };

 export default useMp3;
--- a/www/app/[domain]/transcripts/useTopics.ts
+++ b/www/app/[domain]/transcripts/useTopics.ts
@@ -6,6 +6,7 @@ import {
 import { useError } from "../../(errors)/errorContext";
 import { Topic } from "./webSocketTypes";
 import getApi from "../../lib/getApi";
+import { shouldShowError } from "../../lib/errorUtils";

 type TranscriptTopics = {
  topics: Topic[] | null;
@@ -35,8 +36,13 @@ const useTopics = (protectedPath, id: string): TranscriptTopics => {
        console.debug("Transcript topics loaded:", result);
      })
      .catch((err) => {
-        setError(err);
        setErrorState(err);
+        const shouldShowHuman = shouldShowError(err);
+        if (shouldShowHuman) {
+          setError(err, "There was an error loading the topics");
+        } else {
+          setError(err);
+        }
      });
  }, [id, api]);

--- a/www/app/[domain]/transcripts/useTranscript.ts
+++ b/www/app/[domain]/transcripts/useTranscript.ts
@@ -3,17 +3,30 @@ import { V1TranscriptGetRequest } from "../../api/apis/DefaultApi";
 import { GetTranscript } from "../../api";
 import { useError } from "../../(errors)/errorContext";
 import getApi from "../../lib/getApi";
+import { shouldShowError } from "../../lib/errorUtils";

-type Transcript = {
-  response: GetTranscript | null;
-  loading: boolean;
-  error: Error | null;
+type ErrorTranscript = {
+  error: Error;
+  loading: false;
+  response: any;
+};
+
+type LoadingTranscript = {
+  response: any;
+  loading: true;
+  error: false;
+};
+
+type SuccessTranscript = {
+  response: GetTranscript;
+  loading: false;
+  error: null;
 };

 const useTranscript = (
  protectedPath: boolean,
  id: string | null,
-): Transcript => {
+): ErrorTranscript | LoadingTranscript | SuccessTranscript => {
  const [response, setResponse] = useState<GetTranscript | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setErrorState] = useState<Error | null>(null);
@@ -34,13 +47,21 @@ const useTranscript = (
        setLoading(false);
        console.debug("Transcript Loaded:", result);
      })
-      .catch((err) => {
-        setError(err);
-        setErrorState(err);
+      .catch((error) => {
+        const shouldShowHuman = shouldShowError(error);
+        if (shouldShowHuman) {
+          setError(error, "There was an error loading the transcript");
+        } else {
+          setError(error);
+        }
+        setErrorState(error);
      });
  }, [id, !api]);

-  return { response, loading, error };
+  return { response, loading, error } as
+    | ErrorTranscript
+    | LoadingTranscript
+    | SuccessTranscript;
 };

 export default useTranscript;
--- a/www/app/[domain]/transcripts/useWaveform.ts
+++ b/www/app/[domain]/transcripts/useWaveform.ts
@@ -6,6 +6,7 @@ import {
 import { AudioWaveform } from "../../api";
 import { useError } from "../../(errors)/errorContext";
 import getApi from "../../lib/getApi";
+import { shouldShowError } from "../../lib/errorUtils";

 type AudioWaveFormResponse = {
  waveform: AudioWaveform | null;
@@ -22,7 +23,6 @@ const useWaveform = (protectedPath, id: string): AudioWaveFormResponse => {

  useEffect(() => {
    if (!id || !api) return;
-
    setLoading(true);
    const requestParameters: V1TranscriptGetAudioWaveformRequest = {
      transcriptId: id,
@@ -35,8 +35,13 @@ const useWaveform = (protectedPath, id: string): AudioWaveFormResponse => {
        console.debug("Transcript waveform loaded:", result);
      })
      .catch((err) => {
-        setError(err);
        setErrorState(err);
+        const shouldShowHuman = shouldShowError(err);
+        if (shouldShowHuman) {
+          setError(err, "There was an error loading the waveform");
+        } else {
+          setError(err);
+        }
      });
  }, [id, api]);

--- a/www/app/[domain]/transcripts/useWebRTC.ts
+++ b/www/app/[domain]/transcripts/useWebRTC.ts
@@ -28,7 +28,7 @@ const useWebRTC = (
    try {
      p = new Peer({ initiator: true, stream: stream });
    } catch (error) {
-      setError(error);
+      setError(error, "Error creating WebRTC");
      return;
    }

@@ -57,7 +57,7 @@ const useWebRTC = (
            }
          })
          .catch((error) => {
-            setError(error);
+            setError(error, "Error loading WebRTCOffer");
          });
      }
    });
--- a/www/app/[domain]/transcripts/useWebSockets.ts
+++ b/www/app/[domain]/transcripts/useWebSockets.ts
@@ -1,30 +1,35 @@
 import { useContext, useEffect, useState } from "react";
 import { Topic, FinalSummary, Status } from "./webSocketTypes";
 import { useError } from "../../(errors)/errorContext";
-import { useRouter } from "next/navigation";
 import { DomainContext } from "../domainContext";
+import { AudioWaveform } from "../../api";

-type UseWebSockets = {
+export type UseWebSockets = {
  transcriptText: string;
  translateText: string;
+  title: string;
  topics: Topic[];
  finalSummary: FinalSummary;
  status: Status;
+  waveform: AudioWaveform["data"] | null;
+  duration: number | null;
 };

 export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
  const [transcriptText, setTranscriptText] = useState<string>("");
  const [translateText, setTranslateText] = useState<string>("");
+  const [title, setTitle] = useState<string>("");
  const [textQueue, setTextQueue] = useState<string[]>([]);
  const [translationQueue, setTranslationQueue] = useState<string[]>([]);
  const [isProcessing, setIsProcessing] = useState(false);
  const [topics, setTopics] = useState<Topic[]>([]);
+  const [waveform, setWaveForm] = useState<AudioWaveform | null>(null);
+  const [duration, setDuration] = useState<number | null>(null);
  const [finalSummary, setFinalSummary] = useState<FinalSummary>({
    summary: "",
  });
-  const [status, setStatus] = useState<Status>({ value: "disconnected" });
+  const [status, setStatus] = useState<Status>({ value: "initial" });
  const { setError } = useError();
-  const router = useRouter();

  const { websocket_url } = useContext(DomainContext);

@@ -294,7 +299,7 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
    if (!transcriptId) return;

    const url = `${websocket_url}/v1/transcripts/${transcriptId}/events`;
-    const ws = new WebSocket(url);
+    let ws = new WebSocket(url);

    ws.onopen = () => {
      console.debug("WebSocket connection opened");
@@ -343,21 +348,39 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {

          case "FINAL_TITLE":
            console.debug("FINAL_TITLE event:", message.data);
+            if (message.data) {
+              setTitle(message.data.title);
+            }
+            break;
+
+          case "WAVEFORM":
+            console.debug(
+              "WAVEFORM event length:",
+              message.data.waveform.length,
+            );
+            if (message.data) {
+              setWaveForm(message.data.waveform);
+            }
+            break;
+          case "DURATION":
+            console.debug("DURATION event:", message.data);
+            if (message.data) {
+              setDuration(message.data.duration);
+            }
            break;

          case "STATUS":
            console.log("STATUS event:", message.data);
-            if (message.data.value === "ended") {
-              const newUrl = "/transcripts/" + transcriptId;
-              router.push(newUrl);
-              console.debug(
-                "FINAL_LONG_SUMMARY event:",
-                message.data,
-                "newUrl",
-                newUrl,
+            if (message.data.value === "error") {
+              setError(
+                Error("Websocket error status"),
+                "There was an error processing this meeting.",
              );
            }
            setStatus(message.data);
+            if (message.data.value === "ended") {
+              ws.close();
+            }
            break;

          default:
@@ -379,13 +402,18 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
      console.debug("WebSocket connection closed");
      switch (event.code) {
        case 1000: // Normal Closure:
-        case 1001: // Going Away:
-        case 1005:
-          break;
        default:
          setError(
            new Error(`WebSocket closed unexpectedly with code: ${event.code}`),
+            "Disconnected",
          );
+          console.log(
+            "Socket is closed. Reconnect will be attempted in 1 second.",
+            event.reason,
+          );
+          setTimeout(function () {
+            ws = new WebSocket(url);
+          }, 1000);
      }
    };

@@ -394,5 +422,14 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
    };
  }, [transcriptId]);

-  return { transcriptText, translateText, topics, finalSummary, status };
+  return {
+    transcriptText,
+    translateText,
+    topics,
+    finalSummary,
+    title,
+    status,
+    waveform,
+    duration,
+  };
 };
--- a/www/app/[domain]/transcripts/waveformLoading.tsx
+++ b/www/app/[domain]/transcripts/waveformLoading.tsx
@@ -0,0 +1,11 @@
+import { faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+export default () => (
+  <div className="flex flex-grow items-center justify-center h-20">
+    <FontAwesomeIcon
+      icon={faSpinner}
+      className="animate-spin-slow text-gray-600 flex-grow rounded-lg md:rounded-xl h-10"
+    />
+  </div>
+);
--- a/www/app/lib/edgeConfig.ts
+++ b/www/app/lib/edgeConfig.ts
@@ -5,7 +5,7 @@ const localConfig = {
  features: {
    requireLogin: false,
    privacy: true,
-    browse: true,
+    browse: false,
  },
  api_url: "http://127.0.0.1:1250",
  websocket_url: "ws://127.0.0.1:1250",
--- a/www/app/lib/errorUtils.ts
+++ b/www/app/lib/errorUtils.ts
@@ -0,0 +1,8 @@
+function shouldShowError(error: Error | null | undefined) {
+  if (error?.name == "ResponseError" && error["response"].status == 404)
+    return false;
+  if (error?.name == "FetchError") return false;
+  return true;
+}
+
+export { shouldShowError };
--- a/www/app/lib/getApi.ts
+++ b/www/app/lib/getApi.ts
@@ -14,9 +14,7 @@ export default function getApi(protectedPath: boolean): DefaultApi | undefined {
  if (!api_url) throw new Error("no API URL");

  useEffect(() => {
-    // console.log('trying auth', protectedPath, requireLogin, accessTokenInfo)
    if (protectedPath && requireLogin && !accessTokenInfo) {
-      // console.log('waiting auth')
      return;
    }