add markers + sync w/ topics

www/app/components/dashboard.js

@@ -11,8 +11,9 @@ export function Dashboard({
   finalSummary,
   topics,
   disconnected,
+  useActiveTopic,
 }) {
-  const [openIndex, setOpenIndex] = useState(null);
+  const [activeTopic, setActiveTopic] = useActiveTopic;
   const [autoscrollEnabled, setAutoscrollEnabled] = useState(true);
 
   useEffect(() => {
@@ -76,18 +77,26 @@ 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 == item.timestamp ? null : item.timestamp,
+                  )
+                }
               >
                 <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 == item.timestamp
+                        ? faChevronDown
+                        : faChevronRight
+                    }
                   />
                 </div>
               </div>
-              {openIndex === index && (
+              {activeTopic == item.timestamp && (
                 <div className="p-2 mt-2 -mb-2 bg-slate-50 rounded">
                   {item.transcript}
                 </div>

www/app/components/record.js

@@ -1,6 +1,7 @@
 import React, { useRef, useEffect, useState } from "react";
 
 import WaveSurfer from "wavesurfer.js";
+import RegionsPlugin from "wavesurfer.js/dist/plugins/regions";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faDownload } from "@fortawesome/free-solid-svg-icons";
@@ -58,6 +59,9 @@ export default function Recorder(props) {
   const [currentTime, setCurrentTime] = useState(0);
   const [timeInterval, setTimeInterval] = useState(null);
   const [duration, setDuration] = useState(0);
+  const [waveRegions, setWaveRegions] = useState(null);
+
+  const [activeTopic, setActiveTopic] = props.useActiveTopic;
 
   useEffect(() => {
     document.getElementById("play-btn").disabled = true;
@@ -87,6 +91,8 @@ export default function Recorder(props) {
       _wavesurfer.on("timeupdate", setCurrentTime);
 
       setRecord(_wavesurfer.registerPlugin(CustomRecordPlugin.create()));
+      setWaveRegions(_wavesurfer.registerPlugin(RegionsPlugin.create()));
+
       setWavesurfer(_wavesurfer);
       return () => {
         _wavesurfer.destroy();
@@ -103,6 +109,20 @@ export default function Recorder(props) {
         link.href = record.getRecordedUrl();
         link.download = "reflector-recording.webm";
         link.style.visibility = "visible";
+
+        for (let topic of props.topics) {
+          const region = waveRegions.addRegion({
+            start: topic.timestamp,
+            content: topic.title.slice(0, 7) + "...",
+            color: "f00",
+            drag: false,
+          });
+          region.on("click", (e) => {
+            e.stopPropagation();
+            setActiveTopic(region.start);
+            wavesurfer.setTime(region.start);
+          });
+        }
       });
     }
   }, [record]);
@@ -123,6 +143,12 @@ export default function Recorder(props) {
     }
   }, [isRecording]);
 
+  useEffect(() => {
+    if (activeTopic) {
+      wavesurfer.setTime(activeTopic);
+    }
+  }, [activeTopic]);
+
   const handleRecClick = async () => {
     if (!record) return console.log("no record");
 

www/app/page.js

@@ -10,6 +10,7 @@ import "../public/button.css";
 const App = () => {
   const [stream, setStream] = useState(null);
   const [disconnected, setDisconnected] = useState(false);
+  const useActiveTopic = useState(null);
 
   useEffect(() => {
     if (process.env.NEXT_PUBLIC_ENV === "development") {
@@ -38,6 +39,8 @@ const App = () => {
           webRTC?.peer?.send(JSON.stringify({ cmd: "STOP" }));
           setStream(null);
         }}
+        topics={webSockets.topics}
+        useActiveTopic={useActiveTopic}
       />
       <Dashboard
         transcriptionText={webSockets.transcriptText}
@@ -45,6 +48,7 @@ const App = () => {
         topics={webSockets.topics}
         stream={stream}
         disconnected={disconnected}
+        useActiveTopic={useActiveTopic}
       />
     </div>
   );