selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2025-12-21 20:59:05 +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 f88a7bde56
11 changed files with 209 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
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 = () => {
@@ -55,68 +56,74 @@ 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>
<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">
{topics.length > 0 ? (
<>
<ScrollToBottom
visible={!autoscrollEnabled}
hasFinalSummary={finalSummary ? true : false}
handleScrollBottom={scrollToBottom}
/>
<ScrollToBottom
visible={!autoscrollEnabled}
hasFinalSummary={finalSummary ? true : false}
handleScrollBottom={scrollToBottom}
/>
<div
id="topics-div"
className="py-2 overflow-y-auto"
onScroll={handleScroll}
>
{topics.map((item, index) => (
<div key={index} className="border-b-2 py-2 hover:bg-[#8ec5fc30]">
<div
className="flex justify-between items-center cursor-pointer px-4"
onClick={() =>
setActiveTopic(activeTopic?.id == item.id ? null : item)
}
>
<div className="flex justify-between items-center">
<span className="font-light text-slate-500 pr-1">
[{formatTime(item.timestamp)}]
</span>{" "}
<span className="pr-1">{item.title}</span>
<FontAwesomeIcon
className={`transform transition-transform duration-200`}
icon={
activeTopic?.id == item.id
? faChevronDown
: faChevronRight
}
/>
<div
id="topics-div"
className="overflow-y-auto h-auto max-h-full"
onScroll={handleScroll}
>
{topics.map((item, index) => (
<div
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 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>
&nbsp;
<span className="pr-1">{item.title}</span>
</p>
<FontAwesomeIcon
className="transform transition-transform duration-200"
icon={
activeTopic?.id == item.id
? faChevronDown
: faChevronRight
}
/>
</div>
{activeTopic?.id == item.id && (
<div className="p-2 mt-2 -mb-2 h-fit">
{item.transcript}
</div>
)}
</div>
</div>
{activeTopic?.id == item.id && (
<div className="p-2 mt-2 -mb-2 bg-slate-50 rounded">
{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>
</>
) : (
<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>
)}
</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>
);
}