import React, { useEffect } from "react"; import styles from "./LobbyView.module.css"; import { Button, CopyButton, MicButton, VideoButton } from "../button"; import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header"; import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall"; import { useCallFeed } from "matrix-react-sdk/src/hooks/useCallFeed"; import { useMediaStream } from "matrix-react-sdk/src/hooks/useMediaStream"; import { getRoomUrl } from "../matrix-utils"; import { OverflowMenu } from "./OverflowMenu"; import { UserMenuContainer } from "../UserMenuContainer"; import { Body, Link } from "../typography/Typography"; import { Avatar } from "../Avatar"; import { getAvatarUrl } from "../matrix-utils"; import { useProfile } from "../profile/useProfile"; import useMeasure from "react-use-measure"; import { ResizeObserver } from "@juggle/resize-observer"; export function LobbyView({ client, roomName, state, onInitLocalCallFeed, onEnter, localCallFeed, microphoneMuted, localVideoMuted, toggleLocalVideoMuted, toggleMicrophoneMuted, setShowInspector, showInspector, roomId, }) { const { stream } = useCallFeed(localCallFeed); const videoRef = useMediaStream(stream, true); const { displayName, avatarUrl } = useProfile(client); const [previewRef, previewBounds] = useMeasure({ polyfill: ResizeObserver }); const avatarSize = (previewBounds.height - 66) / 2; useEffect(() => { onInitLocalCallFeed(); }, [onInitLocalCallFeed]); return (
Or Copy call link and join later
Take me Home
); }