feat(notifications): implement a react/redux notification system (jit…

…si#1786)

* feat(notifications): implement a react/redux notification system

* squash into impl explicit timeout, style

* ref(notifications): convert toastr notifications to use react

* ref(toastr): remove library

* squash into conversion: pass timeout

* squash into clean remove from debian patch

app.js

@@ -13,8 +13,6 @@ import 'aui-experimental';
 import 'aui-css';
 import 'aui-experimental-css';
 
-window.toastr = require('toastr');
-
 import conference from './conference';
 import API from './modules/API';
 import keyboardshortcut from './modules/keyboardshortcut/keyboardshortcut';

css/_variables.scss

@@ -85,20 +85,6 @@ $modalMockAKInputBackground: #fafbfc;
 $modalMockAKInputBorder: 1px solid #f4f5f7;
 $modalTextColor: #333;
 
-/**
- * Notifications
- */
-$notificationFontSize: 13px;
-$notificationColor: #FFFFFF;
-$notificationBackground: $tooltipBg;
-$notificationTitleColor: $notificationColor;
-$notificationMessageColor: $notificationColor;
-$notificationLinkColor: $notificationColor;
-$notificationOpacity: 0.9;
-$notificationPadding: 15px 20px;
-$notificationBorderRadius: 4px;
-$notificationWidth: 215px;
-
 /**
  * Misc.
  */
@@ -126,7 +112,6 @@ $tooltipsZ: 401;
 $dropdownMaskZ: 900;
 $dropdownZ: 901;
 $centeredVideoLabelZ: 1010;
-$notificationZ: 1011;
 $jitsipopoverZ: 1012;
 $popoverZ: 1015;
 $overlayZ: 1016;

css/_vertical_filmstrip_overrides.scss

@@ -159,15 +159,4 @@
             transition-delay: 0.1s;
         }
     }
-
-    /**
-     * Move toastr closer to the bottom of the screen and move left to avoid
-     * overlapping of videos when they are configured at default height.
-     */
-    #toast-container {
-        &.notification-bottom-right {
-            bottom: 25px;
-            right: 130 + 2 * ($thumbnailVideoMargin + $thumbnailsBorder) + $thumbnailVideoBorder;
-        }
-    }
 }

css/main.scss

@@ -33,7 +33,6 @@
 /* Modules BEGIN */
 
 @import 'dial-out';
-@import 'toastr';
 @import 'base';
 @import 'utils';
 @import 'overlay/overlay';

debian/patches/jquery-package

@@ -3,7 +3,7 @@ Index: jitsi-meet/index.html
 ===================================================================
 --- jitsi-meet.orig/index.html
 +++ jitsi-meet/index.html
-@@ -10,14 +10,14 @@
+@@ -10,13 +10,13 @@
      <meta itemprop="description" content="Join a WebRTC video conference powered by the Jitsi Videobridge"/>
      <meta itemprop="image" content="/images/jitsilogo.png"/>
      <script src="https://api.callstats.io/static/callstats.min.js"></script>
@@ -19,4 +19,4 @@ Index: jitsi-meet/index.html
 +    <script src="libs/jquery-ui.min.js"></script>
      <script src="libs/tooltip.js?v=1"></script><!-- bootstrap tooltip lib -->
      <script src="libs/popover.js?v=1"></script><!-- bootstrap tooltip lib -->
-     <script src="libs/toastr.js?v=1"></script><!-- notifications lib -->
+-    <script src="libs/toastr.js?v=1"></script><!-- notifications lib -->

modules/UI/UI.js

@@ -1,4 +1,4 @@
-/* global APP, JitsiMeetJS, $, config, interfaceConfig, toastr */
+/* global APP, JitsiMeetJS, $, config, interfaceConfig */
 
 const logger = require("jitsi-meet-logger").getLogger(__filename);
 
@@ -343,26 +343,6 @@ UI.start = function () {
     }
 
     document.title = interfaceConfig.APP_NAME;
-
-    if (!interfaceConfig.filmStripOnly) {
-        toastr.options = {
-            "closeButton": true,
-            "debug": false,
-            "positionClass": "notification-bottom-right",
-            "onclick": null,
-            "showDuration": "300",
-            "hideDuration": "1000",
-            "timeOut": "2000",
-            "extendedTimeOut": "1000",
-            "showEasing": "swing",
-            "hideEasing": "linear",
-            "showMethod": "fadeIn",
-            "hideMethod": "fadeOut",
-            "newestOnTop": false,
-            // this is the default toastr close button html, just adds tabIndex
-            "closeHtml": '<button type="button" tabIndex="-1">&times;</button>'
-        };
-    }
 };
 
 /**
@@ -868,7 +848,7 @@ UI.notifyInitiallyMuted = function () {
         "connected",
         "notify.muted",
         null,
-        { timeOut: 120000 });
+        120000);
 };
 
 /**

modules/UI/util/MessageHandler.js

@@ -1,9 +1,13 @@
-/* global $, APP, toastr */
+/* global $, APP */
 const logger = require("jitsi-meet-logger").getLogger(__filename);
 
-import UIUtil from './UIUtil';
 import jitsiLocalStorage from '../../util/JitsiLocalStorage';
 
+import {
+    Notification,
+    showNotification
+} from '../../../react/features/notifications';
+
 /**
  * Flag for enable/disable of the notifications.
  * @type {boolean}
@@ -448,31 +452,25 @@ var messageHandler = {
      * @param messageKey the key from the language file for the text of the
      * message.
      * @param messageArguments object with the arguments for the message.
-     * @param options passed to toastr (e.g. timeOut)
+     * @param optional configurations for the notification (e.g. timeout)
      */
     participantNotification: function(displayName, displayNameKey, cls,
-                    messageKey, messageArguments, options) {
-
-        // If we're in ringing state we skip all toaster notifications.
-        if(!notificationsEnabled || APP.UI.isOverlayVisible())
+                    messageKey, messageArguments, timeout) {
+        // If we're in ringing state we skip all notifications.
+        if (!notificationsEnabled || APP.UI.isOverlayVisible()) {
             return;
-
-        var displayNameSpan = '<span class="title" ';
-        if (displayName) {
-            displayNameSpan += ">" + UIUtil.escapeHtml(displayName);
-        } else {
-            displayNameSpan += "data-i18n='" + displayNameKey + "'>";
         }
-        displayNameSpan += "</span>";
-        let element = toastr.info(
-            displayNameSpan + '<br>' +
-            '<span class=' + cls + ' data-i18n="' + messageKey + '"' +
-                (messageArguments?
-                    " data-i18n-options='"
-                        + JSON.stringify(messageArguments) + "'"
-                    : "") + "></span>", null, options);
-        APP.translation.translateElement(element);
-        return element;
+
+        APP.store.dispatch(
+            showNotification(
+                Notification,
+                {
+                    defaultTitleKey: displayNameKey,
+                    descriptionArguments: messageArguments,
+                    descriptionKey: messageKey,
+                    title: displayName
+                },
+                timeout));
     },
 
     /**
@@ -488,28 +486,12 @@ var messageHandler = {
      */
     notify: function(titleKey, messageKey, messageArguments) {
 
-        // If we're in ringing state we skip all toaster notifications.
+        // If we're in ringing state we skip all 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
-     */
-    remove: function(toasterElement) {
-        toasterElement.remove();
+        this.participantNotification(
+            null, titleKey, null, messageKey, messageArguments);
     },
 
     /**

package.json

@@ -21,6 +21,7 @@
     "@atlaskit/button-group": "1.1.3",
     "@atlaskit/dropdown-menu": "1.4.0",
     "@atlaskit/field-text": "2.7.0",
+    "@atlaskit/flag": "3.0.0",
     "@atlaskit/icon": "7.0.0",
     "@atlaskit/inline-dialog": "3.2.0",
     "@atlaskit/inline-message": "2.1.1",
@@ -67,7 +68,6 @@
     "strophe": "1.2.4",
     "strophejs-plugins": "0.0.7",
     "styled-components": "1.3.0",
-    "toastr": "2.1.2",
     "url-polyfill": "github/url-polyfill",
     "xmldom": "0.1.27"
   },

react/features/conference/components/Conference.web.js

@@ -7,6 +7,7 @@ import { connect, disconnect } from '../../base/connection';
 import { DialogContainer } from '../../base/dialog';
 import { Filmstrip } from '../../filmstrip';
 import { LargeVideo } from '../../large-video';
+import { NotificationsContainer } from '../../notifications';
 import { OverlayContainer } from '../../overlay';
 import { Toolbox } from '../../toolbox';
 import { HideNotificationBarStyle } from '../../unsupported-browser';
@@ -78,6 +79,7 @@ class Conference extends Component {
                 { filmStripOnly ? null : <Toolbox /> }
 
                 <DialogContainer />
+                { filmStripOnly ? null : <NotificationsContainer /> }
                 <OverlayContainer />
 
                 {/*

react/features/notifications/actionTypes.js

@@ -0,0 +1,24 @@
+/*
+ * The type of (redux) action which signals that a specific notification should
+ * not be displayed anymore.
+ *
+ * {
+ *     type: HIDE_NOTIFICATION,
+ *     uid: string
+ * }
+ */
+export const HIDE_NOTIFICATION = Symbol('HIDE_NOTIFICATION');
+
+/*
+ * The type of (redux) action which signals that a notification component should
+ * be displayed.
+ *
+ * {
+ *     type: SHOW_NOTIFICATION,
+ *     component: ReactComponent,
+ *     props: Object,
+ *     timeout: number,
+ *     uid: number
+ * }
+ */
+export const SHOW_NOTIFICATION = Symbol('SHOW_NOTIFICATION');