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

Adds raise hand toggle state.

conference.js

@@ -1648,6 +1648,8 @@ export default {
     setRaisedHand(raisedHand) {
         if (raisedHand !== this.isHandRaised)
         {
+            APP.UI.onLocalRaiseHandChanged(raisedHand);
+
             this.isHandRaised = raisedHand;
             // Advertise the updated status
             room.setLocalParticipantProperty("raisedHand", raisedHand);

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{

css/_variables.scss

@@ -25,6 +25,7 @@ $defaultBackground: #474747;
 
 // Toolbar
 $toolbarSelectBackground: rgba(0, 0, 0, .6);
+$toolbarButtonToggled: #44A5FF;
 
 // Main controls
 $inputBackground: rgba(132, 132, 132, .5);

modules/UI/UI.js

@@ -1211,6 +1211,16 @@ UI.onStartMutedChanged = function (startAudioMuted, startVideoMuted) {
     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

@@ -400,6 +400,11 @@ const Toolbar = {
                                                             isVisible);
             });
 
+        APP.UI.addListener(UIEvents.LOCAL_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

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.
+     */
+    LOCAL_RAISE_HAND_CHANGED: "UI.local_raise_hand_changed",
+
     /**
      * Notifies that the avatar is displayed or not on the largeVideo.
      */