Merge branch 'main' into jose/ui

www/app/lib/custom-plugins/regions.ts

@@ -0,0 +1,18 @@
+// Source code: https://github.com/katspaugh/wavesurfer.js/blob/fa2bcfe/src/plugins/regions.ts
+
+import RegionsPlugin, {
+  RegionsPluginOptions,
+} from "wavesurfer.js/dist/plugins/regions";
+
+class CustomRegionsPlugin extends RegionsPlugin {
+  public static create(options?: RegionsPluginOptions) {
+    return new CustomRegionsPlugin(options);
+  }
+
+  constructor(options?: RegionsPluginOptions) {
+    super(options);
+    this["avoidOverlapping"] = () => {};
+  }
+}
+
+export default CustomRegionsPlugin;

www/app/transcripts/dashboard.tsx

@@ -16,6 +16,10 @@ type DashboardProps = {
   finalSummary: FinalSummaryType;
   topics: Topic[];
   disconnected: boolean;
+  useActiveTopic: [
+    Topic | null,
+    React.Dispatch<React.SetStateAction<Topic | null>>,
+  ];
 };
 
 export function Dashboard({
@@ -23,8 +27,9 @@ export function Dashboard({
   finalSummary,
   topics,
   disconnected,
+  useActiveTopic,
 }: DashboardProps) {
-  const [openIndex, setOpenIndex] = useState<number | null>(null);
+  const [activeTopic, setActiveTopic] = useActiveTopic;
   const [autoscrollEnabled, setAutoscrollEnabled] = useState<boolean>(true);
 
   useEffect(() => {
@@ -51,7 +56,7 @@ export function Dashboard({
 
   return (
     <>
-      <div className="relative h-[60svh] w-3/4 flex flex-col">
+      <div className="relative h-[64svh] w-3/4 flex flex-col">
         <div className="text-center pb-1 pt-4">
           <h1 className="text-2xl font-bold text-blue-500">Meeting Notes</h1>
         </div>
@@ -75,18 +80,24 @@ export function Dashboard({
             <div key={index} className="border-b-2 py-2 hover:bg-[#8ec5fc30]">
               <div
                 className="flex justify-between items-center cursor-pointer px-4"
-                onClick={() => setOpenIndex(openIndex === index ? null : index)}
+                onClick={() =>
+                  setActiveTopic(activeTopic?.id == item.id ? null : item)
+                }
               >
                 <div className="w-1/4">{formatTime(item.timestamp)}</div>
                 <div className="w-3/4 flex justify-between items-center">
                   {item.title}
                   <FontAwesomeIcon
                     className={`transform transition-transform duration-200`}
-                    icon={openIndex === index ? faChevronDown : faChevronRight}
+                    icon={
+                      activeTopic?.id == item.id
+                        ? faChevronDown
+                        : faChevronRight
+                    }
                   />
                 </div>
               </div>
-              {openIndex === index && (
+              {activeTopic?.id == item.id && (
                 <div className="p-2 mt-2 -mb-2 bg-slate-50 rounded">
                   {item.transcript}
                 </div>

www/app/transcripts/new/page.tsx

@@ -7,11 +7,13 @@ import useTranscript from "../useTranscript";
 import { useWebSockets } from "../useWebSockets";
 import useAudioDevice from "../useAudioDevice";
 import "../../styles/button.css";
+import { Topic } from "../webSocketTypes";
 import getApi from "../../lib/getApi";
 
 const App = () => {
   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") {
@@ -48,6 +50,7 @@ const App = () => {
             }}
             getAudioStream={getAudioStream}
             audioDevices={audioDevices}
+            topics={webSockets.topics}
           />
 
           <Dashboard
@@ -55,6 +58,7 @@ const App = () => {
             finalSummary={webSockets.finalSummary}
             topics={webSockets.topics}
             disconnected={disconnected}
+            useActiveTopic={useActiveTopic}
           />
         </>
       ) : (

www/app/transcripts/recorder.tsx

@@ -2,6 +2,7 @@ import React, { useRef, useEffect, useState } from "react";
 
 import WaveSurfer from "wavesurfer.js";
 import RecordPlugin from "../lib/custom-plugins/record";
+import CustomRegionsPlugin from "../lib/custom-plugins/regions";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faDownload } from "@fortawesome/free-solid-svg-icons";
@@ -11,11 +12,11 @@ import "react-dropdown/style.css";
 
 import { formatTime } from "../lib/time";
 
-const AudioInputsDropdown = (props: {
+const AudioInputsDropdown: React.FC<{
   audioDevices: Option[];
   setDeviceId: React.Dispatch<React.SetStateAction<string | null>>;
   disabled: boolean;
-}) => {
+}> = (props) => {
   const [ddOptions, setDdOptions] = useState<Option[]>([]);
 
   useEffect(() => {
@@ -39,7 +40,7 @@ const AudioInputsDropdown = (props: {
   );
 };
 
-export default function Recorder(props) {
+export default function Recorder(props: any) {
   const waveformRef = useRef<HTMLDivElement>(null);
   const [wavesurfer, setWavesurfer] = useState<WaveSurfer | null>(null);
   const [record, setRecord] = useState<RecordPlugin | null>(null);
@@ -49,6 +50,13 @@ export default function Recorder(props) {
   const [currentTime, setCurrentTime] = useState<number>(0);
   const [timeInterval, setTimeInterval] = useState<number | null>(null);
   const [duration, setDuration] = useState<number>(0);
+  const [waveRegions, setWaveRegions] = useState<CustomRegionsPlugin | null>(
+    null,
+  );
+
+  const [activeTopic, setActiveTopic] = props.useActiveTopic;
+
+  const topicsRef = useRef(props.topics);
 
   useEffect(() => {
     const playBtn = document.getElementById("play-btn");
@@ -63,6 +71,7 @@ export default function Recorder(props) {
         hideScrollbar: true,
         autoCenter: true,
         barWidth: 2,
+        height: 90,
       });
       const wsWrapper = _wavesurfer.getWrapper();
       wsWrapper.style.cursor = "pointer";
@@ -78,15 +87,73 @@ export default function Recorder(props) {
       _wavesurfer.on("timeupdate", setCurrentTime);
 
       setRecord(_wavesurfer.registerPlugin(RecordPlugin.create()));
+      setWaveRegions(_wavesurfer.registerPlugin(CustomRegionsPlugin.create()));
+
       setWavesurfer(_wavesurfer);
       return () => {
         _wavesurfer.destroy();
         setIsRecording(false);
         setIsPlaying(false);
+        setCurrentTime(0);
       };
     }
   }, []);
 
+  useEffect(() => {
+    topicsRef.current = props.topics;
+    if (!isRecording) renderMarkers();
+  }, [props.topics]);
+
+  const renderMarkers = () => {
+    if (!waveRegions) return;
+
+    waveRegions.clearRegions();
+    for (let topic of topicsRef.current) {
+      const content = document.createElement("div");
+      content.setAttribute(
+        "style",
+        `
+        position: absolute;
+        border-left: solid 1px orange;
+        padding: 0 2px 0 5px;
+        font-size: 0.7rem;
+        width: 100px;
+        max-width: fit-content;
+        cursor: pointer;
+        background-color: white;
+        border-radius: 0 3px 3px 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        transition: width 100ms linear;
+      `,
+      );
+      content.onmouseover = () => {
+        content.style.backgroundColor = "orange";
+        content.style.zIndex = "999";
+        content.style.width = "300px";
+      };
+      content.onmouseout = () => {
+        content.style.backgroundColor = "white";
+        content.style.zIndex = "0";
+        content.style.width = "100px";
+      };
+      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 record.on("stopRecording", () => {
@@ -96,6 +163,7 @@ export default function Recorder(props) {
         link.setAttribute("href", record.getRecordedUrl());
         link.setAttribute("download", "reflector-recording.webm");
         link.style.visibility = "visible";
+        renderMarkers();
       });
     }
   }, [record]);
@@ -116,6 +184,12 @@ export default function Recorder(props) {
     }
   }, [isRecording]);
 
+  useEffect(() => {
+    if (activeTopic) {
+      wavesurfer?.setTime(activeTopic.timestamp);
+    }
+  }, [activeTopic]);
+
   const handleRecClick = async () => {
     if (!record) return console.log("no record");
 
@@ -128,6 +202,7 @@ export default function Recorder(props) {
     } else {
       const stream = await props.getAudioStream(deviceId);
       props.setStream(stream);
+      waveRegions?.clearRegions();
       if (stream) {
         await record.startRecording(stream);
         setIsRecording(true);