Restyles the toolbar button toggle state
This commit is contained in:
yanas
parent
3f0aa500f7
commit
0e9835dde2
|
|
@ -543,11 +543,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.disableMicrophoneButton(true);
|
||||
}
|
||||
|
||||
if (!tracks.find((t) => t.isVideoTrack())) {
|
||||
APP.UI.disableCameraButton();
|
||||
APP.UI.disableCameraButton(true);
|
||||
}
|
||||
|
||||
this._initDeviceList();
|
||||
|
|
@ -930,7 +930,8 @@ export default {
|
|||
|
||||
APP.UI.addLocalStream(stream);
|
||||
|
||||
stream.videoType === 'camera' && APP.UI.enableCameraButton();
|
||||
stream.videoType === 'camera'
|
||||
&& APP.UI.disableCameraButton(false);
|
||||
} else {
|
||||
this.videoMuted = false;
|
||||
this.isSharingScreen = false;
|
||||
|
|
@ -970,7 +971,7 @@ export default {
|
|||
this.audioMuted = false;
|
||||
}
|
||||
|
||||
APP.UI.enableMicrophoneButton();
|
||||
APP.UI.disableMicrophoneButton(false);
|
||||
APP.UI.setAudioMuted(this.getMyUserId(), this.audioMuted);
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -81,10 +81,6 @@ form {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #00ccff;
|
||||
}
|
||||
|
||||
.watermark {
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -1460,30 +1460,22 @@ UI.onSharedVideoStop = function (id, attributes) {
|
|||
|
||||
/**
|
||||
* Disables camera toolbar button.
|
||||
*
|
||||
* @param {boolean} disable indicates if the camera button should be disabled
|
||||
* or enabled
|
||||
*/
|
||||
UI.disableCameraButton = function () {
|
||||
Toolbar.markVideoIconAsDisabled(true);
|
||||
};
|
||||
|
||||
/**
|
||||
* Enables camera toolbar button.
|
||||
*/
|
||||
UI.enableCameraButton = function () {
|
||||
Toolbar.markVideoIconAsDisabled(false);
|
||||
UI.disableCameraButton = function (disable) {
|
||||
Toolbar.disableVideoIcon(disable);
|
||||
};
|
||||
|
||||
/**
|
||||
* Disables microphone toolbar button.
|
||||
*
|
||||
* @param {boolean} disable indicates if the microphone button should be
|
||||
* disabled or enabled
|
||||
*/
|
||||
UI.disableMicrophoneButton = function () {
|
||||
Toolbar.markAudioIconAsDisabled(true);
|
||||
};
|
||||
|
||||
/**
|
||||
* Enables microphone toolbar button.
|
||||
*/
|
||||
UI.enableMicrophoneButton = function () {
|
||||
Toolbar.markAudioIconAsDisabled(false);
|
||||
UI.disableMicrophoneButton = function (disable) {
|
||||
Toolbar.disableAudioIcon(disable);
|
||||
};
|
||||
|
||||
UI.showRingOverLay = function () {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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,34 +582,26 @@ const Toolbar = {
|
|||
* streaming is active.
|
||||
*/
|
||||
updateDesktopSharingButtonState () {
|
||||
let button = $("#toolbar_button_desktopsharing");
|
||||
if (APP.conference.isSharingScreen) {
|
||||
button.addClass("glow");
|
||||
} else {
|
||||
button.removeClass("glow");
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggles / untoggles the view for raised hand.
|
||||
*/
|
||||
_toggleRaiseHand(isRaisedHand) {
|
||||
$('#toolbar_button_raisehand').toggleClass("glow", isRaisedHand);
|
||||
this._setToggledState( "toolbar_button_desktopsharing",
|
||||
APP.conference.isSharingScreen);
|
||||
},
|
||||
|
||||
/**
|
||||
* Marks video icon as muted or not.
|
||||
*
|
||||
* @param {boolean} muted if icon should look like muted or not
|
||||
*/
|
||||
markVideoIconAsMuted (muted) {
|
||||
toggleVideoIcon (muted) {
|
||||
$('#toolbar_button_camera').toggleClass("icon-camera-disabled", muted);
|
||||
|
||||
this._setToggledState("toolbar_button_camera", muted);
|
||||
},
|
||||
|
||||
/**
|
||||
* Marks video icon as disabled or not.
|
||||
* @param {boolean} disabled if icon should look like disabled or not
|
||||
*/
|
||||
markVideoIconAsDisabled (disabled) {
|
||||
disableVideoIcon (disabled) {
|
||||
var $btn = $('#toolbar_button_camera');
|
||||
|
||||
$btn
|
||||
|
|
@ -625,23 +617,26 @@ const Toolbar = {
|
|||
|
||||
APP.translation.translateElement($btn);
|
||||
|
||||
disabled && this.markVideoIconAsMuted(disabled);
|
||||
disabled && this.toggleVideoIcon(disabled);
|
||||
},
|
||||
|
||||
/**
|
||||
* Marks audio icon as muted or not.
|
||||
*
|
||||
* @param {boolean} muted if icon should look like muted or not
|
||||
*/
|
||||
markAudioIconAsMuted (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
|
||||
*/
|
||||
markAudioIconAsDisabled (disabled) {
|
||||
disableAudioIcon (disabled) {
|
||||
var $btn = $('#toolbar_button_mute');
|
||||
|
||||
$btn
|
||||
|
|
@ -657,7 +652,7 @@ const Toolbar = {
|
|||
|
||||
APP.translation.translateElement($btn);
|
||||
|
||||
disabled && this.markAudioIconAsMuted(disabled);
|
||||
disabled && this.toggleAudioIcon(disabled);
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -819,6 +814,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);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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.disableMicrophoneButton(true);
|
||||
}
|
||||
} 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.disableCameraButton(true);
|
||||
}
|
||||
} else {
|
||||
// And here we handle case when we already have some device working,
|
||||
|
|
|
|||
Loading…
Reference in New Issue