From 4c9c5701c3cbeb42a4a42d8f7c9dbad8659ddb3a Mon Sep 17 00:00:00 2001
From: JaeeunCho <anna.jecho@gmail.com>
Date: Wed, 24 May 2017 15:42:02 -0700
Subject: [PATCH 1/3] HTML5 - fixed setting's dropdown re-render issue

---
 .../nav-bar/settings-dropdown/component.jsx   |  24 +++-
 .../nav-bar/settings-dropdown/container.jsx   | 118 +++++++++---------
 .../user-list/user-list-item/component.jsx    |   9 --
 3 files changed, 82 insertions(+), 69 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx b/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx
index 961625f114..0291444850 100755
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx
@@ -67,6 +67,25 @@ const intlMessages = defineMessages({
 class SettingsDropdown extends Component {
   constructor(props) {
     super(props);
+
+    this.state = {
+      isSettingOpen: false,
+    };
+
+    this.onActionsShow = this.onActionsShow.bind(this);
+    this.onActionsHide = this.onActionsHide.bind(this);
+  }
+
+  onActionsShow() {
+    this.setState({
+      isSettingOpen: true,
+    });
+  }
+
+  onActionsHide() {
+    this.setState({
+      isSettingOpen: false,
+    });
   }
 
   render() {
@@ -83,7 +102,10 @@ class SettingsDropdown extends Component {
     }
 
     return (
-      <Dropdown autoFocus={true}>
+      <Dropdown isOpen={this.state.isSettingOpen}
+                onShow={this.onActionsShow}
+                onHide={this.onActionsHide}
+                autoFocus={true}>
         <DropdownTrigger placeInTabOrder={true}>
           <Button
             label={intl.formatMessage(intlMessages.optionsLabel)}
diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/container.jsx b/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/container.jsx
index 4f264a959e..8fb15874c1 100755
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/container.jsx
@@ -1,59 +1,59 @@
-import React, { Component } from 'react';
-import SettingsDropdown from './component';
-import Service from './service';
-
-export default class SettingsDropdownContainer extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      isFullScreen: false,
-    };
-
-    this.handleFullscreenChange = this.handleFullscreenChange.bind(this);
-  }
-
-  componentDidMount() {
-    const fullscreenChangedEvents = ['fullscreenchange',
-                                    'webkitfullscreenchange',
-                                    'mozfullscreenchange',
-                                    'MSFullscreenChange',];
-
-    fullscreenChangedEvents.forEach(event =>
-      document.addEventListener(event, this.handleFullscreenChange));
-  }
-
-  componentWillUnmount() {
-    const fullscreenChangedEvents = ['fullscreenchange',
-                                    'webkitfullscreenchange',
-                                    'mozfullscreenchange',
-                                    'MSFullscreenChange',];
-
-    fullscreenChangedEvents.forEach(event =>
-      document.removeEventListener(event, this.fullScreenToggleCallback));
-  }
-
-  handleFullscreenChange() {
-    if (document.fullscreenElement
-      || document.webkitFullscreenElement
-      || document.mozFullScreenElement
-      || document.msFullscreenElement) {
-      this.setState({ isFullScreen: true });
-    } else {
-      this.setState({ isFullScreen: false });
-    }
-  }
-
-  render() {
-
-    const handleToggleFullscreen = Service.toggleFullScreen;
-    const isFullScreen = this.state.isFullScreen;
-
-    return (
-      <SettingsDropdown
-        handleToggleFullscreen={handleToggleFullscreen}
-        isFullScreen={isFullScreen}
-      />
-    );
-  }
-}
+import React, { Component } from 'react';
+import SettingsDropdown from './component';
+import Service from './service';
+
+export default class SettingsDropdownContainer extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isFullScreen: false,
+    };
+
+    this.handleFullscreenChange = this.handleFullscreenChange.bind(this);
+  }
+
+  componentDidMount() {
+    const fullscreenChangedEvents = ['fullscreenchange',
+                                    'webkitfullscreenchange',
+                                    'mozfullscreenchange',
+                                    'MSFullscreenChange', ];
+
+    fullscreenChangedEvents.forEach(event =>
+      document.addEventListener(event, this.handleFullscreenChange));
+  }
+
+  componentWillUnmount() {
+    const fullscreenChangedEvents = ['fullscreenchange',
+                                    'webkitfullscreenchange',
+                                    'mozfullscreenchange',
+                                    'MSFullscreenChange', ];
+
+    fullscreenChangedEvents.forEach(event =>
+      document.removeEventListener(event, this.fullScreenToggleCallback));
+  }
+
+  handleFullscreenChange() {
+    if (document.fullscreenElement
+      || document.webkitFullscreenElement
+      || document.mozFullScreenElement
+      || document.msFullscreenElement) {
+      this.setState({ isFullScreen: true });
+    } else {
+      this.setState({ isFullScreen: false });
+    }
+  }
+
+  render() {
+
+    const handleToggleFullscreen = Service.toggleFullScreen;
+    const isFullScreen = this.state.isFullScreen;
+
+    return (
+      <SettingsDropdown
+        handleToggleFullscreen={handleToggleFullscreen}
+        isFullScreen={isFullScreen}
+      />
+    );
+  }
+}
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx
index f7bdaf1ac7..a2e650d056 100755
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-item/component.jsx
@@ -83,15 +83,6 @@ const userNameSubTransition = {
 };
 
 class UserListItem extends Component {
-  componentDidMount() {
-    const { addEventListener } = window;
-    addEventListener('click', this.handleClickOutsideDropdown, false);
-  }
-
-  componentWillUnmount() {
-    const { removeEventListener } = window;
-    removeEventListener('click', this.handleClickOutsideDropdown, false);
-  }
 
   constructor(props) {
     super(props);

From 3702da3e08780cfcda2324fec597b2c2b0a6bbef Mon Sep 17 00:00:00 2001
From: Oswaldo Acauan <oswaldoacauan@gmail.com>
Date: Thu, 1 Jun 2017 14:24:29 +0000
Subject: [PATCH 2/3] Add check for min/max length for chat message

---
 .../imports/ui/components/chat/component.jsx  |   4 +
 .../imports/ui/components/chat/container.jsx  |   5 +-
 .../chat/message-form/component.jsx           | 118 +++++++++++-------
 .../components/chat/message-form/styles.scss  |  18 ++-
 .../imports/ui/components/chat/service.js     |   4 +-
 .../ui/stylesheets/variables/typography.scss  |   2 +-
 .../private/config/public/chat.yaml           |   2 +
 bigbluebutton-html5/private/locales/en.json   |   2 +
 8 files changed, 105 insertions(+), 50 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/chat/component.jsx b/bigbluebutton-html5/imports/ui/components/chat/component.jsx
index 6c1cec82e9..4de0c26492 100755
--- a/bigbluebutton-html5/imports/ui/components/chat/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/chat/component.jsx
@@ -35,6 +35,8 @@ class Chat extends Component {
       lastReadMessageTime,
       partnerIsLoggedOut,
       isChatLocked,
+      minMessageLength,
+      maxMessageLength,
       actions,
       intl,
     } = this.props;
@@ -81,6 +83,8 @@ class Chat extends Component {
           chatAreaId={ELEMENT_ID}
           chatTitle={title}
           chatName={chatName}
+          minMessageLength={minMessageLength}
+          maxMessageLength={maxMessageLength}
           handleSendMessage={actions.handleSendMessage}
         />
       </div>
diff --git a/bigbluebutton-html5/imports/ui/components/chat/container.jsx b/bigbluebutton-html5/imports/ui/components/chat/container.jsx
index e4705b2976..e114314e66 100755
--- a/bigbluebutton-html5/imports/ui/components/chat/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/chat/container.jsx
@@ -99,13 +99,14 @@ export default injectIntl(createContainer(({ params, intl }) => {
     partnerIsLoggedOut,
     isChatLocked,
     scrollPosition,
+    minMessageLength: CHAT_CONFIG.min_message_length,
+    maxMessageLength: CHAT_CONFIG.max_message_length,
     actions: {
-
       handleClosePrivateChat: chatID => ChatService.closePrivateChat(chatID),
 
       handleSendMessage: message => {
         ChatService.updateScrollPosition(chatID, null);
-        let sentMessage = ChatService.sendMessage(chatID, message);
+        return ChatService.sendMessage(chatID, message);
       },
 
       handleScrollUpdate: position => ChatService.updateScrollPosition(chatID, position),
diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx b/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx
index 030ffa9cbd..c839510da9 100755
--- a/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/chat/message-form/component.jsx
@@ -27,6 +27,12 @@ const messages = defineMessages({
     id: 'app.chat.inputPlaceholder',
     description: 'Chat message input placeholder',
   },
+  errorMinMessageLength: {
+    id: 'app.chat.errorMinMessageLength',
+  },
+  errorMaxMessageLength: {
+    id: 'app.chat.errorMaxMessageLength',
+  },
 });
 
 class MessageForm extends Component {
@@ -35,6 +41,8 @@ class MessageForm extends Component {
 
     this.state = {
       message: '',
+      error: '',
+      hasErrors: false,
     };
 
     this.handleMessageChange = this.handleMessageChange.bind(this);
@@ -44,7 +52,6 @@ class MessageForm extends Component {
   }
 
   handleMessageKeyDown(e) {
-
     //TODO Prevent send message pressing enter on mobile and/or virtual keyboard
     if (e.keyCode === 13 && !e.shiftKey) {
       e.preventDefault();
@@ -59,73 +66,98 @@ class MessageForm extends Component {
   }
 
   handleMessageChange(e) {
-    this.setState({ message: e.target.value });
+    const { intl } = this.props;
+
+    const message = e.target.value;
+    let error = '';
+
+    const { minMessageLength, maxMessageLength, } = this.props;
+
+    if (message.length < minMessageLength) {
+      error = intl.formatMessage(messages.errorMinMessageLength,
+        { 0: minMessageLength - message.length });
+    }
+
+    if (message.length > maxMessageLength) {
+      error = intl.formatMessage(messages.errorMaxMessageLength,
+        { 0: message.length - maxMessageLength });
+    }
+
+    this.setState({
+      message,
+      error,
+    });
   }
 
   handleSubmit(e) {
     e.preventDefault();
 
-    const { disabled } = this.props;
+    const { disabled, minMessageLength, maxMessageLength, } = this.props;
+    let message = this.state.message.trim();
 
-    if (disabled) {
+    if (disabled
+      || message.length === 0
+      || message.length < minMessageLength
+      || message.length > maxMessageLength) {
+      this.setState({ hasErrors: true, });
       return false;
     }
 
-    let message = this.state.message.trim();
-
     // Sanitize. See: http://shebang.brandonmintern.com/foolproof-html-escaping-in-javascript/
 
     let div = document.createElement('div');
     div.appendChild(document.createTextNode(message));
     message = div.innerHTML;
 
-    if (message) {
-      this.props.handleSendMessage(message);
-    }
-
-    this.setState({ message: '' });
+    return this.props.handleSendMessage(message)
+      .then(() => this.setState({
+        message: '',
+        hasErrors: false,
+      }));
   }
 
   render() {
-    const { intl, chatTitle, chatName, disabled } = this.props;
+    const { intl, chatTitle, chatName, disabled,
+      minMessageLength, maxMessageLength, } = this.props;
+
+    const { hasErrors, error } = this.state;
 
     return (
       <form
         ref="form"
         className={cx(this.props.className, styles.form)}
         onSubmit={this.handleSubmit}>
-        {
-          // <MessageFormActions
-          //   onClick={() => alert('Not supported yet...')}
-          //   className={styles.actions}
-          //   disabled={disabled}
-          //   label={'More actions'}
-          // />
-        }
-        <TextareaAutosize
-          className={styles.input}
-          id="message-input"
-          placeholder={intl.formatMessage(messages.inputPlaceholder, { 0: chatName })}
-          aria-controls={this.props.chatAreaId}
-          aria-label={intl.formatMessage(messages.inputLabel, { 0: chatTitle })}
-          autoCorrect="off"
-          autoComplete="off"
-          spellCheck="true"
-          disabled={disabled}
-          value={this.state.message}
-          onChange={this.handleMessageChange}
-          onKeyDown={this.handleMessageKeyDown}
-        />
-        <Button
-          className={styles.sendButton}
-          aria-label={intl.formatMessage(messages.submitLabel)}
-          type="submit"
-          disabled={disabled}
-          label={intl.formatMessage(messages.submitLabel)}
-          hideLabel={true}
-          icon={"send"}
-          onClick={()=>{}}
+        <div className={styles.wrapper}>
+          <TextareaAutosize
+            className={styles.input}
+            id="message-input"
+            placeholder={intl.formatMessage(messages.inputPlaceholder, { 0: chatName })}
+            aria-controls={this.props.chatAreaId}
+            aria-label={intl.formatMessage(messages.inputLabel, { 0: chatTitle })}
+            aria-invalid={ hasErrors ? 'true' : 'false' }
+            aria-describedby={ hasErrors ? 'message-input-error' : null }
+            autoCorrect="off"
+            autoComplete="off"
+            spellCheck="true"
+            disabled={disabled}
+            value={this.state.message}
+            onChange={this.handleMessageChange}
+            onKeyDown={this.handleMessageKeyDown}
           />
+          <Button
+            className={styles.sendButton}
+            aria-label={intl.formatMessage(messages.submitLabel)}
+            type="submit"
+            disabled={disabled}
+            label={intl.formatMessage(messages.submitLabel)}
+            hideLabel={true}
+            icon="send"
+            onClick={() => null}
+          />
+        </div>
+        <div className={styles.info}>
+          { hasErrors ? <span id="message-input-error">{error}</span> : null }
+        </div>
       </form>
     );
   }
diff --git a/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss b/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss
index a75cdfd355..9fbc08f17b 100644
--- a/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss
@@ -4,9 +4,14 @@
   flex-grow: 0;
   flex-shrink: 0;
   align-self: flex-end;
+  width: 100%;
+  position: relative;
+  margin-bottom: -$sm-padding-x;
+}
+
+.wrapper {
   display: flex;
   flex-direction: row;
-  width: 100%;
 }
 
 .actions {
@@ -72,3 +77,14 @@
     color: $color-gray-light;
   }
 }
+
+.info {
+  font-size: $font-size-base * .75;
+  color: $color-gray-light;
+  text-align: right;
+  padding: $border-size 0;
+
+  &:before {
+    content: "\00a0"; // non-breaking space
+  }
+}
diff --git a/bigbluebutton-html5/imports/ui/components/chat/service.js b/bigbluebutton-html5/imports/ui/components/chat/service.js
index 102ea702b8..ab51bce2aa 100755
--- a/bigbluebutton-html5/imports/ui/components/chat/service.js
+++ b/bigbluebutton-html5/imports/ui/components/chat/service.js
@@ -192,9 +192,7 @@ const sendMessage = (receiverID, message) => {
     Storage.setItem(CLOSED_CHAT_LIST_KEY, _.without(currentClosedChats, receiver.id));
   }
 
-  makeCall('sendChat', messagePayload);
-
-  return messagePayload;
+  return makeCall('sendChat', messagePayload);
 };
 
 const getScrollPosition = (receiverID) => {
diff --git a/bigbluebutton-html5/imports/ui/stylesheets/variables/typography.scss b/bigbluebutton-html5/imports/ui/stylesheets/variables/typography.scss
index 4340296f1b..4cfc353281 100644
--- a/bigbluebutton-html5/imports/ui/stylesheets/variables/typography.scss
+++ b/bigbluebutton-html5/imports/ui/stylesheets/variables/typography.scss
@@ -8,7 +8,7 @@ $font-size-base:          1rem !default;
 $font-size-large:         1.25rem !default;
 $font-size-small:         .875rem !default;
 
-$line-height-base:        1.428571429 !default; // 20/14
+$line-height-base:        1.25 !default; // 20/16
 $line-height-computed:    floor(($font-size-base * $line-height-base)) !default;
 
 $headings-font-family:    inherit !default;
diff --git a/bigbluebutton-html5/private/config/public/chat.yaml b/bigbluebutton-html5/private/config/public/chat.yaml
index 2ae01424b0..277ff5842d 100755
--- a/bigbluebutton-html5/private/config/public/chat.yaml
+++ b/bigbluebutton-html5/private/config/public/chat.yaml
@@ -1,5 +1,7 @@
 # Chat service configurations
 chat:
+  min_message_length: 1
+  max_message_length: 5000
   grouping_messages_window: 60000
   # Chat types
   type_system: 'SYSTEM_MESSAGE'
diff --git a/bigbluebutton-html5/private/locales/en.json b/bigbluebutton-html5/private/locales/en.json
index 25ca747596..a230255393 100755
--- a/bigbluebutton-html5/private/locales/en.json
+++ b/bigbluebutton-html5/private/locales/en.json
@@ -10,6 +10,8 @@
   "app.chat.submitLabel": "Send Message",
   "app.chat.inputLabel": "Message input for chat {0}",
   "app.chat.inputPlaceholder": "Message {0}",
+  "app.chat.errorMinMessageLength": "The message is {0} characters(s) too short",
+  "app.chat.errorMaxMessageLength": "The message is {0} characters(s) too long",
   "app.chat.titlePublic": "Public Chat",
   "app.chat.titlePrivate": "Private Chat with {0}",
   "app.chat.partnerDisconnected": "{0} has left the meeting",

From 510288bfe1c9f091f9b7f0a7bb5e354264ce1bee Mon Sep 17 00:00:00 2001
From: JaeeunCho <anna.jecho@gmail.com>
Date: Thu, 1 Jun 2017 13:13:14 -0700
Subject: [PATCH 3/3] HTML5 - added new line at the end of the file

---
 .../ui/components/nav-bar/settings-dropdown/container.jsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/container.jsx b/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/container.jsx
index e1686e847d..8906f5679d 100755
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/container.jsx
@@ -60,4 +60,4 @@ export default class SettingsDropdownContainer extends Component {
       />
     );
   }
-}
\ No newline at end of file
+}