Layout Manager Changes

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

@@ -21,8 +21,10 @@ import getFromUserSettings from '/imports/ui/services/users-settings';
 import LayoutManager from '/imports/ui/components/layout/layout-manager';
 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';
 
 const CHAT_CONFIG = Meteor.settings.public.chat;
+const SHOW_DEBUG_WINDOW = Meteor.settings.public.app.showDebugWindow;
 const CHAT_ENABLED = CHAT_CONFIG.enabled;
 const PUBLIC_CHAT_ID = CHAT_CONFIG.public_id;
 
@@ -226,14 +228,14 @@ class Base extends Component {
     } = this.props;
     const { meetingExisted } = this.state;
 
+    if (!meetingExisted && !meetingExist && Auth.loggedIn) {
+      return <LoadingScreen />;
+    }
     return (
       <Fragment>
-        <LayoutManager />
-        {
-          (!meetingExisted && !meetingExist && Auth.loggedIn)
-            ? <LoadingScreen />
-            : this.renderByState()
-        }
+        {meetingExist && Auth.loggedIn && <DebugWindow />}
+        {meetingExist && Auth.loggedIn && <LayoutManager />}
+        {this.renderByState()}
       </Fragment>
     );
   }
@@ -381,15 +383,15 @@ const BaseContainer = withTracker(() => {
     });
   }
 
-  if (getFromUserSettings('bbb_show_participants_on_login', true) && !deviceInfo.type().isPhone) {
-    Session.set('openPanel', 'userlist');
-    if (CHAT_ENABLED && getFromUserSettings('bbb_show_public_chat_on_login', !Meteor.settings.public.chat.startClosed)) {
-      Session.set('openPanel', 'chat');
-      Session.set('idChatOpen', PUBLIC_CHAT_ID);
-    }
-  } else {
-    Session.set('openPanel', '');
-  }
+  // if (getFromUserSettings('bbb_show_participants_on_login', true) && !deviceInfo.type().isPhone) {
+  //   Session.set('openPanel', 'userlist');
+  //   if (CHAT_ENABLED && getFromUserSettings('bbb_show_public_chat_on_login', !Meteor.settings.public.chat.startClosed)) {
+  //     Session.set('openPanel', 'chat');
+  //     Session.set('idChatOpen', PUBLIC_CHAT_ID);
+  //   }
+  // } else {
+  //   Session.set('openPanel', '');
+  // }
 
   const codeError = Session.get('codeError');
   const usersVideo = VideoService.getVideoStreams();

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

@@ -7,38 +7,9 @@ import AudioControlsContainer from '../audio/audio-controls/container';
 import JoinVideoOptionsContainer from '../video-provider/video-button/container';
 import CaptionsButtonContainer from '/imports/ui/components/actions-bar/captions/container';
 import PresentationOptionsContainer from './presentation-options/component';
-import Button from '/imports/ui/components/button/component';
-import Storage from '/imports/ui/services/storage/session';
 import { ACTIONSBAR_HEIGHT } from '/imports/ui/components/layout/layout-manager';
-import { withLayoutConsumer } from '/imports/ui/components/layout/context';
 
 class ActionsBar extends PureComponent {
-  constructor(props) {
-    super(props);
-
-    this.autoArrangeToggle = this.autoArrangeToggle.bind(this);
-  }
-
-  componentDidUpdate(prevProps) {
-    const { layoutContextState } = this.props;
-    const { layoutContextState: prevLayoutContextState } = prevProps;
-    const { autoArrangeLayout } = layoutContextState;
-    const { autoArrangeLayout: prevAutoArrangeLayout } = prevLayoutContextState;
-    if (autoArrangeLayout !== prevAutoArrangeLayout) this.forceUpdate();
-  }
-
-  autoArrangeToggle() {
-    const { layoutContextDispatch } = this.props;
-    const autoArrangeLayout = Storage.getItem('autoArrangeLayout');
-    layoutContextDispatch(
-      {
-        type: 'setAutoArrangeLayout',
-        value: !autoArrangeLayout,
-      },
-    );
-    window.dispatchEvent(new Event('autoArrangeChanged'));
-  }
-
   render() {
     const {
       amIPresenter,
@@ -52,8 +23,6 @@ class ActionsBar extends PureComponent {
       toggleSwapLayout,
       handleTakePresenter,
       intl,
-      currentSlidHasContent,
-      parseCurrentSlideContent,
       isSharingVideo,
       screenShareEndAlert,
       stopExternalVideoShare,
@@ -66,7 +35,6 @@ class ActionsBar extends PureComponent {
     } = this.props;
 
     const actionBarClasses = {};
-    const autoArrangeLayout = Storage.getItem('autoArrangeLayout');
 
     actionBarClasses[styles.centerWithActions] = amIPresenter;
     actionBarClasses[styles.center] = true;
@@ -117,18 +85,6 @@ class ActionsBar extends PureComponent {
             screenshareDataSavingSetting,
           }}
           />
-          <Button
-            className={cx(styles.button, autoArrangeLayout || styles.btn)}
-            icon={autoArrangeLayout ? 'lock' : 'unlock'}
-            color={autoArrangeLayout ? 'primary' : 'default'}
-            ghost={!autoArrangeLayout}
-            onClick={this.autoArrangeToggle}
-            label={autoArrangeLayout ? 'Disable Auto Arrange' : 'Enable Auto Arrange'}
-            aria-label="Auto Arrange test"
-            hideLabel
-            circle
-            size="lg"
-          />
         </div>
         <div className={styles.right}>
           {isLayoutSwapped
@@ -146,4 +102,4 @@ class ActionsBar extends PureComponent {
   }
 }
 
-export default withLayoutConsumer(ActionsBar);
+export default ActionsBar;

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

@@ -103,6 +103,7 @@ class App extends Component {
     super();
     this.state = {
       enableResize: !window.matchMedia(MOBILE_MEDIA).matches,
+      openPanel: '',
     };
 
     this.handleWindowResize = throttle(this.handleWindowResize).bind(this);
@@ -112,11 +113,19 @@ class App extends Component {
 
   componentDidMount() {
     const {
-      locale, notify, intl, validIOSVersion, startBandwidthMonitoring, handleNetworkConnection,
+      locale,
+      notify,
+      intl,
+      validIOSVersion,
+      startBandwidthMonitoring,
+      handleNetworkConnection,
+      openPanel,
     } = this.props;
     const BROWSER_RESULTS = browser();
     const isMobileBrowser = BROWSER_RESULTS.mobile || BROWSER_RESULTS.os.includes('Android');
 
+    this.setOpenPanel(openPanel);
+
     MediaService.setSwapLayout();
     Modal.setAppElement('#app');
     document.getElementsByTagName('html')[0].lang = locale;
@@ -155,9 +164,13 @@ class App extends Component {
 
   componentDidUpdate(prevProps) {
     const {
-      meetingMuted, notify, currentUserEmoji, intl, hasPublishedPoll,
+      meetingMuted, notify, currentUserEmoji, intl, hasPublishedPoll, openPanel,
     } = this.props;
 
+    if (openPanel !== prevProps.openPanel) {
+      this.setOpenPanel(openPanel);
+    }
+
     if (prevProps.currentUserEmoji.status !== currentUserEmoji.status) {
       const formattedEmojiStatus = intl.formatMessage({ id: `app.actionsBar.emojiMenu.${currentUserEmoji.status}Label` })
       || currentUserEmoji.status;
@@ -206,13 +219,18 @@ class App extends Component {
   }
 
   shouldAriaHide() {
-    const { openPanel, isPhone } = this.props;
+    const { openPanel } = this.state;
+    const { isPhone } = this.props;
     return openPanel !== '' && (isPhone || isLayeredView.matches);
   }
 
+  setOpenPanel(openPanel) {
+    this.setState({ openPanel });
+  }
+
   renderPanel() {
-    const { enableResize } = this.state;
-    const { openPanel, isRTL } = this.props;
+    const { enableResize, openPanel } = this.state;
+    const { isRTL } = this.props;
 
     return (
       <PanelManager
@@ -330,8 +348,9 @@ class App extends Component {
   }
 
   render() {
+    const { openPanel } = this.state;
     const {
-      customStyle, customStyleUrl, openPanel,
+      customStyle, customStyleUrl,
     } = this.props;
     return (
       <main className={styles.main}>

bigbluebutton-html5/imports/ui/components/chat/message-form/typing-indicator/component.jsx

@@ -102,7 +102,7 @@ class TypingIndicator extends PureComponent {
     const style = {};
     style[styles.error] = !!error;
     style[styles.info] = !error;
-    style[styles.spacer] = !!typingElement;
+    // style[styles.spacer] = !!typingElement;
 
     return (
       <div className={cx(style)}>