small fixes and start auth fix

2025-12-21 04:39:06 +00:00 · 2023-11-22 12:25:21 +01:00
parent fe7f1a0e78
commit f38dad3ad4
8 changed files with 172 additions and 164 deletions
--- a/www/app/[domain]/layout.tsx
+++ b/www/app/[domain]/layout.tsx
@@ -11,6 +11,7 @@ import About from "../(aboutAndPrivacy)/about";
 import Privacy from "../(aboutAndPrivacy)/privacy";
 import { DomainContextProvider } from "./domainContext";
 import { getConfig } from "../lib/edgeConfig";
+import { ErrorBoundary } from "@sentry/nextjs";

 const poppins = Poppins({ subsets: ["latin"], weight: ["200", "400", "600"] });

@@ -76,6 +77,7 @@ export default async function RootLayout({ children, params }: LayoutProps) {
      <body className={poppins.className + " h-screen relative"}>
        <FiefWrapper>
          <DomainContextProvider config={config}>
+            <ErrorBoundary fallback={<p>"something went really wrong"</p>}>
              <ErrorProvider>
                <ErrorMessage />
                <div
@@ -150,6 +152,7 @@ export default async function RootLayout({ children, params }: LayoutProps) {
                  {children}
                </div>
              </ErrorProvider>
+            </ErrorBoundary>
          </DomainContextProvider>
        </FiefWrapper>
      </body>
--- a/www/app/[domain]/transcripts/[transcriptId]/page.tsx
+++ b/www/app/[domain]/transcripts/[transcriptId]/page.tsx
@@ -14,6 +14,7 @@ import QRCode from "react-qr-code";
 import TranscriptTitle from "../transcriptTitle";
 import Player from "../player";
 import WaveformLoading from "../waveformLoading";
+import { useRouter } from "next/navigation";

 type TranscriptDetails = {
  params: {
@@ -21,10 +22,11 @@ type TranscriptDetails = {
  };
 };

-const protectedPath = true;
+const protectedPath = false;

 export default function TranscriptDetails(details: TranscriptDetails) {
  const transcriptId = details.params.transcriptId;
+  const router = useRouter();

  const transcript = useTranscript(protectedPath, transcriptId);
  const topics = useTopics(protectedPath, transcriptId);
@@ -32,15 +34,6 @@ export default function TranscriptDetails(details: TranscriptDetails) {
  const useActiveTopic = useState<Topic | null>(null);
  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(() => {
    const statusToRedirect = ["idle", "recording", "processing"];
    if (statusToRedirect.includes(transcript.response?.status)) {
@@ -48,8 +41,8 @@ export default function TranscriptDetails(details: TranscriptDetails) {
      // Shallow redirection does not work on NextJS 13
      // https://github.com/vercel/next.js/discussions/48110
      // https://github.com/vercel/next.js/discussions/49540
-      // router.push(newUrl, undefined, { shallow: true });
-      history.replaceState({}, "", newUrl);
+      router.push(newUrl, undefined);
+      // history.replaceState({}, "", newUrl);
    }
  }, [transcript.response?.status]);

@@ -60,11 +53,20 @@ export default function TranscriptDetails(details: TranscriptDetails) {
      .replace(/ +/g, " ")
      .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 (
-    <>
-      {transcript?.loading || topics?.loading ? (
-        <Modal title="Loading" text={"Loading transcript..."} />
-      ) : (
    <>
      <div className="flex flex-col">
        {transcript?.response?.title && (
@@ -110,8 +112,8 @@ export default function TranscriptDetails(details: TranscriptDetails) {
                  <p>Loading Transcript</p>
                ) : (
                  <p>
-                        There was an error generating the final summary, please
-                        come back later
+                    There was an error generating the final summary, please come
+                    back later
                  </p>
                )}
              </div>
@@ -138,7 +140,5 @@ export default function TranscriptDetails(details: TranscriptDetails) {
        </div>
      </div>
    </>
-      )}
-    </>
  );
 }
--- a/www/app/[domain]/transcripts/useMp3.ts
+++ b/www/app/[domain]/transcripts/useMp3.ts
@@ -16,26 +16,30 @@ const useMp3 = (id: string, waiting?: boolean): Mp3Response => {
  const api = getApi(true);
  const { api_url } = useContext(DomainContext);
  const accessTokenInfo = useFiefAccessTokenInfo();
-  const [serviceWorkerReady, setServiceWorkerReady] = useState(false);
+  const [serviceWorker, setServiceWorker] =
+    useState<ServiceWorkerRegistration | null>(null);

  useEffect(() => {
    if ("serviceWorker" in navigator) {
-      navigator.serviceWorker.register("/service-worker.js").then(() => {
-        setServiceWorkerReady(true);
+      navigator.serviceWorker.register("/service-worker.js").then((worker) => {
+        setServiceWorker(worker);
      });
    }
+    return () => {
+      serviceWorker?.unregister();
+    };
  }, []);

  useEffect(() => {
    if (!navigator.serviceWorker) return;
    if (!navigator.serviceWorker.controller) return;
-    if (!serviceWorkerReady) return;
+    if (!serviceWorker) return;
    // Send the token to the service worker
    navigator.serviceWorker.controller.postMessage({
      type: "SET_AUTH_TOKEN",
      token: accessTokenInfo?.access_token,
    });
-  }, [navigator.serviceWorker, serviceWorkerReady, accessTokenInfo]);
+  }, [navigator.serviceWorker, !serviceWorker, accessTokenInfo]);

  useEffect(() => {
    if (!id || !api || later) return;
--- a/www/app/[domain]/transcripts/useWaveform.ts
+++ b/www/app/[domain]/transcripts/useWaveform.ts
@@ -1,8 +1,5 @@
 import { useEffect, useState } from "react";
-import {
-  DefaultApi,
-  V1TranscriptGetAudioWaveformRequest,
-} from "../../api/apis/DefaultApi";
+import { V1TranscriptGetAudioWaveformRequest } from "../../api/apis/DefaultApi";
 import { AudioWaveform } from "../../api";
 import { useError } from "../../(errors)/errorContext";
 import getApi from "../../lib/getApi";
--- a/www/app/[domain]/transcripts/useWebSockets.ts
+++ b/www/app/[domain]/transcripts/useWebSockets.ts
@@ -402,6 +402,7 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
      console.debug("WebSocket connection closed");
      switch (event.code) {
        case 1000: // Normal Closure:
+        case 1005: // Closure by client FF
        default:
          setError(
            new Error(`WebSocket closed unexpectedly with code: ${event.code}`),
--- a/www/app/lib/edgeConfig.ts
+++ b/www/app/lib/edgeConfig.ts
@@ -3,9 +3,9 @@ import { isDevelopment } from "./utils";

 const localConfig = {
  features: {
-    requireLogin: false,
+    requireLogin: true,
    privacy: true,
-    browse: false,
+    browse: true,
  },
  api_url: "http://127.0.0.1:1250",
  websocket_url: "ws://127.0.0.1:1250",
--- a/www/app/lib/errorUtils.ts
+++ b/www/app/lib/errorUtils.ts
@@ -1,5 +1,8 @@
 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;
  if (error?.name == "FetchError") return false;
  return true;
--- a/www/app/lib/fief.ts
+++ b/www/app/lib/fief.ts
@@ -67,7 +67,7 @@ export const getFiefAuthMiddleware = async (url) => {
      parameters: {},
    },
    {
-      matcher: "/transcripts/((?!new).*)",
+      matcher: "/transcripts/((?!new))",
      parameters: {},
    },
    {