Merge pull request #885 from jitsi/add-raise-hand-toggle

Adds raise hand toggle state.

conference.js

     setRaisedHand(raisedHand) {
         if (raisedHand !== this.isHandRaised)
         {
+            APP.UI.onLocalRaiseHandChanged(raisedHand);
+
             this.isHandRaised = raisedHand;
             // Advertise the updated status
             room.setLocalParticipantProperty("raisedHand", raisedHand);

css/_toolbars.scss

     cursor: default;
 }
 
+.button.toggled {
+    color: $toolbarButtonToggled;
+}
+
 a.button.unclickable:hover,
 a.button.unclickable:active,
 a.button.unclickable.selected{

css/_variables.scss

 
 // Toolbar
 $toolbarSelectBackground: rgba(0, 0, 0, .6);
+$toolbarButtonToggled: #44A5FF;
 
 // Main controls
 $inputBackground: rgba(132, 132, 132, .5);

modules/UI/UI.js

     SettingsMenu.updateStartMutedBox(startAudioMuted, startVideoMuted);
 };
 
+/**
+ * Notifies interested listeners that the raise hand property has changed.
+ *
+ * @param {boolean} isRaisedHand indicates the current state of the
+ * "raised hand"
+ */
+UI.onLocalRaiseHandChanged = function (isRaisedHand) {
+    eventEmitter.emit(UIEvents.LOCAL_RAISE_HAND_CHANGED, isRaisedHand);
+};
+
 /**
  * Update list of available physical devices.
  * @param {object[]} devices new list of available devices

modules/UI/toolbars/Toolbar.js

                                                             isVisible);
             });
 
+        APP.UI.addListener(UIEvents.LOCAL_RAISE_HAND_CHANGED,
+            function(isRaisedHand) {
+                Toolbar._toggleRaiseHand(isRaisedHand);
+            });
+
         if(!APP.tokenData.isGuest) {
             $("#toolbar_button_profile").addClass("unclickable");
         }
         }
     },
 
+    /**
+     * 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

service/UI/UIEvents.js

      */
     SIDE_TOOLBAR_CONTAINER_TOGGLED: "UI.side_container_toggled",
 
+    /**
+     * Notifies that the raise hand has been changed.
+     */
+    LOCAL_RAISE_HAND_CHANGED: "UI.local_raise_hand_changed",
+
     /**
      * Notifies that the avatar is displayed or not on the largeVideo.
      */