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

www/app/api/apis/DefaultApi.ts

@@ -54,10 +54,6 @@ export interface V1TranscriptGetRequest {
   transcriptId: any;
 }
 
-export interface V1TranscriptGetAudioRequest {
-  transcriptId: any;
-}
-
 export interface V1TranscriptGetAudioMp3Request {
   transcriptId: any;
 }
@@ -310,69 +306,6 @@ export class DefaultApi extends runtime.BaseAPI {
     return await response.value();
   }
 
-  /**
-   * Transcript Get Audio
-   */
-  async v1TranscriptGetAudioRaw(
-    requestParameters: V1TranscriptGetAudioRequest,
-    initOverrides?: RequestInit | runtime.InitOverrideFunction,
-  ): Promise<runtime.ApiResponse<any>> {
-    if (
-      requestParameters.transcriptId === null ||
-      requestParameters.transcriptId === undefined
-    ) {
-      throw new runtime.RequiredError(
-        "transcriptId",
-        "Required parameter requestParameters.transcriptId was null or undefined when calling v1TranscriptGetAudio.",
-      );
-    }
-
-    const queryParameters: any = {};
-
-    const headerParameters: runtime.HTTPHeaders = {};
-
-    if (this.configuration && this.configuration.accessToken) {
-      // oauth required
-      headerParameters["Authorization"] = await this.configuration.accessToken(
-        "OAuth2AuthorizationCodeBearer",
-        [],
-      );
-    }
-
-    const response = await this.request(
-      {
-        path: `/v1/transcripts/{transcript_id}/audio`.replace(
-          `{${"transcript_id"}}`,
-          encodeURIComponent(String(requestParameters.transcriptId)),
-        ),
-        method: "GET",
-        headers: headerParameters,
-        query: queryParameters,
-      },
-      initOverrides,
-    );
-
-    if (this.isJsonMime(response.headers.get("content-type"))) {
-      return new runtime.JSONApiResponse<any>(response);
-    } else {
-      return new runtime.TextApiResponse(response) as any;
-    }
-  }
-
-  /**
-   * Transcript Get Audio
-   */
-  async v1TranscriptGetAudio(
-    requestParameters: V1TranscriptGetAudioRequest,
-    initOverrides?: RequestInit | runtime.InitOverrideFunction,
-  ): Promise<any> {
-    const response = await this.v1TranscriptGetAudioRaw(
-      requestParameters,
-      initOverrides,
-    );
-    return await response.value();
-  }
-
   /**
    * Transcript Get Audio Mp3
    */

www/app/styles/markdown.css

@@ -0,0 +1,91 @@
+/* Headings */
+.markdown h1,
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+/* Paragraphs */
+.markdown p {
+  margin: 1em 0;
+}
+
+/* Lists */
+.markdown ul,
+.markdown ol {
+  margin: 1em;
+  padding-left: 1em;
+}
+
+.markdown li {
+  margin: 0.2em 0;
+}
+
+/* Bold and italic */
+.markdown b,
+.markdown strong {
+  font-weight: bold;
+}
+
+.markdown i,
+.markdown em {
+  font-style: italic;
+}
+
+/* Blockquotes */
+.markdown blockquote {
+  margin: 1em 0;
+  padding-left: 1em;
+  border-left: 2px solid #ccc;
+}
+
+/* Code blocks and inline code */
+.markdown code {
+  font-family: "Courier New", monospace;
+}
+
+.markdown pre {
+  background-color: #f4f4f4;
+  padding: 1em;
+  overflow-x: auto;
+}
+
+/* Links */
+.markdown a {
+  color: blue;
+  text-decoration: underline;
+}
+
+/* Horizontal rule */
+.markdown hr {
+  border: 0;
+  border-bottom: 1px solid #ccc;
+  margin: 1em 0;
+}
+
+/* Images */
+.markdown img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Lists */
+.markdown ul {
+  margin: 1em;
+  padding-left: 1em;
+  list-style-type: disc;
+}
+
+.markdown ol {
+  margin: 1em;
+  padding-left: 1em;
+  list-style-type: decimal;
+}
+
+.markdown li {
+  margin: 0.2em 0;
+}

www/app/styles/recorder.js

@@ -0,0 +1,30 @@
+export const waveSurferStyles = {
+  playerSettings: {
+    waveColor: "#777",
+    progressColor: "#222",
+    cursorColor: "OrangeRed",
+  },
+  playerStyle: {
+    cursor: "pointer",
+    backgroundColor: "RGB(240 240 240)",
+    borderRadius: "15px",
+  },
+  marker: `
+    border-left: solid 1px orange;
+    padding: 0 2px 0 5px;
+    font-size: 0.7rem;
+    border-radius: 0 3px 3px 0;
+
+    position: absolute;
+    width: 100px;
+    max-width: fit-content;
+    cursor: pointer;
+    background-color: white;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: width 100ms linear;
+    z-index: 0;
+  `,
+  markerHover: { backgroundColor: "orange" },
+};

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;