Merge pull request #1757 from jitsi/rc_dialog_to_notification

fix(remotecontrol): Replace info dialogs with notifications.

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;
-}
+}

modules/UI/UI.js

@@ -192,8 +192,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');
     }
 };
 
@@ -488,7 +488,7 @@ UI.addUser = function (user) {
     if (UI.ContactList)
         UI.ContactList.addContact(id);
 
-    messageHandler.notify(
+    messageHandler.participantNotification(
         displayName,'notify.somebody', 'connected', 'notify.connected'
     );
 
@@ -516,7 +516,7 @@ UI.removeUser = function (id, displayName) {
     if (UI.ContactList)
         UI.ContactList.removeContact(id);
 
-    messageHandler.notify(
+    messageHandler.participantNotification(
         displayName,'notify.somebody', 'disconnected', 'notify.disconnected'
     );
 
@@ -552,8 +552,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();
     }
@@ -575,14 +575,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');
     }
@@ -596,7 +596,7 @@ UI.updateUserRole = user => {
  */
 UI.updateUserStatus = (user, status) => {
     let displayName = user.getDisplayName();
-    messageHandler.notify(
+    messageHandler.participantNotification(
         displayName, '', 'connected', "dialOut.statusMessage",
         {
             status: UIUtil.escapeHtml(status)
@@ -864,7 +864,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",
@@ -1069,7 +1069,7 @@ UI.notifyInternalError = function () {
 };
 
 UI.notifyFocusDisconnected = function (focus, retrySec) {
-    messageHandler.notify(
+    messageHandler.participantNotification(
         null, "notify.focus",
         'disconnected', "notify.focusFail",
         {component: focus, ms: retrySec}

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 = '<span class="nickname" ';
+        var displayNameSpan = '<span class="title" ';
         if (displayName) {
             displayNameSpan += ">" + UIUtil.escapeHtml(displayName);
         } else {
@@ -475,6 +475,35 @@ var messageHandler = {
         return element;
     },
 
+    /**
+     * Displays a notification.
+     *
+     * @param {string} titleKey - The key from the language file for the title
+     * of the notification.
+     * @param {string} messageKey - The key from the language file for the text
+     * of the message.
+     * @param {Object} messageArguments - The arguments for the message
+     * translation.
+     * @returns {void}
+     */
+    notify: function(titleKey, messageKey, messageArguments) {
+
+        // If we're in ringing state we skip all toaster notifications.
+        if(!notificationsEnabled || APP.UI.isOverlayVisible())
+            return;
+
+        const options = messageArguments
+            ? `data-i18n-options='${JSON.stringify(messageArguments)}'` : "";
+        let element = toastr.info(`
+            <span class="title" data-i18n="${titleKey}"></span>
+            <br>
+            <span data-i18n="${messageKey}" ${options}></span>
+            `
+        );
+        APP.translation.translateElement(element);
+        return element;
+    },
+
     /**
      * Removes the toaster.
      * @param toasterElement

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()

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

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