Full screen for P2P calls

evgeny-nadymov · evgeny-nadymov · commit e0c2a60d2719 · 2021-03-05T06:05:01.000+03:00
diff --git a/src/Components/Calls/CallPanel.js b/src/Components/Calls/CallPanel.js
@@ -99,7 +99,9 @@ class CallPanel extends React.Component {
     };
 
     handleClose = () => {
-        closeGroupCallPanel();
+        const { callId } = this.props;
+
+        CallStore.p2pDiscardCall(callId, false, 0, false, 0);
     };
 
     handleShareScreen = () => {
@@ -236,8 +238,8 @@ class CallPanel extends React.Component {
                                         rippleVisible : 'group-call-participant-menu-item-ripple-visible'
                                     }
                                 }}
-                                onClick={this.handleShareScreen}>
-                                <ListItemText primary={screenSharing ? t('StopScreenSharing') : t('StartScreenSharing')} />
+                                onClick={this.handleFullScreen}>
+                                <ListItemText primary={fullScreen ? t('ExitFullScreen') : t('EnterFullScreen')} />
                             </MenuItem>
                             <MenuItem
                                 classes={{ root: 'group-call-participant-menu-item' }}
@@ -248,8 +250,8 @@ class CallPanel extends React.Component {
                                         rippleVisible : 'group-call-participant-menu-item-ripple-visible'
                                     }
                                 }}
-                                onClick={this.handleFullScreen}>
-                                <ListItemText primary={fullScreen ? t('ExitFullScreen') : t('EnterFullScreen')} />
+                                onClick={this.handleShareScreen}>
+                                <ListItemText primary={screenSharing ? t('StopScreenSharing') : t('StartScreenSharing')} />
                             </MenuItem>
                         </MenuList>
                     </Popover>
diff --git a/src/Components/Calls/GroupCallPanel.css b/src/Components/Calls/GroupCallPanel.css
@@ -10,6 +10,13 @@
     max-height: 320px;
 }
 
+.full-screen #call-output-video {
+    max-width: unset;
+    max-height: unset;
+    width: 100%;
+    height: 100%;
+}
+
 #call-input-video {
     transform: scaleX(-1);
     max-width: 100px;
@@ -20,7 +27,14 @@
     top: 0;
 }
 
+.full-screen #call-input-video {
+    max-width: 200px;
+    max-height: 200px;
+    margin: 0 16px;
+}
+
 .group-call-panel {
+    overflow: hidden;
     width: 380px;
     height: 600px;
     border-radius: 12px;
@@ -74,6 +88,11 @@
     position: relative;
 }
 
+.full-screen .call-panel-content {
+    margin: 0;
+    border-radius: 0;
+}
+
 .call-panel-content {
     flex: 1 1 auto;
     overflow-y: hidden;
@@ -93,8 +112,10 @@
     flex-direction: row;
     justify-content: space-between;
     height: 220px;
+    min-width: 320px;
     box-sizing: border-box;
     position: relative;
+    align-self: center;
 }
 
 .group-call-panel-button-leave {
@@ -129,4 +150,8 @@
     font-size: 11px;
     line-height: normal;
     text-align: center;
+}
+
+.full-screen .group-call-settings {
+    border-radius: 0;
 }
diff --git a/src/Components/MainPage.js b/src/Components/MainPage.js
@@ -224,13 +224,13 @@ class MainPage extends React.Component {
                     {isChatDetailsVisible && <ChatInfo />}
                 </div>
                 <Actions/>
-                {instantViewContent && <InstantViewer {...instantViewContent} />}
-                {mediaViewerContent && <MediaViewer {...mediaViewerContent} />}
-                {profileMediaViewerContent && <ProfileMediaViewer {...profileMediaViewerContent} />}
-                {forwardInfo && <ForwardDialog {...forwardInfo} />}
-                {videoInfo && <PipPlayer {...videoInfo}/>}
-                {groupCallId && <GroupCall groupCallId={groupCallId}/>}
-                {callId && <Call callId={callId}/>}
+                {Boolean(instantViewContent) && <InstantViewer {...instantViewContent} />}
+                {Boolean(mediaViewerContent) && <MediaViewer {...mediaViewerContent} />}
+                {Boolean(profileMediaViewerContent) && <ProfileMediaViewer {...profileMediaViewerContent} />}
+                {Boolean(forwardInfo) && <ForwardDialog {...forwardInfo} />}
+                {Boolean(videoInfo) && <PipPlayer {...videoInfo}/>}
+                {Boolean(groupCallId) && <GroupCall groupCallId={groupCallId}/>}
+                {Boolean(callId) && <Call callId={callId}/>}
             </>
         );
     }
