diff --git a/res/css/structures/ErrorView.scss b/res/css/structures/ErrorView.scss index 0f654df85e..d2e58994b6 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 0000000000..7de6ef7e3f --- /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!", + ) } +

+ +
+
+
+ +
+
+ +
+
+ +
+

+ + Go to Riot.im + +

+
+
+
; +}; + +export default CompatibilityPage; + diff --git a/src/components/structures/ErrorView.tsx b/src/components/structures/ErrorView.tsx index 3196ba6263..3178334e5d 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 a10e48ac1f..4f17d54583 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 a6e9794311..ce9c7a2339 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 edd642015c..2203a48b7e 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"> + + + + + + + + + + + + + + + + + + + + + + + - - + + +