consent dialog button

www/app/[roomName]/page.tsx

@@ -50,8 +50,11 @@ const useConsentWherebyFocusManagement = (acceptButtonRef: RefObject<HTMLButtonE
 const useConsentDialog = (meetingId: string, wherebyRef: RefObject<HTMLElement>/*accessibility*/) => {
   const { state: consentState, touch, hasConsent } = useRecordingConsent();
   const [consentLoading, setConsentLoading] = useState(false);
+  // toast would open duplicates, even with using "id=" prop
+  const [modalOpen, setModalOpen] = useState(false);
   const api = useApi();
   const toast = useToast();
+  
   const handleConsent = useCallback(async (meetingId: string, given: boolean) => {
     if (!api) return;
 
@@ -71,17 +74,15 @@ const useConsentDialog = (meetingId: string, wherebyRef: RefObject<HTMLElement>/
     }
   }, [api, touch]);
 
-  useEffect(() => {
-    if (
-      consentState.ready &&
-      meetingId &&
-      !hasConsent(meetingId) &&
-      !consentLoading
-    ) {
+  const showConsentModal = useCallback(() => {
+    if (modalOpen) return;
 
+    setModalOpen(true);
+
+    const TOAST_NEVER_DISMISS_VALUE = null;
     const toastId = toast({
       position: "top",
-        duration: null,
+      duration: TOAST_NEVER_DISMISS_VALUE,
       render: ({ onClose }) => {
         const AcceptButton = () => {
           const buttonRef = useRef<HTMLButtonElement>(null);
@@ -124,6 +125,9 @@ const useConsentDialog = (meetingId: string, wherebyRef: RefObject<HTMLElement>/
           </Box>
         );
       },
+      onCloseComplete: () => {
+        setModalOpen(false);
+      }
     });
 
     // Handle escape key to close the toast
@@ -135,17 +139,37 @@ const useConsentDialog = (meetingId: string, wherebyRef: RefObject<HTMLElement>/
 
     document.addEventListener('keydown', handleKeyDown);
 
-      return () => {
+    const cleanup = () => {
       toast.close(toastId);
       document.removeEventListener('keydown', handleKeyDown);
     };
-    }
-  }, [consentState.ready, meetingId, hasConsent, consentLoading, toast, handleConsent]);
+
+    return cleanup;
+  }, [meetingId, toast, handleConsent, wherebyRef, modalOpen]);
+
+  return { showConsentModal, consentState, hasConsent, consentLoading };
 }
 
-function ConsentDialog({ meetingId, wherebyRef }: { meetingId: string; wherebyRef: React.RefObject<HTMLElement> }) {
-  useConsentDialog(meetingId, wherebyRef);
-  return <></>
+function ConsentDialogButton({ meetingId, wherebyRef }: { meetingId: string; wherebyRef: React.RefObject<HTMLElement> }) {
+  const { showConsentModal, consentState, hasConsent, consentLoading } = useConsentDialog(meetingId, wherebyRef);
+
+  if (!consentState.ready || hasConsent(meetingId) || consentLoading) {
+    return null;
+  }
+
+  return (
+    <Button
+      position="absolute"
+      top="56px"
+      left="8px"
+      zIndex={1000}
+      colorScheme="blue"
+      size="sm"
+      onClick={showConsentModal}
+    >
+      Meeting is recording
+    </Button>
+  );
 }
 
 const recordingTypeRequiresConsent = (recordingType: NonNullable<Meeting['recording_type']>) => {
@@ -237,7 +261,7 @@ export default function Room(details: RoomDetails) {
             room={roomUrl}
             style={{ width: "100vw", height: "100vh" }}
           />
-          {recordingType && recordingTypeRequiresConsent(recordingType) && <ConsentDialog meetingId={meetingId} wherebyRef={wherebyRef} />}
+          {recordingType && recordingTypeRequiresConsent(recordingType) && <ConsentDialogButton meetingId={meetingId} wherebyRef={wherebyRef} />}
         </>
       )}
     </>