mirror of
https://github.com/Monadical-SAS/reflector.git
synced 2025-12-22 13:19:05 +00:00
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>
This commit is contained in:
68
www/app/lib/videoPlatforms/jitsi/JitsiProvider.tsx
Normal file
68
www/app/lib/videoPlatforms/jitsi/JitsiProvider.tsx
Normal file
@@ -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;
|
||||
Reference in New Issue
Block a user