feat(notification): Add suboptimal browser exp notification.

lang/main.json

@@ -223,7 +223,9 @@
         "grantedToUnknown": "Moderator rights granted to $t(notify.somebody)!",
         "muted": "You have started the conversation muted.",
         "mutedTitle": "You're muted!",
-        "raisedHand": "Would like to speak."
+        "raisedHand": "Would like to speak.",
+        "suboptimalExperienceTitle": "Browser Warning",
+        "suboptimalExperienceDescription": "Eer... we are afraid your experience with __appName__ isn't going to be that great here. We are looking for ways to improve this but, until then, please try using one of the <a href='/static/recommendedBrowsers.html' target='_blank'>fully supported browsers</a>."
     },
     "dialog": {
         "add": "Add",

package.json

@@ -44,7 +44,7 @@
     "jquery-i18next": "1.2.0",
     "js-md5": "0.6.1",
     "jwt-decode": "2.2.0",
-    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#2aa85ad1719f81541ac1a3582f1369e2f4d1f5c2",
+    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#8f7a604653584f24b73894466049baf699904745",
     "lodash": "4.17.4",
     "moment": "2.19.4",
     "nuclear-js": "1.4.0",

react/features/base/lib-jitsi-meet/index.js

@@ -3,9 +3,11 @@
 import JitsiMeetJS from './_';
 export { JitsiMeetJS as default };
 
-// XXX Re-export the types exported by JitsiMeetJS in order to prevent undefined
+// XXX Re-export the properties exported by JitsiMeetJS in order to prevent
-// imported JitsiMeetJS. It may be caused by import cycles but I have not
+// undefined imported JitsiMeetJS. It may be caused by import cycles but I have
-// confirmed the theory.
+// not confirmed the theory.
+export const analytics = JitsiMeetJS.analytics;
+export const RTCBrowserType = JitsiMeetJS.util.RTCBrowserType;
 export const JitsiConferenceErrors = JitsiMeetJS.errors.conference;
 export const JitsiConferenceEvents = JitsiMeetJS.events.conference;
 export const JitsiConnectionErrors = JitsiMeetJS.errors.connection;
@@ -20,8 +22,6 @@ export const JitsiSIPVideoGWStatus = JitsiMeetJS.constants.sipVideoGW;
 export const JitsiTrackErrors = JitsiMeetJS.errors.track;
 export const JitsiTrackEvents = JitsiMeetJS.events.track;
 
-export const analytics = JitsiMeetJS.analytics;
-
 export * from './actions';
 export * from './actionTypes';
 export * from './constants';

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

@@ -6,6 +6,7 @@ import { connect as reactReduxConnect } from 'react-redux';
 
 import { connect, disconnect } from '../../base/connection';
 import { DialogContainer } from '../../base/dialog';
+import { translate } from '../../base/i18n';
 import { CalleeInfoContainer } from '../../base/jwt';
 import { Filmstrip } from '../../filmstrip';
 import { LargeVideo } from '../../large-video';
@@ -13,6 +14,8 @@ import { NotificationsContainer } from '../../notifications';
 import { showToolbox, Toolbox } from '../../toolbox';
 import { HideNotificationBarStyle } from '../../unsupported-browser';
 
+import { maybeShowSuboptimalExperienceNotification } from '../functions';
+
 declare var APP: Object;
 declare var interfaceConfig: Object;
 
@@ -26,7 +29,8 @@ type Props = {
      */
     _isRecording: boolean,
 
-    dispatch: Function
+    dispatch: Function,
+    t: Function
 }
 
 /**
@@ -70,7 +74,10 @@ class Conference extends Component<Props> {
         APP.UI.registerListeners();
         APP.UI.bindEvents();
 
-        this.props.dispatch(connect());
+        const { dispatch, t } = this.props;
+
+        dispatch(connect());
+        maybeShowSuboptimalExperienceNotification(dispatch, t);
     }
 
     /**
@@ -161,4 +168,4 @@ function _mapStateToProps(state) {
     };
 }
 
-export default reactReduxConnect(_mapStateToProps)(Conference);
+export default reactReduxConnect(_mapStateToProps)(translate(Conference));

react/features/conference/functions.js

@@ -0,0 +1,38 @@
+import { getName } from '../app';
+import { translateToHTML } from '../base/i18n';
+import { RTCBrowserType } from '../base/lib-jitsi-meet';
+import { showWarningNotification } from '../notifications';
+
+/**
+ * Shows the suboptimal experience notification if needed.
+ *
+ * @param {Function} dispatch - The dispatch method.
+ * @param {Function} t - The translation function.
+ * @returns {void}
+ */
+export function maybeShowSuboptimalExperienceNotification(dispatch, t) {
+    if (!RTCBrowserType.isChrome()
+            && !RTCBrowserType.isFirefox()
+            && !RTCBrowserType.isNWJS()
+            && !RTCBrowserType.isElectron()
+
+            // Adding react native to the list of recommended browsers is not
+            // necessary for now because the function won't be executed at all
+            // in this case but I'm adding it for completeness.
+            && !RTCBrowserType.isReactNative()
+    ) {
+        dispatch(
+            showWarningNotification(
+                {
+                    titleKey: 'notify.suboptimalExperienceTitle',
+                    description: translateToHTML(
+                        t,
+                        'notify.suboptimalExperienceDescription',
+                        {
+                            appName: getName()
+                        })
+                }
+            )
+        );
+    }
+}

react/features/notifications/components/NotificationsContainer.web.js

@@ -71,9 +71,7 @@ class NotificationsContainer extends Component {
         if (_notifications.length) {
             const notification = _notifications[0];
 
-            if (!_showNotifications) {
+            if (!_showNotifications || this._notificationDismissTimeout) {
-                this._onDismissed(notification.uid);
-            } else if (this._notificationDismissTimeout) {
 
                 // No-op because there should already be a notification that
                 // is waiting for dismissal.

static/recommendedBrowsers.html

@@ -0,0 +1,25 @@
+<html>
+<head>
+    <link rel="stylesheet" href="../css/all.css"/>
+    <!--#include virtual="/title.html" -->
+</head>
+<body>
+    <div class = 'unsupported-desktop-browser'>
+        <h2 class = 'unsupported-desktop-browser__title'>
+            It looks like you're using a browser we don't fully support.
+        </h2>
+        <p class ='unsupported-desktop-browser__description'>
+            We recommend to try with the latest version of&nbsp;
+            <a
+                className = 'unsupported-desktop-browser__link'
+                href = 'http://google.com/chrome' >Chrome</a>,&nbsp;
+            <a
+                class = 'unsupported-desktop-browser__link'
+                href = 'http://www.getfirefox.com/'>Firefox</a>&nbsp;or&nbsp;
+            <a
+                class = 'unsupported-desktop-browser__link'
+                href = 'http://www.chromium.org/'>Chromium</a>
+        </p>
+    </div>
+</body>
+</html>