diff --git a/bigbluebutton-html5/.eslintignore b/bigbluebutton-html5/.eslintignore old mode 100644 new mode 100755 index 01b9706e2ece..0912b7902a43 --- 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 new file mode 100755 index 000000000000..a583afff1142 --- /dev/null +++ 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( + , + document.getElementById('app'), + ); +}); diff --git a/bigbluebutton-html5/client/main.html b/bigbluebutton-html5/client/main.html index 89f71a5c3ca6..245455cbde6c 100755 --- 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; - } + + + + + -
- -
+
diff --git a/bigbluebutton-html5/imports/ui/components/legacy/component.jsx b/bigbluebutton-html5/imports/ui/components/legacy/component.jsx new file mode 100755 index 000000000000..503b8ace7406 --- /dev/null +++ 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 ( + +

+ Chrome, + 1: Firefox, + }} + /> +

+ + ); + case FALLBACK: + return ( +

+ It looks like you're using a browser that is not fully supported. Please use either + Chrome + or + Firefox + for full support. +

+ ); + 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 new file mode 100755 index 000000000000..98ee063b598f --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/bigbluebutton-html5/package.json b/bigbluebutton-html5/package.json index b22ce7cba681..4a353221b68c 100755 --- 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 index 352761bb03d3..b896c9a0060e 100755 --- a/bigbluebutton-html5/private/locales/en.json +++ b/bigbluebutton-html5/private/locales/en.json @@ -582,5 +582,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/bigbluebutton-html5/client/compatibility/adapter.js b/bigbluebutton-html5/public/compatibility/adapter.js similarity index 100% rename from bigbluebutton-html5/client/compatibility/adapter.js rename to bigbluebutton-html5/public/compatibility/adapter.js diff --git a/bigbluebutton-html5/client/compatibility/bowser.js b/bigbluebutton-html5/public/compatibility/bowser.js old mode 100644 new mode 100755 similarity index 100% rename from bigbluebutton-html5/client/compatibility/bowser.js rename to bigbluebutton-html5/public/compatibility/bowser.js diff --git a/bigbluebutton-html5/client/compatibility/kurento-extension.js b/bigbluebutton-html5/public/compatibility/kurento-extension.js old mode 100644 new mode 100755 similarity index 100% rename from bigbluebutton-html5/client/compatibility/kurento-extension.js rename to bigbluebutton-html5/public/compatibility/kurento-extension.js diff --git a/bigbluebutton-html5/client/compatibility/kurento-utils.js b/bigbluebutton-html5/public/compatibility/kurento-utils.js old mode 100644 new mode 100755 similarity index 100% rename from bigbluebutton-html5/client/compatibility/kurento-utils.js rename to bigbluebutton-html5/public/compatibility/kurento-utils.js diff --git a/bigbluebutton-html5/client/compatibility/sip.js b/bigbluebutton-html5/public/compatibility/sip.js old mode 100644 new mode 100755 similarity index 100% rename from bigbluebutton-html5/client/compatibility/sip.js rename to bigbluebutton-html5/public/compatibility/sip.js diff --git a/bigbluebutton-html5/server/main.js b/bigbluebutton-html5/server/main.js index db9d06e6dd6e..e9e7d3844131 100755 --- 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');