-
Notifications
You must be signed in to change notification settings - Fork 162
/
conference.jsx
94 lines (87 loc) · 2.53 KB
/
conference.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import React, { useEffect } from "react";
import { useParams } from "react-router-dom";
import { usePrevious } from "react-use";
import {
selectRoomState,
HMSRoomState,
selectIsConnectedToRoom,
useHMSActions,
useHMSStore,
} from "@100mslive/react-sdk";
import { Box, Flex } from "@100mslive/react-ui";
import FullPageProgress from "./FullPageProgress";
import { RoleChangeRequestModal } from "./RoleChangeRequestModal";
import { ConferenceMainView } from "../layouts/mainView";
import { Header } from "./Header";
import { Footer } from "./Footer";
import { useNavigation } from "./hooks/useNavigation";
import { useIsHeadless } from "./AppData/useUISettings";
const Conference = () => {
const navigate = useNavigation();
const { roomId, role } = useParams();
const isHeadless = useIsHeadless();
const roomState = useHMSStore(selectRoomState);
const prevState = usePrevious(roomState);
const isConnectedToRoom = useHMSStore(selectIsConnectedToRoom);
const hmsActions = useHMSActions();
useEffect(() => {
if (!roomId) {
navigate(`/`);
return;
}
if (
!prevState &&
!(
roomState === HMSRoomState.Connecting ||
roomState === HMSRoomState.Reconnecting ||
isConnectedToRoom
)
) {
if (role) navigate(`/preview/${roomId || ""}/${role}`);
else navigate(`/preview/${roomId || ""}`);
}
}, [isConnectedToRoom, prevState, roomState, navigate, role, roomId]);
useEffect(() => {
// beam doesn't need to store messages, saves on unnecessary store updates in large calls
if (isHeadless) {
hmsActions.ignoreMessageTypes(["chat"]);
}
}, [isHeadless, hmsActions]);
useEffect(() => {
return () => {
// This is needed to handle mac touchpad swipe gesture
if (isConnectedToRoom) {
hmsActions.leave();
}
};
}, [hmsActions, isConnectedToRoom]);
if (!isConnectedToRoom) {
return <FullPageProgress />;
}
return (
<Flex css={{ size: "100%" }} direction="column">
{!isHeadless && (
<Box css={{ h: "$18", "@md": { h: "$17" } }} data-testid="header">
<Header />
</Box>
)}
<Box
css={{
w: "100%",
flex: "1 1 0",
minHeight: 0,
}}
data-testid="conferencing"
>
<ConferenceMainView />
</Box>
{!isHeadless && (
<Box css={{ flexShrink: 0, minHeight: "$24" }} data-testid="footer">
<Footer />
</Box>
)}
<RoleChangeRequestModal />
</Flex>
);
};
export default Conference;