From 1853fa6fae26424486348088748407af993655ac Mon Sep 17 00:00:00 2001
From: yanas <yana@jitsi.org>
Date: Fri, 16 Sep 2016 00:09:26 -0500
Subject: [PATCH] Adds raise hand toggle state.

---
 conference.js                  |  2 ++
 css/_toolbars.scss             |  4 ++++
 css/_variables.scss            |  1 +
 modules/UI/UI.js               |  4 ++++
 modules/UI/toolbars/Toolbar.js | 12 ++++++++++++
 service/UI/UIEvents.js         |  5 +++++
 6 files changed, 28 insertions(+)

diff --git a/conference.js b/conference.js
index c586953f1..4d3eece68 100644
--- a/conference.js
+++ b/conference.js
@@ -1648,6 +1648,8 @@ export default {
     setRaisedHand(raisedHand) {
         if (raisedHand !== this.isHandRaised)
         {
+            APP.UI.onRaiseHandChanged(raisedHand);
+
             this.isHandRaised = raisedHand;
             // Advertise the updated status
             room.setLocalParticipantProperty("raisedHand", raisedHand);
diff --git a/css/_toolbars.scss b/css/_toolbars.scss
index 2e1675533..23489bb73 100644
--- a/css/_toolbars.scss
+++ b/css/_toolbars.scss
@@ -118,6 +118,10 @@
     cursor: default;
 }
 
+.button.toggled {
+    color: $toolbarButtonToggled;
+}
+
 a.button.unclickable:hover,
 a.button.unclickable:active,
 a.button.unclickable.selected{
diff --git a/css/_variables.scss b/css/_variables.scss
index a2f3f9416..71b8145dd 100644
--- a/css/_variables.scss
+++ b/css/_variables.scss
@@ -25,6 +25,7 @@ $defaultBackground: #474747;
 
 // Toolbar
 $toolbarSelectBackground: rgba(0, 0, 0, .6);
+$toolbarButtonToggled: #0091EA;
 
 // Main controls
 $inputBackground: rgba(132, 132, 132, .5);
diff --git a/modules/UI/UI.js b/modules/UI/UI.js
index a79d3d7d9..082c9e828 100644
--- a/modules/UI/UI.js
+++ b/modules/UI/UI.js
@@ -1211,6 +1211,10 @@ UI.onStartMutedChanged = function (startAudioMuted, startVideoMuted) {
     SettingsMenu.updateStartMutedBox(startAudioMuted, startVideoMuted);
 };
 
+UI.onRaiseHandChanged = function (isRaiseHand) {
+    eventEmitter.emit(UIEvents.RAISE_HAND_CHANGED, isRaiseHand);
+};
+
 /**
  * Update list of available physical devices.
  * @param {object[]} devices new list of available devices
diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js
index 258e787a7..344bacb51 100644
--- a/modules/UI/toolbars/Toolbar.js
+++ b/modules/UI/toolbars/Toolbar.js
@@ -400,6 +400,11 @@ const Toolbar = {
                                                             isVisible);
             });
 
+        APP.UI.addListener(UIEvents.RAISE_HAND_CHANGED,
+            function(isRaisedHand) {
+                Toolbar._toggleRaiseHand(isRaisedHand);
+            });
+
         if(!APP.tokenData.isGuest) {
             $("#toolbar_button_profile").addClass("unclickable");
         }
@@ -565,6 +570,13 @@ const Toolbar = {
         }
     },
 
+    /**
+     * Toggles / untoggles the view for raised hand.
+     */
+    _toggleRaiseHand(isRaisedHand) {
+        $('#toolbar_button_raisehand').toggleClass("toggled", isRaisedHand);
+    },
+
     /**
      * Marks video icon as muted or not.
      * @param {boolean} muted if icon should look like muted or not
diff --git a/service/UI/UIEvents.js b/service/UI/UIEvents.js
index fbe5679bb..7d5c95d4b 100644
--- a/service/UI/UIEvents.js
+++ b/service/UI/UIEvents.js
@@ -107,6 +107,11 @@ export default {
      */
     SIDE_TOOLBAR_CONTAINER_TOGGLED: "UI.side_container_toggled",
 
+    /**
+     * Notifies that the raise hand has been changed.
+     */
+    RAISE_HAND_CHANGED: "UI.raise_hand_changed",
+
     /**
      * Notifies that the avatar is displayed or not on the largeVideo.
      */