Disable resizing of userlist and chat for mobile

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

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { throttle } from 'lodash';
 import { defineMessages, injectIntl, intlShape } from 'react-intl';
 import Modal from 'react-modal';
 import cx from 'classnames';
@@ -12,6 +13,8 @@ import AudioContainer from '../audio/container';
 import ChatNotificationContainer from '../chat/notification/container';
 import { styles } from './styles';
 
+const MOBILE_MEDIA = 'only screen and (max-width: 40em)';
+
 const intlMessages = defineMessages({
   userListLabel: {
     id: 'app.userList.label',
@@ -61,8 +64,11 @@ class App extends Component {
     super();
 
     this.state = {
-      compactUserList: false, // TODO: Change this on userlist resize (?)
+      compactUserList: false,
+      enableResize: !window.matchMedia(MOBILE_MEDIA).matches,
     };
+
+    this.handleWindowResize = throttle(this.handleWindowResize).bind(this);
   }
 
   componentDidMount() {
@@ -71,6 +77,21 @@ class App extends Component {
     Modal.setAppElement('#app');
     document.getElementsByTagName('html')[0].lang = locale;
     document.getElementsByTagName('html')[0].style.fontSize = this.props.fontSize;
+
+    this.handleWindowResize();
+    window.addEventListener('resize', this.handleWindowResize, false);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleWindowResize, false);
+  }
+
+  handleWindowResize() {
+    const { enableResize } = this.state;
+    const shouldEnableResize = !window.matchMedia(MOBILE_MEDIA).matches;
+    if (enableResize === shouldEnableResize) return;
+
+    this.setState({ enableResize: shouldEnableResize });
   }
 
   renderNavBar() {
@@ -122,6 +143,18 @@ class App extends Component {
       compact: compactUserList,
     });
 
+    return (
+      <div
+        className={cx(styles.userList, userListStyle)}
+        aria-label={intl.formatMessage(intlMessages.userListLabel)}
+        aria-hidden={chatIsOpen}
+      >
+        {userList}
+      </div>
+    );
+  }
+
+  renderUserListResizable() {
     return (
       <Resizable
         minWidth="10%"
@@ -129,17 +162,11 @@ class App extends Component {
         ref={(node) => { this.resizableUserList = node; }}
         enable={{ right: true }}
         className={styles.resizableUserList}
-        onResize={(e, direction, ref, d) => {
+        onResize={(e, direction, ref) => {
           if (e.clientX - ref.offsetLeft <= 50) this.props.router.push('/');
         }}
       >
-        <div
-          className={cx(styles.userList, userListStyle)}
-          aria-label={intl.formatMessage(intlMessages.userListLabel)}
-          aria-hidden={chatIsOpen}
-        >
-          {userList}
-        </div>
+        {this.renderUserList()}
       </Resizable>
     );
   }
@@ -149,21 +176,31 @@ class App extends Component {
 
     if (!chat) return null;
 
+    return (
+      <section
+        className={styles.chat}
+        aria-label={intl.formatMessage(intlMessages.chatLabel)}
+      >
+        {chat}
+      </section>
+    );
+  }
+
+  renderChatResizable() {
+    const { chat } = this.props;
+
+    if (!chat) return null;
+
     return (
       <Resizable
-        defaultSize={{width: "22.5%"}}
+        defaultSize={{ width: '22.5%' }}
         minWidth="15%"
         maxWidth="30%"
         ref={(node) => { this.resizableChat = node; }}
         className={styles.resizableChat}
-        enable={{ right: true }}
+        enable={{ right: false }}
       >
-        <section
-          className={styles.chat}
-          aria-label={intl.formatMessage(intlMessages.chatLabel)}
-        >
-          {chat}
-        </section>
+        {this.renderChat()}
       </Resizable>
     );
   }
@@ -206,7 +243,8 @@ class App extends Component {
   }
 
   render() {
-    const { params, userlistIsOpen, chatIsOpen } = this.props;
+    const { params, userlistIsOpen } = this.props;
+    const { enableResize } = this.state;
 
     return (
       <main className={styles.main}>
@@ -217,9 +255,9 @@ class App extends Component {
             {this.renderMedia()}
             {this.renderActionsBar()}
           </div>
-          {this.renderUserList()}
-          {userlistIsOpen ? <div className={styles.userlistPad} /> : null}
-          {this.renderChat()}
+          {enableResize ? this.renderUserListResizable() : this.renderUserList()}
+          {userlistIsOpen && enableResize ? <div className={styles.userlistPad} /> : null}
+          {enableResize ? this.renderChatResizable() : this.renderChat()}
           {this.renderSidebar()}
         </section>
         <ModalContainer />