import React, { useEffect, useRef } from "react"; import styles from "./LobbyView.module.css"; import { Button, CopyButton } from "../button"; import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header"; import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall"; import { useCallFeed } from "../video-grid/useCallFeed"; import { getRoomUrl } from "../matrix-utils"; import { UserMenuContainer } from "../UserMenuContainer"; import { Body, Link } from "../typography/Typography"; import { useLocationNavigation } from "../useLocationNavigation"; import { useMediaHandler } from "../settings/useMediaHandler"; import { VideoPreview } from "./VideoPreview"; import { AudioPreview } from "./AudioPreview"; export function LobbyView({ client, groupCall, roomName, state, onInitLocalCallFeed, onEnter, localCallFeed, microphoneMuted, localVideoMuted, toggleLocalVideoMuted, toggleMicrophoneMuted, setShowInspector, showInspector, roomId, }) { const { stream } = useCallFeed(localCallFeed); const { audioInput, audioInputs, setAudioInput, audioOutput, audioOutputs, setAudioOutput, } = useMediaHandler(); useEffect(() => { onInitLocalCallFeed(); }, [onInitLocalCallFeed]); useLocationNavigation(state === GroupCallState.InitializingLocalCallFeed); const joinCallButtonRef = useRef(); useEffect(() => { if (state === GroupCallState.LocalCallFeedInitialized) { joinCallButtonRef.current.focus(); } }, [state]); return (