selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2025-12-20 20:29:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

layout changes

Browse Source
This commit is contained in:
Sara
2023-09-18 16:31:23 +02:00
parent b6c65805f8
commit e59dbf2df2
11 changed files with 220 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
www/app/layout.tsx
View File

@@ -56,16 +56,16 @@ export const metadata: Metadata = {
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={poppins.className + " flex flex-col min-h-screen"}>
<body className={poppins.className + " h-screen"}>
<FiefWrapper>
<ErrorProvider>
<ErrorMessage />
{/*TODO lvh or svh ? */}
<div
id="container"
className="flex flex-col items-center min-h-[100svh]"
className="flex flex-col items-center min-h-[100svh] p-2 md:p-4"
>
<header className="flex justify-between items-center p-2 md:p-4 w-full">
<header className="flex justify-between items-center w-full mb-4 md:mb-4">
{/* Logo on the left */}
<div className="flex">
<Image

26
www/app/styles/button.css
View File

@@ -8,12 +8,12 @@ button {
padding: 0;
cursor: pointer;
/* Visual */
background-color: #3e68ff;
color: #fff;
/* background-color: #3e68ff; */
/* color: #fff; */
border-radius: 8px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);
/* box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18); */
/* Size */
padding: 0.25em 0.75em;
padding: 0.4em 1em;
min-width: 10ch;
min-height: 44px;
/* Text */
@@ -23,11 +23,18 @@ button {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: start;
/* align-self: start; */
/* Optional - see "Gotchas" */
/* Animation */
transition: 220ms all ease-in-out;
display: block;
}
@media (max-width: 768px) {
input[type="button"],
button {
padding: 0.25em 0.75em;
min-height: 30px;
}
}
/* Button modifiers */
@@ -55,13 +62,6 @@ button[disabled]:hover {
cursor: not-allowed !important;
}
/* Custom button properties */
input[type="button"],
button {
width: 243px;
border: solid 1px #dadada;
}
/* Red button states */
input[type="button"][data-color="red"],
button[data-color="red"],

2
www/app/styles/globals.scss
View File

@@ -10,8 +10,6 @@
body {
background: white;
font-family: "Roboto", sans-serif;
}
.temp-transcription {

2
www/app/transcripts/[transcriptId]/page.tsx
View File

@@ -34,7 +34,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
return (
<>
<div className="w-full flex flex-col items-center h-[100svh]">
<div className="w-full flex flex-col items-center">
{transcript?.loading === true ||
waveform?.loading == true ||
topics?.loading == true ? (

36
www/app/transcripts/audioInputsDropdown.tsx Normal file
View File

@@ -0,0 +1,36 @@
import React, { useRef, useEffect, useState } from "react";
import Dropdown, { Option } from "react-dropdown";
import "react-dropdown/style.css";
const AudioInputsDropdown: React.FC<{
audioDevices?: Option[];
setDeviceId: React.Dispatch<React.SetStateAction<string | null>>;
disabled?: boolean;
}> = (props) => {
const [ddOptions, setDdOptions] = useState<Option[]>([]);
useEffect(() => {
if (props.audioDevices) {
setDdOptions(props.audioDevices);
props.setDeviceId(
props.audioDevices.length > 0 ? props.audioDevices[0].value : null,
);
}
}, [props.audioDevices]);
const handleDropdownChange = (option: Option) => {
props.setDeviceId(option.value);
};
return (
<Dropdown
options={ddOptions}
onChange={handleDropdownChange}
value={ddOptions[0]}
disabled={props.disabled}
/>
);
};
export default AudioInputsDropdown;

70
www/app/transcripts/dashboard.tsx
View File

@@ -34,6 +34,7 @@ export function Dashboard({
useEffect(() => {
if (autoscrollEnabled) scrollToBottom();
console.log(topics);
}, [topics.length]);
const scrollToBottom = () => {
@@ -54,13 +55,23 @@ export function Dashboard({
}
};
return (
<>
<div className="relative h-[60svh] 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>
const faketopic = {
id: "641fbc68-dc2e-4c9d-aafd-89bdbf8cfc26",
summary:
"Explore the history of hypnotica music, a genre that has been deeply influential on modern music. From its origins in the 60s to its current status, this music has a unique and hypnotic quality that can be felt in the gut. Dive into the canon of modern hypnotica and discover its impact on music today.",
timestamp: 0,
title: "The Origins and Influence of Hypnotica Music",
transcript:
" vertically oriented music ultimately hypnotic So, that's what we're talking about. Uh, when does it start? I mean, technically, I think... It's always been here but Hypnotica, much like Exotica, which is also sort of a fraught genre. a sort of a western interpretive genre, a fetishizing genre. I would say, uh, it starts in the 60s when all these wh- weird things started, you know, and I started fucking around and... You can go into Woodstock or whatever, that's usually when these things start. Anything that ends with a at the end of a word usually started in By some dirty hippie. Yeah. By some dirty hippie. Yeah. It was like, uh. Okay. So. That's hypnotica, I don't care to explain it to be honest I think everyone can feel it in their gut. We're mostly gonna ex- Explore this kind of the canon of the modern canon of what what I might call hypnotic It's been deeply influential on me and, uh...",
};
const faketopics = new Array(10).fill(faketopic);
return (
<div className="py-4 grid grid-cols-1 lg:grid-cols-2 gap-2 lg:gap-4 grid-rows-2 lg:grid-rows-1 h-outer-dashboard md:h-outer-dashboard-md lg:h-outer-dashboard-lg">
{/* Topic Section */}
<section className="relative w-full h-auto max-h-full bg-blue-400/20 rounded-lg md:rounded-xl px-2 md:px-4 flex flex-col justify-center align-center">
{faketopics.length > 0 ? (
<>
<ScrollToBottom
visible={!autoscrollEnabled}
hasFinalSummary={finalSummary ? true : false}
@@ -69,24 +80,28 @@ export function Dashboard({
<div
id="topics-div"
className="py-2 overflow-y-auto"
className="overflow-y-auto h-auto max-h-full"
onScroll={handleScroll}
>
{topics.map((item, index) => (
<div key={index} className="border-b-2 py-2 hover:bg-[#8ec5fc30]">
{faketopics.map((item, index) => (
<div
className="flex justify-between items-center cursor-pointer px-4"
key={index}
className="border-b-2 last:border-none px-2 md:px-4 py-2 hover:bg-blue-400/20"
role="button"
onClick={() =>
setActiveTopic(activeTopic?.id == item.id ? null : item)
}
>
<div className="flex justify-between items-center">
<div className="flex justify-between items-center rounded-lg md:rounded-xl text-l md:text-xl font-bold">
<p>
<span className="font-light text-slate-500 pr-1">
[{formatTime(item.timestamp)}]
</span>{" "}
</span>
&nbsp;
<span className="pr-1">{item.title}</span>
</p>
<FontAwesomeIcon
className={`transform transition-transform duration-200`}
className="transform transition-transform duration-200"
icon={
activeTopic?.id == item.id
? faChevronDown
@@ -94,29 +109,32 @@ export function Dashboard({
}
/>
</div>
</div>
{activeTopic?.id == item.id && (
<div className="p-2 mt-2 -mb-2 bg-slate-50 rounded">
<div className="p-2 mt-2 -mb-2 h-fit">
{item.transcript}
</div>
)}
</div>
))}
{topics.length === 0 && (
<div className="text-center text-gray-500">
Discussion topics will appear here after you start recording. It
may take up to 5 minutes of conversation for the first topic to
appear.
</div>
</>
) : (
<div className="text-center text-gray-500 p-4">
Discussion topics will appear here after you start recording. It may
take up to 5 minutes of conversation for the first topic to appear.
</div>
)}
</div>
</section>
{finalSummary.summary && <FinalSummary text={finalSummary.summary} />}
</div>
<section className="relative w-full h-auto max-h-full bg-blue-400/20 rounded-lg md:rounded-xl px-2 md:px-4 flex flex-col justify-center align-center">
{finalSummary.summary ? (
<FinalSummary text={finalSummary.summary} />
) : (
<LiveTrancription text={transcriptionText} />
)}
</section>
{disconnected && <DisconnectedIndicator />}
<LiveTrancription text={transcriptionText} />
</>
</div>
);
}

4
www/app/transcripts/finalSummary.tsx
View File

@@ -4,8 +4,8 @@ type FinalSummaryProps = {
export default function FinalSummary(props: FinalSummaryProps) {
return (
<div className="mt-2 p-2 bg-white temp-transcription rounded">
<h2>Final Summary</h2>
<div className="overflow-y-auto h-auto max-h-full">
<h2 className="text-lg">Final Summary</h2>
<p>{props.text}</p>
</div>
);

7
www/app/transcripts/liveTranscription.tsx
View File

@@ -4,8 +4,11 @@ type LiveTranscriptionProps = {
export default function LiveTrancription(props: LiveTranscriptionProps) {
return (
<div className="h-[7svh] w-full bg-gray-800 text-white text-center py-4 text-2xl">
&nbsp;{props.text}&nbsp;
<div className="text-center p-4">
<p className="text-lg md:text-xl font-bold">
{/* Nous allons prendre quelques appels téléphoniques et répondre à quelques questions */}
{props.text}
</p>
</div>
);
}

14
www/app/transcripts/new/page.tsx
View File

@@ -9,6 +9,7 @@ import useAudioDevice from "../useAudioDevice";
import "../../styles/button.css";
import { Topic } from "../webSocketTypes";
import getApi from "../../lib/getApi";
import AudioInputsDropdown from "../audioInputsDropdown";
const TranscriptCreate = () => {
const [stream, setStream] = useState<MediaStream | null>(null);
@@ -38,8 +39,14 @@ const TranscriptCreate = () => {
getAudioStream,
} = useAudioDevice();
const getCurrentStream = async () => {
return audioDevices.length
? await getAudioStream(audioDevices[0].value)
: null;
};
return (
<div className="w-full flex flex-col items-center h-[100svh]">
<div className="w-full">
{permissionOk ? (
<>
<Recorder
@@ -49,8 +56,7 @@ const TranscriptCreate = () => {
setStream(null);
}}
topics={webSockets.topics}
getAudioStream={getAudioStream}
audioDevices={audioDevices}
getAudioStream={getCurrentStream}
useActiveTopic={useActiveTopic}
isPastMeeting={false}
/>
@@ -65,7 +71,7 @@ const TranscriptCreate = () => {
</>
) : (
<>
<div className="flex flex-col items-center justify-center w-fit px-6 py-8 mt-8 rounded-xl">
<div className="flex flex-col w-full items-center justify-center px-6 py-8 mt-8 rounded-xl">
<h1 className="text-2xl font-bold">Audio Permissions</h1>
{loading ? (
<p className="text-gray-500 text-center mt-5">

100
www/app/transcripts/recorder.tsx
View File

@@ -7,49 +7,15 @@ import CustomRegionsPlugin from "../lib/custom-plugins/regions";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faDownload } from "@fortawesome/free-solid-svg-icons";
import Dropdown, { Option } from "react-dropdown";
import "react-dropdown/style.css";
import { formatTime } from "../lib/time";
import { Topic } from "./webSocketTypes";
import { AudioWaveform } from "../api";
const AudioInputsDropdown: React.FC<{
audioDevices?: Option[];
setDeviceId: React.Dispatch<React.SetStateAction<string | null>>;
disabled: boolean;
}> = (props) => {
const [ddOptions, setDdOptions] = useState<Option[]>([]);
useEffect(() => {
if (props.audioDevices) {
setDdOptions(props.audioDevices);
props.setDeviceId(
props.audioDevices.length > 0 ? props.audioDevices[0].value : null,
);
}
}, [props.audioDevices]);
const handleDropdownChange = (option: Option) => {
props.setDeviceId(option.value);
};
return (
<Dropdown
options={ddOptions}
onChange={handleDropdownChange}
value={ddOptions[0]}
disabled={props.disabled}
/>
);
};
type RecorderProps = {
setStream?: React.Dispatch<React.SetStateAction<MediaStream | null>>;
onStop?: () => void;
topics: Topic[];
getAudioStream?: (deviceId: string | null) => Promise<MediaStream | null>;
audioDevices?: Option[];
getAudioStream?: () => Promise<MediaStream | null>;
useActiveTopic: [
Topic | null,
React.Dispatch<React.SetStateAction<Topic | null>>,
@@ -66,7 +32,6 @@ export default function Recorder(props: RecorderProps) {
const [isRecording, setIsRecording] = useState<boolean>(false);
const [hasRecorded, setHasRecorded] = useState<boolean>(props.isPastMeeting);
const [isPlaying, setIsPlaying] = useState<boolean>(false);
const [deviceId, setDeviceId] = useState<string | null>(null);
const [currentTime, setCurrentTime] = useState<number>(0);
const [timeInterval, setTimeInterval] = useState<number | null>(null);
const [duration, setDuration] = useState<number>(0);
@@ -88,7 +53,7 @@ export default function Recorder(props: RecorderProps) {
hideScrollbar: true,
autoCenter: true,
barWidth: 2,
height: 90,
height: "auto",
url: props.transcriptId
? `${process.env.NEXT_PUBLIC_API_URL}/v1/transcripts/${props.transcriptId}/audio/mp3`
: undefined,
@@ -222,7 +187,7 @@ export default function Recorder(props: RecorderProps) {
setIsRecording(false);
setHasRecorded(true);
} else if (props.getAudioStream) {
const stream = await props.getAudioStream(deviceId);
const stream = await props.getAudioStream();
if (props.setStream) props.setStream(stream);
waveRegions?.clearRegions();
@@ -246,35 +211,29 @@ export default function Recorder(props: RecorderProps) {
};
return (
<div className="relative flex flex-col items-center justify-center max-w-[75vw] w-full">
<div className="flex my-2 mx-auto audio-source-dropdown">
{!hasRecorded && (
<>
<AudioInputsDropdown
audioDevices={props.audioDevices}
setDeviceId={setDeviceId}
disabled={isRecording}
/>
&nbsp;
<button
className="w-20"
onClick={handleRecClick}
data-color={isRecording ? "red" : "blue"}
disabled={!deviceId}
>
{isRecording ? "Stop" : "Record"}
</button>
&nbsp;
</>
<div className="flex items-center w-full">
<div className="flex-grow items-end relative">
<div
ref={waveformRef}
className="flex-grow shadow-lg md:shadow-xl rounded-2xl h-20"
></div>
<div className="absolute right-2 bottom-0">
{isRecording && (
<div className="inline-block bg-red-500 rounded-full w-2 h-2 my-auto mr-1 animate-ping"></div>
)}
{timeLabel()}
</div>
</div>
{hasRecorded && (
<>
<button
className="w-20"
className={`${
isPlaying ? "bg-orange-400" : "bg-green-400"
} ml-2 md:ml:4 text-white`}
id="play-btn"
onClick={handlePlayClick}
data-color={isPlaying ? "orange" : "green"}
disabled={isRecording}
>
{isPlaying ? "Pause" : "Play"}
</button>
@@ -282,7 +241,7 @@ export default function Recorder(props: RecorderProps) {
{props.transcriptId && (
<a
title="Download recording"
className="w-9 m-auto text-center cursor-pointer text-blue-300 hover:text-blue-700"
className="text-center cursor-pointer text-blue-400 hover:text-blue-700 ml-2 md:ml:4 p-2"
href={`${process.env.NEXT_PUBLIC_API_URL}/v1/transcripts/${props.transcriptId}/audio/mp3`}
>
<FontAwesomeIcon icon={faDownload} />
@@ -293,21 +252,24 @@ export default function Recorder(props: RecorderProps) {
<a
id="download-recording"
title="Download recording"
className="invisible w-9 m-auto text-center cursor-pointer text-blue-300 hover:text-blue-700"
className="invisible text-center cursor-pointer text-blue-400 hover:text-blue-700 ml-2 md:ml:4 p-2"
>
<FontAwesomeIcon icon={faDownload} />
</a>
)}
</>
)}
</div>
<div ref={waveformRef} className="w-full shadow-xl rounded-2xl"></div>
<div className="absolute bottom-0 right-2 text-xs text-black">
{isRecording && (
<div className="inline-block bg-red-500 rounded-full w-2 h-2 my-auto mr-1 animate-ping"></div>
{!hasRecorded && (
<button
className={`${
isRecording ? "bg-red-400" : "bg-blue-400"
} text-white ml-2 md:ml:4`}
onClick={handleRecClick}
disabled={isPlaying}
>
{isRecording ? "Stop" : "Record"}
</button>
)}
{timeLabel()}
</div>
</div>
);
}

18
www/tailwind.config.js
View File

@@ -1,4 +1,14 @@
/** @type {import('tailwindcss').Config} */
// 8 margin main container Top + 40 height header + 16 margin bottom header + 80 recorder
const dashboardStart = 144;
// 8 margin main container Top + 40 height header + 16 margin bottom header + 80 recorder
const dashboardStartMd = 144;
// 16 margin main container Top + 64 height header + 16 margin bottom header + 80 recorder
const dashboardStartLg = 176;
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
@@ -7,10 +17,10 @@ module.exports = {
],
theme: {
extend: {
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
height: {
"outer-dashboard": `calc(100svh - ${dashboardStart}px)`,
"outer-dashboard-md": `calc(100svh - ${dashboardStartMd + 34}px)`,
"outer-dashboard-lg": `calc(100svh - ${dashboardStartLg}px)`,
},
},
},