Enable fullscreen button in call
GitLab: #178
Change-Id: I9e3e1491c9645efe7b5aa4bbd1550f7a19b0b36c
diff --git a/client/src/pages/CallInterface.tsx b/client/src/pages/CallInterface.tsx
index 29dd4e0..5dbda36 100644
--- a/client/src/pages/CallInterface.tsx
+++ b/client/src/pages/CallInterface.tsx
@@ -49,7 +49,20 @@
import { CallPending } from './CallPending';
export default () => {
- const { callRole, callStatus, isChatShown } = useContext(CallContext);
+ const { callRole, callStatus, isChatShown, isFullscreen } = useContext(CallContext);
+ const callInterfaceRef = useRef<HTMLDivElement>();
+
+ useEffect(() => {
+ if (!callInterfaceRef.current) {
+ return;
+ }
+
+ if (isFullscreen && document.fullscreenElement === null) {
+ callInterfaceRef.current.requestFullscreen();
+ } else if (!isFullscreen && document.fullscreenEnabled !== null) {
+ document.exitFullscreen();
+ }
+ }, [isFullscreen]);
if (callStatus !== CallStatus.InCall) {
return (
@@ -62,7 +75,7 @@
}
return (
- <Box flexGrow={1} display="flex">
+ <Box ref={callInterfaceRef} flexGrow={1} display="flex">
<CallInterface />
{isChatShown && <CallChatDrawer />}
</Box>