Fixes resizing bar appearing while there are no webcams shared #8531

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

@@ -4,6 +4,7 @@ import cx from 'classnames';
 import { isMobile, isIPad13 } from 'react-device-detect';
 import WebcamDraggable from './webcam-draggable-overlay/component';
 import { styles } from './styles';
+import Storage from '../../services/storage/session';
 
 const BROWSER_ISMOBILE = isMobile || isIPad13;
 
@@ -15,7 +16,7 @@ const propTypes = {
   swapLayout: PropTypes.bool,
   disableVideo: PropTypes.bool,
   audioModalIsOpen: PropTypes.bool,
-  webcamPlacement: PropTypes.string,
+  webcamDraggableState: PropTypes.instanceOf(Object).isRequired,
 };
 
 const defaultProps = {
@@ -24,7 +25,6 @@ const defaultProps = {
   swapLayout: false,
   disableVideo: false,
   audioModalIsOpen: false,
-  webcamPlacement: 'top',
 };
 
 
@@ -47,9 +47,13 @@ export default class Media extends Component {
       children,
       audioModalIsOpen,
       usersVideo,
-      webcamPlacement,
+      webcamDraggableState,
     } = this.props;
 
+    const { placement } = webcamDraggableState;
+    const placementStorage = Storage.getItem('webcamPlacement');
+    const webcamPlacement = placement || placementStorage;
+
     const contentClassName = cx({
       [styles.content]: true,
     });
@@ -61,6 +65,7 @@ export default class Media extends Component {
     });
 
     const containerClassName = cx({
+      [styles.container]: true,
       [styles.containerV]: webcamPlacement === 'top' || webcamPlacement === 'bottom' || webcamPlacement === 'floating',
       [styles.containerH]: webcamPlacement === 'left' || webcamPlacement === 'right',
     });
@@ -102,6 +107,9 @@ export default class Media extends Component {
         >
           {children}
         </div>
+        {
+          usersVideo.length > 0
+            ? (
               <WebcamDraggable
                 refMediaContainer={this.refContainer}
                 swapLayout={swapLayout}
@@ -112,6 +120,9 @@ export default class Media extends Component {
                 audioModalIsOpen={audioModalIsOpen}
                 usersVideo={usersVideo}
               />
+            )
+            : null
+        }
       </div>
     );
   }

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

@@ -15,6 +15,7 @@ import ScreenshareContainer from '../screenshare/container';
 import DefaultContent from '../presentation/default-content/component';
 import ExternalVideoContainer from '../external-video-player/container';
 import Storage from '../../services/storage/session';
+import { withDraggableConsumer } from './webcam-draggable-overlay/context';
 
 const LAYOUT_CONFIG = Meteor.settings.public.layout;
 const KURENTO_CONFIG = Meteor.settings.public.kurento;
@@ -102,7 +103,7 @@ class MediaContainer extends Component {
   }
 }
 
-export default withModalMounter(withTracker(() => {
+export default withDraggableConsumer(withModalMounter(withTracker(() => {
   const { dataSaving } = Settings;
   const { viewParticipantsWebcams, viewScreenshare } = dataSaving;
   const hidePresentation = getFromUserSettings('bbb_hide_presentation', LAYOUT_CONFIG.hidePresentation);
@@ -152,4 +153,4 @@ export default withModalMounter(withTracker(() => {
 
   MediaContainer.propTypes = propTypes;
   return data;
-})(injectIntl(MediaContainer)));
+})(injectIntl(MediaContainer))));

bigbluebutton-html5/imports/ui/components/media/styles.scss

@@ -20,8 +20,6 @@ $after-content-order: 3;
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-direction: column;
-  overflow: hidden;
 }
 
 .container {

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

@@ -6,7 +6,7 @@ const { webcamsDefaultPlacement } = Meteor.settings.public.layout;
 export const WebcamDraggableContext = createContext();
 
 const initialState = {
-  placement: webcamsDefaultPlacement,
+  placement: webcamsDefaultPlacement || 'top',
   lastPlacementLandscape: 'top',
   lastPlacementPortrait: 'left',
   orientation: null,

bigbluebutton-html5/private/config/settings.yml

@@ -169,6 +169,7 @@ public:
   layout:
     autoSwapLayout: false
     hidePresentation: false
+    webcamsDefaultPlacement: "top"
   media:
     stunTurnServersFetchAddress: "/bigbluebutton/api/stuns"
     mediaTag: "#remote-media"