chore: remove refactor md (#527)

www/app/[roomName]/components/DailyRoom.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Box, Button, Text, VStack, HStack, Icon } from "@chakra-ui/react";
+import { toaster } from "../../components/ui/toaster";
+import { useRouter } from "next/navigation";
+import useSessionStatus from "../../lib/useSessionStatus";
+import { useRecordingConsent } from "../../recordingConsentContext";
+import useApi from "../../lib/useApi";
+import { FaBars } from "react-icons/fa6";
+import DailyIframe from "@daily-co/daily-js";
+
+interface Meeting {
+  id: string;
+  room_url: string;
+  host_room_url?: string;
+  recording_type: string;
+  platform?: string;
+}
+
+interface DailyRoomProps {
+  meeting: Meeting;
+}
+
+function ConsentDialogButton({ meetingId }: { meetingId: string }) {
+  const { state: consentState, touch, hasConsent } = useRecordingConsent();
+  const [consentLoading, setConsentLoading] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+  const api = useApi();
+
+  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],
+  );
+
+  const showConsentModal = useCallback(() => {
+    if (modalOpen) return;
+
+    setModalOpen(true);
+
+    const toastId = toaster.create({
+      placement: "top",
+      duration: null,
+      render: ({ dismiss }) => (
+        <Box
+          p={6}
+          bg="rgba(255, 255, 255, 0.7)"
+          borderRadius="lg"
+          boxShadow="lg"
+          maxW="md"
+          mx="auto"
+        >
+          <VStack gap={4} alignItems="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 gap={4} justifyContent="center">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  handleConsent(meetingId, false).then(() => {
+                    /*signifies it's ok to now wait here.*/
+                  });
+                  dismiss();
+                }}
+              >
+                No, delete after transcription
+              </Button>
+              <Button
+                colorPalette="primary"
+                size="sm"
+                onClick={() => {
+                  handleConsent(meetingId, true).then(() => {
+                    /*signifies it's ok to now wait here.*/
+                  });
+                  dismiss();
+                }}
+              >
+                Yes, store the audio
+              </Button>
+            </HStack>
+          </VStack>
+        </Box>
+      ),
+    });
+
+    // Set modal state when toast is dismissed
+    toastId.then((id) => {
+      const checkToastStatus = setInterval(() => {
+        if (!toaster.isActive(id)) {
+          setModalOpen(false);
+          clearInterval(checkToastStatus);
+        }
+      }, 100);
+    });
+
+    // Handle escape key to close the toast
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        toastId.then((id) => toaster.dismiss(id));
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+
+    const cleanup = () => {
+      toastId.then((id) => toaster.dismiss(id));
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+
+    return cleanup;
+  }, [meetingId, handleConsent, modalOpen]);
+
+  if (!consentState.ready || hasConsent(meetingId) || consentLoading) {
+    return null;
+  }
+
+  return (
+    <Button
+      position="absolute"
+      top="56px"
+      left="8px"
+      zIndex={1000}
+      colorPalette="blue"
+      size="sm"
+      onClick={showConsentModal}
+    >
+      Meeting is being recorded
+      <Icon as={FaBars} ml={2} />
+    </Button>
+  );
+}
+
+const recordingTypeRequiresConsent = (recordingType: string) => {
+  return recordingType === "cloud";
+};
+
+export default function DailyRoom({ meeting }: DailyRoomProps) {
+  const router = useRouter();
+  const { isLoading, isAuthenticated } = useSessionStatus();
+  const [callFrame, setCallFrame] = useState<DailyIframe | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const roomUrl = meeting?.host_room_url
+    ? meeting?.host_room_url
+    : meeting?.room_url;
+
+  const handleLeave = useCallback(() => {
+    router.push("/browse");
+  }, [router]);
+
+  // Initialize Daily.co call frame
+  useEffect(() => {
+    if (isLoading || !isAuthenticated || !roomUrl) return;
+
+    const frame = DailyIframe.createFrame(containerRef.current!, {
+      iframeStyle: {
+        width: "100vw",
+        height: "100vh",
+        border: "none",
+      },
+      showLeaveButton: true,
+      showFullscreenButton: true,
+    });
+
+    frame.on("left-meeting", handleLeave);
+
+    frame.join({ url: roomUrl });
+
+    setCallFrame(frame);
+
+    return () => {
+      frame.destroy();
+    };
+  }, [roomUrl, isLoading, isAuthenticated, handleLeave]);
+
+  if (!roomUrl) {
+    return null;
+  }
+
+  return (
+    <Box position="relative" width="100vw" height="100vh">
+      <div ref={containerRef} style={{ width: "100%", height: "100%" }} />
+      {recordingTypeRequiresConsent(meeting.recording_type) && (
+        <ConsentDialogButton meetingId={meeting.id} />
+      )}
+    </Box>
+  );
+}