From 126b28d43259b76372ad885f28c1bea53b51b1bf Mon Sep 17 00:00:00 2001
From: gcampes <gabrieldecampes@gmail.com>
Date: Tue, 5 Apr 2016 11:24:48 -0300
Subject: [PATCH] Adds emoji status icons to the react user list component

---
 .../imports/react/components/EmojiIcon.jsx    | 76 +++++++++++++++++++
 .../components/UserList/UserListItem.jsx      |  7 ++
 2 files changed, 83 insertions(+)
 create mode 100644 bigbluebutton-html5/client/imports/react/components/EmojiIcon.jsx

diff --git a/bigbluebutton-html5/client/imports/react/components/EmojiIcon.jsx b/bigbluebutton-html5/client/imports/react/components/EmojiIcon.jsx
new file mode 100644
index 0000000000..e580321a54
--- /dev/null
+++ b/bigbluebutton-html5/client/imports/react/components/EmojiIcon.jsx
@@ -0,0 +1,76 @@
+import classNames from 'classnames';
+
+const { PropTypes } = React;
+
+export let EmojiIcon = React.createClass({
+  propTypes: {
+    iconName: PropTypes.string.isRequired,
+  },
+
+  render() {
+    return this.renderIcon();
+  },
+
+  renderIcon() {
+    if(this.props.iconName === 'raiseHand') {
+      return (<i className={classNames(this.props.className, 'ion-android-hand')}></i>);
+    }
+    else if(this.props.iconName === 'happy') {
+      return (
+        <svg width="25" height="25" viewBox="0 0 50 50">
+          <circle cx="25" cy="25" r="14" stroke="white" strokeWidth="3" fill="transparent"/>
+          <circle cx="19" cy="22" r="1" stroke="white" strokeWidth="2" fill="white"/>
+          <circle cx="31" cy="22" r="1" stroke="white" strokeWidth="2" fill="white"/>
+          <path d="m18 30 C 21 33, 29 33, 32 30" stroke="white" strokeWidth="3" strokeLinecap="round" stroke-linejoin="round" fill="none" />
+        </svg>
+      )
+    }
+    else if(this.props.iconName === 'neutral') {
+      return (
+        <svg width="25" height="25" viewBox="0 0 50 50">
+          <circle cx="25" cy="25" r="14" stroke="white" strokeWidth="3" fill="transparent"/>
+          <circle cx="19" cy="22" r="1" stroke="white" strokeWidth="2" fill="white"/>
+          <circle cx="31" cy="22" r="1" stroke="white" strokeWidth="2" fill="white"/>
+          <path d="m18 30 l 14 0" stroke="white" strokeWidth="3" strokeLinecap="round" stroke-linejoin="round" />
+        </svg>
+      )
+    }
+    else if(this.props.iconName === 'confused') {
+      return (
+        <svg width="25" height="25" viewBox="0 0 50 50">
+          <circle cx="25" cy="25" r="14" stroke="white" strokeWidth="3" fill="transparent"/>
+          <circle cx="19" cy="22" r="1" stroke="white" strokeWidth="2" fill="white"/>
+          <circle cx="31" cy="22" r="1" stroke="white" strokeWidth="2" fill="white"/>
+          <path d="M18 30 C 20 28, 22 28, 25 30 S 30 32, 32 30" stroke="white" strokeWidth="3" strokeLinecap="round" stroke-linejoin="round" />
+        </svg>
+      )
+    }
+    else if(this.props.iconName === 'sad') {
+      return (
+        <svg width="25" height="25" viewBox="0 0 50 50">
+          <circle cx="25" cy="25" r="14" stroke="white" strokeWidth="3" fill="transparent"/>
+          <circle cx="19" cy="22" r="1" stroke="white" strokeWidth="2" fill="white"/>
+          <circle cx="31" cy="22" r="1" stroke="white" strokeWidth="2" fill="white"/>
+          <path d="m18 30 C 21 27, 29 27, 32 30" stroke="white" strokeWidth="3" strokeLinecap="round" stroke-linejoin="round" fill="none" />
+        </svg>
+      )
+    }
+    else if(this.props.iconName === 'away') {
+      return (
+        <svg width="25" height="25" viewBox="0 0 50 50">
+          <circle cx="25" cy="25" r="14" stroke="white" strokeWidth="3" fill="transparent"/>
+          <path d="m25 25 l 0 -8" stroke="white" strokeWidth="3" strokeLinecap="round" stroke-linejoin="round" />
+          <path d="m25 25 l 5 5" stroke="white" strokeWidth="3" strokeLinecap="round" stroke-linejoin="round" />
+        </svg>
+      )
+    }
+    else if(this.props.iconName === 'plus') {
+      return (
+        <svg width="25" height="25" viewBox="0 0 50 50">
+          <path d="m25 18 l 0 14" stroke="white" strokeWidth="3" strokeLinecap="round" stroke-linejoin="round" />
+          <path d="m18 25 l 14 0" stroke="white" strokeWidth="3" strokeLinecap="round" stroke-linejoin="round" />
+        </svg>
+      )
+    }
+  },
+});
diff --git a/bigbluebutton-html5/client/imports/react/components/UserList/UserListItem.jsx b/bigbluebutton-html5/client/imports/react/components/UserList/UserListItem.jsx
index dd9196ae97..77d1c62f54 100755
--- a/bigbluebutton-html5/client/imports/react/components/UserList/UserListItem.jsx
+++ b/bigbluebutton-html5/client/imports/react/components/UserList/UserListItem.jsx
@@ -1,5 +1,6 @@
 import {Button} from '../Button.jsx';
 import {Icon} from '../Icon.jsx';
+import {EmojiIcon} from '../EmojiIcon.jsx';
 import {Tooltip} from '../Tooltip.jsx';
 import classNames from 'classnames';
 
@@ -41,6 +42,12 @@ export let UserListItem = React.createClass({
     const user = this.props.user;
     let statusIcons = [];
 
+    if(user.emoji !== 'none' && !user.isPresenter) {
+      statusIcons.push((
+        <EmojiIcon key="1" iconName={user.emoji}/>
+      ));
+    }
+
     if (this.props.currentUser.isModerator && !user.isPresenter) {
       statusIcons.push((
         <Icon key="1" iconName="projection-screen" onClick={this.handleSetPresenter.bind(this, user)} title={`Set ${user.name} as presenter`}/>