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

small fixes and start auth fix

Browse Source
This commit is contained in:
Sara
2023-11-22 12:25:21 +01:00
parent fe7f1a0e78
commit f38dad3ad4
8 changed files with 172 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
www/app/[domain]/layout.tsx
View File

@@ -11,6 +11,7 @@ import About from "../(aboutAndPrivacy)/about";
import Privacy from "../(aboutAndPrivacy)/privacy"; import Privacy from "../(aboutAndPrivacy)/privacy";
import { DomainContextProvider } from "./domainContext"; import { DomainContextProvider } from "./domainContext";
import { getConfig } from "../lib/edgeConfig"; import { getConfig } from "../lib/edgeConfig";
import { ErrorBoundary } from "@sentry/nextjs";
const poppins = Poppins({ subsets: ["latin"], weight: ["200", "400", "600"] }); const poppins = Poppins({ subsets: ["latin"], weight: ["200", "400", "600"] });
@@ -76,80 +77,82 @@ export default async function RootLayout({ children, params }: LayoutProps) {
<body className={poppins.className + " h-screen relative"}> <body className={poppins.className + " h-screen relative"}>
<FiefWrapper> <FiefWrapper>
<DomainContextProvider config={config}> <DomainContextProvider config={config}>
<ErrorProvider> <ErrorBoundary fallback={<p>"something went really wrong"</p>}>
<ErrorMessage /> <ErrorProvider>
<div <ErrorMessage />
id="container" <div
className="items-center h-[100svh] w-[100svw] p-2 md:p-4 grid grid-rows-layout gap-2 md:gap-4" id="container"
> 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 */} <header className="flex justify-between items-center w-full">
<Link {/* Logo on the left */}
href="/"
className="flex outline-blue-300 md:outline-none focus-visible:underline underline-offset-2 decoration-[.5px] decoration-gray-500"
>
<Image
src="/reach.png"
width={16}
height={16}
className="h-10 w-auto"
alt="Reflector"
/>
<div className="hidden flex-col ml-2 md:block">
<h1 className="text-[38px] font-bold tracking-wide leading-tight">
Reflector
</h1>
<p className="text-gray-500 text-xs tracking-tighter">
Capture the signal, not the noise
</p>
</div>
</Link>
<div>
{/* Text link on the right */}
<Link <Link
href="/transcripts/new" href="/"
className="hover:underline focus-within:underline underline-offset-2 decoration-[.5px] font-light px-2" className="flex outline-blue-300 md:outline-none focus-visible:underline underline-offset-2 decoration-[.5px] decoration-gray-500"
> >
Create <Image
src="/reach.png"
width={16}
height={16}
className="h-10 w-auto"
alt="Reflector"
/>
<div className="hidden flex-col ml-2 md:block">
<h1 className="text-[38px] font-bold tracking-wide leading-tight">
Reflector
</h1>
<p className="text-gray-500 text-xs tracking-tighter">
Capture the signal, not the noise
</p>
</div>
</Link> </Link>
{browse ? ( <div>
<> {/* Text link on the right */}
&nbsp;·&nbsp; <Link
<Link href="/transcripts/new"
href="/browse" className="hover:underline focus-within:underline underline-offset-2 decoration-[.5px] font-light px-2"
className="hover:underline focus-within:underline underline-offset-2 decoration-[.5px] font-light px-2" >
prefetch={false} Create
> </Link>
Browse {browse ? (
</Link> <>
</> &nbsp;·&nbsp;
) : ( <Link
<></> href="/browse"
)} className="hover:underline focus-within:underline underline-offset-2 decoration-[.5px] font-light px-2"
&nbsp;·&nbsp; prefetch={false}
<About buttonText="About" /> >
{privacy ? ( Browse
<> </Link>
&nbsp;·&nbsp; </>
<Privacy buttonText="Privacy" /> ) : (
</> <></>
) : ( )}
<></> &nbsp;·&nbsp;
)} <About buttonText="About" />
{requireLogin ? ( {privacy ? (
<> <>
&nbsp;·&nbsp; &nbsp;·&nbsp;
<UserInfo /> <Privacy buttonText="Privacy" />
</> </>
) : ( ) : (
<></> <></>
)} )}
</div> {requireLogin ? (
</header> <>
&nbsp;·&nbsp;
<UserInfo />
</>
) : (
<></>
)}
</div>
</header>
{children} {children}
</div> </div>
</ErrorProvider> </ErrorProvider>
</ErrorBoundary>
</DomainContextProvider> </DomainContextProvider>
</FiefWrapper> </FiefWrapper>
</body> </body>

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

@@ -14,6 +14,7 @@ import QRCode from "react-qr-code";
import TranscriptTitle from "../transcriptTitle"; import TranscriptTitle from "../transcriptTitle";
import Player from "../player"; import Player from "../player";
import WaveformLoading from "../waveformLoading"; import WaveformLoading from "../waveformLoading";
import { useRouter } from "next/navigation";
type TranscriptDetails = { type TranscriptDetails = {
params: { params: {
@@ -21,10 +22,11 @@ type TranscriptDetails = {
}; };
}; };
const protectedPath = true; const protectedPath = false;
export default function TranscriptDetails(details: TranscriptDetails) { export default function TranscriptDetails(details: TranscriptDetails) {
const transcriptId = details.params.transcriptId; const transcriptId = details.params.transcriptId;
const router = useRouter();
const transcript = useTranscript(protectedPath, transcriptId); const transcript = useTranscript(protectedPath, transcriptId);
const topics = useTopics(protectedPath, transcriptId); const topics = useTopics(protectedPath, transcriptId);
@@ -32,15 +34,6 @@ export default function TranscriptDetails(details: TranscriptDetails) {
const useActiveTopic = useState<Topic | null>(null); const useActiveTopic = useState<Topic | null>(null);
const mp3 = useMp3(transcriptId); const mp3 = useMp3(transcriptId);
if (transcript?.error || topics?.error) {
return (
<Modal
title="Transcription Not Found"
text="A trascription with this ID does not exist."
/>
);
}
useEffect(() => { useEffect(() => {
const statusToRedirect = ["idle", "recording", "processing"]; const statusToRedirect = ["idle", "recording", "processing"];
if (statusToRedirect.includes(transcript.response?.status)) { if (statusToRedirect.includes(transcript.response?.status)) {
@@ -48,8 +41,8 @@ export default function TranscriptDetails(details: TranscriptDetails) {
// Shallow redirection does not work on NextJS 13 // Shallow redirection does not work on NextJS 13
// https://github.com/vercel/next.js/discussions/48110 // https://github.com/vercel/next.js/discussions/48110
// https://github.com/vercel/next.js/discussions/49540 // https://github.com/vercel/next.js/discussions/49540
// router.push(newUrl, undefined, { shallow: true }); router.push(newUrl, undefined);
history.replaceState({}, "", newUrl); // history.replaceState({}, "", newUrl);
} }
}, [transcript.response?.status]); }, [transcript.response?.status]);
@@ -60,85 +53,92 @@ export default function TranscriptDetails(details: TranscriptDetails) {
.replace(/ +/g, " ") .replace(/ +/g, " ")
.trim() || ""; .trim() || "";
if (transcript.error || topics?.error) {
return (
<Modal
title="Transcription Not Found"
text="A trascription with this ID does not exist."
/>
);
}
if (transcript?.loading || topics?.loading) {
return <Modal title="Loading" text={"Loading transcript..."} />;
}
return ( return (
<> <>
{transcript?.loading || topics?.loading ? ( <div className="flex flex-col">
<Modal title="Loading" text={"Loading transcript..."} /> {transcript?.response?.title && (
) : ( <TranscriptTitle
<> protectedPath={protectedPath}
<div className="flex flex-col"> title={transcript.response.title}
{transcript?.response?.title && ( transcriptId={transcript.response.id}
<TranscriptTitle />
)}
{waveform.waveform && mp3.media ? (
<Player
topics={topics?.topics || []}
useActiveTopic={useActiveTopic}
waveform={waveform.waveform.data}
media={mp3.media}
mediaDuration={transcript.response.duration}
/>
) : waveform.error ? (
<div>"error loading this recording"</div>
) : (
<WaveformLoading />
)}
</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 || []}
useActiveTopic={useActiveTopic}
autoscroll={false}
/>
<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
protectedPath={protectedPath} protectedPath={protectedPath}
title={transcript.response.title} fullTranscript={fullTranscript}
summary={transcript.response.longSummary}
transcriptId={transcript.response.id} transcriptId={transcript.response.id}
/> />
)}
{waveform.waveform && mp3.media ? (
<Player
topics={topics?.topics || []}
useActiveTopic={useActiveTopic}
waveform={waveform.waveform.data}
media={mp3.media}
mediaDuration={transcript.response.duration}
/>
) : waveform.error ? (
<div>"error loading this recording"</div>
) : ( ) : (
<WaveformLoading /> <div className="flex flex-col h-full justify-center content-center">
)} {transcript.response.status == "processing" ? (
</div> <p>Loading Transcript</p>
<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 || []}
useActiveTopic={useActiveTopic}
autoscroll={false}
/>
<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
protectedPath={protectedPath}
fullTranscript={fullTranscript}
summary={transcript.response.longSummary}
transcriptId={transcript.response.id}
/>
) : ( ) : (
<div className="flex flex-col h-full justify-center content-center"> <p>
{transcript.response.status == "processing" ? ( There was an error generating the final summary, please come
<p>Loading Transcript</p> back later
) : ( </p>
<p>
There was an error generating the final summary, please
come back later
</p>
)}
</div>
)} )}
</section> </div>
)}
</section>
<section className="flex items-center"> <section className="flex items-center">
<div className="mr-4 hidden md:block h-auto"> <div className="mr-4 hidden md:block h-auto">
<QRCode <QRCode
value={`${location.origin}/transcripts/${details.params.transcriptId}`} value={`${location.origin}/transcripts/${details.params.transcriptId}`}
level="L" level="L"
size={98} size={98}
/> />
</div>
<div className="flex-grow max-w-full">
<ShareLink
protectedPath={protectedPath}
transcriptId={transcript?.response?.id}
userId={transcript?.response?.userId}
shareMode={transcript?.response?.shareMode}
/>
</div>
</section>
</div> </div>
</div> <div className="flex-grow max-w-full">
</> <ShareLink
)} protectedPath={protectedPath}
transcriptId={transcript?.response?.id}
userId={transcript?.response?.userId}
shareMode={transcript?.response?.shareMode}
/>
</div>
</section>
</div>
</div>
</> </>
); );
} }

14
www/app/[domain]/transcripts/useMp3.ts
View File

@@ -16,26 +16,30 @@ const useMp3 = (id: string, waiting?: boolean): Mp3Response => {
const api = getApi(true); const api = getApi(true);
const { api_url } = useContext(DomainContext); const { api_url } = useContext(DomainContext);
const accessTokenInfo = useFiefAccessTokenInfo(); const accessTokenInfo = useFiefAccessTokenInfo();
const [serviceWorkerReady, setServiceWorkerReady] = useState(false); const [serviceWorker, setServiceWorker] =
useState<ServiceWorkerRegistration | null>(null);
useEffect(() => { useEffect(() => {
if ("serviceWorker" in navigator) { if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/service-worker.js").then(() => { navigator.serviceWorker.register("/service-worker.js").then((worker) => {
setServiceWorkerReady(true); setServiceWorker(worker);
}); });
} }
return () => {
serviceWorker?.unregister();
};
}, []); }, []);
useEffect(() => { useEffect(() => {
if (!navigator.serviceWorker) return; if (!navigator.serviceWorker) return;
if (!navigator.serviceWorker.controller) return; if (!navigator.serviceWorker.controller) return;
if (!serviceWorkerReady) return; if (!serviceWorker) return;
// Send the token to the service worker // Send the token to the service worker
navigator.serviceWorker.controller.postMessage({ navigator.serviceWorker.controller.postMessage({
type: "SET_AUTH_TOKEN", type: "SET_AUTH_TOKEN",
token: accessTokenInfo?.access_token, token: accessTokenInfo?.access_token,
}); });
}, [navigator.serviceWorker, serviceWorkerReady, accessTokenInfo]); }, [navigator.serviceWorker, !serviceWorker, accessTokenInfo]);
useEffect(() => { useEffect(() => {
if (!id || !api || later) return; if (!id || !api || later) return;

5
www/app/[domain]/transcripts/useWaveform.ts
View File

@@ -1,8 +1,5 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { import { V1TranscriptGetAudioWaveformRequest } from "../../api/apis/DefaultApi";
DefaultApi,
V1TranscriptGetAudioWaveformRequest,
} from "../../api/apis/DefaultApi";
import { AudioWaveform } from "../../api"; import { AudioWaveform } from "../../api";
import { useError } from "../../(errors)/errorContext"; import { useError } from "../../(errors)/errorContext";
import getApi from "../../lib/getApi"; import getApi from "../../lib/getApi";

1
www/app/[domain]/transcripts/useWebSockets.ts
View File

@@ -402,6 +402,7 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
console.debug("WebSocket connection closed"); console.debug("WebSocket connection closed");
switch (event.code) { switch (event.code) {
case 1000: // Normal Closure: case 1000: // Normal Closure:
case 1005: // Closure by client FF
default: default:
setError( setError(
new Error(`WebSocket closed unexpectedly with code: ${event.code}`), new Error(`WebSocket closed unexpectedly with code: ${event.code}`),

4
www/app/lib/edgeConfig.ts
View File

@@ -3,9 +3,9 @@ import { isDevelopment } from "./utils";
const localConfig = { const localConfig = {
features: { features: {
requireLogin: false, requireLogin: true,
privacy: true, privacy: true,
browse: false, browse: true,
}, },
api_url: "http://127.0.0.1:1250", api_url: "http://127.0.0.1:1250",
websocket_url: "ws://127.0.0.1:1250", websocket_url: "ws://127.0.0.1:1250",

5
www/app/lib/errorUtils.ts
View File

@@ -1,5 +1,8 @@
function shouldShowError(error: Error | null | undefined) { function shouldShowError(error: Error | null | undefined) {
if (error?.name == "ResponseError" && error["response"].status == 404) if (
error?.name == "ResponseError" &&
(error["response"].status == 404 || error["response"].status == 403)
)
return false; return false;
if (error?.name == "FetchError") return false; if (error?.name == "FetchError") return false;
return true; return true;

2
www/app/lib/fief.ts
View File

@@ -67,7 +67,7 @@ export const getFiefAuthMiddleware = async (url) => {
parameters: {}, parameters: {},
}, },
{ {
matcher: "/transcripts/((?!new).*)", matcher: "/transcripts/((?!new))",
parameters: {}, parameters: {},
}, },
{ {