From b8d3e82ae76258b2457cf882eff47fd9e978047c Mon Sep 17 00:00:00 2001 From: hristoterezov Date: Sun, 9 Jul 2017 22:01:48 -0500 Subject: [PATCH] fix(remotecontrol): Replace info dialogs with notifications. --- css/_toastr.scss | 4 +-- modules/UI/UI.js | 22 ++++++++-------- modules/UI/util/MessageHandler.js | 37 ++++++++++++++++++++++++--- modules/UI/videolayout/RemoteVideo.js | 4 +-- modules/remotecontrol/Controller.js | 2 +- modules/remotecontrol/Receiver.js | 12 ++++----- 6 files changed, 55 insertions(+), 26 deletions(-) diff --git a/css/_toastr.scss b/css/_toastr.scss index f1647a0be..663240686 100644 --- a/css/_toastr.scss +++ b/css/_toastr.scss @@ -12,7 +12,7 @@ */ .toast-title, -.toast-message .nickname { +.toast-message .title { font-weight: bold; margin: 0 0 3px; @include text-truncate; @@ -104,4 +104,4 @@ #toast-container .toast { width: $notificationWidth; margin: 0 0 8px; -} \ No newline at end of file +} diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 46f8cc374..dc1094fe0 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -193,8 +193,8 @@ UI.showLocalConnectionInterrupted = function (isInterrupted) { UI.setRaisedHandStatus = (participant, raisedHandStatus) => { VideoLayout.setRaisedHandStatus(participant.getId(), raisedHandStatus); if (raisedHandStatus) { - messageHandler.notify(participant.getDisplayName(), 'notify.somebody', - 'connected', 'notify.raisedHand'); + messageHandler.participantNotification(participant.getDisplayName(), + 'notify.somebody', 'connected', 'notify.raisedHand'); } }; @@ -489,7 +489,7 @@ UI.addUser = function (user) { if (UI.ContactList) UI.ContactList.addContact(id); - messageHandler.notify( + messageHandler.participantNotification( displayName,'notify.somebody', 'connected', 'notify.connected' ); @@ -517,7 +517,7 @@ UI.removeUser = function (id, displayName) { if (UI.ContactList) UI.ContactList.removeContact(id); - messageHandler.notify( + messageHandler.participantNotification( displayName,'notify.somebody', 'disconnected', 'notify.disconnected' ); @@ -553,8 +553,8 @@ UI.updateLocalRole = isModerator => { if (isModerator) { if (!interfaceConfig.DISABLE_FOCUS_INDICATOR) - messageHandler - .notify(null, "notify.me", 'connected', "notify.moderator"); + messageHandler.participantNotification( + null, "notify.me", 'connected', "notify.moderator"); Recording.checkAutoRecord(); } @@ -576,14 +576,14 @@ UI.updateUserRole = user => { var displayName = user.getDisplayName(); if (displayName) { - messageHandler.notify( + messageHandler.participantNotification( displayName, 'notify.somebody', 'connected', 'notify.grantedTo', { to: UIUtil.escapeHtml(displayName) } ); } else { - messageHandler.notify( + messageHandler.participantNotification( '', 'notify.somebody', 'connected', 'notify.grantedToUnknown'); } @@ -597,7 +597,7 @@ UI.updateUserRole = user => { */ UI.updateUserStatus = (user, status) => { let displayName = user.getDisplayName(); - messageHandler.notify( + messageHandler.participantNotification( displayName, '', 'connected', "dialOut.statusMessage", { status: UIUtil.escapeHtml(status) @@ -868,7 +868,7 @@ UI.notifyMaxUsersLimitReached = function () { * Notify user that he was automatically muted when joned the conference. */ UI.notifyInitiallyMuted = function () { - messageHandler.notify( + messageHandler.participantNotification( null, "notify.mutedTitle", "connected", @@ -1073,7 +1073,7 @@ UI.notifyInternalError = function () { }; UI.notifyFocusDisconnected = function (focus, retrySec) { - messageHandler.notify( + messageHandler.participantNotification( null, "notify.focus", 'disconnected', "notify.focusFail", {component: focus, ms: retrySec} diff --git a/modules/UI/util/MessageHandler.js b/modules/UI/util/MessageHandler.js index f2fc740e2..9672ada6f 100644 --- a/modules/UI/util/MessageHandler.js +++ b/modules/UI/util/MessageHandler.js @@ -439,7 +439,7 @@ var messageHandler = { }, /** - * Displays a notification. + * Displays a notification about participant action. * @param displayName the display name of the participant that is * associated with the notification. * @param displayNameKey the key from the language file for the display @@ -450,14 +450,14 @@ var messageHandler = { * @param messageArguments object with the arguments for the message. * @param options passed to toastr (e.g. timeOut) */ - notify: function(displayName, displayNameKey, cls, messageKey, - messageArguments, options) { + participantNotification: function(displayName, displayNameKey, cls, + messageKey, messageArguments, options) { // If we're in ringing state we skip all toaster notifications. if(!notificationsEnabled || APP.UI.isOverlayVisible()) return; - var displayNameSpan = ' +
+ + ` + ); + APP.translation.translateElement(element); + return element; + }, + /** * Removes the toaster. * @param toasterElement diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index aa7d27828..05cee8163 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -248,7 +248,7 @@ RemoteVideo.prototype._requestRemoteControlPermissions = function () { return; } this.updateRemoteVideoMenu(this.isAudioMuted, true); - APP.UI.messageHandler.openMessageDialog( + APP.UI.messageHandler.notify( "dialog.remoteControlTitle", (result === false) ? "dialog.remoteControlDeniedMessage" : "dialog.remoteControlAllowedMessage", @@ -265,7 +265,7 @@ RemoteVideo.prototype._requestRemoteControlPermissions = function () { }, error => { logger.error(error); this.updateRemoteVideoMenu(this.isAudioMuted, true); - APP.UI.messageHandler.openMessageDialog( + APP.UI.messageHandler.notify( "dialog.remoteControlTitle", "dialog.remoteControlErrorMessage", {user: this.user.getDisplayName() diff --git a/modules/remotecontrol/Controller.js b/modules/remotecontrol/Controller.js index c669fc652..661b76977 100644 --- a/modules/remotecontrol/Controller.js +++ b/modules/remotecontrol/Controller.js @@ -312,7 +312,7 @@ export default class Controller extends RemoteControlParticipant { this.pause(); this._controlledParticipant = null; this._area = undefined; - APP.UI.messageHandler.openMessageDialog( + APP.UI.messageHandler.notify( 'dialog.remoteControlTitle', 'dialog.remoteControlStopMessage' ); diff --git a/modules/remotecontrol/Receiver.js b/modules/remotecontrol/Receiver.js index 2e225eece..33bd03c12 100644 --- a/modules/remotecontrol/Receiver.js +++ b/modules/remotecontrol/Receiver.js @@ -109,11 +109,11 @@ export default class Receiver extends RemoteControlParticipant { * displays dialog for informing the user that remote control session * ended. * - * @param {boolean} [dontShowDialog] - If true the dialog won't be - * displayed. + * @param {boolean} [dontNotify] - If true - a notification about stopping + * the remote control won't be displayed. * @returns {void} */ - _stop(dontShowDialog: boolean = false) { + _stop(dontNotify: boolean = false) { if (!this._controller) { return; } @@ -125,8 +125,8 @@ export default class Receiver extends RemoteControlParticipant { name: REMOTE_CONTROL_MESSAGE_NAME, type: EVENTS.stop }); - if (!dontShowDialog) { - APP.UI.messageHandler.openMessageDialog( + if (!dontNotify) { + APP.UI.messageHandler.notify( 'dialog.remoteControlTitle', 'dialog.remoteControlStopMessage' ); @@ -241,7 +241,7 @@ export default class Receiver extends RemoteControlParticipant { action: PERMISSIONS_ACTIONS.error }); - APP.UI.messageHandler.openMessageDialog( + APP.UI.messageHandler.notify( 'dialog.remoteControlTitle', 'dialog.startRemoteControlErrorMessage' );