reflector/www/app/[roomName]/page.tsx

"use client";

import "@whereby.com/browser-sdk/embed";
import { useCallback, useEffect, useRef, useState, useContext, RefObject } from "react";
import { Box, Button, Text, VStack, HStack, Spinner, useToast } from "@chakra-ui/react";
import useRoomMeeting from "./useRoomMeeting";
import { useRouter } from "next/navigation";
import { notFound } from "next/navigation";
import useSessionStatus from "../lib/useSessionStatus";
import { useRecordingConsent } from "../recordingConsentContext";
import useApi from "../lib/useApi";
import { Meeting } from '../api';

export type RoomDetails = {
  params: {
    roomName: string;
  };
};

// stages: we focus on the consent, then whereby steals focus, then we focus on the consent again, then return focus to whoever stole it initially
const useConsentWherebyFocusManagement = (acceptButtonRef: RefObject<HTMLButtonElement>, wherebyRef: RefObject<HTMLElement>) => {
  const currentFocusRef = useRef<HTMLElement | null>(null);
  useEffect(() => {
    if (acceptButtonRef.current) {
      acceptButtonRef.current.focus();
    } else {
      console.error("accept button ref not available yet for focus management - seems to be illegal state");
    }

    const handleWherebyReady = () => {
      console.log("whereby ready - refocusing consent button");
      currentFocusRef.current = document.activeElement as HTMLElement;
      if (acceptButtonRef.current) {
        acceptButtonRef.current.focus();
      }
    };

    if (wherebyRef.current) {
      wherebyRef.current.addEventListener("ready", handleWherebyReady);
    } else {
      console.warn("whereby ref not available yet for focus management - seems to be illegal state. not waiting, focus management off.");
    }

    return () => {
      wherebyRef.current?.removeEventListener("ready", handleWherebyReady);
      currentFocusRef.current?.focus();
    };
  }, []);
}

const useConsentDialog = (meetingId: string, wherebyRef: RefObject<HTMLElement>/*accessibility*/) => {
  const { state: consentState, touch, hasConsent } = useRecordingConsent();
  const [consentLoading, setConsentLoading] = useState(false);
  const api = useApi();
  const toast = useToast();
  const handleConsent = useCallback(async (meetingId: string, given: boolean) => {
    if (!api) return;

    setConsentLoading(true);

    try {
      await api.v1MeetingAudioConsent({
        meetingId,
        requestBody: { consent_given: given }
      });

      touch(meetingId);
    } catch (error) {
      console.error('Error submitting consent:', error);
    } finally {
      setConsentLoading(false);
    }
  }, [api, touch]);

  useEffect(() => {
    if (
      consentState.ready &&
      meetingId &&
      !hasConsent(meetingId) &&
      !consentLoading
    ) {

      const toastId = toast({
        position: "top",
        duration: null,
        render: ({ onClose }) => {
          const AcceptButton = () => {
            const buttonRef = useRef<HTMLButtonElement>(null);
            useConsentWherebyFocusManagement(buttonRef, wherebyRef);
            return (
              <Button
                ref={buttonRef}
                colorScheme="blue"
                size="sm"
                onClick={() => {
                  handleConsent(meetingId, true).then(() => {/*signifies it's ok to now wait here.*/})
                  onClose()
                }}
              >
                Yes, store the audio
              </Button>
            );
          };

          return (
            <Box p={6} bg="rgba(255, 255, 255, 0.7)" borderRadius="lg" boxShadow="lg" maxW="md" mx="auto">
              <VStack spacing={4} align="center">
                <Text fontSize="md" textAlign="center" fontWeight="medium">
                  Can we have your permission to store this meeting's audio recording on our servers?
                </Text>
                <HStack spacing={4} justify="center">
                  <AcceptButton />
                  <Button
                    colorScheme="gray"
                    size="sm"
                    onClick={() => {
                      handleConsent(meetingId, false).then(() => {/*signifies it's ok to now wait here.*/})
                      onClose()
                    }}
                  >
                    No, delete after transcription
                  </Button>
                </HStack>
              </VStack>
            </Box>
          );
        },
      });

      // Handle escape key to close the toast
      const handleKeyDown = (event: KeyboardEvent) => {
        if (event.key === 'Escape') {
          toast.close(toastId);
        }
      };

      document.addEventListener('keydown', handleKeyDown);

      return () => {
        toast.close(toastId);
        document.removeEventListener('keydown', handleKeyDown);
      };
    }
  }, [consentState.ready, meetingId, hasConsent, consentLoading, toast, handleConsent]);
}

function ConsentDialog({ meetingId, wherebyRef }: { meetingId: string; wherebyRef: React.RefObject<HTMLElement> }) {
  useConsentDialog(meetingId, wherebyRef);
  return <></>
}

const recordingTypeRequiresConsent = (recordingType: NonNullable<Meeting['recording_type']>) => {
  return recordingType === 'cloud';
}

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 recordingType = meeting?.response?.recording_type;

  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;

    // accessibility: whereby grabs focus after its interface is loaded => we lose "esc" and keyboard control over the consent popup
    const handleReady = (event: any) => {
      console.log("whereby-embed ready event:", event);
    };

    wherebyRef.current?.addEventListener("leave", handleLeave);
    wherebyRef.current?.addEventListener("ready", handleReady);

    return () => {
      wherebyRef.current?.removeEventListener("leave", handleLeave);
      wherebyRef.current?.removeEventListener("ready", handleReady);
    };
  }, [handleLeave, roomUrl, isLoading, isAuthenticated]);

  if (isLoading) {
    return (
      <Box
        display="flex"
        justifyContent="center"
        alignItems="center"
        height="100vh"
        bg="gray.50"
        p={4}
      >
        <Spinner
          thickness="4px"
          speed="0.65s"
          emptyColor="gray.200"
          color="blue.500"
          size="xl"
        />
      </Box>
    );
  }


  return (
    <>
      {roomUrl && meetingId && (
        <>
          <whereby-embed
            ref={wherebyRef}
            room={roomUrl}
            style={{ width: "100vw", height: "100vh" }}
          />
          {recordingType && recordingTypeRequiresConsent(recordingType) && <ConsentDialog meetingId={meetingId} wherebyRef={wherebyRef} />}
        </>
      )}
    </>
  );
}