feat: implement frontend video platform configuration and abstraction

- Add NEXT_PUBLIC_VIDEO_PLATFORM environment variable support - Create video platform abstraction layer with factory pattern - Implement Whereby and Jitsi platform providers - Update room meeting page to use platform-agnostic component - Add platform display in room management (cards and table views) - Support single platform per deployment configuration - Maintain backward compatibility with existing Whereby integration 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-22 13:19:05 +00:00 · 2025-09-04 12:21:51 -06:00
parent 41224a424c
commit 293f7d4f1f
20 changed files with 1254 additions and 293 deletions
--- a/www/app/lib/videoPlatforms/VideoPlatformEmbed.tsx
+++ b/www/app/lib/videoPlatforms/VideoPlatformEmbed.tsx
@@ -0,0 +1,302 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState, RefObject } from "react";
+import {
+  Box,
+  Button,
+  Text,
+  VStack,
+  HStack,
+  Spinner,
+  Icon,
+} from "@chakra-ui/react";
+import { FaBars } from "react-icons/fa6";
+import { Meeting, VideoPlatform } from "../../api";
+import { getVideoPlatformAdapter, getCurrentVideoPlatform } from "./factory";
+import { useRecordingConsent } from "../../recordingConsentContext";
+import { toaster } from "../../components/ui/toaster";
+import useApi from "../useApi";
+
+interface VideoPlatformEmbedProps {
+  meeting: Meeting;
+  platform?: VideoPlatform;
+  onLeave?: () => void;
+  onReady?: () => void;
+}
+
+// Focus management hook for platforms that support it
+const usePlatformFocusManagement = (
+  acceptButtonRef: RefObject<HTMLButtonElement>,
+  platformRef: RefObject<HTMLElement>,
+  supportsFocusManagement: boolean,
+) => {
+  const currentFocusRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!supportsFocusManagement) return;
+
+    if (acceptButtonRef.current) {
+      acceptButtonRef.current.focus();
+    } else {
+      console.error(
+        "accept button ref not available yet for focus management - seems to be illegal state",
+      );
+    }
+
+    const handlePlatformReady = () => {
+      console.log("platform ready - refocusing consent button");
+      currentFocusRef.current = document.activeElement as HTMLElement;
+      if (acceptButtonRef.current) {
+        acceptButtonRef.current.focus();
+      }
+    };
+
+    if (platformRef.current) {
+      platformRef.current.addEventListener("ready", handlePlatformReady);
+    } else {
+      console.warn(
+        "platform ref not available yet for focus management - seems to be illegal state. not waiting, focus management off.",
+      );
+    }
+
+    return () => {
+      platformRef.current?.removeEventListener("ready", handlePlatformReady);
+      currentFocusRef.current?.focus();
+    };
+  }, [acceptButtonRef, platformRef, supportsFocusManagement]);
+};
+
+const useConsentDialog = (
+  meetingId: string,
+  platformRef: RefObject<HTMLElement>,
+  supportsFocusManagement: boolean,
+) => {
+  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 }) => {
+        const AcceptButton = () => {
+          const buttonRef = useRef<HTMLButtonElement>(null);
+          usePlatformFocusManagement(
+            buttonRef,
+            platformRef,
+            supportsFocusManagement,
+          );
+          return (
+            <Button
+              ref={buttonRef}
+              colorPalette="primary"
+              size="sm"
+              onClick={() => {
+                handleConsent(meetingId, true).then(() => {
+                  /*signifies it's ok to now wait here.*/
+                });
+                dismiss();
+              }}
+            >
+              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 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>
+                <AcceptButton />
+              </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,
+    platformRef,
+    modalOpen,
+    supportsFocusManagement,
+  ]);
+
+  return { showConsentModal, consentState, hasConsent, consentLoading };
+};
+
+function ConsentDialogButton({
+  meetingId,
+  platformRef,
+  supportsFocusManagement,
+}: {
+  meetingId: string;
+  platformRef: React.RefObject<HTMLElement>;
+  supportsFocusManagement: boolean;
+}) {
+  const { showConsentModal, consentState, hasConsent, consentLoading } =
+    useConsentDialog(meetingId, platformRef, supportsFocusManagement);
+
+  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: NonNullable<Meeting["recording_type"]>,
+) => {
+  return recordingType === "cloud";
+};
+
+export default function VideoPlatformEmbed({
+  meeting,
+  platform,
+  onLeave,
+  onReady,
+}: VideoPlatformEmbedProps) {
+  const platformRef = useRef<HTMLElement>(null);
+  const selectedPlatform = platform || getCurrentVideoPlatform();
+  const adapter = getVideoPlatformAdapter(selectedPlatform);
+  const PlatformComponent = adapter.component;
+
+  const meetingId = meeting.id;
+  const recordingType = meeting.recording_type;
+
+  // Handle leave event
+  const handleLeave = useCallback(() => {
+    if (onLeave) {
+      onLeave();
+    }
+  }, [onLeave]);
+
+  // Handle ready event
+  const handleReady = useCallback(() => {
+    if (onReady) {
+      onReady();
+    }
+  }, [onReady]);
+
+  // Set up leave event listener for platforms that support it
+  useEffect(() => {
+    if (!platformRef.current) return;
+
+    const element = platformRef.current;
+    element.addEventListener("leave", handleLeave);
+
+    return () => {
+      element.removeEventListener("leave", handleLeave);
+    };
+  }, [handleLeave]);
+
+  return (
+    <>
+      <PlatformComponent
+        ref={platformRef}
+        meeting={meeting}
+        roomRef={platformRef}
+        onReady={handleReady}
+      />
+      {recordingType &&
+        recordingTypeRequiresConsent(recordingType) &&
+        adapter.requiresConsent && (
+          <ConsentDialogButton
+            meetingId={meetingId}
+            platformRef={platformRef}
+            supportsFocusManagement={adapter.supportsFocusManagement}
+          />
+        )}
+    </>
+  );
+}
--- a/www/app/lib/videoPlatforms/factory.ts
+++ b/www/app/lib/videoPlatforms/factory.ts
@@ -0,0 +1,29 @@
+import { VideoPlatform } from "../../api";
+import { VideoPlatformAdapter } from "./types";
+import { localConfig } from "../../../config-template";
+
+// Platform implementations
+import { WherebyAdapter } from "./whereby/WherebyAdapter";
+import { JitsiAdapter } from "./jitsi/JitsiAdapter";
+
+const platformAdapters: Record<VideoPlatform, VideoPlatformAdapter> = {
+  whereby: WherebyAdapter,
+  jitsi: JitsiAdapter,
+};
+
+export function getVideoPlatformAdapter(
+  platform?: VideoPlatform,
+): VideoPlatformAdapter {
+  const selectedPlatform = platform || localConfig.video_platform;
+
+  const adapter = platformAdapters[selectedPlatform];
+  if (!adapter) {
+    throw new Error(`Unsupported video platform: ${selectedPlatform}`);
+  }
+
+  return adapter;
+}
+
+export function getCurrentVideoPlatform(): VideoPlatform {
+  return localConfig.video_platform;
+}
--- a/www/app/lib/videoPlatforms/index.ts
+++ b/www/app/lib/videoPlatforms/index.ts
@@ -0,0 +1,5 @@
+export * from "./types";
+export * from "./factory";
+export * from "./whereby";
+export * from "./jitsi";
+export * from "./utils";
--- a/www/app/lib/videoPlatforms/jitsi/JitsiAdapter.tsx
+++ b/www/app/lib/videoPlatforms/jitsi/JitsiAdapter.tsx
@@ -0,0 +1,8 @@
+import { VideoPlatformAdapter } from "../types";
+import JitsiProvider from "./JitsiProvider";
+
+export const JitsiAdapter: VideoPlatformAdapter = {
+  component: JitsiProvider,
+  requiresConsent: true,
+  supportsFocusManagement: false, // Jitsi iframe doesn't support the same focus management as Whereby
+};
--- a/www/app/lib/videoPlatforms/jitsi/JitsiProvider.tsx
+++ b/www/app/lib/videoPlatforms/jitsi/JitsiProvider.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  forwardRef,
+  useImperativeHandle,
+} from "react";
+import { VideoPlatformComponentProps } from "../types";
+
+const JitsiProvider = forwardRef<HTMLElement, VideoPlatformComponentProps>(
+  ({ meeting, roomRef, onReady, onConsentGiven, onConsentDeclined }, ref) => {
+    const [jitsiReady, setJitsiReady] = useState(false);
+    const internalRef = useRef<HTMLIFrameElement>(null);
+    const iframeRef =
+      (roomRef as React.RefObject<HTMLIFrameElement>) || internalRef;
+
+    // Expose the element ref through the forwarded ref
+    useImperativeHandle(ref, () => iframeRef.current!, [iframeRef]);
+
+    // Handle iframe load
+    const handleLoad = useCallback(() => {
+      setJitsiReady(true);
+      if (onReady) {
+        onReady();
+      }
+    }, [onReady]);
+
+    // Set up event listeners
+    useEffect(() => {
+      if (!iframeRef.current) return;
+
+      const iframe = iframeRef.current;
+      iframe.addEventListener("load", handleLoad);
+
+      return () => {
+        iframe.removeEventListener("load", handleLoad);
+      };
+    }, [handleLoad]);
+
+    if (!meeting) {
+      return null;
+    }
+
+    // For Jitsi, we use the room_url (user JWT) or host_room_url (moderator JWT)
+    const roomUrl = meeting.host_room_url || meeting.room_url;
+
+    return (
+      <iframe
+        ref={iframeRef}
+        src={roomUrl}
+        style={{
+          width: "100vw",
+          height: "100vh",
+          border: "none",
+        }}
+        allow="camera; microphone; fullscreen; display-capture; autoplay"
+        title="Jitsi Meet"
+      />
+    );
+  },
+);
+
+JitsiProvider.displayName = "JitsiProvider";
+
+export default JitsiProvider;
--- a/www/app/lib/videoPlatforms/jitsi/index.ts
+++ b/www/app/lib/videoPlatforms/jitsi/index.ts
@@ -0,0 +1,2 @@
+export { default as JitsiProvider } from "./JitsiProvider";
+export { JitsiAdapter } from "./JitsiAdapter";
--- a/www/app/lib/videoPlatforms/types.ts
+++ b/www/app/lib/videoPlatforms/types.ts
@@ -0,0 +1,32 @@
+import { RefObject, ReactNode } from "react";
+import { VideoPlatform, Meeting } from "../../api";
+
+export interface VideoPlatformProviderProps {
+  meeting: Meeting;
+  onConsentGiven?: () => void;
+  onConsentDeclined?: () => void;
+  children?: ReactNode;
+}
+
+export interface VideoPlatformContextValue {
+  platform: VideoPlatform;
+  meeting: Meeting | null;
+  isReady: boolean;
+  hasConsent: boolean;
+  giveConsent: () => void;
+  declineConsent: () => void;
+}
+
+export interface VideoPlatformComponentProps {
+  meeting: Meeting;
+  roomRef?: RefObject<HTMLElement>;
+  onReady?: () => void;
+  onConsentGiven?: () => void;
+  onConsentDeclined?: () => void;
+}
+
+export interface VideoPlatformAdapter {
+  component: React.ComponentType<VideoPlatformComponentProps>;
+  requiresConsent: boolean;
+  supportsFocusManagement: boolean;
+}
--- a/www/app/lib/videoPlatforms/utils.ts
+++ b/www/app/lib/videoPlatforms/utils.ts
@@ -0,0 +1,23 @@
+import { VideoPlatform } from "../../api";
+
+export const getPlatformDisplayName = (platform?: VideoPlatform): string => {
+  switch (platform) {
+    case "whereby":
+      return "Whereby";
+    case "jitsi":
+      return "Jitsi Meet";
+    default:
+      return "Whereby"; // Default fallback
+  }
+};
+
+export const getPlatformColor = (platform?: VideoPlatform): string => {
+  switch (platform) {
+    case "whereby":
+      return "blue";
+    case "jitsi":
+      return "green";
+    default:
+      return "blue"; // Default fallback
+  }
+};
--- a/www/app/lib/videoPlatforms/whereby/WherebyAdapter.tsx
+++ b/www/app/lib/videoPlatforms/whereby/WherebyAdapter.tsx
@@ -0,0 +1,8 @@
+import { VideoPlatformAdapter } from "../types";
+import WherebyProvider from "./WherebyProvider";
+
+export const WherebyAdapter: VideoPlatformAdapter = {
+  component: WherebyProvider,
+  requiresConsent: true,
+  supportsFocusManagement: true,
+};
--- a/www/app/lib/videoPlatforms/whereby/WherebyProvider.tsx
+++ b/www/app/lib/videoPlatforms/whereby/WherebyProvider.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  forwardRef,
+  useImperativeHandle,
+} from "react";
+import { VideoPlatformComponentProps } from "../types";
+
+// Whereby embed element type declaration
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "whereby-embed": React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement> & {
+          room?: string;
+          style?: React.CSSProperties;
+        },
+        HTMLElement
+      >;
+    }
+  }
+}
+
+const WherebyProvider = forwardRef<HTMLElement, VideoPlatformComponentProps>(
+  ({ meeting, roomRef, onReady, onConsentGiven, onConsentDeclined }, ref) => {
+    const [wherebyLoaded, setWherebyLoaded] = useState(false);
+    const internalRef = useRef<HTMLElement>(null);
+    const elementRef = roomRef || internalRef;
+
+    // Expose the element ref through the forwarded ref
+    useImperativeHandle(ref, () => elementRef.current!, [elementRef]);
+
+    // Load Whereby SDK
+    useEffect(() => {
+      if (typeof window !== "undefined") {
+        import("@whereby.com/browser-sdk/embed")
+          .then(() => {
+            setWherebyLoaded(true);
+          })
+          .catch(console.error);
+      }
+    }, []);
+
+    // Handle leave event
+    const handleLeave = useCallback(() => {
+      // This will be handled by the parent component
+      // through router navigation or other means
+    }, []);
+
+    // Handle ready event
+    const handleReady = useCallback(() => {
+      if (onReady) {
+        onReady();
+      }
+    }, [onReady]);
+
+    // Set up event listeners
+    useEffect(() => {
+      if (!wherebyLoaded || !elementRef.current) return;
+
+      const element = elementRef.current;
+
+      element.addEventListener("leave", handleLeave);
+      element.addEventListener("ready", handleReady);
+
+      return () => {
+        element.removeEventListener("leave", handleLeave);
+        element.removeEventListener("ready", handleReady);
+      };
+    }, [wherebyLoaded, handleLeave, handleReady, elementRef]);
+
+    if (!wherebyLoaded || !meeting) {
+      return null;
+    }
+
+    const roomUrl = meeting.host_room_url || meeting.room_url;
+
+    return (
+      <whereby-embed
+        ref={elementRef}
+        room={roomUrl}
+        style={{ width: "100vw", height: "100vh" }}
+      />
+    );
+  },
+);
+
+WherebyProvider.displayName = "WherebyProvider";
+
+export default WherebyProvider;
--- a/www/app/lib/videoPlatforms/whereby/index.ts
+++ b/www/app/lib/videoPlatforms/whereby/index.ts
@@ -0,0 +1,2 @@
+export { default as WherebyProvider } from "./WherebyProvider";
+export { WherebyAdapter } from "./WherebyAdapter";