2022-02-04 20:38:40 +00:00
|
|
|
import React, { useEffect, useRef } from "react";
|
2022-01-05 21:09:12 +00:00
|
|
|
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";
|
2022-04-07 21:22:36 +00:00
|
|
|
import { useCallFeed } from "../video-grid/useCallFeed";
|
|
|
|
|
import { useMediaStream } from "../video-grid/useMediaStream";
|
2022-01-06 01:19:03 +00:00
|
|
|
import { getRoomUrl } from "../matrix-utils";
|
2022-01-06 00:55:41 +00:00
|
|
|
import { OverflowMenu } from "./OverflowMenu";
|
2022-01-05 21:09:12 +00:00
|
|
|
import { UserMenuContainer } from "../UserMenuContainer";
|
|
|
|
|
import { Body, Link } from "../typography/Typography";
|
2022-01-21 19:55:10 +00:00
|
|
|
import { Avatar } from "../Avatar";
|
|
|
|
|
import { useProfile } from "../profile/useProfile";
|
2022-01-21 21:21:23 +00:00
|
|
|
import useMeasure from "react-use-measure";
|
|
|
|
|
import { ResizeObserver } from "@juggle/resize-observer";
|
2022-02-04 00:56:13 +00:00
|
|
|
import { useLocationNavigation } from "../useLocationNavigation";
|
2022-02-23 02:32:51 +00:00
|
|
|
import { useMediaHandler } from "../settings/useMediaHandler";
|
2022-01-05 21:09:12 +00:00
|
|
|
|
|
|
|
|
export function LobbyView({
|
|
|
|
|
client,
|
|
|
|
|
roomName,
|
|
|
|
|
state,
|
|
|
|
|
onInitLocalCallFeed,
|
|
|
|
|
onEnter,
|
|
|
|
|
localCallFeed,
|
|
|
|
|
microphoneMuted,
|
|
|
|
|
localVideoMuted,
|
|
|
|
|
toggleLocalVideoMuted,
|
|
|
|
|
toggleMicrophoneMuted,
|
|
|
|
|
setShowInspector,
|
|
|
|
|
showInspector,
|
|
|
|
|
roomId,
|
|
|
|
|
}) {
|
|
|
|
|
const { stream } = useCallFeed(localCallFeed);
|
2022-02-23 02:32:51 +00:00
|
|
|
const { audioOutput } = useMediaHandler();
|
|
|
|
|
const videoRef = useMediaStream(stream, audioOutput, true);
|
2022-01-21 19:55:10 +00:00
|
|
|
const { displayName, avatarUrl } = useProfile(client);
|
2022-01-21 21:21:23 +00:00
|
|
|
const [previewRef, previewBounds] = useMeasure({ polyfill: ResizeObserver });
|
|
|
|
|
const avatarSize = (previewBounds.height - 66) / 2;
|
2022-01-05 21:09:12 +00:00
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
onInitLocalCallFeed();
|
|
|
|
|
}, [onInitLocalCallFeed]);
|
|
|
|
|
|
2022-02-04 00:56:13 +00:00
|
|
|
useLocationNavigation(state === GroupCallState.InitializingLocalCallFeed);
|
|
|
|
|
|
2022-02-04 20:38:40 +00:00
|
|
|
const joinCallButtonRef = useRef();
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (state === GroupCallState.LocalCallFeedInitialized) {
|
|
|
|
|
joinCallButtonRef.current.focus();
|
|
|
|
|
}
|
|
|
|
|
}, [state]);
|
|
|
|
|
|
2022-01-05 21:09:12 +00:00
|
|
|
return (
|
|
|
|
|
<div className={styles.room}>
|
|
|
|
|
<Header>
|
|
|
|
|
<LeftNav>
|
|
|
|
|
<RoomHeaderInfo roomName={roomName} />
|
|
|
|
|
</LeftNav>
|
|
|
|
|
<RightNav>
|
|
|
|
|
<UserMenuContainer />
|
|
|
|
|
</RightNav>
|
|
|
|
|
</Header>
|
|
|
|
|
<div className={styles.joinRoom}>
|
|
|
|
|
<div className={styles.joinRoomContent}>
|
2022-01-21 21:21:23 +00:00
|
|
|
<div className={styles.preview} ref={previewRef}>
|
2022-01-05 21:09:12 +00:00
|
|
|
<video ref={videoRef} muted playsInline disablePictureInPicture />
|
|
|
|
|
{state === GroupCallState.LocalCallFeedUninitialized && (
|
|
|
|
|
<Body fontWeight="semiBold" className={styles.webcamPermissions}>
|
|
|
|
|
Webcam/microphone permissions needed to join the call.
|
|
|
|
|
</Body>
|
|
|
|
|
)}
|
|
|
|
|
{state === GroupCallState.InitializingLocalCallFeed && (
|
|
|
|
|
<Body fontWeight="semiBold" className={styles.webcamPermissions}>
|
|
|
|
|
Accept webcam/microphone permissions to join the call.
|
|
|
|
|
</Body>
|
|
|
|
|
)}
|
|
|
|
|
{state === GroupCallState.LocalCallFeedInitialized && (
|
|
|
|
|
<>
|
2022-01-21 19:55:10 +00:00
|
|
|
{localVideoMuted && (
|
|
|
|
|
<div className={styles.avatarContainer}>
|
|
|
|
|
<Avatar
|
|
|
|
|
style={{
|
|
|
|
|
width: avatarSize,
|
|
|
|
|
height: avatarSize,
|
|
|
|
|
borderRadius: avatarSize,
|
|
|
|
|
fontSize: Math.round(avatarSize / 2),
|
|
|
|
|
}}
|
2022-02-19 00:02:27 +00:00
|
|
|
src={avatarUrl}
|
2022-01-21 19:55:10 +00:00
|
|
|
fallback={displayName.slice(0, 1).toUpperCase()}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
2022-01-05 21:09:12 +00:00
|
|
|
<div className={styles.previewButtons}>
|
|
|
|
|
<MicButton
|
|
|
|
|
muted={microphoneMuted}
|
|
|
|
|
onPress={toggleMicrophoneMuted}
|
|
|
|
|
/>
|
|
|
|
|
<VideoButton
|
|
|
|
|
muted={localVideoMuted}
|
|
|
|
|
onPress={toggleLocalVideoMuted}
|
|
|
|
|
/>
|
|
|
|
|
<OverflowMenu
|
|
|
|
|
roomId={roomId}
|
|
|
|
|
setShowInspector={setShowInspector}
|
|
|
|
|
showInspector={showInspector}
|
|
|
|
|
client={client}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
2022-02-04 20:31:59 +00:00
|
|
|
<Button
|
2022-02-04 20:38:40 +00:00
|
|
|
ref={joinCallButtonRef}
|
2022-02-04 20:31:59 +00:00
|
|
|
className={styles.copyButton}
|
|
|
|
|
size="lg"
|
|
|
|
|
disabled={state !== GroupCallState.LocalCallFeedInitialized}
|
|
|
|
|
onPress={onEnter}
|
|
|
|
|
>
|
|
|
|
|
Join call now
|
|
|
|
|
</Button>
|
2022-01-05 21:09:12 +00:00
|
|
|
<Body>Or</Body>
|
|
|
|
|
<CopyButton
|
2022-02-04 20:31:59 +00:00
|
|
|
variant="secondaryCopy"
|
2022-01-05 21:09:12 +00:00
|
|
|
value={getRoomUrl(roomId)}
|
|
|
|
|
className={styles.copyButton}
|
|
|
|
|
copiedMessage="Call link copied"
|
|
|
|
|
>
|
|
|
|
|
Copy call link and join later
|
|
|
|
|
</CopyButton>
|
|
|
|
|
</div>
|
|
|
|
|
<Body className={styles.joinRoomFooter}>
|
|
|
|
|
<Link color="primary" to="/">
|
|
|
|
|
Take me Home
|
|
|
|
|
</Link>
|
|
|
|
|
</Body>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
