import React from "react"; import { MicButton, VideoButton } from "../button"; import { useMediaStream } from "../video-grid/useMediaStream"; import { OverflowMenu } from "./OverflowMenu"; import { Avatar } from "../Avatar"; import { useProfile } from "../profile/useProfile"; import useMeasure from "react-use-measure"; import { ResizeObserver } from "@juggle/resize-observer"; import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall"; import styles from "./VideoPreview.module.css"; import { Body } from "../typography/Typography"; export function VideoPreview({ client, state, roomId, microphoneMuted, localVideoMuted, toggleLocalVideoMuted, toggleMicrophoneMuted, setShowInspector, showInspector, audioOutput, stream, }) { const videoRef = useMediaStream(stream, audioOutput, true); const { displayName, avatarUrl } = useProfile(client); const [previewRef, previewBounds] = useMeasure({ polyfill: ResizeObserver }); const avatarSize = (previewBounds.height - 66) / 2; return (

); }