consent context vibe

TODO.md

@@ -1,2 +1,4 @@
-- non-auth user consent - store on frontend per session? per meeting? (get meeting from the iframe)
-- consent field userIdentity itself - optional
+- consent popup itself - make much less invasive, somewhere in the corner
+- non-auth user consent AND AUTH user consent - store on frontend per session - per meeting? (get meeting from the iframe)
+- actually delete aws
+- add externalId to the iframe with the logged in user

www/app/(app)/transcripts/[transcriptId]/record/page.tsx

@@ -13,7 +13,7 @@ import useMp3 from "../../useMp3";
 import WaveformLoading from "../../waveformLoading";
 import { Box, Text, Grid, Heading, VStack, Flex } from "@chakra-ui/react";
 import LiveTrancription from "../../liveTranscription";
-import AudioConsentDialog from "../../components/AudioConsentDialog";
+import AudioConsentDialog from "../../../rooms/audioConsentDialog";
 import useApi from "../../../../lib/useApi";
 
 type TranscriptDetails = {

www/app/(app)/transcripts/[transcriptId]/shareModal.tsx

@@ -133,6 +133,8 @@ const ShareModal = (props: ShareModalProps) => {
                     setStream(val.toString());
                   }}
                   placeholder="Pick a stream"
+                  onBlur={() => {}}
+                  onFocus={() => {}}
                 />
               </div>
 
@@ -145,6 +147,8 @@ const ShareModal = (props: ShareModalProps) => {
                     value={topic}
                     onChange={(val) => setTopic(val.toString())}
                     placeholder="Pick a topic"
+                    onBlur={() => {}}
+                    onFocus={() => {}}
                   />
                 </div>
               )}

www/app/(app)/transcripts/new/page.tsx

@@ -177,6 +177,8 @@ const TranscriptCreate = () => {
                     value={targetLanguage}
                     onChange={onLanguageChange}
                     placeholder="Choose your language"
+                    onBlur={() => {}}
+                    onFocus={() => {}}
                   />
                 </Box>
                 {isClient && !loading ? (

www/app/[roomName]/page.tsx

@@ -9,6 +9,7 @@ import { notFound } from "next/navigation";
 import useSessionStatus from "../lib/useSessionStatus";
 import AudioConsentDialog from "../(app)/rooms/audioConsentDialog";
 import { DomainContext } from "../domainContext";
+import { useRecordingConsent } from "../recordingConsentContext";
 import useSessionAccessToken from "../lib/useSessionAccessToken";
 import useSessionUser from "../lib/useSessionUser";
 
@@ -25,7 +26,8 @@ export default function Room(details: RoomDetails) {
   const router = useRouter();
   const { isLoading, isAuthenticated } = useSessionStatus();
   const [showConsentDialog, setShowConsentDialog] = useState(false);
-  const [consentGiven, setConsentGiven] = useState<boolean | null>(null);
+  const [consentLoading, setConsentLoading] = useState(false);
+  const { state: consentState, touch, hasConsent } = useRecordingConsent();
   const { api_url } = useContext(DomainContext);
   const { accessToken } = useSessionAccessToken();
   const { id: userId } = useSessionUser();
@@ -35,6 +37,8 @@ export default function Room(details: RoomDetails) {
     ? meeting?.response?.host_room_url
     : meeting?.response?.room_url;
 
+  const meetingId = meeting?.response?.id;
+
   const handleLeave = useCallback(() => {
     router.push("/browse");
   }, [router]);
@@ -48,9 +52,9 @@ export default function Room(details: RoomDetails) {
     return null;
   }, [isAuthenticated, userId]);
 
-  const handleConsent = useCallback(async (given: boolean) => {
-    setConsentGiven(given);
-    setShowConsentDialog(false); // Close dialog after consent is given
+  const handleConsent = useCallback(async (meetingId: string, given: boolean) => {
+    setConsentLoading(true);
+    setShowConsentDialog(false); // Close dialog immediately
     
     if (meeting?.response?.id && api_url) {
       try {
@@ -73,14 +77,20 @@ export default function Room(details: RoomDetails) {
           body: JSON.stringify(requestBody),
         });
         
-        if (!response.ok) {
+        if (response.ok) {
+          touch(meetingId);
+        } else {
           console.error('Failed to submit consent');
         }
       } catch (error) {
         console.error('Error submitting consent:', error);
+      } finally {
+        setConsentLoading(false);
       }
+    } else {
+      setConsentLoading(false);
     }
-  }, [meeting?.response?.id, api_url, accessToken]);
+  }, [meeting?.response?.id, api_url, accessToken, touch, getUserIdentifier]);
 
 
   useEffect(() => {
@@ -94,12 +104,18 @@ export default function Room(details: RoomDetails) {
     }
   }, [isLoading, meeting?.error]);
 
-  // Show consent dialog when meeting is loaded and consent hasn't been given yet
+  // Show consent dialog when meeting is loaded and consent hasn't been answered yet
   useEffect(() => {
-    if (meeting?.response?.id && consentGiven === null && !showConsentDialog) {
+    if (
+      consentState.ready &&
+      meetingId &&
+      !hasConsent(meetingId) &&
+      !showConsentDialog &&
+      !consentLoading
+    ) {
       setShowConsentDialog(true);
     }
-  }, [meeting?.response?.id, consentGiven, showConsentDialog]);
+  }, [consentState.ready, meetingId, hasConsent, showConsentDialog, consentLoading]);
 
   useEffect(() => {
     if (isLoading || !isAuthenticated || !roomUrl) return;
@@ -142,11 +158,13 @@ export default function Room(details: RoomDetails) {
           style={{ width: "100vw", height: "100vh" }}
         />
       )}
-      <AudioConsentDialog
-        isOpen={showConsentDialog}
-        onClose={() => {}} // No-op: ESC should not close without consent
-        onConsent={handleConsent}
-      />
+      {meetingId && consentState.ready && !hasConsent(meetingId) && !consentLoading && (
+        <AudioConsentDialog
+          isOpen={showConsentDialog}
+          onClose={() => {}} // No-op: ESC should not close without consent
+          onConsent={b => handleConsent(meetingId, b)}
+        />
+      )}
     </>
   );
 }

www/app/layout.tsx

@@ -4,6 +4,7 @@ import SessionProvider from "./lib/SessionProvider";
 import { ErrorProvider } from "./(errors)/errorContext";
 import ErrorMessage from "./(errors)/errorMessage";
 import { DomainContextProvider } from "./domainContext";
+import { RecordingConsentProvider } from "./recordingConsentContext";
 import { getConfig } from "./lib/edgeConfig";
 import { ErrorBoundary } from "@sentry/nextjs";
 import { Providers } from "./providers";
@@ -68,12 +69,14 @@ export default async function RootLayout({
       <body className={"h-[100svh] w-[100svw] overflow-x-hidden relative"}>
         <SessionProvider>
           <DomainContextProvider config={config}>
-            <ErrorBoundary fallback={<p>"something went really wrong"</p>}>
-              <ErrorProvider>
-                <ErrorMessage />
-                <Providers>{children}</Providers>
-              </ErrorProvider>
-            </ErrorBoundary>
+            <RecordingConsentProvider>
+              <ErrorBoundary fallback={<p>"something went really wrong"</p>}>
+                <ErrorProvider>
+                  <ErrorMessage />
+                  <Providers>{children}</Providers>
+                </ErrorProvider>
+              </ErrorBoundary>
+            </RecordingConsentProvider>
           </DomainContextProvider>
         </SessionProvider>
       </body>