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

www/app/transcripts/[transcriptId]/page.tsx

@@ -12,6 +12,7 @@ import "../../styles/button.css";
 import FinalSummary from "../finalSummary";
 import ShareLink from "../shareLink";
 import QRCode from "react-qr-code";
+import TranscriptTitle from "../transcriptTitle";
 
 type TranscriptDetails = {
   params: {
@@ -50,13 +51,18 @@ export default function TranscriptDetails(details: TranscriptDetails) {
         <Modal title="Loading" text={"Loading transcript..."} />
       ) : (
         <>
-          <Recorder
-            topics={topics?.topics || []}
-            useActiveTopic={useActiveTopic}
-            waveform={waveform?.waveform}
-            isPastMeeting={true}
-            transcriptId={transcript?.response?.id}
-          />
+          <div className="flex flex-col">
+            {transcript?.response?.title && (
+              <TranscriptTitle title={transcript.response.title} />
+            )}
+            <Recorder
+              topics={topics?.topics || []}
+              useActiveTopic={useActiveTopic}
+              waveform={waveform?.waveform}
+              isPastMeeting={true}
+              transcriptId={transcript?.response?.id}
+            />
+          </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 || []}

www/app/transcripts/finalSummary.tsx

@@ -1,4 +1,8 @@
 import { useRef, useState } from "react";
+import React from "react";
+import ReactDom from "react-dom";
+import Markdown from "react-markdown";
+import "../styles/markdown.css";
 
 type FinalSummaryProps = {
   summary: string;
@@ -62,7 +66,9 @@ export default function FinalSummary(props: FinalSummaryProps) {
         </div>
       </div>
 
-      <p ref={finalSummaryRef}>{props.summary}</p>
+      <p ref={finalSummaryRef} className="markdown">
+        <Markdown>{props.summary}</Markdown>
+      </p>
     </div>
   );
 }

www/app/transcripts/recorder.tsx

@@ -14,6 +14,7 @@ import { AudioWaveform } from "../api";
 import AudioInputsDropdown from "./audioInputsDropdown";
 import { Option } from "react-dropdown";
 import { useError } from "../(errors)/errorContext";
+import { waveSurferStyles } from "../styles/recorder";
 
 type RecorderProps = {
   setStream?: React.Dispatch<React.SetStateAction<MediaStream | null>>;
@@ -94,20 +95,29 @@ export default function Recorder(props: RecorderProps) {
     };
   };
 
+  // Setup Shortcuts
+  useEffect(() => {
+    if (!record) return;
+
+    return setupProjectorKeys();
+  }, [record, deviceId]);
+
+  // Waveform setup
   useEffect(() => {
     if (waveformRef.current) {
       const _wavesurfer = WaveSurfer.create({
         container: waveformRef.current,
-        waveColor: "#777",
-        progressColor: "#222",
-        cursorColor: "OrangeRed",
+        url: props.transcriptId
+          ? `${process.env.NEXT_PUBLIC_API_URL}/v1/transcripts/${props.transcriptId}/audio/mp3`
+          : undefined,
+        peaks: props.waveform?.data,
+
         hideScrollbar: true,
         autoCenter: true,
         barWidth: 2,
         height: "auto",
-        url: props.transcriptId
-          ? `${process.env.NEXT_PUBLIC_API_URL}/v1/transcripts/${props.transcriptId}/audio/mp3`
-          : undefined,
+
+        ...waveSurferStyles.player,
       });
 
       if (!props.transcriptId) {
@@ -115,10 +125,12 @@ export default function Recorder(props: RecorderProps) {
         _wshack.renderer.renderSingleCanvas = () => {};
       }
 
+      // styling
       const wsWrapper = _wavesurfer.getWrapper();
-      wsWrapper.style.cursor = "pointer";
-      wsWrapper.style.backgroundColor = "RGB(240 240 240)";
-      wsWrapper.style.borderRadius = "15px";
+      wsWrapper.style.cursor = waveSurferStyles.playerStyle.cursor;
+      wsWrapper.style.backgroundColor =
+        waveSurferStyles.playerStyle.backgroundColor;
+      wsWrapper.style.borderRadius = waveSurferStyles.playerStyle.borderRadius;
 
       _wavesurfer.on("play", () => {
         setIsPlaying(true);
@@ -131,9 +143,10 @@ export default function Recorder(props: RecorderProps) {
       setRecord(_wavesurfer.registerPlugin(RecordPlugin.create()));
       setWaveRegions(_wavesurfer.registerPlugin(CustomRegionsPlugin.create()));
 
-      if (props.transcriptId) _wavesurfer.toggleInteraction(true);
+      if (props.isPastMeeting) _wavesurfer.toggleInteraction(true);
 
       setWavesurfer(_wavesurfer);
+
       return () => {
         _wavesurfer.destroy();
         setIsRecording(false);
@@ -152,35 +165,18 @@ export default function Recorder(props: RecorderProps) {
     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.setAttribute("style", waveSurferStyles.marker);
       content.onmouseover = () => {
-        content.style.backgroundColor = "orange";
+        content.style.backgroundColor =
+          waveSurferStyles.markerHover.backgroundColor;
         content.style.zIndex = "999";
         content.style.width = "300px";
       };
       content.onmouseout = () => {
-        content.style.backgroundColor = "white";
-        content.style.zIndex = "0";
-        content.style.width = "100px";
+        content.setAttribute("style", waveSurferStyles.marker);
       };
       content.textContent = topic.title;
 
@@ -198,12 +194,6 @@ export default function Recorder(props: RecorderProps) {
     }
   };
 
-  useEffect(() => {
-    if (!record) return;
-
-    return setupProjectorKeys();
-  }, [record, deviceId]);
-
   useEffect(() => {
     if (!record) return;
 

www/app/transcripts/transcriptTitle.tsx

@@ -0,0 +1,13 @@
+type TranscriptTitle = {
+  title: string;
+};
+
+const TranscriptTitle = (props: TranscriptTitle) => {
+  return (
+    <h2 className="text-2xl lg:text-4xl font-extrabold text-center mb-4">
+      {props.title}
+    </h2>
+  );
+};
+
+export default TranscriptTitle;