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

consent dialog api cleanup

Browse Source
This commit is contained in:
Igor Loskutov
2025-06-18 15:55:16 -04:00
parent c23e0e07ef
commit 58f51697b0
2 changed files with 59 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
www/app/(app)/rooms/audioConsentDialog.tsx
View File

@@ -1,48 +0,0 @@
import React from "react";
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalBody,
Button,
Text,
HStack,
} from "@chakra-ui/react";
interface AudioConsentDialogProps {
isOpen: boolean;
onClose: () => void;
onConsent: (given: boolean) => void;
}
const AudioConsentDialog = ({ isOpen, onClose, onConsent }: AudioConsentDialogProps) => {
const handleConsent = (given: boolean) => {
onConsent(given);
onClose();
};
return (
<Modal isOpen={isOpen} onClose={onClose} closeOnOverlayClick={false} closeOnEsc={false}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Audio Storage Consent</ModalHeader>
<ModalBody pb={6}>
<Text mb={4}>
Can we have your permission to store this meeting's audio recording on our servers?
</Text>
<HStack spacing={4}>
<Button colorScheme="green" onClick={() => handleConsent(true)}>
Yes, store the audio
</Button>
<Button colorScheme="red" onClick={() => handleConsent(false)}>
No, delete after transcription
</Button>
</HStack>
</ModalBody>
</ModalContent>
</Modal>
);
};
export default AudioConsentDialog;

111
www/app/[roomName]/page.tsx
View File

@@ -7,10 +7,7 @@ import useRoomMeeting from "./useRoomMeeting";
import { useRouter } from "next/navigation";
import { notFound } from "next/navigation";
import useSessionStatus from "../lib/useSessionStatus";
import { DomainContext } from "../domainContext";
import { useRecordingConsent } from "../recordingConsentContext";
import useSessionAccessToken from "../lib/useSessionAccessToken";
import useSessionUser from "../lib/useSessionUser";
import useApi from "../lib/useApi";
export type RoomDetails = {
@@ -19,35 +16,14 @@ export type RoomDetails = {
};
};
export default function Room(details: RoomDetails) {
const wherebyRef = useRef<HTMLElement>(null);
const roomName = details.params.roomName;
const meeting = useRoomMeeting(roomName);
const router = useRouter();
const { isLoading, isAuthenticated } = useSessionStatus();
const [consentLoading, setConsentLoading] = useState(false);
const useConsentDialog = (meetingId: string) => {
const { state: consentState, touch, hasConsent } = useRecordingConsent();
const { api_url } = useContext(DomainContext);
const { accessToken } = useSessionAccessToken();
const { id: userId } = useSessionUser();
const [consentLoading, setConsentLoading] = useState(false);
const api = useApi();
const toast = useToast();
const roomUrl = meeting?.response?.host_room_url
? meeting?.response?.host_room_url
: meeting?.response?.room_url;
const meetingId = meeting?.response?.id;
const handleLeave = useCallback(() => {
router.push("/browse");
}, [router]);
const handleConsent = useCallback(async (meetingId: string, given: boolean, onClose?: () => void) => {
const handleConsent = useCallback(async (meetingId: string, given: boolean) => {
if (!api) return;
if (onClose) onClose();
setConsentLoading(true);
try {
@@ -55,7 +31,7 @@ export default function Room(details: RoomDetails) {
meetingId,
requestBody: { consent_given: given }
});
touch(meetingId);
} catch (error) {
console.error('Error submitting consent:', error);
@@ -64,18 +40,6 @@ export default function Room(details: RoomDetails) {
}
}, [api, touch]);
useEffect(() => {
if (
!isLoading &&
meeting?.error &&
"status" in meeting.error &&
meeting.error.status === 404
) {
notFound();
}
}, [isLoading, meeting?.error]);
// Show consent toast when meeting is loaded and consent hasn't been answered yet
useEffect(() => {
if (
@@ -94,17 +58,23 @@ export default function Room(details: RoomDetails) {
Can we have your permission to store this meeting's audio recording on our servers?
</Text>
<HStack spacing={4} justify="center">
<Button
colorScheme="green"
<Button
colorScheme="green"
size="sm"
onClick={() => handleConsent(meetingId, true, onClose)}
onClick={() => {
handleConsent(meetingId, true).then(() => {/*signifies it's ok to now wait here.*/})
onClose()
}}
>
Yes, store the audio
</Button>
<Button
colorScheme="red"
<Button
colorScheme="red"
size="sm"
onClick={() => handleConsent(meetingId, false, onClose)}
onClick={() => {
handleConsent(meetingId, false).then(() => {/*signifies it's ok to now wait here.*/})
onClose()
}}
>
No, delete after transcription
</Button>
@@ -119,6 +89,40 @@ export default function Room(details: RoomDetails) {
};
}
}, [consentState.ready, meetingId, hasConsent, consentLoading, toast, handleConsent]);
}
function ConsentDialog({ meetingId }: { meetingId: string }) {
useConsentDialog(meetingId);
return <></>
}
export default function Room(details: RoomDetails) {
const wherebyRef = useRef<HTMLElement>(null);
const roomName = details.params.roomName;
const meeting = useRoomMeeting(roomName);
const router = useRouter();
const { isLoading, isAuthenticated } = useSessionStatus();
const roomUrl = meeting?.response?.host_room_url
? meeting?.response?.host_room_url
: meeting?.response?.room_url;
const meetingId = meeting?.response?.id;
const handleLeave = useCallback(() => {
router.push("/browse");
}, [router]);
useEffect(() => {
if (
!isLoading &&
meeting?.error &&
"status" in meeting.error &&
meeting.error.status === 404
) {
notFound();
}
}, [isLoading, meeting?.error]);
useEffect(() => {
if (isLoading || !isAuthenticated || !roomUrl) return;
@@ -154,12 +158,15 @@ export default function Room(details: RoomDetails) {
return (
<>
{roomUrl && (
<whereby-embed
ref={wherebyRef}
room={roomUrl}
style={{ width: "100vw", height: "100vh" }}
/>
{roomUrl && meetingId && (
<>
<whereby-embed
ref={wherebyRef}
room={roomUrl}
style={{ width: "100vw", height: "100vh" }}
/>
<ConsentDialog meetingId={meetingId} />
</>
)}
</>
);