From d486782dd4772139e75068438975a887c0c91fa5 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 22 Apr 2020 13:29:12 +0100 Subject: [PATCH 01/22] convert app.js to app.tsx Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/@types/global.d.ts | 4 ++-- src/vector/{app.js => app.tsx} | 23 +++++++++++------------ 2 files changed, 13 insertions(+), 14 deletions(-) rename src/vector/{app.js => app.tsx} (94%) diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index a3fb9028c..0068d4018 100644 --- a/src/@types/global.d.ts +++ b/src/@types/global.d.ts @@ -15,12 +15,12 @@ limitations under the License. */ import "matrix-react-sdk/src/@types/global"; // load matrix-react-sdk's type extensions first -import {Renderer} from "react-dom"; +import type MatrixChat from "matrix-react-sdk/src/components/structures/MatrixChat"; declare global { interface Window { mxSendRageshake: (text: string, withLogs?: boolean) => void; - matrixChat: ReturnType; + matrixChat: MatrixChat; // electron-only ipcRenderer: any; diff --git a/src/vector/app.js b/src/vector/app.tsx similarity index 94% rename from src/vector/app.js rename to src/vector/app.tsx index 930576e2d..d5484fc3e 100644 --- a/src/vector/app.js +++ b/src/vector/app.tsx @@ -19,9 +19,9 @@ limitations under the License. */ import React from 'react'; -// add React and ReactPerf to the global namespace, to make them easier to -// access via the console -global.React = React; +// add React and ReactPerf to the global namespace, to make them easier to access via the console +// this incidentally means we can forget our React imports in JSX files without penalty. +window.React = React; import * as sdk from 'matrix-react-sdk'; import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg'; @@ -40,11 +40,11 @@ import SdkConfig from "matrix-react-sdk/src/SdkConfig"; import CallHandler from 'matrix-react-sdk/src/CallHandler'; -let lastLocationHashSet = null; +let lastLocationHashSet: string = null; // Parse the given window.location and return parameters that can be used when calling // MatrixChat.showScreen(screen, params) -function getScreenFromLocation(location) { +function getScreenFromLocation(location: Location) { const fragparts = parseQsFromFragment(location); return { screen: fragparts.location.substring(1), @@ -54,7 +54,7 @@ function getScreenFromLocation(location) { // Here, we do some crude URL analysis to allow // deep-linking. -function routeUrl(location) { +function routeUrl(location: Location) { if (!window.matrixChat) return; console.log("Routing URL ", location.href); @@ -62,7 +62,7 @@ function routeUrl(location) { window.matrixChat.showScreen(s.screen, s.params); } -function onHashChange(ev) { +function onHashChange(ev: HashChangeEvent) { if (decodeURIComponent(window.location.hash) === lastLocationHashSet) { // we just set this: no need to route it! return; @@ -72,8 +72,8 @@ function onHashChange(ev) { // This will be called whenever the SDK changes screens, // so a web page can update the URL bar appropriately. -function onNewScreen(screen) { - console.log("newscreen "+screen); +function onNewScreen(screen: string) { + console.log("newscreen " + screen); const hash = '#/' + screen; lastLocationHashSet = hash; window.location.hash = hash; @@ -88,7 +88,7 @@ function onNewScreen(screen) { // If we're in electron, we should never pass through a file:// URL otherwise // the identity server will try to 302 the browser to it, which breaks horribly. // so in that instance, hardcode to use riot.im/app for now instead. -function makeRegistrationUrl(params) { +function makeRegistrationUrl(params: object) { let url; if (window.location.protocol === "vector:") { url = 'https://riot.im/app/#/register'; @@ -121,8 +121,7 @@ function onTokenLoginCompleted() { const parsedUrl = url.parse(window.location.href); parsedUrl.search = ""; const formatted = url.format(parsedUrl); - console.log("Redirecting to " + formatted + " to drop loginToken " + - "from queryparams"); + console.log(`Redirecting to ${formatted} to drop loginToken from queryparams`); window.location.href = formatted; } From e5a232b0d8722e911f09fb7bea5043be5f347f88 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 22 Apr 2020 13:41:29 +0100 Subject: [PATCH 02/22] make typescript happy Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/@types/global.d.ts | 4 ++-- src/vector/app.tsx | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index 0068d4018..9716cafe2 100644 --- a/src/@types/global.d.ts +++ b/src/@types/global.d.ts @@ -15,12 +15,12 @@ limitations under the License. */ import "matrix-react-sdk/src/@types/global"; // load matrix-react-sdk's type extensions first -import type MatrixChat from "matrix-react-sdk/src/components/structures/MatrixChat"; +import type {Renderer} from "react-dom"; declare global { interface Window { mxSendRageshake: (text: string, withLogs?: boolean) => void; - matrixChat: MatrixChat; + matrixChat: ReturnType; // electron-only ipcRenderer: any; diff --git a/src/vector/app.tsx b/src/vector/app.tsx index d5484fc3e..b665fedaf 100644 --- a/src/vector/app.tsx +++ b/src/vector/app.tsx @@ -30,6 +30,7 @@ import {_td, newTranslatableError} from 'matrix-react-sdk/src/languageHandler'; import AutoDiscoveryUtils from 'matrix-react-sdk/src/utils/AutoDiscoveryUtils'; import {AutoDiscovery} from "matrix-js-sdk/src/autodiscovery"; import * as Lifecycle from "matrix-react-sdk/src/Lifecycle"; +import type MatrixChatType from "matrix-react-sdk/src/components/structures/MatrixChat"; import url from 'url'; @@ -59,7 +60,7 @@ function routeUrl(location: Location) { console.log("Routing URL ", location.href); const s = getScreenFromLocation(location); - window.matrixChat.showScreen(s.screen, s.params); + (window.matrixChat as MatrixChatType).showScreen(s.screen, s.params); } function onHashChange(ev: HashChangeEvent) { From ac78570b589945aa732e4757a6164970c32f1202 Mon Sep 17 00:00:00 2001 From: Nad Chishtie Date: Fri, 20 Mar 2020 17:04:12 +0000 Subject: [PATCH 03/22] Add example error pages --- .../mobile_guide/index--invalid-config.html | 185 ++++++++++ .../mobile_guide/index--unable-to-load.html | 185 ++++++++++ .../index--unsupported-browser.html | 347 ++++++++++++++++++ 3 files changed, 717 insertions(+) create mode 100644 src/vector/mobile_guide/index--invalid-config.html create mode 100644 src/vector/mobile_guide/index--unable-to-load.html create mode 100644 src/vector/mobile_guide/index--unsupported-browser.html diff --git a/src/vector/mobile_guide/index--invalid-config.html b/src/vector/mobile_guide/index--invalid-config.html new file mode 100644 index 000000000..ea8ef9208 --- /dev/null +++ b/src/vector/mobile_guide/index--invalid-config.html @@ -0,0 +1,185 @@ + + + + + + + + + + + + +
+ +
+ +
+
+ +

Invalid config

+
+
+
+
+

This Riot is misconfigured

+

Something something... contact your server admin.

+
+
+
+
+

+ + Go to Riot.im + +

+
+
+ + diff --git a/src/vector/mobile_guide/index--unable-to-load.html b/src/vector/mobile_guide/index--unable-to-load.html new file mode 100644 index 000000000..fda95b959 --- /dev/null +++ b/src/vector/mobile_guide/index--unable-to-load.html @@ -0,0 +1,185 @@ + + + + + + + + + + + + +
+ +
+ +
+
+ +

Unable to load

+
+
+
+
+

Riot can't load

+

Something something... contact your server admin.

+
+
+
+
+

+ + Go to Riot.im + +

+
+
+ + diff --git a/src/vector/mobile_guide/index--unsupported-browser.html b/src/vector/mobile_guide/index--unsupported-browser.html new file mode 100644 index 000000000..bbd46b5eb --- /dev/null +++ b/src/vector/mobile_guide/index--unsupported-browser.html @@ -0,0 +1,347 @@ + + + + + + + + + + + + +
+ +
+ +
+
+ +

Unsupported browser

+
+
+
+
+

Use Riot in a browser

+

It looks like you're using an unsupported browser. To use Riot on the web, please use Chrome, Safari, FireFox or Edge.

+
+
+
+
+
+ +
+
+
+

+ + Go to Riot.im + +

+
+
+ + From b05e5be2f707ff715352fcc5918b9ffd85bdf614 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 22 Apr 2020 18:25:49 +0100 Subject: [PATCH 04/22] Improve ErrorView to match design Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/structures/ErrorView.scss | 97 ++++ src/components/structures/ErrorView.tsx | 36 +- src/vector/incompatible_browser/index.html | 486 ++++++++++++++++++ .../index--unsupported-browser.html | 347 ------------- 4 files changed, 611 insertions(+), 355 deletions(-) create mode 100644 res/css/structures/ErrorView.scss create mode 100644 src/vector/incompatible_browser/index.html delete mode 100644 src/vector/mobile_guide/index--unsupported-browser.html diff --git a/res/css/structures/ErrorView.scss b/res/css/structures/ErrorView.scss new file mode 100644 index 000000000..008799b8a --- /dev/null +++ b/res/css/structures/ErrorView.scss @@ -0,0 +1,97 @@ +/* +Copyright 2020 New Vector Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_ErrorView { + background: #c5e0f7; + background: -moz-linear-gradient(top, #c5e0f7 0%, #ffffff 100%); + background: -webkit-linear-gradient(top, #c5e0f7 0%, #ffffff 100%); + background: linear-gradient(to bottom, #c5e0f7 0%, #ffffff 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5e0f7', endColorstr='#ffffff',GradientType=0 ); + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + width: 100%; + height: 100%; + color: #000; + + .mx_ErrorView_container { + max-width: 680px; + margin: auto; + } + + .mx_Button { + border: 0; + border-radius: 4px; + font-size: 18px; + margin-left: 4px; + margin-right: 4px; + min-width: 80px; + background-color: #03B381; + color: #fff; + cursor: pointer; + padding: 12px 22px; + word-break: break-word; + text-decoration: none; + } + + .mx_Center { + justify-content: center; + } + + .mx_HomePage_header { + color: #2E2F32; + display: flex; + align-items: center; + justify-content: center; + } + + font-size: 1.067rem; // 16px + h1 { + font-size: 2.133rem; // 32px + } + h2 { + font-size: 1.600rem; // 24px + color: #000; + } + + .mx_HomePage_col { + display: flex; + flex-direction: row; + } + + .mx_HomePage_row { + flex: 1 1 0; + display: flex; + flex-direction: row; + flex-wrap: wrap; + } + + .mx_HomePage_logo { + margin: auto 20px auto 0; + } + + h1, h2 { + font-weight: 600; + margin-bottom: 32px; + } + + .mx_Spacer { + margin-top: 24px; + } + + .mx_FooterLink { + color: #368BD6; + text-decoration: none; + } +} diff --git a/src/components/structures/ErrorView.tsx b/src/components/structures/ErrorView.tsx index 6941dbf16..3196ba626 100644 --- a/src/components/structures/ErrorView.tsx +++ b/src/components/structures/ErrorView.tsx @@ -17,21 +17,41 @@ limitations under the License. import * as React from "react"; import * as PropTypes from "prop-types"; -import { _t } from "matrix-react-sdk/src/languageHandler"; +// directly import the style here as this layer does not support rethemedex at this time so no matrix-react-sdk +// scss variables will be accessible. +import "../../../res/css/structures/ErrorView.scss"; interface IProps { + // both of these should already be internationalised title: string; messages?: string[]; } const ErrorView: React.FC = ({title, messages}) => { - return
-
-

{title}

-
- {messages && messages.map(msg =>

- { _t(msg) } -

)} + return
+
+
+ + Riot + +

Failed to start

+
+
+
+
+

{ title }

+ {messages && messages.map(msg =>

+ { msg } +

)} +
+
+
+
; diff --git a/src/vector/incompatible_browser/index.html b/src/vector/incompatible_browser/index.html new file mode 100644 index 000000000..f7a63518b --- /dev/null +++ b/src/vector/incompatible_browser/index.html @@ -0,0 +1,486 @@ + + + + + + + + + + +
+
+ +

Unsupported browser

+
+
+
+
+

Use Riot in a browser

+

It looks like you're using an unsupported browser. To use Riot on the web, please use Chrome, Safari, + FireFox or Edge.

+
+
+
+
+
+ +
+
+
+

+ + Go to Riot.im + +

+
+
+ + diff --git a/src/vector/mobile_guide/index--unsupported-browser.html b/src/vector/mobile_guide/index--unsupported-browser.html deleted file mode 100644 index bbd46b5eb..000000000 --- a/src/vector/mobile_guide/index--unsupported-browser.html +++ /dev/null @@ -1,347 +0,0 @@ - - - - - - - - - - - - -
- -
- -
-
- -

Unsupported browser

-
-
-
-
-

Use Riot in a browser

-

It looks like you're using an unsupported browser. To use Riot on the web, please use Chrome, Safari, FireFox or Edge.

-
-
-
-
-
- -
-
-
-

- - Go to Riot.im - -

-
-
- - From 5fdf805df2dd3a6f95180c10d128ba17ab367f2b Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 22 Apr 2020 18:44:52 +0100 Subject: [PATCH 05/22] use scss variables in ErrorView.scss Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/structures/ErrorView.scss | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/res/css/structures/ErrorView.scss b/res/css/structures/ErrorView.scss index 008799b8a..0f654df85 100644 --- a/res/css/structures/ErrorView.scss +++ b/res/css/structures/ErrorView.scss @@ -14,6 +14,9 @@ See the License for the specific language governing permissions and limitations under the License. */ +// import font-size variables manually, ideally this scss would get loaded by the theme which has all variables in context +@import "../../../node_modules/matrix-react-sdk/res/css/_font-sizes.scss"; + .mx_ErrorView { background: #c5e0f7; background: -moz-linear-gradient(top, #c5e0f7 0%, #ffffff 100%); @@ -33,7 +36,7 @@ limitations under the License. .mx_Button { border: 0; border-radius: 4px; - font-size: 18px; + font-size: $font-18px; margin-left: 4px; margin-right: 4px; min-width: 80px; @@ -56,12 +59,12 @@ limitations under the License. justify-content: center; } - font-size: 1.067rem; // 16px + font-size: $font-16px; h1 { - font-size: 2.133rem; // 32px + font-size: $font-32px; } h2 { - font-size: 1.600rem; // 24px + font-size: $font-24px; color: #000; } From 918a56d01a4d354b6a9cc11c64de3a20b0b35f50 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 22 Apr 2020 18:49:39 +0100 Subject: [PATCH 06/22] don't preload error-view as we expect it to not be shown Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/vector/init.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/vector/init.tsx b/src/vector/init.tsx index c7c9141eb..a6e979431 100644 --- a/src/vector/init.tsx +++ b/src/vector/init.tsx @@ -148,7 +148,6 @@ export async function loadApp(fragParams: {}) { export async function showError(title: string, messages?: string[]) { const ErrorView = (await import( /* webpackChunkName: "error-view" */ - /* webpackPreload: true */ "../components/structures/ErrorView")).default; window.matrixChat = ReactDOM.render(, document.getElementById('matrixchat')); From 6584ff29af1f57ccd79d67e005f0b50df89340c6 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 22 Apr 2020 18:58:44 +0100 Subject: [PATCH 07/22] mock out scss imports for jest Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- __mocks__/cssMock.js | 1 + package.json | 1 + 2 files changed, 2 insertions(+) create mode 100644 __mocks__/cssMock.js diff --git a/__mocks__/cssMock.js b/__mocks__/cssMock.js new file mode 100644 index 000000000..9b5d9b347 --- /dev/null +++ b/__mocks__/cssMock.js @@ -0,0 +1 @@ +module.exports = "css-file-stub"; diff --git a/package.json b/package.json index 57d8513f3..76576363f 100644 --- a/package.json +++ b/package.json @@ -215,6 +215,7 @@ "/node_modules/matrix-react-sdk/test/setupTests.js" ], "moduleNameMapper": { + "\\.(css|scss)$": "/__mocks__/cssMock.js", "\\.(gif|png|svg|ttf|woff2)$": "/node_modules/matrix-react-sdk/__mocks__/imageMock.js", "\\$webapp/i18n/languages.json": "/node_modules/matrix-react-sdk/__mocks__/languages.json", "^browser-request$": "/node_modules/matrix-react-sdk/__mocks__/browser-request.js", From 30a9094dc7654684bc51afdf5299901fb9090ddc Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 23 Apr 2020 10:19:06 +0100 Subject: [PATCH 08/22] fix import in tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- test/app-tests/loading-test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/app-tests/loading-test.js b/test/app-tests/loading-test.js index 5418382df..beb62270f 100644 --- a/test/app-tests/loading-test.js +++ b/test/app-tests/loading-test.js @@ -28,7 +28,7 @@ import MatrixReactTestUtils from 'matrix-react-test-utils'; import * as jssdk from 'matrix-js-sdk'; import * as sdk from 'matrix-react-sdk'; import {MatrixClientPeg} from 'matrix-react-sdk/src/MatrixClientPeg'; -import {VIEWS} from 'matrix-react-sdk/src/components/structures/MatrixChat'; +import {Views} from 'matrix-react-sdk/src/components/structures/MatrixChat'; import dis from 'matrix-react-sdk/src/dispatcher'; import * as test_utils from '../test-utils'; import MockHttpBackend from 'matrix-mock-request'; @@ -679,7 +679,7 @@ function assertAtLoadingSpinner(matrixChat) { } function awaitLoggedIn(matrixChat) { - if (matrixChat.state.view === VIEWS.LOGGED_IN) { + if (matrixChat.state.view === Views.LOGGED_IN) { return Promise.resolve(); } return new Promise(resolve => { @@ -704,7 +704,7 @@ function awaitRoomView(matrixChat, retryLimit, retryCount) { retryCount = 0; } - if (matrixChat.state.view !== VIEWS.LOGGED_IN || !matrixChat.state.ready) { + if (matrixChat.state.view !== Views.LOGGED_IN || !matrixChat.state.ready) { console.log(Date.now() + " Awaiting room view: not ready yet."); if (retryCount >= retryLimit) { throw new Error("MatrixChat still not ready after " + From b7fa8a1f54c74bc237ea15678abc49ae2d133bbb Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 23 Apr 2020 13:37:25 +0100 Subject: [PATCH 09/22] wire up the static fallback error pages Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/vector/index.ts | 18 +- .../mobile_guide/index--invalid-config.html | 185 ---------------- .../mobile_guide/index--unable-to-load.html | 185 ---------------- .../incompatible-browser.html} | 8 +- src/vector/static/unable-to-load.html | 199 ++++++++++++++++++ webpack.config.js | 14 ++ 6 files changed, 234 insertions(+), 375 deletions(-) delete mode 100644 src/vector/mobile_guide/index--invalid-config.html delete mode 100644 src/vector/mobile_guide/index--unable-to-load.html rename src/vector/{incompatible_browser/index.html => static/incompatible-browser.html} (99%) create mode 100644 src/vector/static/unable-to-load.html diff --git a/src/vector/index.ts b/src/vector/index.ts index c82058738..a8f1538fc 100644 --- a/src/vector/index.ts +++ b/src/vector/index.ts @@ -199,9 +199,21 @@ async function start() { ]); } } + start().catch(err => { console.error(err); - if (!acceptBrowser) { - // TODO redirect to static incompatible browser page - } + // show the static error in an iframe to not lose any context / console data + // with some basic styling to make the iframe full page + delete document.body.style.height; + const iframe = document.createElement("iframe"); + iframe.src = acceptBrowser ? "static/unable-to-load.html" : "static/incompatible-browser.html"; + iframe.style.width = "100%"; + iframe.style.height = "100%"; + iframe.style.position = "absolute"; + iframe.style.top = "0"; + iframe.style.left = "0"; + iframe.style.right = "0"; + iframe.style.bottom = "0"; + iframe.style.border = "0"; + document.getElementById("matrixchat").appendChild(iframe); }); diff --git a/src/vector/mobile_guide/index--invalid-config.html b/src/vector/mobile_guide/index--invalid-config.html deleted file mode 100644 index ea8ef9208..000000000 --- a/src/vector/mobile_guide/index--invalid-config.html +++ /dev/null @@ -1,185 +0,0 @@ - - - - - - - - - - - - -
- -
- -
-
- -

Invalid config

-
-
-
-
-

This Riot is misconfigured

-

Something something... contact your server admin.

-
-
-
-
-

- - Go to Riot.im - -

-
-
- - diff --git a/src/vector/mobile_guide/index--unable-to-load.html b/src/vector/mobile_guide/index--unable-to-load.html deleted file mode 100644 index fda95b959..000000000 --- a/src/vector/mobile_guide/index--unable-to-load.html +++ /dev/null @@ -1,185 +0,0 @@ - - - - - - - - - - - - -
- -
- -
-
- -

Unable to load

-
-
-
-
-

Riot can't load

-

Something something... contact your server admin.

-
-
-
-
-

- - Go to Riot.im - -

-
-
- - diff --git a/src/vector/incompatible_browser/index.html b/src/vector/static/incompatible-browser.html similarity index 99% rename from src/vector/incompatible_browser/index.html rename to src/vector/static/incompatible-browser.html index f7a63518b..edd642015 100644 --- a/src/vector/incompatible_browser/index.html +++ b/src/vector/static/incompatible-browser.html @@ -8,6 +8,10 @@ display: none; } + html { + height: 100%; + } + body { background: #c5e0f7; background: -moz-linear-gradient(top, #c5e0f7 0%, #ffffff 100%); @@ -165,8 +169,8 @@

Use Riot in a browser

-

It looks like you're using an unsupported browser. To use Riot on the web, please use Chrome, Safari, - FireFox or Edge.

+

It looks like you're using an unsupported browser. + To use Riot on the web, please use a modern version ofChrome, Safari, or Firefox.

diff --git a/src/vector/static/unable-to-load.html b/src/vector/static/unable-to-load.html new file mode 100644 index 000000000..f52196531 --- /dev/null +++ b/src/vector/static/unable-to-load.html @@ -0,0 +1,199 @@ + + + + + + + + + + + +
+ +
+ +
+
+ +

Unable to load

+
+
+
+
+

Riot can't load

+

Something went wrong and riot was unable to load.

+
+
+
+
+

+ + Go to Riot.im + +

+
+
+ + diff --git a/webpack.config.js b/webpack.config.js index 5bde203ea..9c6d09939 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -335,6 +335,20 @@ module.exports = (env, argv) => { chunks: ['mobileguide'], }), + // These are the static error pages for when the javascript env is *really unsupported* + new HtmlWebpackPlugin({ + template: './src/vector/static/unable-to-load.html', + filename: 'static/unable-to-load.html', + minify: argv.mode === 'production', + chunks: [], + }), + new HtmlWebpackPlugin({ + template: './src/vector/static/incompatible-browser.html', + filename: 'static/incompatible-browser.html', + minify: argv.mode === 'production', + chunks: [], + }), + // This is the usercontent sandbox's entry point (separate for iframing) new HtmlWebpackPlugin({ template: './node_modules/matrix-react-sdk/src/usercontent/index.html', From 30fa3a92f76c7d901caee66edd0424f7a11fc663 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 23 Apr 2020 15:10:40 +0100 Subject: [PATCH 10/22] Implement new unsupported browser page Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/structures/ErrorView.scss | 2 +- .../structures/CompatibilityPage.tsx | 413 ++++++++++++++++++ src/components/structures/ErrorView.tsx | 10 +- src/i18n/strings/en_EN.json | 8 + src/vector/init.tsx | 3 +- src/vector/static/incompatible-browser.html | 229 +++++----- 6 files changed, 545 insertions(+), 120 deletions(-) create mode 100644 src/components/structures/CompatibilityPage.tsx diff --git a/res/css/structures/ErrorView.scss b/res/css/structures/ErrorView.scss index 0f654df85..d2e58994b 100644 --- a/res/css/structures/ErrorView.scss +++ b/res/css/structures/ErrorView.scss @@ -25,7 +25,7 @@ limitations under the License. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5e0f7', endColorstr='#ffffff',GradientType=0 ); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; width: 100%; - height: 100%; + height: auto; color: #000; .mx_ErrorView_container { diff --git a/src/components/structures/CompatibilityPage.tsx b/src/components/structures/CompatibilityPage.tsx new file mode 100644 index 000000000..7de6ef7e3 --- /dev/null +++ b/src/components/structures/CompatibilityPage.tsx @@ -0,0 +1,413 @@ +/* +Copyright 2020 New Vector Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import * as React from "react"; + +import {_t} from "../../vector/init"; + +// directly import the style here as this layer does not support rethemedex at this time so no matrix-react-sdk +// scss variables will be accessible. +import "../../../res/css/structures/ErrorView.scss"; + +interface IProps { + onAccept: () => void; +} + +const CompatibilityPage: React.FC = ({ onAccept }) => { + return
+
+
+ + Riot + +

{ _t("Unsupported browser") }

+
+ +
+
+
+

{ _t("Use Riot in a browser") }

+

{ _t("Sorry, your browser is not able to run Riot.", {}, { 'b': (sub) => {sub} }) }

+

+ { _t( + "Riot uses many advanced browser features, some of which are not available " + + "or experimental in your current browser.", + ) } +

+

+ { _t( + 'Please install Chrome, Firefox, ' + + 'or Safari for the best experience.', + {}, + { + 'chromeLink': (sub) => {sub}, + 'firefoxLink': (sub) => {sub}, + 'safariLink': (sub) => {sub}, + }, + )} +

+

+ { _t( + "With your current browser, the look and feel of the application may be " + + "completely incorrect, and some or all features may not function. " + + "If you want to try it anyway you can continue, but you are on your own in terms " + + "of any issues you may encounter!", + ) } +

+ +
+
+
+ + + + +
+
; +}; + +export default CompatibilityPage; + diff --git a/src/components/structures/ErrorView.tsx b/src/components/structures/ErrorView.tsx index 3196ba626..3178334e5 100644 --- a/src/components/structures/ErrorView.tsx +++ b/src/components/structures/ErrorView.tsx @@ -17,6 +17,8 @@ limitations under the License. import * as React from "react"; import * as PropTypes from "prop-types"; +import {_t} from "../../vector/init"; + // directly import the style here as this layer does not support rethemedex at this time so no matrix-react-sdk // scss variables will be accessible. import "../../../res/css/structures/ErrorView.scss"; @@ -31,10 +33,10 @@ const ErrorView: React.FC = ({title, messages}) => { return
- - Riot - -

Failed to start

+ + Riot + +

{ _t("Failed to start") }

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index a10e48ac1..4f17d5458 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -19,6 +19,14 @@ "Custom Server Options": "Custom Server Options", "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use Riot with an existing Matrix account on a different homeserver.": "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use Riot with an existing Matrix account on a different homeserver.", "Dismiss": "Dismiss", + "Unsupported browser": "Unsupported browser", + "Use Riot in a browser": "Use Riot in a browser", + "Sorry, your browser is not able to run Riot.": "Sorry, your browser is not able to run Riot.", + "Riot uses many advanced browser features, some of which are not available or experimental in your current browser.": "Riot uses many advanced browser features, some of which are not available or experimental in your current browser.", + "Please install Chrome, Firefox, or Safari for the best experience.": "Please install Chrome, Firefox, or Safari for the best experience.", + "With your current browser, the look and feel of the application may be completely incorrect, and some or all features may not function. If you want to try it anyway you can continue, but you are on your own in terms of any issues you may encounter!": "With your current browser, the look and feel of the application may be completely incorrect, and some or all features may not function. If you want to try it anyway you can continue, but you are on your own in terms of any issues you may encounter!", + "I understand the risks and wish to continue": "I understand the risks and wish to continue", + "Failed to start": "Failed to start", "Welcome to Riot.im": "Welcome to Riot.im", "Decentralised, encrypted chat & collaboration powered by [matrix]": "Decentralised, encrypted chat & collaboration powered by [matrix]", "Sign In": "Sign In", diff --git a/src/vector/init.tsx b/src/vector/init.tsx index a6e979431..ce9c7a233 100644 --- a/src/vector/init.tsx +++ b/src/vector/init.tsx @@ -156,8 +156,7 @@ export async function showError(title: string, messages?: string[]) { export async function showIncompatibleBrowser(onAccept) { const CompatibilityPage = (await import( /* webpackChunkName: "compatibility-page" */ - /* webpackPreload: true */ - "matrix-react-sdk/src/components/structures/CompatibilityPage")).default; + "../components/structures/CompatibilityPage")).default; window.matrixChat = ReactDOM.render(, document.getElementById('matrixchat')); } diff --git a/src/vector/static/incompatible-browser.html b/src/vector/static/incompatible-browser.html index edd642015..2203a48b7 100644 --- a/src/vector/static/incompatible-browser.html +++ b/src/vector/static/incompatible-browser.html @@ -169,8 +169,10 @@

Use Riot in a browser

-

It looks like you're using an unsupported browser. - To use Riot on the web, please use a modern version ofChrome, Safari, or Firefox.

+

Sorry, your browser is not able to run Riot.

+

Riot uses many advanced browser features, some of which are not available or experimental in your current browser.

+

Please install Chrome, Firefox, + or Safari for the best experience.

@@ -354,127 +356,128 @@ - - - Get it on F-Droid. - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + Get it on F-Droid. + + + + + + + + + + + d="M5.68003571,6.29863415 L5.68003571,4.42449878 L4.13843589,4.42449878 L4.13843589,3.64866951 L6.61432589,3.64866951 L6.61432589,6.64455976 C6.24995506,6.90316951 5.84820327,7.09946423 5.40907054,7.2334439 C4.96995649,7.36430642 4.50125542,7.42973768 4.00296732,7.42973768 C2.91295744,7.42973768 2.0596344,7.1119263 1.44299821,6.47630354 C0.829483333,5.83757671 0.522725893,4.94958037 0.522725893,3.81231451 C0.522725893,2.67194459 0.829483333,1.78394825 1.44299821,1.14832549 C2.0596344,0.509598659 2.91295744,0.190235244 4.00296732,0.190235244 C4.45765054,0.190235244 4.88898,0.24631878 5.29695571,0.358485854 C5.70805274,0.470652927 6.08644143,0.635785447 6.43212179,0.853883415 L6.43212179,1.85873098 C6.08332012,1.56274154 5.71271601,1.33995943 5.32030946,1.19038463 C4.92790292,1.04082854 4.51525458,0.966050488 4.08236446,0.966050488 C3.22903208,0.966050488 2.58748149,1.20440902 2.15771268,1.6811261 C1.73104649,2.15784317 1.51771339,2.86824398 1.51771339,3.81232854 C1.51771339,4.75329033 1.73104649,5.46212976 2.15771268,5.93884683 C2.58748149,6.4155639 3.22903208,6.65392244 4.08236446,6.65392244 C4.41559696,6.65392244 4.71301851,6.6258802 4.97462911,6.56979573 C5.2362397,6.51059598 5.47136589,6.4202387 5.68000768,6.2987239 L5.68003571,6.29863415 Z" + id="Shape"> + + + + + d="M37.8398036,0.956463415 C37.1546481,0.956463415 36.6096432,1.21195976 36.2047887,1.72295244 C35.803037,2.23394512 35.6021611,2.93032154 35.6021611,3.81208171 C35.6021611,4.69071911 35.803037,5.38553415 36.2047887,5.89652683 C36.6096432,6.40751951 37.1546481,6.66301585 37.8398036,6.66301585 C38.524959,6.66301585 39.066852,6.40751951 39.4654825,5.89652683 C39.8672343,5.38553415 40.0681102,4.69071911 40.0681102,3.81208171 C40.0681102,2.93032154 39.8672343,2.23394512 39.4654825,1.72295244 C39.0673754,1.21209065 38.5253515,0.956659756 37.8394111,0.956659756 L37.8398036,0.956463415 Z M37.8398036,0.18997439 C38.817708,0.18997439 39.5993998,0.518687398 40.1848789,1.17611341 C40.7703768,1.83043537 41.0631257,2.70908211 41.0631257,3.81205366 C41.0631257,4.91192114 40.7703768,5.79056789 40.1848789,6.4479939 C39.5993811,7.10231585 38.8176893,7.42947683 37.8398036,7.42947683 C36.8587965,7.42947683 36.0739835,7.10231585 35.4853643,6.4479939 C34.8998664,5.79369065 34.6071175,4.9150439 34.6071175,3.81205366 C34.6071175,2.70906341 34.8998664,1.83041667 35.4853643,1.17611341 C36.0739648,0.518687398 36.8587779,0.18997439 37.8398036,0.18997439 Z" + id="Shape"> + - + d="M14.4888571,14.6357134 L14.4888571,19.7020244 L13.8851641,19.7020244 C13.7044646,18.9049341 13.5319795,18.3009504 13.3677089,17.8900732 C13.2034365,17.4791959 12.981674,17.1176285 12.7024214,16.8053707 C11.9303365,15.9260976 10.3984651,15.486461 8.10680714,15.486461 C7.46615369,15.486461 7.03493637,15.5686346 6.81315518,15.7329817 C6.5995978,15.8891143 6.49281911,16.201372 6.49281911,16.6697549 L6.49281911,22.5369988 C7.74949196,22.5369988 8.64887768,22.269937 9.19097625,21.7358134 C9.73307482,21.2016898 10.1191173,20.2114744 10.3491036,18.7651671 L10.97744,18.7651671 L10.97744,27.3071427 L10.3491036,27.3071427 C10.1684059,25.8444362 9.80290431,24.8336516 9.25259875,24.274789 C8.70229506,23.7077923 7.78236851,23.4119618 6.49281911,23.3872976 L6.49281911,29.2668829 C6.49281911,29.9653724 6.66530417,30.4296545 7.01027429,30.6597293 C7.3552444,30.8815951 8.10678845,31.0171829 9.26490643,31.0664927 L9.26490643,31.695122 L0.184699286,31.695122 L0.184699286,31.0664927 C1.12105476,30.9678844 1.72475714,30.8076417 1.99580643,30.5857646 C2.26685571,30.3638988 2.40238036,29.9242622 2.40238036,29.2668549 L2.40238036,17.051611 C2.40238036,16.4024313 2.25042679,15.9545858 1.94651964,15.7080744 C1.6426125,15.4615443 1.05533905,15.3136337 0.184699286,15.2643427 L0.184699286,14.6357134 L14.4888571,14.6357134 Z" + id="Shape"> + + d="M25.1956964,29.4035366 L25.1956964,16.9540854 C25.1956964,16.378861 25.0478548,15.9720976 24.7521714,15.7337951 C24.4564881,15.4954927 23.9061751,15.3393638 23.1012323,15.2654085 L23.1012323,14.6367793 L30.7891859,14.6367793 C33.7050871,14.6367793 35.9926145,15.3804553 37.651768,16.8678073 C39.3191267,18.3469504 40.1528061,20.3848813 40.1528061,22.9816 C40.1528061,25.5948114 39.3191267,27.7025837 37.651768,29.3049171 C35.9844093,30.8990976 33.7913623,31.6961878 31.072627,31.6961878 L23.1012323,31.6961878 L23.1012323,31.0675585 C23.8322355,31.0429074 24.3620171,30.8991013 24.690577,30.6361402 C25.027342,30.3731923 25.1957245,29.9623244 25.1957245,29.4035366 L25.1956964,29.4035366 Z M29.2737714,16.374878 L29.2737714,29.3541707 C29.2737714,29.9211675 29.3764382,30.3073898 29.5817718,30.5128378 C29.7871054,30.7100581 30.1731478,30.8086683 30.7398991,30.8086683 C32.3497659,30.8086683 33.585954,30.2293394 34.4484634,29.0706817 C34.8591492,28.503685 35.179476,27.7107085 35.4094436,26.6917524 C35.647635,25.6727963 35.7667307,24.5634671 35.7667307,23.3637646 C35.7667307,21.194285 35.4217606,19.4275858 34.7318204,18.0636671 C33.8776095,16.3462215 32.5552583,15.4874988 30.7647668,15.4874988 C29.7709194,15.4874988 29.2739957,15.7833293 29.2739957,16.3749902 L29.2737714,16.374878 Z" + id="Shape"> + d="M46.4748036,20.0576829 L46.4748036,22.1284683 C47.0661889,21.2820683 47.6247164,20.6739801 48.1503861,20.3042037 C48.6842608,19.9344272 49.2633198,19.749539 49.887563,19.749539 C50.4789484,19.749539 50.9676576,19.9385411 51.3536907,20.3165451 C51.7397238,20.6863215 51.9327404,21.1547175 51.9327404,21.7217329 C51.9327404,22.2147744 51.7848987,22.6215378 51.4892154,22.9420232 C51.193532,23.2542809 50.8116015,23.4104098 50.3434237,23.4104098 C50.0148826,23.4104098 49.7397307,23.3446709 49.5179682,23.2131932 C49.2962057,23.0817136 49.0662287,22.8475156 48.8280373,22.5105993 C48.556988,22.1161586 48.3228992,21.9189383 48.1257707,21.9189383 C47.7068798,21.9189383 47.3454807,22.1572407 47.0415736,22.6338456 C46.7376664,23.1022415 46.5857129,23.6651338 46.5857129,24.3225224 L46.5857129,29.0927785 C46.5857129,29.8734322 46.6965941,30.3911285 46.9183566,30.6458676 C47.1483429,30.8923976 47.6493692,31.0403082 48.4214354,31.0895993 L48.4214354,31.6935737 L41.706879,31.6935737 L41.7068818,31.0895993 C42.2654093,30.990991 42.6309109,30.8430804 42.8033866,30.6458676 C42.9840843,30.4486472 43.0744331,30.0911936 43.0744331,29.5735066 L43.0744331,22.1532017 C43.0744331,21.6437237 42.9799808,21.28627 42.7910761,21.0808407 C42.6103766,20.8754115 42.2489776,20.7357192 41.706879,20.6617639 L41.706879,20.0577895 L46.4749129,20.0577895 L46.4748036,20.0576829 Z" + id="Shape"> - - - - - - - - + d="M58.2021429,19.7519512 C59.8284386,19.7519512 61.1795731,20.3394984 62.2555464,21.5145927 C63.3397436,22.6814593 63.8818421,24.1482236 63.8818421,25.9148854 C63.8818421,27.673413 63.3397436,29.1361569 62.2555464,30.3031171 C61.1795731,31.4699837 59.8284386,32.0534171 58.2021429,32.0534171 C56.5512131,32.0534171 55.1877429,31.4699837 54.1117321,30.3031171 C53.0357588,29.1362504 52.4977721,27.6489171 52.4977721,25.8411171 C52.4977721,24.1236715 53.0480852,22.6814967 54.1487113,21.5145927 C55.2493373,20.3394984 56.6004718,19.7519512 58.2021148,19.7519512 L58.2021429,19.7519512 Z M58.2267862,20.5408232 C57.6929115,20.5408232 57.282235,20.7174931 56.9947568,21.0708329 C56.7155024,21.4159638 56.5142714,21.9952927 56.3910637,22.8088195 C56.2678599,23.6223463 56.2062579,24.7851553 56.2062579,26.2972463 C56.2062579,28.1461659 56.349997,29.4363163 56.6374752,30.1676976 C56.9331586,30.8990415 57.4547257,31.2647134 58.2021765,31.2647134 C58.9331797,31.2647134 59.4424204,30.8826049 59.7298986,30.1183878 C60.025582,29.3541707 60.1734236,28.0024065 60.1734236,26.0630951 C60.1734236,23.9923472 60.0296845,22.5542862 59.7422063,21.7489122 C59.4629519,20.943613 58.9578138,20.5409634 58.2267919,20.5409634 L58.2267862,20.5408232 Z" + id="Shape"> - - - - - + d="M69.7332321,20.0576829 L69.7332321,29.6472805 C69.7332321,30.1238854 69.8194747,30.4690163 69.9919597,30.6826732 C70.1644448,30.8881024 70.4724545,31.0236902 70.9159888,31.0894366 L70.9159888,31.693411 L64.891383,31.693411 L64.8913942,31.0894366 C65.4663506,30.9497406 65.8318522,30.7936117 65.987899,30.62105 C66.1439589,30.4402663 66.2219888,30.0910215 66.2219888,29.5733159 L66.2219888,22.153011 C66.2219888,21.6353053 66.1398526,21.2860606 65.9755801,21.1052768 C65.8113077,20.9244931 65.4499086,20.7765825 64.891383,20.6615451 L64.891383,20.0575707 L69.7334312,20.0575707 L69.7332321,20.0576829 Z M66.5792143,14.8313537 C66.9652474,14.4451407 67.4293132,14.2520341 67.9714118,14.2520341 C68.5135104,14.2520341 68.9693617,14.4451407 69.3389659,14.8313537 C69.7167939,15.2175667 69.9057079,15.6818488 69.9057079,16.2242 C69.9057079,16.7747602 69.7167939,17.2349378 69.3389659,17.6047329 C68.9693617,17.9745093 68.5052959,18.1593976 67.9467684,18.1593976 C67.3882409,18.1593976 66.9241751,17.9745093 66.5545709,17.6047329 C66.1849667,17.2349565 66.0001646,16.7665606 66.0001646,16.1995451 C66.0001646,15.6654215 66.1931812,15.2093577 66.5792143,14.8313537 Z" + id="Shape"> + d="M80.0335536,32.0289024 L80.0335536,30.3895354 C79.4421682,31.0140508 78.9041815,31.4495736 78.4195936,31.6961037 C77.9349869,31.9344061 77.3559279,32.0535573 76.6824166,32.0535573 C75.360028,32.0535573 74.2676632,31.4947695 73.405322,30.3771939 C72.542906,29.2514093 72.111698,27.8298037 72.111698,26.1123768 C72.111698,24.2881028 72.5716613,22.7719728 73.4915879,21.5639866 C74.4115144,20.3560191 75.5655579,19.7520354 76.9537182,19.7520354 C77.5286746,19.7520354 78.0379154,19.8670821 78.4814404,20.0971756 C78.9249654,20.3272691 79.4177771,20.7340325 79.9598757,21.3174659 L79.9598757,16.6953073 C79.9598757,16.1200829 79.8489945,15.7502972 79.627232,15.58595 C79.4136746,15.421601 78.883893,15.3065542 78.0378873,15.2408098 L78.0378873,14.6368354 L83.4712087,14.6368354 L83.4712087,29.1447866 C83.4712087,29.6789102 83.5738755,30.0486959 83.7792091,30.2541439 C83.9927665,30.4595732 84.3870234,30.5787244 84.9619798,30.6115976 L84.9619798,31.1909171 L83.3972786,31.3881337 C82.1734636,31.5196133 81.0523154,31.7332702 80.0338339,32.0291044 L80.0335536,32.0289024 Z M79.9596318,28.8734146 L79.9596318,22.734939 C79.7789323,22.2583341 79.507883,21.8803301 79.1464839,21.6009268 C78.7933087,21.3133146 78.4072663,21.1695085 77.9883566,21.1695085 C77.2573534,21.1695085 76.7152548,21.5557309 76.3620609,22.3281756 C76.0170908,23.0923927 75.8446057,24.2880187 75.8446057,25.9150537 C75.8446057,27.5174431 76.0047738,28.7048415 76.3251098,29.4772488 C76.6454459,30.2496935 77.1423696,30.6359159 77.8158809,30.6359159 C78.3744084,30.6359159 78.90419,30.3483037 79.4052256,29.7730793 C79.553071,29.6087302 79.6803811,29.4361648 79.7871561,29.2553829 C79.9021474,29.0746011 79.959643,28.9472315 79.959643,28.8732744 L79.9596318,28.8734146 Z" + id="Shape"> + + + + + + + + + + + + + + + + + + + + + + + - - + + +
From 7e670855033e8f9355ccbfb2340cf2360b2b5af6 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 23 Apr 2020 15:38:26 +0100 Subject: [PATCH 11/22] iterate compatibility page and make styling consistent between firefox and chrome Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/structures/ErrorView.scss | 1 + src/components/structures/CompatibilityPage.tsx | 12 ++++-------- src/i18n/strings/en_EN.json | 7 +++---- src/vector/index.html | 2 +- src/vector/static/incompatible-browser.html | 3 +-- 5 files changed, 10 insertions(+), 15 deletions(-) diff --git a/res/css/structures/ErrorView.scss b/res/css/structures/ErrorView.scss index d2e58994b..f75ee6956 100644 --- a/res/css/structures/ErrorView.scss +++ b/res/css/structures/ErrorView.scss @@ -25,6 +25,7 @@ limitations under the License. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5e0f7', endColorstr='#ffffff',GradientType=0 ); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; width: 100%; + min-height: 100%; height: auto; color: #000; diff --git a/src/components/structures/CompatibilityPage.tsx b/src/components/structures/CompatibilityPage.tsx index 7de6ef7e3..a5b3f7ba7 100644 --- a/src/components/structures/CompatibilityPage.tsx +++ b/src/components/structures/CompatibilityPage.tsx @@ -39,12 +39,10 @@ const CompatibilityPage: React.FC = ({ onAccept }) => {
-

{ _t("Use Riot in a browser") }

-

{ _t("Sorry, your browser is not able to run Riot.", {}, { 'b': (sub) => {sub} }) }

+

{ _t("Your browser can't run Riot") }

{ _t( - "Riot uses many advanced browser features, some of which are not available " + - "or experimental in your current browser.", + "Riot uses advanced browser features which aren't supported by your current browser.", ) }

@@ -61,10 +59,8 @@ const CompatibilityPage: React.FC = ({ onAccept }) => {

{ _t( - "With your current browser, the look and feel of the application may be " + - "completely incorrect, and some or all features may not function. " + - "If you want to try it anyway you can continue, but you are on your own in terms " + - "of any issues you may encounter!", + "You can continue using your current browser, but some or all features may not work " + + "and the look and feel of the application may be incorrect.", ) }