Merge pull request #7303 from capilkey/legacy-browser-support-2

Legacy browser support take 2
bigbluebutton · Apr 29, 2019 · 7a389ad · 7a389ad
2 parents f225bf4 + ded503e
commit 7a389ad
Show file tree

Hide file tree

Showing 13 changed files with 146 additions and 34 deletions.
diff --git a/bigbluebutton-html5/.eslintignore b/bigbluebutton-html5/.eslintignore
@@ -1,2 +1,2 @@
 Gruntfile.js
-client/compatibility/*
+public/compatibility/*
diff --git a/bigbluebutton-html5/client/legacy.jsx b/bigbluebutton-html5/client/legacy.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Meteor } from 'meteor/meteor';
+import { render } from 'react-dom';
+import Legacy from '/imports/ui/components/legacy/component';
+
+// This class is the start of the content loaded on legacy (unsupported) browsers.
+// What is included here needs to be minimal and carefully considered because some
+// things can't be polyfilled.
+
+Meteor.startup(() => {
+  render(
+    <Legacy />,
+    document.getElementById('app'),
+  );
+});
diff --git a/bigbluebutton-html5/client/main.html b/bigbluebutton-html5/client/main.html
@@ -41,46 +41,20 @@
     [hidden]:not([hidden="false"]) {
       display: none !important;
     }
-
-    .browserWarning {
-      border: 5px solid #F3F6F9;
-      border-radius: 0.5rem;
-      color: #F3F6F9;
-      text-align: center;
-      width:500px;
-      position:fixed;
-      left:50%;
-      margin-left: -250px;
-      top:50%;
-      margin-top: -4rem;
-      font-size: 1.5rem;
-      padding: 10px;
-    }
   </style>
   <script>
     document.addEventListener('gesturestart', function (e) {
       e.preventDefault();
     });
-
-    window.addEventListener('load', function (e) {
-      var ua = window.navigator.userAgent;
-
-      // detect for different version of IE and show a warning
-      if (ua.indexOf('MSIE ') > 0 || ua.indexOf('Trident/') > 0) {
-        var warning = document.getElementById("browserWarning");
-        if (warning) {
-          warning.style.display = "block";
-        }
-      }
-    });
   </script>
+  <script src="compatibility/adapter.js?v=VERSION" language="javascript"></script>
+  <script src="compatibility/bowser.js?v=VERSION" language="javascript"></script>
+  <script src="compatibility/sip.js?v=VERSION" language="javascript"></script>
+  <script src="compatibility/kurento-extension.js?v=VERSION" language="javascript"></script>
+  <script src="compatibility/kurento-utils.js?v=VERSION" language="javascript"></script>
 </head>
 <body style="background-color: #06172A">
-  <div id="app" role="document">
-    <p id="browserWarning" class="browserWarning" style="display: none">
-      It looks like you're using a browser that is not fully supported. Please use either <a href="https://www.google.com/chrome/">Chrome</a> or <a href="https://getfirefox.com">Firefox</a> for full support.
-    </p>
-  </div>
+  <div id="app" role="document"></div>
   <audio id="remote-media" autoPlay="autoplay">
     <track kind="captions" /> {/* These captions are brought to you by eslint */}
   </audio>

diff --git a/bigbluebutton-html5/imports/ui/components/legacy/component.jsx b/bigbluebutton-html5/imports/ui/components/legacy/component.jsx
@@ -0,0 +1,79 @@
+import React, { Component } from 'react';
+import { IntlProvider, FormattedMessage } from 'react-intl';
+import browser from 'browser-detect';
+import './styles.css';
+
+// This class is the only component loaded on legacy (unsupported) browsers.
+// What is included here needs to be minimal and carefully considered because some
+// things can't be polyfilled.
+
+const FETCHING = 'fetching';
+const FALLBACK = 'fallback';
+const READY = 'ready';
+const supportedBrowsers = ['chrome', 'firefox', 'safari', 'opera', 'edge'];
+
+export default class Legacy extends Component {
+  constructor(props) {
+    super(props);
+
+    const locale = navigator.languages ? navigator.languages[0] : false
+      || navigator.language
+      || Meteor.settings.public.app.defaultSettings.application.fallbackLocale;
+
+    const url = `/html5client/locale?locale=${locale}`;
+
+    const that = this;
+    this.state = { viewState: FETCHING };
+    fetch(url)
+      .then((response) => {
+        if (!response.ok) {
+          return Promise.reject();
+        }
+
+        return response.json();
+      })
+      .then(({ messages, normalizedLocale }) => {
+        const dasherizedLocale = normalizedLocale.replace('_', '-');
+        that.setState({ messages, normalizedLocale: dasherizedLocale, viewState: READY });
+      })
+      .catch(() => {
+        that.setState({ viewState: FALLBACK });
+      });
+  }
+
+  render() {
+    const { messages, normalizedLocale, viewState } = this.state;
+    const isSupportedBrowser = supportedBrowsers.includes(browser().name);
+
+    switch (viewState) {
+      case READY:
+        return (
+          <IntlProvider locale={normalizedLocale} messages={messages}>
+            <p className="browserWarning">
+              <FormattedMessage
+                id={isSupportedBrowser ? 'app.legacy.upgradeBrowser' : 'app.legacy.unsupportedBrowser'}
+                description="Warning when someone joins with a browser that isnt supported"
+                values={{
+                  0: <a href="https://www.google.com/chrome/">Chrome</a>,
+                  1: <a href="https://getfirefox.com">Firefox</a>,
+                }}
+              />
+            </p>
+          </IntlProvider>
+        );
+      case FALLBACK:
+        return (
+          <p className="browserWarning">
+            <span>It looks like you&#39;re using a browser that is not fully supported. Please use either </span>
+            <a href="https://www.google.com/chrome/">Chrome</a>
+            <span> or </span>
+            <a href="https://getfirefox.com">Firefox</a>
+            <span> for full support.</span>
+          </p>
+        );
+      case FETCHING:
+      default:
+        return null;
+    }
+  }
+}
diff --git a/bigbluebutton-html5/imports/ui/components/legacy/styles.css b/bigbluebutton-html5/imports/ui/components/legacy/styles.css
@@ -0,0 +1,18 @@
+/* 
+  The legacy styles can't be scss because it will use Proxy and you can't polyfill it
+*/
+
+.browserWarning {
+  border: 5px solid #F3F6F9;
+  border-radius: 0.5rem;
+  color: #F3F6F9;
+  text-align: center;
+  width:500px;
+  position:fixed;
+  left:50%;
+  margin-left: -250px;
+  top:50%;
+  margin-top: -4rem;
+  font-size: 1.5rem;
+  padding: 10px;
+}
diff --git a/bigbluebutton-html5/package.json b/bigbluebutton-html5/package.json
@@ -12,6 +12,13 @@
     "test": "jest",
     "lint": "eslint . --ext .jsx,.js"
   },
+  "meteor": {
+    "mainModule": {
+      "web.browser": "client/main.jsx",
+      "legacy": "client/legacy.jsx",
+      "server": "server/main.js"
+    }
+  },
   "lint-staged": {
     "linters": {
       "*.{js,jsx}": [

diff --git a/bigbluebutton-html5/private/locales/en.json b/bigbluebutton-html5/private/locales/en.json
@@ -583,5 +583,7 @@
     "app.externalVideo.noteLabel": "Note: Shared YouTube videos will not appear in the recording",
     "app.actionsBar.actionsDropdown.shareExternalVideo": "Share YouTube video",
     "app.actionsBar.actionsDropdown.stopShareExternalVideo": "Stop sharing YouTube video",
-    "app.iOSWarning.label": "Please upgrade to iOS 12.2 or higher"
+    "app.iOSWarning.label": "Please upgrade to iOS 12.2 or higher",
+    "app.legacy.unsupportedBrowser": "It looks like you're using a browser that is not supported. Please use either {0} or {1} for full support.",
+    "app.legacy.upgradeBrowser": "It looks like you're using an older version of a supported browser. Please upgrade your browser for full support."
 }
diff --git a/...ton-html5/client/compatibility/adapter.js → ...ton-html5/public/compatibility/adapter.js b/...ton-html5/client/compatibility/adapter.js → ...ton-html5/public/compatibility/adapter.js
diff --git a/...tton-html5/client/compatibility/bowser.js → ...tton-html5/public/compatibility/bowser.js b/...tton-html5/client/compatibility/bowser.js → ...tton-html5/public/compatibility/bowser.js
diff --git a/...client/compatibility/kurento-extension.js → ...public/compatibility/kurento-extension.js b/...client/compatibility/kurento-extension.js → ...public/compatibility/kurento-extension.js
diff --git a/...ml5/client/compatibility/kurento-utils.js → ...ml5/public/compatibility/kurento-utils.js b/...ml5/client/compatibility/kurento-utils.js → ...ml5/public/compatibility/kurento-utils.js
diff --git a/...ebutton-html5/client/compatibility/sip.js → ...ebutton-html5/public/compatibility/sip.js b/...ebutton-html5/client/compatibility/sip.js → ...ebutton-html5/public/compatibility/sip.js
diff --git a/bigbluebutton-html5/server/main.js b/bigbluebutton-html5/server/main.js
@@ -29,3 +29,20 @@ import '/imports/api/guest-users/server';
 import '/imports/api/log-client/server';
 import '/imports/api/common/server/helpers';
 import '/imports/startup/server/logger';
+
+import { setMinimumBrowserVersions } from 'meteor/modern-browsers';
+
+// common restriction is support for WebRTC functions
+
+// WebRTC stats might require FF 55/CH 67 (or 66)
+
+setMinimumBrowserVersions({
+  chrome: 59,
+  firefox: 52,
+  edge: 17,
+  ie: Infinity,
+  mobileSafari: [11, 1],
+  opera: 46,
+  safari: [11, 1],
+  electron: [0, 36],
+}, 'service workers');