import React, { useState, useRef } from 'react'; import { JitsiMeeting } from '@jitsi/react-sdk'; import { v4 as uuidv4 } from 'uuid'; const DOMAIN = 'meet.jit.si'; const MeetingLauncher = () => { const [meetingActive, setMeetingActive] = useState(false); const [roomId, setRoomId] = useState(''); const [showMeeting, setShowMeeting] = useState(false); const meetingContainerRef = useRef(null); const handleLaunch = () => { const newRoomId = uuidv4(); setRoomId(newRoomId); setMeetingActive(true); setShowMeeting(true); }; const handleJoin = () => { setShowMeeting(true); }; const handleMeetingEnd = () => { setShowMeeting(false); setMeetingActive(false); setRoomId(''); }; // Fullscreen styles for the meeting container const meetingStyles = { position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh', zIndex: 9999, background: '#000' }; return (

{!showMeeting && ( )} {showMeeting && roomId && (

{ if (node) { node.style.height = '100vh'; node.style.width = '100vw'; } }} onApiReady={externalApi => { externalApi.addEventListener('readyToClose', handleMeetingEnd); }} userInfo={{ displayName: 'Guest' }} />

)}

); }; export default MeetingLauncher; import React from 'react'; import MeetingLauncher from './components/MeetingLauncher'; function App() { return (

); } export default App; import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); { "name": "jitsi-meeting-launcher", "version": "1.0.0", "private": true, "dependencies": { "@jitsi/react-sdk": "^2.0.0", "react": "^18.0.0", "react-dom": "^18.0.0", "uuid": "^9.0.0" } }