Enable fullscreen button in call
GitLab: #178
Change-Id: I9e3e1491c9645efe7b5aa4bbd1550f7a19b0b36c
diff --git a/client/src/contexts/CallProvider.tsx b/client/src/contexts/CallProvider.tsx
index 5595000..da16a01 100644
--- a/client/src/contexts/CallProvider.tsx
+++ b/client/src/contexts/CallProvider.tsx
@@ -47,6 +47,8 @@
setVideoStatus: (isOn: boolean) => void;
isChatShown: boolean;
setIsChatShown: SetState<boolean>;
+ isFullscreen: boolean;
+ setIsFullscreen: SetState<boolean>;
callRole: CallRole;
callStatus: CallStatus;
@@ -69,6 +71,8 @@
setVideoStatus: () => {},
isChatShown: false,
setIsChatShown: () => {},
+ isFullscreen: false,
+ setIsFullscreen: () => {},
callRole: 'caller',
callStatus: CallStatus.Default,
@@ -94,6 +98,7 @@
const [isAudioOn, setIsAudioOn] = useState(false);
const [isVideoOn, setIsVideoOn] = useState(false);
const [isChatShown, setIsChatShown] = useState(false);
+ const [isFullscreen, setIsFullscreen] = useState(false);
const [callStatus, setCallStatus] = useState(routeState?.callStatus);
// TODO: This logic will have to change to support multiple people in a call. Could we move this logic to the server?
@@ -167,6 +172,17 @@
}, [webSocket, callRole, callStatus, contactUri, conversationId]);
useEffect(() => {
+ const onFullscreenChange = () => {
+ setIsFullscreen(document.fullscreenElement !== null);
+ };
+
+ document.addEventListener('fullscreenchange', onFullscreenChange);
+ return () => {
+ document.removeEventListener('fullscreenchange', onFullscreenChange);
+ };
+ }, []);
+
+ useEffect(() => {
if (!webSocket || !webRtcConnection) {
return;
}
@@ -263,6 +279,8 @@
setVideoStatus,
isChatShown,
setIsChatShown,
+ isFullscreen,
+ setIsFullscreen,
callRole,
callStatus,
acceptCall,