Merge branch 'restyle-toggle-state'

conference.js

@@ -579,11 +579,11 @@ export default {
                 // if user didn't give access to mic or camera or doesn't have
                 // them at all, we disable corresponding toolbar buttons
                 if (!tracks.find((t) => t.isAudioTrack())) {
-                    APP.UI.disableMicrophoneButton();
+                    APP.UI.setMicrophoneButtonEnabled(false);
                 }
 
                 if (!tracks.find((t) => t.isVideoTrack())) {
-                    APP.UI.disableCameraButton();
+                    APP.UI.setCameraButtonEnabled(false);
                 }
 
                 this._initDeviceList();
@@ -966,7 +966,8 @@ export default {
 
                 APP.UI.addLocalStream(stream);
 
-                stream.videoType === 'camera' && APP.UI.enableCameraButton();
+                stream.videoType === 'camera'
+                    && APP.UI.setCameraButtonEnabled(true);
             } else {
                 this.videoMuted = false;
                 this.isSharingScreen = false;
@@ -1006,7 +1007,7 @@ export default {
                 this.audioMuted = false;
             }
 
-            APP.UI.enableMicrophoneButton();
+            APP.UI.setMicrophoneButtonEnabled(true);
             APP.UI.setAudioMuted(this.getMyUserId(), this.audioMuted);
         });
     },

css/_base.scss

@@ -81,10 +81,6 @@ form {
     display: block;
 }
 
-.active {
-    background-color: #00ccff;
-}
-
 .watermark {
     display: block;
     position: absolute;

css/_toolbars.scss

@@ -42,7 +42,7 @@
     margin-left: auto;
     margin-right: auto;
     width: auto;
-    border-radius: 4px;
+    border-radius: 3px;
 
     .first {
         border-bottom-left-radius: 4px;
@@ -111,9 +111,8 @@
     cursor: default;
 }
 
-.button.glow
-{
-    text-shadow: 0px 0px 5px $toolbarToggleBackground;
+.button.toggled {
+    background: $toolbarToggleBackground !important;
 }
 
 a.button.unclickable:hover,

css/_variables.scss

@@ -30,7 +30,7 @@ $toolbarSelectBackground: rgba(0, 0, 0, .6);
 
 $toolbarBadgeBackground: #165ECC;
 $toolbarBadgeColor: #FFFFFF;
-$toolbarToggleBackground: #165ECC;
+$toolbarToggleBackground: #12499C;
 
 // Main controls
 $inputBackground: rgba(132, 132, 132, .5);

modules/UI/UI.js

@@ -820,7 +820,7 @@ UI.askForNickname = function () {
 UI.setAudioMuted = function (id, muted) {
     VideoLayout.onAudioMute(id, muted);
     if (APP.conference.isLocalId(id)) {
-        Toolbar.markAudioIconAsMuted(muted);
+        Toolbar.toggleAudioIcon(muted);
     }
 };
 
@@ -830,7 +830,7 @@ UI.setAudioMuted = function (id, muted) {
 UI.setVideoMuted = function (id, muted) {
     VideoLayout.onVideoMute(id, muted);
     if (APP.conference.isLocalId(id)) {
-        Toolbar.markVideoIconAsMuted(muted);
+        Toolbar.toggleVideoIcon(muted);
     }
 };
 
@@ -1459,31 +1459,23 @@ UI.onSharedVideoStop = function (id, attributes) {
 };
 
 /**
- * Disables camera toolbar button.
- */
-UI.disableCameraButton = function () {
-    Toolbar.markVideoIconAsDisabled(true);
-};
-
-/**
- * Enables camera toolbar button.
- */
-UI.enableCameraButton = function () {
-    Toolbar.markVideoIconAsDisabled(false);
-};
-
-/**
- * Disables microphone toolbar button.
+ * Enables / disables camera toolbar button.
+ *
+ * @param {boolean} enabled indicates if the camera button should be enabled
+ * or disabled
  */
-UI.disableMicrophoneButton = function () {
-    Toolbar.markAudioIconAsDisabled(true);
+UI.setCameraButtonEnabled = function (enabled) {
+    Toolbar.setVideoIconEnabled(enabled);
 };
 
 /**
- * Enables microphone toolbar button.
+ * Enables / disables microphone toolbar button.
+ *
+ * @param {boolean} enabled indicates if the microphone button should be
+ * enabled or disabled
  */
-UI.enableMicrophoneButton = function () {
-    Toolbar.markAudioIconAsDisabled(false);
+UI.setMicrophoneButtonEnabled = function (enabled) {
+    Toolbar.setAudioIconEnabled(enabled);
 };
 
 UI.showRingOverLay = function () {

modules/UI/recording/Recording.js

@@ -422,7 +422,6 @@ var Recording = {
      * @param recordingState gives us the current recording state
      */
     updateRecordingUI (recordingState) {
-        let buttonSelector = $('#toolbar_button_record');
 
         let oldState = this.currentState;
         this.currentState = recordingState;
@@ -431,8 +430,7 @@ var Recording = {
         if (recordingState === Status.ON ||
             recordingState === Status.RETRYING) {
 
-            buttonSelector.removeClass(this.baseClass);
-            buttonSelector.addClass(this.baseClass + " active");
+            this._setToolbarButtonToggled(true);
 
             this._updateStatusLabel(this.recordingOnKey, false);
         }
@@ -447,8 +445,7 @@ var Recording = {
                 && !isStartingStatus(oldState))
                 return;
 
-            buttonSelector.removeClass(this.baseClass + " active");
-            buttonSelector.addClass(this.baseClass);
+            this._setToolbarButtonToggled(false);
 
             let messageKey;
             if (isStartingStatus(oldState))
@@ -464,15 +461,14 @@ var Recording = {
         }
         else if (recordingState === Status.PENDING) {
 
-            buttonSelector.removeClass(this.baseClass + " active");
-            buttonSelector.addClass(this.baseClass);
+            this._setToolbarButtonToggled(false);
 
             this._updateStatusLabel(this.recordingPendingKey, true);
         }
         else if (recordingState === Status.ERROR
                     || recordingState === Status.FAILED) {
-            buttonSelector.removeClass(this.baseClass + " active");
-            buttonSelector.addClass(this.baseClass);
+
+            this._setToolbarButtonToggled(false);
 
             this._updateStatusLabel(this.recordingErrorKey, true);
         }
@@ -513,6 +509,16 @@ var Recording = {
 
         labelTextSelector.attr("data-i18n", textKey);
         labelTextSelector.text(APP.translation.translateString(textKey));
+    },
+
+    /**
+     * Sets the toggled state of the recording toolbar button.
+     *
+     * @param {boolean} isToggled indicates if the button should be toggled
+     * or not
+     */
+    _setToolbarButtonToggled(isToggled) {
+        $("#toolbar_button_record").toggleClass("toggled", isToggled);
     }
 };
 

modules/UI/toolbars/Toolbar.js

@@ -413,14 +413,14 @@ const Toolbar = {
         );
 
         APP.UI.addListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
-            function(containerId, isVisible) {
+            (containerId, isVisible) => {
                 Toolbar._handleSideToolbarContainerToggled( containerId,
                                                             isVisible);
             });
 
         APP.UI.addListener(UIEvents.LOCAL_RAISE_HAND_CHANGED,
-            function(isRaisedHand) {
-                Toolbar._toggleRaiseHand(isRaisedHand);
+            (isRaisedHand) => {
+                this._setToggledState("toolbar_button_raisehand", isRaisedHand);
             });
 
         if(!APP.tokenData.isGuest) {
@@ -582,82 +582,97 @@ const Toolbar = {
      * streaming is active.
      */
     updateDesktopSharingButtonState () {
-        let button = $("#toolbar_button_desktopsharing");
-        if (APP.conference.isSharingScreen) {
-            button.addClass("glow");
-        } else {
-            button.removeClass("glow");
-        }
+        this._setToggledState(  "toolbar_button_desktopsharing",
+                                APP.conference.isSharingScreen);
     },
 
     /**
-     * Toggles / untoggles the view for raised hand.
+     * Marks video icon as muted or not.
+     *
+     * @param {boolean} muted if icon should look like muted or not
      */
-    _toggleRaiseHand(isRaisedHand) {
-        $('#toolbar_button_raisehand').toggleClass("glow", isRaisedHand);
+    toggleVideoIcon (muted) {
+        $('#toolbar_button_camera').toggleClass("icon-camera-disabled", muted);
+
+        this._setToggledState("toolbar_button_camera", muted);
     },
 
     /**
-     * Marks video icon as muted or not.
-     * @param {boolean} muted if icon should look like muted or not
+     * Enables / disables audio toolbar button.
+     *
+     * @param {boolean} enabled indicates if the button should be enabled
+     * or disabled
      */
-    markVideoIconAsMuted (muted) {
-        $('#toolbar_button_camera').toggleClass("icon-camera-disabled", muted);
+    setVideoIconEnabled (enabled) {
+        this._setMediaIconEnabled(
+                '#toolbar_button_camera',
+                enabled,
+                /* data-i18n attribute value */
+                `[content]toolbar.${enabled ? 'videomute' : 'cameraDisabled'}`,
+                /* shortcut attribute value */
+                'toggleVideoPopover');
+
+        enabled || this.toggleVideoIcon(!enabled);
     },
 
     /**
-     * Marks video icon as disabled or not.
-     * @param {boolean} disabled if icon should look like disabled or not
+     * Enables/disables the toolbar button associated with a specific media such
+     * as audio or video.
+     *
+     * @param {string} btn - The jQuery selector <tt>string</tt> which
+     * identifies the toolbar button to be enabled/disabled.
+     * @param {boolean} enabled - <tt>true</tt> to enable the specified
+     * <tt>btn</tt>  or <tt>false</tt> to disable it.
+     * @param {string} dataI18n - The value to assign to the <tt>data-i18n</tt>
+     * attribute of the specified <tt>btn</tt>.
+     * @param {string} shortcut - The value, if any, to assign to the
+     * <tt>shortcut</tt> attribute of the specified <tt>btn</tt> if the toolbar
+     * button is enabled.
      */
-    markVideoIconAsDisabled (disabled) {
-        var $btn = $('#toolbar_button_camera');
+    _setMediaIconEnabled(btn, enabled, dataI18n, shortcut) {
+        const $btn = $(btn);
 
         $btn
-            .prop("disabled", disabled)
-            .attr("data-i18n", disabled
-                ? "[content]toolbar.cameraDisabled"
-                : "[content]toolbar.videomute")
-            .attr("shortcut", disabled ? "" : "toggleVideoPopover");
+            .prop('disabled', !enabled)
+            .attr('data-i18n', dataI18n)
+            .attr('shortcut', enabled && shortcut ? shortcut : '');
 
-        disabled
-            ? $btn.attr("disabled", "disabled")
-            : $btn.removeAttr("disabled");
+        enabled
+            ? $btn.removeAttr('disabled')
+            : $btn.attr('disabled', 'disabled');
 
         APP.translation.translateElement($btn);
-
-        disabled && this.markVideoIconAsMuted(disabled);
     },
 
     /**
      * Marks audio icon as muted or not.
+     *
      * @param {boolean} muted if icon should look like muted or not
      */
-    markAudioIconAsMuted (muted) {
-        $('#toolbar_button_mute').toggleClass("icon-microphone",
-            !muted).toggleClass("icon-mic-disabled", muted);
+    toggleAudioIcon(muted) {
+        $('#toolbar_button_mute')
+            .toggleClass("icon-microphone", !muted)
+            .toggleClass("icon-mic-disabled", muted);
+
+        this._setToggledState("toolbar_button_mute", muted);
     },
 
     /**
-     * Marks audio icon as disabled or not.
-     * @param {boolean} disabled if icon should look like disabled or not
+     * Enables / disables audio toolbar button.
+     *
+     * @param {boolean} enabled indicates if the button should be enabled
+     * or disabled
      */
-    markAudioIconAsDisabled (disabled) {
-        var $btn = $('#toolbar_button_mute');
-
-        $btn
-            .prop("disabled", disabled)
-            .attr("data-i18n", disabled
-                ? "[content]toolbar.micDisabled"
-                : "[content]toolbar.mute")
-            .attr("shortcut", disabled ? "" : "mutePopover");
-
-        disabled
-            ? $btn.attr("disabled", "disabled")
-            : $btn.removeAttr("disabled");
-
-        APP.translation.translateElement($btn);
+    setAudioIconEnabled (enabled) {
+        this._setMediaIconEnabled(
+                '#toolbar_button_mute',
+                enabled,
+                /* data-i18n attribute value */
+                `[content]toolbar.${enabled ? 'mute' : 'micDisabled'}`,
+                /* shortcut attribute value */
+                'mutePopover');
 
-        disabled && this.markAudioIconAsMuted(disabled);
+        enabled || this.toggleAudioIcon(!enabled);
     },
 
     /**
@@ -819,6 +834,17 @@ const Toolbar = {
             popupElement.appendChild(liElement);
             buttonElement.appendChild(popupElement);
         });
+    },
+
+    /**
+     * Sets the toggled state of the given element depending on the isToggled
+     * parameter.
+     *
+     * @param elementId the element identifier
+     * @param isToggled indicates if the element should be toggled or untoggled
+     */
+     _setToggledState(elementId, isToggled) {
+        $("#" + elementId).toggleClass("toggled", isToggled);
     }
 };
 

modules/devices/mediaDeviceHelper.js

@@ -58,7 +58,7 @@ function getNewAudioInputDevice(newDevices, localAudio) {
         // Otherwise we assume that we don't have any audio input devices
         // to use and that's why disable microphone button on UI.
         else {
-            APP.UI.disableMicrophoneButton();
+            APP.UI.setMicrophoneButtonEnabled(false);
         }
     } else {
         // And here we handle case when we already have some device working,
@@ -100,7 +100,7 @@ function getNewVideoInputDevice(newDevices, localVideo) {
         // Otherwise we assume that we don't have any video input devices
         // to use and that's why disable microphone button on UI.
         else {
-            APP.UI.disableCameraButton();
+            APP.UI.setCameraButtonEnabled(false);
         }
     } else {
         // And here we handle case when we already have some device working,