Merge pull request #12059 from vitormateusalmeida/issue-11610

Fix layout doesn't update when screen is shared

bigbluebutton-html5/imports/startup/client/base.jsx

@@ -19,7 +19,8 @@ import { notify } from '/imports/ui/services/notification';
 import deviceInfo from '/imports/utils/deviceInfo';
 import { invalidateCookie } from '/imports/ui/components/audio/audio-modal/service';
 import getFromUserSettings from '/imports/ui/services/users-settings';
-import LayoutManager from '/imports/ui/components/layout/layout-manager';
+import LayoutManagerComponent from '/imports/ui/components/layout/layout-manager/component';
+import LayoutManagerContainer from '/imports/ui/components/layout/layout-manager/container';
 import { withLayoutContext } from '/imports/ui/components/layout/context';
 import VideoService from '/imports/ui/components/video-provider/service';
 import DebugWindow from '/imports/ui/components/debug-window/component'
@@ -275,7 +276,7 @@ class Base extends Component {
     return (
       <Fragment>
         {meetingExist && Auth.loggedIn && <DebugWindow />}
-        {meetingExist && Auth.loggedIn && <LayoutManager />}
+        {meetingExist && Auth.loggedIn && <LayoutManagerContainer />}
         {
           (!meetingExisted && !meetingExist && Auth.loggedIn)
             ? <LoadingScreen />

bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import cx from 'classnames';
 import Button from '/imports/ui/components/button/component';
-import { ACTIONSBAR_HEIGHT } from '/imports/ui/components/layout/layout-manager';
+import { ACTIONSBAR_HEIGHT } from '/imports/ui/components/layout/layout-manager/component';
 import CaptionsButtonContainer from '/imports/ui/components/actions-bar/captions/container';
 import withShortcutHelper from '/imports/ui/components/shortcut-help/service';
 import { styles } from './styles.scss';

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

@@ -28,7 +28,7 @@ import { withDraggableContext } from '../media/webcam-draggable-overlay/context'
 import { styles } from './styles';
 import { makeCall } from '/imports/ui/services/api';
 import ConnectionStatusService from '/imports/ui/components/connection-status/service';
-import { NAVBAR_HEIGHT } from '/imports/ui/components/layout/layout-manager';
+import { NAVBAR_HEIGHT } from '/imports/ui/components/layout/layout-manager/component';
 
 const MOBILE_MEDIA = 'only screen and (max-width: 40em)';
 const APP_CONFIG = Meteor.settings.public.app;

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

@@ -35,7 +35,7 @@ const PRESENTATIONAREA_MIN_WIDTH = 385; // Value based on presentation toolbar
 
 const storageLayoutData = () => Storage.getItem('layoutData');
 
-class LayoutManager extends Component {
+class LayoutManagerComponent extends Component {
   static calculatesPresentationSize(
     mediaAreaWidth, mediaAreaHeight, presentationSlideWidth, presentationSlideHeight,
   ) {
@@ -111,8 +111,11 @@ class LayoutManager extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { layoutContextState } = this.props;
-    const { layoutContextState: prevLayoutContextState } = prevProps;
+    const { layoutContextState, screenIsShared } = this.props;
+    const {
+      layoutContextState: prevLayoutContextState,
+      screenIsShared: prevScreenIsShared
+    } = prevProps;
     const {
       numUsersVideo,
     } = layoutContextState;
@@ -120,7 +123,8 @@ class LayoutManager extends Component {
       numUsersVideo: prevNumUsersVideo,
     } = prevLayoutContextState;
 
-    if (numUsersVideo !== prevNumUsersVideo) {
+    if (numUsersVideo !== prevNumUsersVideo
+      || prevScreenIsShared !== screenIsShared) {
       setTimeout(() => this.setLayoutSizes(), 500);
     }
   }
@@ -767,7 +771,7 @@ class LayoutManager extends Component {
       left: firstPanel.width + secondPanel.width,
     };
 
-    const { presentationWidth, presentationHeight } = LayoutManager.calculatesPresentationSize(
+    const { presentationWidth, presentationHeight } = LayoutManagerComponent.calculatesPresentationSize(
       mediaAreaWidth, mediaAreaHeight, presentationSlideWidth, presentationSlideHeight,
     );
 
@@ -820,7 +824,7 @@ class LayoutManager extends Component {
   }
 }
 
-export default withLayoutConsumer(LayoutManager);
+export default withLayoutConsumer(LayoutManagerComponent);
 export {
   USERLIST_MIN_WIDTH,
   USERLIST_MAX_WIDTH,

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { withTracker } from 'meteor/react-meteor-data';
+import Auth from '/imports/ui/services/auth';
+import Screenshare from '/imports/api/screenshare';
+import { isVideoBroadcasting } from '/imports/ui/components/screenshare/service';
+import LayoutManagerComponent from '/imports/ui/components/layout/layout-manager/component';
+
+const LayoutManagerContainer = ({ screenIsShared }) => {
+  return <LayoutManagerComponent {...{ screenIsShared }} />;
+};
+
+export default withTracker(() => {
+  return {
+    screenIsShared: isVideoBroadcasting(),
+  };
+})(LayoutManagerContainer);

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

@@ -9,7 +9,7 @@ import VideoProviderContainer from '/imports/ui/components/video-provider/contai
 import { styles } from '../styles.scss';
 import Storage from '../../../services/storage/session';
 import { withLayoutConsumer } from '/imports/ui/components/layout/context';
-import { WEBCAMSAREA_MIN_PERCENT, PRESENTATIONAREA_MIN_WIDTH } from '/imports/ui/components/layout/layout-manager';
+import { WEBCAMSAREA_MIN_PERCENT, PRESENTATIONAREA_MIN_WIDTH } from '/imports/ui/components/layout/layout-manager/component';
 
 const propTypes = {
   swapLayout: PropTypes.bool,

bigbluebutton-html5/imports/ui/components/panel-manager/component.jsx

@@ -21,7 +21,7 @@ import {
   POLL_MAX_WIDTH,
   NOTE_MIN_WIDTH,
   NOTE_MAX_WIDTH,
-} from '/imports/ui/components/layout/layout-manager';
+} from '/imports/ui/components/layout/layout-manager/component';
 
 const intlMessages = defineMessages({
   chatLabel: {