From 2ac92b2d67979e2f5d57b53ef8de8d378563faec Mon Sep 17 00:00:00 2001 From: Igor Loskutov Date: Tue, 17 Jun 2025 17:47:04 -0400 Subject: [PATCH] consent context vibe --- TODO.md | 6 ++- .../[transcriptId]/record/page.tsx | 2 +- .../transcripts/[transcriptId]/shareModal.tsx | 4 ++ www/app/(app)/transcripts/new/page.tsx | 2 + www/app/[roomName]/page.tsx | 46 +++++++++++++------ www/app/layout.tsx | 15 +++--- 6 files changed, 52 insertions(+), 23 deletions(-) diff --git a/TODO.md b/TODO.md index e57a251f..5ceb50fb 100644 --- a/TODO.md +++ b/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 \ No newline at end of file +- 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 \ No newline at end of file diff --git a/www/app/(app)/transcripts/[transcriptId]/record/page.tsx b/www/app/(app)/transcripts/[transcriptId]/record/page.tsx index 8f46f76c..009fc519 100644 --- a/www/app/(app)/transcripts/[transcriptId]/record/page.tsx +++ b/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 = { diff --git a/www/app/(app)/transcripts/[transcriptId]/shareModal.tsx b/www/app/(app)/transcripts/[transcriptId]/shareModal.tsx index 2e8e5ece..88851690 100644 --- a/www/app/(app)/transcripts/[transcriptId]/shareModal.tsx +++ b/www/app/(app)/transcripts/[transcriptId]/shareModal.tsx @@ -133,6 +133,8 @@ const ShareModal = (props: ShareModalProps) => { setStream(val.toString()); }} placeholder="Pick a stream" + onBlur={() => {}} + onFocus={() => {}} /> @@ -145,6 +147,8 @@ const ShareModal = (props: ShareModalProps) => { value={topic} onChange={(val) => setTopic(val.toString())} placeholder="Pick a topic" + onBlur={() => {}} + onFocus={() => {}} /> )} diff --git a/www/app/(app)/transcripts/new/page.tsx b/www/app/(app)/transcripts/new/page.tsx index acc98c6c..6a325f4a 100644 --- a/www/app/(app)/transcripts/new/page.tsx +++ b/www/app/(app)/transcripts/new/page.tsx @@ -177,6 +177,8 @@ const TranscriptCreate = () => { value={targetLanguage} onChange={onLanguageChange} placeholder="Choose your language" + onBlur={() => {}} + onFocus={() => {}} /> {isClient && !loading ? ( diff --git a/www/app/[roomName]/page.tsx b/www/app/[roomName]/page.tsx index a2e28ff5..48c2711d 100644 --- a/www/app/[roomName]/page.tsx +++ b/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(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" }} /> )} - {}} // No-op: ESC should not close without consent - onConsent={handleConsent} - /> + {meetingId && consentState.ready && !hasConsent(meetingId) && !consentLoading && ( + {}} // No-op: ESC should not close without consent + onConsent={b => handleConsent(meetingId, b)} + /> + )} ); } diff --git a/www/app/layout.tsx b/www/app/layout.tsx index 5afc432c..b7ba328d 100644 --- a/www/app/layout.tsx +++ 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({ - "something went really wrong"

}> - - - {children} - - + + "something went really wrong"

}> + + + {children} + + +