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";
|
2022-04-27 22:18:55 +00:00
|
|
|
import { Button, CopyButton } from "../button";
|
2022-01-05 21:09:12 +00:00
|
|
|
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";
|
2022-01-06 01:19:03 +00:00
|
|
|
import { getRoomUrl } from "../matrix-utils";
|
2022-01-05 21:09:12 +00:00
|
|
|
import { UserMenuContainer } from "../UserMenuContainer";
|
|
|
|
|
import { Body, Link } from "../typography/Typography";
|
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-04-27 22:18:55 +00:00
|
|
|
import { VideoPreview } from "./VideoPreview";
|
|
|
|
|
import { AudioPreview } from "./AudioPreview";
|
2022-01-05 21:09:12 +00:00
|
|
|
|
|
|
|
|
export function LobbyView({
|
|
|
|
|
client,
|
2022-04-27 22:18:55 +00:00
|
|
|
groupCall,
|
2022-01-05 21:09:12 +00:00
|
|
|
roomName,
|
|
|
|
|
state,
|
|
|
|
|
onInitLocalCallFeed,
|
|
|
|
|
onEnter,
|
|
|
|
|
localCallFeed,
|
|
|
|
|
microphoneMuted,
|
|
|
|
|
localVideoMuted,
|
|
|
|
|
toggleLocalVideoMuted,
|
|
|
|
|
toggleMicrophoneMuted,
|
|
|
|
|
setShowInspector,
|
|
|
|
|
showInspector,
|
|
|
|
|
roomId,
|
|
|
|
|
}) {
|
|
|
|
|
const { stream } = useCallFeed(localCallFeed);
|
2022-04-27 22:18:55 +00:00
|
|
|
const {
|
|
|
|
|
audioInput,
|
|
|
|
|
audioInputs,
|
|
|
|
|
setAudioInput,
|
|
|
|
|
audioOutput,
|
|
|
|
|
audioOutputs,
|
|
|
|
|
setAudioOutput,
|
|
|
|
|
} = useMediaHandler();
|
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-04-27 22:18:55 +00:00
|
|
|
{groupCall.isPtt ? (
|
|
|
|
|
<AudioPreview
|
|
|
|
|
roomName={roomName}
|
|
|
|
|
state={state}
|
|
|
|
|
audioInput={audioInput}
|
|
|
|
|
audioInputs={audioInputs}
|
|
|
|
|
setAudioInput={setAudioInput}
|
|
|
|
|
audioOutput={audioOutput}
|
|
|
|
|
audioOutputs={audioOutputs}
|
|
|
|
|
setAudioOutput={setAudioOutput}
|
|
|
|
|
/>
|
|
|
|
|
) : (
|
|
|
|
|
<VideoPreview
|
|
|
|
|
state={state}
|
|
|
|
|
client={client}
|
|
|
|
|
microphoneMuted={microphoneMuted}
|
|
|
|
|
localVideoMuted={localVideoMuted}
|
|
|
|
|
toggleLocalVideoMuted={toggleLocalVideoMuted}
|
|
|
|
|
toggleMicrophoneMuted={toggleMicrophoneMuted}
|
|
|
|
|
setShowInspector={setShowInspector}
|
|
|
|
|
showInspector={showInspector}
|
|
|
|
|
stream={stream}
|
|
|
|
|
audioOutput={audioOutput}
|
|
|
|
|
/>
|
|
|
|
|
)}
|
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>
|
|
|
|
|
);
|
|
|
|
|
}
|
