jitsi-roomsv2/frontend/src/components/jitsi/JitsiEntrypoint.tsx

import { JitsiMeeting } from "@jitsi/react-sdk";
import { JITSI_DOMAIN } from "../../background/constants";
import { UserInfo } from "./types";
import curry from "just-curry-it";
import {
    ConferenceData,
    videoConferenceJoinedListener,
} from "../../background/jitsi/eventListeners";

interface Props {
    roomName: string;
    userInfo: UserInfo;
    setConferenceData: (newData: ConferenceData) => void;
}

function JitsiEntrypoint({ roomName, userInfo, setConferenceData }: Props) {
    return (
        <JitsiMeeting
            domain={JITSI_DOMAIN}
            roomName={roomName}
            configOverwrite={{
                startWithAudioMuted: true,
                disableModeratorIndicator: true,
                startScreenSharing: true,
                enableEmailInStats: false,
                prejoinConfig: { enabled: false },
            }}
            interfaceConfigOverwrite={{}}
            userInfo={userInfo}
            onApiReady={(externalApi) => {
                // here you can attach custom event listeners to the Jitsi Meet External API
                // you can also store it locally to execute commands

                externalApi.addEventListener(
                    "videoConferenceJoined",
                    curry(videoConferenceJoinedListener)(setConferenceData)
                );
            }}
            getIFrameRef={(iframeRef) => {
                iframeRef.style.height = "100%";
                iframeRef.style.width = "100%";
            }}
        />
    );
}

export default JitsiEntrypoint;