extract browser compatibility error handling out of app.js

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/vector/app.js

@@ -126,7 +126,7 @@ function onTokenLoginCompleted() {
     window.location.href = formatted;
 }
 
-export async function loadApp(fragParams: {}, acceptBrowser: boolean) {
+export async function loadApp(fragParams: {}) {
     // XXX: the way we pass the path to the worker script from webpack via html in body's dataset is a hack
     // but alternatives seem to require changing the interface to passing Workers to js-sdk
     const vectorIndexeddbWorkerScript = document.body.dataset.vectorIndexeddbWorkerScript;
@@ -148,7 +148,7 @@ export async function loadApp(fragParams: {}, acceptBrowser: boolean) {
 
     const urlWithoutQuery = window.location.protocol + '//' + window.location.host + window.location.pathname;
     console.log("Vector starting at " + urlWithoutQuery);
-    if (acceptBrowser) {
+
     platform.startUpdater();
 
     try {
@@ -178,16 +178,6 @@ export async function loadApp(fragParams: {}, acceptBrowser: boolean) {
         const GenericErrorPage = sdk.getComponent("structures.GenericErrorPage");
         return <GenericErrorPage message={errorMessage} title={_t("Your Riot is misconfigured")} />;
     }
-    } else {
-        console.error("Browser is missing required features.");
-        // take to a different landing page to AWOOOOOGA at the user
-        const CompatibilityPage = sdk.getComponent("structures.CompatibilityPage");
-        return <CompatibilityPage onAccept={function() {
-            if (window.localStorage) window.localStorage.setItem('mx_accepts_unsupported_browser', true);
-            console.log("User accepts the compatibility risks.");
-            loadApp();
-        }} />;
-    }
 }
 
 async function verifyServerConfig() {

src/vector/index.ts

@@ -100,6 +100,7 @@ async function start() {
         loadTheme,
         loadApp,
         showError,
+        showIncompatibleBrowser,
         _t,
     } = await import(
         /* webpackChunkName: "init" */
@@ -148,9 +149,18 @@ async function start() {
         // ##########################
         // error handling begins here
         // ##########################
+        console.log("DEBUG", acceptBrowser);
         if (!acceptBrowser) {
             await new Promise(resolve => {
-                // todo
+                console.error("Browser is missing required features.");
+                // take to a different landing page to AWOOOOOGA at the user
+                showIncompatibleBrowser(() => {
+                    if (window.localStorage) {
+                        window.localStorage.setItem('mx_accepts_unsupported_browser', String(true));
+                    }
+                    console.log("User accepts the compatibility risks.");
+                    resolve();
+                });
             });
         }
 
@@ -170,7 +180,7 @@ async function start() {
 
         // ##################################
         // app load critical path starts here
-        // await things starting successfully
+        // assert things started successfully
         // ##################################
         await loadOlmPromise;
         await loadSkinPromise;
@@ -179,7 +189,7 @@ async function start() {
 
         // Finally, load the app. All of the other react-sdk imports are in this file which causes the skinner to
         // run on the components.
-        await loadApp(fragparts.params, acceptBrowser);
+        await loadApp(fragparts.params);
     } catch (err) {
         console.trace(err);
         const { showError } = await import(

src/vector/init.tsx

@@ -135,13 +135,13 @@ export async function loadTheme() {
     setTheme();
 }
 
-export async function loadApp(fragParams: {}, acceptBrowser: boolean) {
+export async function loadApp(fragParams: {}) {
     // load app.js async so that its code is not executed immediately and we can catch any exceptions
     const module = await import(
         /* webpackChunkName: "riot-web-app" */
         /* webpackPreload: true */
         "./app");
-    window.matrixChat = ReactDOM.render(await module.loadApp(fragParams, acceptBrowser),
+    window.matrixChat = ReactDOM.render(await module.loadApp(fragParams),
         document.getElementById('matrixchat'));
 }
 
@@ -154,4 +154,13 @@ export async function showError(title: string, messages?: string[]) {
         document.getElementById('matrixchat'));
 }
 
+export async function showIncompatibleBrowser(onAccept) {
+    const CompatibilityPage = (await import(
+        /* webpackChunkName: "compatibility-page" */
+        /* webpackPreload: true */
+        "matrix-react-sdk/src/components/structures/CompatibilityPage")).default;
+    window.matrixChat = ReactDOM.render(<CompatibilityPage onAccept={onAccept} />,
+        document.getElementById('matrixchat'));
+}
+
 export const _t = languageHandler._t;