Fix exception when screenshare is running

bigbluebutton-html5/imports/ui/components/chat/alert/push-alert/component.jsx

@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import _ from 'lodash';
 import injectNotify from '/imports/ui/components/toast/inject-notify/component';
 import { Session } from 'meteor/session';
 

bigbluebutton-html5/imports/ui/components/layout/layout-manager.jsx

@@ -2,6 +2,7 @@ import React, { Component, Fragment } from 'react';
 import Storage from '/imports/ui/services/storage/session';
 import { Session } from 'meteor/session';
 import { withLayoutConsumer } from '/imports/ui/components/layout/context';
+import { isVideoBroadcasting } from '/imports/ui/components/screenshare/service';
 
 const windowWidth = () => window.innerWidth;
 const windowHeight = () => window.innerHeight;
@@ -217,9 +218,20 @@ class LayoutManager extends Component {
   defineWebcamPlacement(mediaAreaWidth, mediaAreaHeight, presentationWidth, presentationHeight) {
     const { layoutContextDispatch, layoutContextState } = this.props;
     const { autoArrangeLayout } = layoutContextState;
+    const isScreenShare = isVideoBroadcasting();
 
     if (!autoArrangeLayout) return;
 
+    if (isScreenShare) {
+      layoutContextDispatch(
+        {
+          type: 'setWebcamsPlacement',
+          value: 'top',
+        },
+      );
+      return;
+    }
+
     if ((mediaAreaWidth - presentationWidth) > (mediaAreaHeight - presentationHeight)) {
       layoutContextDispatch(
         {
@@ -335,6 +347,8 @@ class LayoutManager extends Component {
     const autoArrangeLayout = Storage.getItem('autoArrangeLayout');
     const webcamsAreaUserSetsHeight = Storage.getItem('webcamsAreaUserSetsHeight');
     const webcamsAreaUserSetsWidth = Storage.getItem('webcamsAreaUserSetsWidth');
+    const isScreenShare = isVideoBroadcasting();
+
     let webcamsAreaWidth;
     let webcamsAreaHeight;
 
@@ -345,6 +359,18 @@ class LayoutManager extends Component {
       };
     }
 
+    if (isScreenShare) {
+      webcamsAreaWidth = mediaAreaWidth;
+      webcamsAreaHeight = (mediaAreaHeight - presentationHeight)
+        < (mediaAreaHeight * WEBCAMSAREA_MIN_PERCENT)
+        ? mediaAreaHeight * WEBCAMSAREA_MIN_PERCENT
+        : mediaAreaHeight - presentationHeight;
+      return {
+        webcamsAreaWidth,
+        webcamsAreaHeight,
+      };
+    }
+
     if (autoArrangeLayout) {
       if (webcamsPlacement === 'left' || webcamsPlacement === 'right') {
         webcamsAreaWidth = (mediaAreaWidth - presentationWidth)
@@ -426,6 +452,23 @@ class LayoutManager extends Component {
     };
   }
 
+  calculatesScreenShareAreaSize(
+    mediaAreaWidth, mediaAreaHeight, webcamAreaWidth, webcamAreaHeight,
+  ) {
+    const { layoutContextState } = this.props;
+    const { numUsersVideo } = layoutContextState;
+    if (numUsersVideo < 1) {
+      return {
+        screenShareAreaWidth: mediaAreaWidth,
+        screenShareAreaHeight: mediaAreaHeight - 20,
+      };
+    }
+    return {
+      screenShareAreaWidth: mediaAreaWidth,
+      screenShareAreaHeight: mediaAreaHeight - webcamAreaHeight - 30,
+    };
+  }
+
   calculatesLayout(panelChanged = false) {
     const {
       layoutContextState,
@@ -467,6 +510,8 @@ class LayoutManager extends Component {
       left: firstPanel.width + secondPanel.width,
     };
 
+    const isScreenShare = isVideoBroadcasting();
+
     const { presentationWidth, presentationHeight } = LayoutManager.calculatesPresentationSize(
       mediaAreaWidth, mediaAreaHeight, presentationSlideWidth, presentationSlideHeight,
     );
@@ -479,26 +524,36 @@ class LayoutManager extends Component {
       mediaAreaWidth, mediaAreaHeight, presentationWidth, presentationHeight,
     );
 
-    const { presentationAreaWidth, presentationAreaHeight } = this.calculatesPresentationAreaSize(
-      mediaAreaWidth, mediaAreaHeight, webcamsAreaWidth, webcamsAreaHeight,
-    );
-
     const newWebcamsAreaSize = {
       width: webcamsAreaWidth,
       height: webcamsAreaHeight,
     };
-
     let newPresentationAreaSize;
-    if (!presentationIsFullscreen) {
-      newPresentationAreaSize = {
-        width: presentationAreaWidth || 0,
-        height: presentationAreaHeight || 0,
+    let newScreenShareAreaSize;
+
+    if (isScreenShare) {
+      const { screenShareAreaWidth, screenShareAreaHeight } = this.calculatesPresentationAreaSize(
+        mediaAreaWidth, mediaAreaHeight, webcamsAreaWidth, webcamsAreaHeight,
+      );
+      newScreenShareAreaSize = {
+        width: screenShareAreaWidth,
+        height: screenShareAreaHeight,
       };
     } else {
-      newPresentationAreaSize = {
-        width: windowWidth(),
-        height: windowHeight(),
-      };
+      const { presentationAreaWidth, presentationAreaHeight } = this.calculatesPresentationAreaSize(
+        mediaAreaWidth, mediaAreaHeight, webcamsAreaWidth, webcamsAreaHeight,
+      );
+      if (!presentationIsFullscreen) {
+        newPresentationAreaSize = {
+          width: presentationAreaWidth || 0,
+          height: presentationAreaHeight || 0,
+        };
+      } else {
+        newPresentationAreaSize = {
+          width: windowWidth(),
+          height: windowHeight(),
+        };
+      }
     }
 
     return {
@@ -508,6 +563,7 @@ class LayoutManager extends Component {
       breakoutRoomSize: newBreakoutRoomSize,
       webcamsAreaSize: newWebcamsAreaSize,
       presentationAreaSize: newPresentationAreaSize,
+      screenShareAreaSize: newScreenShareAreaSize,
     };
   }
 

bigbluebutton-html5/imports/ui/components/media/container.jsx

@@ -9,7 +9,7 @@ import VideoService from '/imports/ui/components/video-provider/service';
 import getFromUserSettings from '/imports/ui/services/users-settings';
 import { withModalMounter } from '/imports/ui/components/modal/service';
 import Media from './component';
-import MediaService, { getSwapLayout, shouldEnableSwapLayout } from './service';
+import MediaService, { getSwapLayout, shouldEnableSwapLayout } from '/imports/ui/components/media/service';
 import PresentationPodsContainer from '../presentation-pod/container';
 import ScreenshareContainer from '../screenshare/container';
 import DefaultContent from '../presentation/default-content/component';

bigbluebutton-html5/imports/ui/components/media/service.js

@@ -4,7 +4,6 @@ import { getVideoUrl } from '/imports/ui/components/external-video-player/servic
 import Auth from '/imports/ui/services/auth';
 import Users from '/imports/api/users';
 import Settings from '/imports/ui/services/settings';
-import PollingService from '/imports/ui/components/polling/service';
 import getFromUserSettings from '/imports/ui/services/users-settings';
 
 const LAYOUT_CONFIG = Meteor.settings.public.layout;

bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/component.jsx

@@ -4,7 +4,6 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import Resizable from 're-resizable';
 import { isMobile, isIPad13 } from 'react-device-detect';
-import _ from 'lodash';
 import { withDraggableConsumer } from './context';
 import VideoProviderContainer from '/imports/ui/components/video-provider/container';
 import { styles } from '../styles.scss';

bigbluebutton-html5/imports/ui/components/screenshare/component.jsx

@@ -170,7 +170,10 @@ class ScreenshareComponent extends React.Component {
           <video
             id="screenshareVideo"
             key="screenshareVideo"
-            style={{ maxHeight: '100%', width: '100%' }}
+            style={{
+              maxHeight: '100%',
+              width: '100%',
+            }}
             playsInline
             onLoadedData={this.onVideoLoad}
             ref={(ref) => { this.videoTag = ref; }}