Fix visual bug

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

@@ -71,7 +71,7 @@ class LayoutManager extends Component {
     window.addEventListener('resize', _.throttle(() => this.setLayoutSizes(), 200));
 
     window.addEventListener('panelChanged', () => {
-      setTimeout(() => this.setLayoutSizes(true), 200);
+      this.setLayoutSizes(true);
     });
 
     window.addEventListener('autoArrangeChanged', () => {
@@ -91,7 +91,7 @@ class LayoutManager extends Component {
     });
 
     window.addEventListener('webcamPlacementChange', () => {
-      setTimeout(() => this.setLayoutSizes(false, false, true), 200);
+      this.setLayoutSizes(false, false, true);
     });
   }
 

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

@@ -43,6 +43,7 @@ class WebcamDraggable extends PureComponent {
         height: webcamsPlacement === 'left' || webcamsPlacement === 'right' ? mediaBounds.height : mediaBounds.height * WEBCAMSAREA_MIN_PERCENT,
       },
       resizing: false,
+      hideWebcams: false,
     };
 
     this.handleWebcamDragStart = this.handleWebcamDragStart.bind(this);
@@ -176,6 +177,8 @@ class WebcamDraggable extends PureComponent {
     });
   }
 
+  setHideWebcams(hideWebcams) { this.setState({ hideWebcams }); }
+
   getWebcamsListBounds() {
     const { webcamDraggableState } = this.props;
     const { videoListRef } = webcamDraggableState;
@@ -194,13 +197,6 @@ class WebcamDraggable extends PureComponent {
     return false;
   }
 
-  handleLayoutSizesSets() {
-    const { layoutContextState } = this.props;
-    const { webcamsAreaSize } = layoutContextState;
-
-    this.setWebcamsAreaResizable(webcamsAreaSize.width, webcamsAreaSize.height);
-  }
-
   calculatePosition() {
     const { layoutContextState } = this.props;
     const { mediaBounds } = layoutContextState;
@@ -215,6 +211,14 @@ class WebcamDraggable extends PureComponent {
     };
   }
 
+  handleLayoutSizesSets() {
+    const { layoutContextState } = this.props;
+    const { webcamsAreaSize } = layoutContextState;
+
+    this.setWebcamsAreaResizable(webcamsAreaSize.width, webcamsAreaSize.height);
+    this.setHideWebcams(false);
+  }
+
   handleWebcamDragStart() {
     const { webcamDraggableDispatch } = this.props;
     const { x, y } = this.calculatePosition();
@@ -234,6 +238,8 @@ class WebcamDraggable extends PureComponent {
     const { webcamDraggableDispatch, layoutContextDispatch } = this.props;
     const targetClassname = JSON.stringify(e.target.className);
 
+    this.setHideWebcams(true);
+
     layoutContextDispatch(
       {
         type: 'setAutoArrangeLayout',
@@ -278,7 +284,7 @@ class WebcamDraggable extends PureComponent {
       audioModalIsOpen,
     } = this.props;
 
-    const { resizing, webcamsAreaResizable } = this.state;
+    const { resizing, webcamsAreaResizable, hideWebcams } = this.state;
 
     const {
       mediaBounds,
@@ -476,10 +482,12 @@ class WebcamDraggable extends PureComponent {
             className={
               !swapLayout
                 ? overlayClassName
-                : contentClassName}
+                : contentClassName
+            }
             style={{
               marginLeft: 0,
               marginRight: 0,
+              display: hideWebcams ? 'none' : undefined,
             }}
           >
             {

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

@@ -44,7 +44,6 @@ class PresentationArea extends PureComponent {
       zoom: 100,
       fitToWidth: false,
       isFullscreen: false,
-      hidePresentation: false,
     };
 
     this.currentPresentationToastId = null;
@@ -92,11 +91,7 @@ class PresentationArea extends PureComponent {
     this.getInitialPresentationSizes();
     this.refPresentationContainer.addEventListener('fullscreenchange', this.onFullscreenChange);
     window.addEventListener('resize', this.onResize, false);
-    window.addEventListener('webcamPlacementChange', () => this.visibilityChange(true), false);
-    window.addEventListener('layoutSizesSets', () => {
-      this.onResize();
-      this.visibilityChange(false);
-    }, false);
+    window.addEventListener('layoutSizesSets', this.onResize, false);
     window.addEventListener('webcamAreaResize', this.handleResize, false);
 
     const { slidePosition, layoutContextDispatch } = this.props;
@@ -276,10 +271,6 @@ class PresentationArea extends PureComponent {
     this.setState({ fitToWidth });
   }
 
-  visibilityChange(hidePresentation) {
-    this.setState({ hidePresentation });
-  }
-
   handleResize() {
     const presentationSizes = this.getPresentationSizesAvailable();
     if (Object.keys(presentationSizes).length > 0) {
@@ -705,10 +696,9 @@ class PresentationArea extends PureComponent {
 
     const {
       showSlide,
-      fitToWidth,
-      presentationAreaWidth,
+      // fitToWidth,
+      // presentationAreaWidth,
       localPosition,
-      hidePresentation,
     } = this.state;
 
     let viewBoxDimensions;
@@ -738,26 +728,13 @@ class PresentationArea extends PureComponent {
 
     let toolbarWidth = 0;
     if (this.refWhiteboardArea) {
-      if (svgWidth === presentationAreaWidth
-        || presentationAreaWidth <= 400
-        || fitToWidth === true) {
-        toolbarWidth = '100%';
-      } else if (svgWidth <= 400
-        && presentationAreaWidth > 400) {
-        toolbarWidth = '400px';
-      } else {
-        toolbarWidth = svgWidth;
-      }
+      toolbarWidth = svgWidth;
     }
 
     return (
       <div
         ref={(ref) => { this.refPresentationContainer = ref; }}
         className={styles.presentationContainer}
-
-        style={{
-          visibility: hidePresentation ? 'hidden' : 'visible',
-        }}
       >
         <div
           ref={(ref) => { this.refPresentationArea = ref; }}