haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'restyle-toggle-state'

This commit is contained in:
Lyubomir Marinov 2016-10-07 15:59:16 -05:00
parent 7e26625324 231cd49916
commit b8af817ea3
8 changed files with 118 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
conference.js
View File

@ -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);
});
},

4
css/_base.scss
View File

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

7
css/_toolbars.scss
View File

@ -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,

2
css/_variables.scss
View File

@ -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);

36
modules/UI/UI.js
View File

@ -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.
* Enables / disables camera toolbar button.
*
* @param {boolean} enabled indicates if the camera button should be enabled
* or disabled
*/
UI.disableCameraButton = function () {
Toolbar.markVideoIconAsDisabled(true);
UI.setCameraButtonEnabled = function (enabled) {
Toolbar.setVideoIconEnabled(enabled);
};
/**
* Enables camera toolbar button.
* Enables / disables microphone toolbar button.
*
* @param {boolean} enabled indicates if the microphone button should be
* enabled or disabled
*/
UI.enableCameraButton = function () {
Toolbar.markVideoIconAsDisabled(false);
};
/**
* Disables microphone toolbar button.
*/
UI.disableMicrophoneButton = function () {
Toolbar.markAudioIconAsDisabled(true);
};
/**
* Enables microphone toolbar button.
*/
UI.enableMicrophoneButton = function () {
Toolbar.markAudioIconAsDisabled(false);
UI.setMicrophoneButtonEnabled = function (enabled) {
Toolbar.setAudioIconEnabled(enabled);
};
UI.showRingOverLay = function () {

24
modules/UI/recording/Recording.js
View File

@ -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);
}
};

130
modules/UI/toolbars/Toolbar.js
View File

@ -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");
}
},
/**
* 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
* Enables / disables audio toolbar button.
*
* @param {boolean} enabled indicates if the button should be enabled
* or disabled
*/
markVideoIconAsDisabled (disabled) {
var $btn = $('#toolbar_button_camera');
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);
},
/**
* 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.
*/
_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');
setAudioIconEnabled (enabled) {
this._setMediaIconEnabled(
'#toolbar_button_mute',
enabled,
/* data-i18n attribute value */
`[content]toolbar.${enabled ? 'mute' : 'micDisabled'}`,
/* shortcut attribute value */
'mutePopover');
$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);
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);
}
};

4
modules/devices/mediaDeviceHelper.js
View File

@ -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,