Merge pull request #3171 from oswaldoacauan/feature-chat-2

User List Sorting & Chat Lock

bigbluebutton-html5/imports/locales/en.json

@@ -5,5 +5,8 @@
   "app.userlist.presenter": "Presenter",
   "app.userlist.you": "You",
   "app.chat.submitLabel": "Send Message",
-  "app.chat.inputLabel": "Message input for chat {name}"
+  "app.chat.inputLabel": "Message input for chat {name}",
+  "app.chat.titlePublic": "Public Chat",
+  "app.chat.titlePrivate": "Private Chat with {name}",
+  "app.chat.partnerDisconnected": "{name} has left the meeting"
 }

bigbluebutton-html5/imports/locales/pt-BR.json

@@ -5,5 +5,8 @@
   "app.userlist.presenter": "Apresentador",
   "app.userlist.you": "Você",
   "app.chat.submitLabel": "Enviar Mensagem",
-  "app.chat.inputLabel": "Campo de mensagem para conversa {name}"
+  "app.chat.inputLabel": "Campo de mensagem para conversa {name}",
+  "app.chat.titlePublic": "Conversa Publíca",
+  "app.chat.titlePrivate": "Conversa Privada com {name}",
+  "app.chat.partnerDisconnected": "{name} saiu da sala"
 }

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

@@ -17,6 +17,7 @@ export default class Chat extends Component {
     const {
       title,
       messages,
+      isChatLocked,
       actions,
     } = this.props;
 
@@ -36,6 +37,7 @@ export default class Chat extends Component {
           aria-relevant="additions"
         />
         <MessageForm
+          disabled={isChatLocked}
           chatAreaId={ELEMENT_ID}
           chatTitle={title}
           handleSendMessage={actions.handleSendMessage}

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

@@ -1,11 +1,30 @@
 import React, { Component, PropTypes } from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
 import { createContainer } from 'meteor/react-meteor-data';
 
 import Chat from './component';
 import ChatService from './service';
 
 const PUBLIC_CHAT_KEY = 'public';
 
+const intlMessages = defineMessages({
+  titlePublic: {
+    id: 'app.chat.titlePublic',
+    defaultMessage: 'Public Chat',
+    description: 'Public chat title',
+  },
+  titlePrivate: {
+    id: 'app.chat.titlePrivate',
+    defaultMessage: 'Private Chat with {name}',
+    description: 'Private chat title',
+  },
+  partnerDisconnected: {
+    id: 'app.chat.partnerDisconnected',
+    defaultMessage: '{name} has left the meeting',
+    description: 'System chat message when the private chat partnet disconnect from the meeting',
+  },
+});
+
 class ChatContainer extends Component {
   constructor(props) {
     super(props);
@@ -20,24 +39,39 @@ class ChatContainer extends Component {
   }
 }
 
-export default createContainer(({ params }) => {
+export default injectIntl(createContainer(({ params, intl }) => {
   const chatID = params.chatID || PUBLIC_CHAT_KEY;
 
   let messages = [];
+  let isChatLocked = ChatService.isChatLocked(chatID);
 
   if (chatID === PUBLIC_CHAT_KEY) {
     messages = ChatService.getPublicMessages();
-    title = 'Public';
+    title = intl.formatMessage(intlMessages.titlePublic);
   } else {
     messages = ChatService.getPrivateMessages(chatID);
-    title = ChatService.getChatTitle(chatID);
+    let user = ChatService.getUser(chatID);
+
+    if (user) {
+      title = intl.formatMessage(intlMessages.titlePrivate, { name: user.name });
+    } else {
+      // let partnerName = messages.find(m => m.user && m.user.id === chatID).map(m => m.user.name);
+      let partnerName = '{{NAME}}'; // placeholder until the server sends the name
+      messages.push({
+        content: [intl.formatMessage(intlMessages.partnerDisconnected, { name: partnerName })],
+        time: Date.now(),
+        sender: null,
+      });
+      isChatLocked = true;
+    }
   }
 
   return {
     title,
     messages,
+    isChatLocked,
     actions: {
       handleSendMessage: message => ChatService.sendMessage(chatID, message),
     },
   };
-}, ChatContainer);
+}, ChatContainer));

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

@@ -4,7 +4,7 @@ import { findDOMNode } from 'react-dom';
 import cx from 'classnames';
 import styles from './styles';
 
-import Button from '../../button/component';
+import MessageFormActions from './message-form-actions/component';
 import TextareaAutosize from 'react-autosize-textarea';
 
 const propTypes = {
@@ -55,6 +55,12 @@ class MessageForm extends Component {
   handleSubmit(e) {
     e.preventDefault();
 
+    const { disabled } = this.props;
+
+    if (disabled) {
+      return false;
+    }
+
     let message = this.state.message.trim();
 
     // Sanitize. See: http://shebang.brandonmintern.com/foolproof-html-escaping-in-javascript/
@@ -72,22 +78,19 @@ class MessageForm extends Component {
   }
 
   render() {
-    const { intl, chatTitle } = this.props;
+    const { intl, chatTitle, disabled } = this.props;
 
     return (
       <form
         {...this.props}
         ref="form"
         className={cx(this.props.className, styles.form)}
         onSubmit={this.handleSubmit}>
-        <div className={styles.actions}>
-          <Button
-            onClick={() => alert('Not supported yet...')}
-            icon={'circle-add'}
-            size={'sm'}
-            circle={true}
-          />
-        </div>
+        <MessageFormActions
+          onClick={() => alert('Not supported yet...')}
+          className={styles.actions}
+          disabled={disabled}
+        />
         <TextareaAutosize
           className={styles.input}
           id="message-input"
@@ -97,6 +100,7 @@ class MessageForm extends Component {
           autocorrect="off"
           autocomplete="off"
           spellcheck="true"
+          disabled={disabled}
           value={this.state.message}
           onChange={this.handleMessageChange}
           onKeyUp={this.handleMessageKeyUp}
@@ -105,6 +109,7 @@ class MessageForm extends Component {
           ref="btnSubmit"
           className={'sr-only'}
           type="submit"
+          disabled={disabled}
           value={ intl.formatMessage(messages.submitLabel) }
         />
       </form>

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

@@ -0,0 +1,30 @@
+import React, { PropTypes } from 'react';
+import styles from './styles';
+
+import Icon from '../../../icon/component';
+import BaseButton from '../../../button/base/component';
+
+const propTypes = {
+  ...BaseButton.propTypes,
+};
+
+const defaultProps = {
+  ...BaseButton.defaultProps,
+};
+
+export default class MessageFormActions extends BaseButton {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <BaseButton {...this.props}>
+        <Icon iconName={'circle-add'} />
+      </BaseButton>
+    );
+  }
+};
+
+MessageFormActions.propTypes = propTypes;
+MessageFormActions.defaultProps = defaultProps;

bigbluebutton-html5/imports/ui/components/chat/message-form/message-form-actions/styles.scss

@@ -0,0 +1 @@
+@import "imports/ui/stylesheets/variables/_all";

bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss

@@ -18,8 +18,22 @@
   border: $border-size solid $color-gray-lighter;
   background: #fff;
   border-radius: $border-radius 0 0 $border-radius;
-  color: $color-gray-lighter;
+  color: $color-gray-light;
   padding: $sm-padding-y $sm-padding-x;
+  transition: background .3s;
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    background-color: fade-out($color-gray-lighter, .75);
+  }
+
+  &:disabled,
+  &[disabled] {
+    cursor: not-allowed;
+    opacity: .75;
+    background-color: fade-out($color-gray-lighter, .75);
+  }
 }
 
 .input {
@@ -33,11 +47,18 @@
   -webkit-appearance: none;
   box-shadow: none;
   outline: 0;
-  padding: $sm-padding-y $sm-padding-x;
+  padding: $sm-padding-y*2 $sm-padding-x;
   resize: none;
   transition: none;
   border-radius: 0 $border-radius $border-radius 0;
   font-size: $font-size-base * .90;
   min-height: 4rem;
   max-height: 10rem;
+
+  &:disabled,
+  &[disabled] {
+    cursor: not-allowed;
+    opacity: .75;
+    background-color: fade-out($color-gray-lighter, .75);
+  }
 }

bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss

@@ -46,6 +46,7 @@
   min-width: 0;
   font-weight: 600;
   color: $color-gray;
+  text-transform: capitalize;
 
   > span {
     @extend %text-elipsis;

bigbluebutton-html5/imports/ui/components/chat/message-list/styles.scss

@@ -9,5 +9,6 @@
   flex-shrink: 1;
   margin-right: -$line-height-computed;
   padding-right: $line-height-computed;
+  padding-top: $line-height-computed;
   padding-bottom: $line-height-computed;
 }

bigbluebutton-html5/imports/ui/components/chat/service.js

@@ -1,5 +1,7 @@
 import Chats from '/imports/api/chat';
 import Users from '/imports/api/users';
+import Meetings from '/imports/api/meetings';
+
 import Auth from '/imports/ui/services/auth';
 
 import { callServer } from '/imports/ui/services/api';
@@ -24,6 +26,7 @@ const mapUser = (user) => ({
   isMuted: user.voiceUser.muted,
   isListenOnly: user.listenOnly,
   isSharingWebcam: user.webcam_stream.length,
+  isLocked: user.locked,
 });
 
 const mapMessage = (message) => {
@@ -65,7 +68,7 @@ const getUser = (userID) => {
   if (user) {
     return mapUser(user.user);
   } else {
-    throw `User ${userID} not found`;
+    return null;
   }
 };
 
@@ -102,9 +105,21 @@ const getPrivateMessages = (userID) => {
     .reduce(reduceMessages, []);
 };
 
-const getChatTitle = (userID) => {
-  const user = getUser(userID);
-  return user.name;
+const isChatLocked = (receiverID) => {
+  const isPublic = receiverID === PUBLIC_CHAT_ID;
+  const currentUser = getUser(Auth.getUser());
+  const meeting = Meetings.findOne({});
+
+  const lockSettings = meeting.roomLockSettings || {
+    disablePublicChat: false,
+    disablePrivateChat: false,
+  };
+
+  if (!currentUser.isLocked || currentUser.isPresenter) {
+    return false;
+  }
+
+  return isPublic ? lockSettings.disablePublicChat : lockSettings.disablePrivateChat;
 };
 
 const sendMessage = (receiverID, message) => {
@@ -139,6 +154,7 @@ const sendMessage = (receiverID, message) => {
 export default {
   getPublicMessages,
   getPrivateMessages,
-  getChatTitle,
+  getUser,
+  isChatLocked,
   sendMessage,
 };

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

@@ -10,6 +10,7 @@
 
 .closeChat {
   text-decoration: none;
+  text-transform: capitalize;
 }
 
 .header {

bigbluebutton-html5/imports/ui/components/user-list/container.jsx

@@ -16,7 +16,6 @@ class UserListContainer extends Component {
   }
 }
 
-export default createContainer(() => {
-  const data = Service.mapUsers();
-  return data;
-}, UserListContainer);
+export default createContainer(() => ({
+  users: Service.getUsers(),
+}), UserListContainer);