Fix home page and hubs page for legacy browsers. Add webassembly feature detect

.babelrc

@@ -18,7 +18,7 @@
           "not and_uc >= 0",
 
           // No WebGL or WebRTC support
-          "not op_mini all",
+          "not op_mini all"
         ]
       },
       // false = do not polyfill stuff unneccessarily
@@ -29,6 +29,9 @@
     [ "react-intl", { "messagesDir": "./public/messages", "enforceDescriptions": false } ],
     "transform-react-jsx-img-import",
     "@babel/proposal-class-properties",
-    "@babel/proposal-object-rest-spread"
+    "@babel/proposal-object-rest-spread",
+    // Samsung Internet on the Oculus Go version is stuck at version 5.2, which is a 
+    // Chromium 51, as of this writing. It needs babel to transpile async/await.
+    "@babel/plugin-transform-async-to-generator"
   ]
 }

src/hub.js

@@ -1,3 +1,4 @@
+import "@babel/polyfill";
 import "./utils/debug-log";
 
 console.log(`Hubs version: ${process.env.BUILD_VERSION || "?"}`);
@@ -529,6 +530,11 @@ async function runBotMode(scene, entryManager) {
 document.addEventListener("DOMContentLoaded", async () => {
   warmSerializeElement();
 
+  if (!window.WebAssembly) {
+    remountUI({ showWebAssemblyDialog: true });
+    return;
+  }
+
   // If we are on iOS but we don't have the mediaDevices API, then we are likely in a Firefox or Chrome WebView,
   // or a WebView preview used in apps like Twitter and Discord. So we show the dialog that tells users to open
   // the room in the real Safari.

src/react-components/ui-root.js

@@ -43,6 +43,7 @@ import SignInDialog from "./sign-in-dialog.js";
 import RenameRoomDialog from "./rename-room-dialog.js";
 import CloseRoomDialog from "./close-room-dialog.js";
 import WebRTCScreenshareUnsupportedDialog from "./webrtc-screenshare-unsupported-dialog.js";
+import WebAssemblyUnsupportedDialog from "./webassembly-unsupported-dialog.js";
 import WebVRRecommendDialog from "./webvr-recommend-dialog.js";
 import RoomInfoDialog from "./room-info-dialog.js";
 import ClientInfoDialog from "./client-info-dialog.js";
@@ -140,6 +141,7 @@ class UIRoot extends Component {
     onContinueAfterSignIn: PropTypes.func,
     showSafariDialog: PropTypes.bool,
     showSafariMicDialog: PropTypes.bool,
+    showWebAssemblyDialog: PropTypes.bool,
     showOAuthDialog: PropTypes.bool,
     oauthInfo: PropTypes.array,
     isCursorHoldingPen: PropTypes.bool,
@@ -204,6 +206,9 @@ class UIRoot extends Component {
     if (props.showSafariDialog) {
       this.state.dialog = <SafariDialog closable={false} />;
     }
+    if (props.showWebAssemblyDialog) {
+      this.state.dialog = <WebAssemblyUnsupportedDialog closable={false} />;
+    }
 
     props.mediaSearchStore.setHistory(props.history);
 
@@ -1225,7 +1230,7 @@ class UIRoot extends Component {
 
     const isLoading =
       (!this.state.hideLoader || !this.state.didConnectToNetworkedScene) &&
-      !(this.props.showSafariMicDialog || this.props.showSafariDialog);
+      !(this.props.showSafariMicDialog || this.props.showSafariDialog || this.props.showWebAssemblyDialog);
 
     const rootStyles = {
       [styles.ui]: true,

src/react-components/webassembly-unsupported-dialog.js

@@ -0,0 +1,18 @@
+import React, { Component } from "react";
+import DialogContainer from "./dialog-container.js";
+
+export default class WebAssemblyUnsupportedDialog extends Component {
+  render() {
+    return (
+      <DialogContainer title="WebAssembly Unsupported" {...this.props}>
+        <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
+          <p>
+            Your browser doesn&apos;t seem to support WebAssembly.
+            <br />
+            Please update or switch to a newer browser.
+          </p>
+        </div>
+      </DialogContainer>
+    );
+  }
+}

webpack.config.js

@@ -81,6 +81,13 @@ function matchRegex({ include, exclude }) {
   };
 }
 
+const babelConfig = JSON.parse(
+  fs
+    .readFileSync(path.resolve(__dirname, ".babelrc"))
+    .toString()
+    .replace(/\/\/.+/g, "")
+);
+
 module.exports = (env, argv) => ({
   entry: {
     index: path.join(__dirname, "src", "index.js"),
@@ -145,6 +152,16 @@ module.exports = (env, argv) => ({
           inline: true
         }
       },
+      {
+        // We reference the sources of some libraries directly, and they use async/await,
+        // so we have to run it through babel in order to support the Samsung browser on Oculus Go.
+        test: [
+          path.resolve(__dirname, "node_modules/aframe-physics-system"),
+          path.resolve(__dirname, "node_modules/naf-janus-adapter")
+        ],
+        loader: "babel-loader",
+        options: babelConfig
+      },
       {
         test: /\.js$/,
         include: [path.resolve(__dirname, "src")],