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

prevent overflow, smaller fonts

Browse Source
This commit is contained in:
Sara
2023-10-04 15:30:19 +02:00
parent 0cd8958bf1
commit 12ad721c1f
6 changed files with 43 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
www/app/layout.tsx
View File

@@ -67,7 +67,7 @@ export default function RootLayout({ children }) {
<ErrorMessage />
<div
id="container"
className="items-center h-[100svh] p-2 md:p-4 grid grid-rows-layout gap-2 md:gap-4"
className="items-center h-[100svh] w-[100svw] p-2 md:p-4 grid grid-rows-layout gap-2 md:gap-4"
>
<header className="flex justify-between items-center w-full">
{/* Logo on the left */}

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

@@ -35,7 +35,12 @@ export default function TranscriptDetails(details: TranscriptDetails) {
);
}
const fullTranscript = topics.topics?.map(topic => topic.transcript).join('\n\n').replace(/ +/g, ' ').trim() || '';
const fullTranscript =
topics.topics
?.map((topic) => topic.transcript)
.join("\n\n")
.replace(/ +/g, " ")
.trim() || "";
return (
<>
@@ -58,10 +63,13 @@ export default function TranscriptDetails(details: TranscriptDetails) {
useActiveTopic={useActiveTopic}
autoscroll={false}
/>
<div className="w-full h-full grid grid-rows-layout-one gap-2 lg:gap-4">
<div className="w-full h-full grid grid-rows-layout-one grid-cols-1 gap-2 lg:gap-4">
<section className=" bg-blue-400/20 rounded-lg md:rounded-xl p-2 md:px-4 h-full">
{transcript?.response?.longSummary && (
<FinalSummary fullTranscript={fullTranscript} summary={transcript?.response?.longSummary} />
<FinalSummary
fullTranscript={fullTranscript}
summary={transcript?.response?.longSummary}
/>
)}
</section>
@@ -73,7 +81,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
size={98}
/>
</div>
<div className="flex-grow">
<div className="flex-grow max-w-full">
<ShareLink />
</div>
</section>

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

@@ -34,29 +34,31 @@ export default function FinalSummary(props: FinalSummaryProps) {
return (
<div className="overflow-y-auto h-auto max-h-full">
<div className="flex flex-row justify-between items-center">
<h2 className="text-xl md:text-2xl font-bold">Final Summary</h2>
<div className="ml-auto flex space-x-2">
<button
onClick={handleCopyTranscriptClick}
className={
(isCopiedTranscript ? "bg-blue-500" : "bg-blue-400") +
" hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2"
}
style={{ minHeight: "30px" }}
>
{isCopiedTranscript ? "Copied!" : "Copy Full Transcript"}
</button>
<button
onClick={handleCopySummaryClick}
className={
(isCopiedSummary ? "bg-blue-500" : "bg-blue-400") +
" hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2"
}
style={{ minHeight: "30px" }}
>
{isCopiedSummary ? "Copied!" : "Copy Summary"}
</button>
<div className="flex flex-row flex-wrap-reverse justify-between items-center">
<h2 className="text-lg sm:text-xl md:text-2xl font-bold">
Final Summary
</h2>
<div className="ml-auto flex space-x-2 mb-2">
<button
onClick={handleCopyTranscriptClick}
className={
(isCopiedTranscript ? "bg-blue-500" : "bg-blue-400") +
" hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2"
}
style={{ minHeight: "30px" }}
>
{isCopiedTranscript ? "Copied!" : "Copy Full Transcript"}
</button>
<button
onClick={handleCopySummaryClick}
className={
(isCopiedSummary ? "bg-blue-500" : "bg-blue-400") +
" hover:bg-blue-500 focus-visible:bg-blue-500 text-white rounded p-2"
}
style={{ minHeight: "30px" }}
>
{isCopiedSummary ? "Copied!" : "Copy Summary"}
</button>
</div>
</div>

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

@@ -110,8 +110,7 @@ export default function Recorder(props: RecorderProps) {
: undefined,
});
if (!props.transcriptId)
{
if (!props.transcriptId) {
const _wshack: any = _wavesurfer;
_wshack.renderer.renderSingleCanvas = () => {};
}

2
www/app/transcripts/shareLink.tsx
View File

@@ -39,7 +39,7 @@ const ShareLink = () => {
value={currentUrl}
ref={inputRef}
onChange={() => {}}
className="border rounded-lg md:rounded-xl p-2 flex-grow mr-2 text-sm bg-slate-100 outline-slate-400"
className="border rounded-lg md:rounded-xl p-2 flex-grow flex-shrink overflow-auto mr-2 text-sm bg-slate-100 outline-slate-400"
/>
<button
onClick={handleCopyClick}

6
www/app/transcripts/topicList.tsx
View File

@@ -61,10 +61,10 @@ export function TopicList({
}, [activeTopic, autoscroll]);
return (
<section className="relative w-full h-full bg-blue-400/20 rounded-lg md:rounded-xl p-2 md:px-4 flex flex-col justify-center align-center">
<section className="relative w-full h-full bg-blue-400/20 rounded-lg md:rounded-xl p-1 sm:p-2 md:px-4 flex flex-col justify-center align-center">
{topics.length > 0 ? (
<>
<h2 className="md:text-lg font-bold mb-2">Topics</h2>
<h2 className="ml-2 md:text-lg font-bold mb-2">Topics</h2>
{autoscroll && (
<ScrollToBottom
@@ -86,7 +86,7 @@ export function TopicList({
setActiveTopic(activeTopic?.id == topic.id ? null : topic)
}
>
<div className="w-full flex justify-between items-center rounded-lg md:rounded-xl text-lg md:text-xl font-bold leading-tight">
<div className="w-full flex justify-between items-center rounded-lg md:rounded-xl xs:text-base sm:text-lg md:text-xl font-bold leading-tight">
<p>
<span className="font-light font-mono text-slate-500 text-base md:text-lg">
[{formatTime(topic.timestamp)}]&nbsp;