Send to device follow-ups

src/assets/stylesheets/index.scss

@@ -57,16 +57,20 @@ body {
   min-height: 90px;
   height: 90px;
   display: flex;
-  border-bottom: 2px solid #242424;
+  border-bottom: 1px solid #242424;
 
   &__title {
-    flex: 10;
     display: flex;
+    width: 350px;
 
     @media (max-width: 768px) {
       justify-content: center;
     }
 
+    @media (max-width: 1024px) {
+      flex: 1 1 350px;
+    }
+
     &__name {
       width: 200px;
     }
@@ -77,12 +81,32 @@ body {
     }
   }
 
+  &__entry-code {
+    @media (max-width: 1024px) {
+      display: none;
+    }
+
+    flex: 10;
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    &__link {
+      color: white;
+      text-decoration-color: $light-grey;
+    }
+  }
+
   &__experiment {
     text-align: right;
     flex: 1 1 350px;
+    width: 350px;
     color: $grey-text;
     font-size: 1.0em;
     font-weight: lighter;
+    white-space: nowrap;
 
     @media (max-width: 768px) {
       display: none;
@@ -117,6 +141,26 @@ body {
   }
 }
 
+.header-subtitle {
+  @media (min-width: 1024px) {
+    display: none;
+  }
+
+  padding: 0.5em;
+  background-color: rgba(0, 0, 0, 0.85);
+  text-align: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 2px solid #242424;
+
+  &__link {
+    color: white;
+    text-decoration-color: $light-grey;
+  }
+}
+
 .hero-content {
   flex: 10;
   min-height: 740px;

src/assets/stylesheets/link.scss

@@ -108,6 +108,7 @@ a {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: 1fr 1fr 1fr 1fr;
+  text-align: center;
 }
 
 :local(.keypad-button) {
@@ -116,8 +117,8 @@ a {
   font-family: sans-serif;
   border: 4px $light-grey solid;
   border-radius: 128px;
-  min-width: 88px;
-  min-height: 88px;
+  min-width: 80px;
+  min-height: 80px;
   cursor: pointer;
   line-height: 68px;
   margin: 8px;
@@ -170,7 +171,7 @@ a {
   margin: 0;
   font-size: 64pt;
   border: 0;
-  width: 225px;
+  width: 295px;
   letter-spacing: 0.08em;
   text-align: center;
 }

src/assets/translations.data.json

@@ -13,6 +13,7 @@
     "entry.device-medium": "Device",
     "entry.device-subtitle-desktop": "Standalone Headset or Phone",
     "entry.device-subtitle-mobile": "Mobile Headset or PC",
+    "entry.device-subtitle-vr": "Phone or PC",
     "entry.cardboard": "Enter on Google Cardboard",
     "entry.daydream-prefix": "Enter on ",
     "entry.daydream-medium": "Daydream",
@@ -59,10 +60,11 @@
     "home.made_with_love": "made with 🦆 by ",
     "home.environment_author_by": " by ",
     "home.dialog.close": "CLOSE",
+    "home.have_entry_code": "Have a link code?",
     "mailing_list.privacy_label": "I'm okay with Mozilla handling my info as explained in",
     "mailing_list.privacy_link": "this Privacy Notice",
     "link.in_your_browser": "In your device's browser, go to:",
-    "link.enter_code": "Then, enter this code:",
+    "link.enter_code": "Then, enter this link code:",
     "link.do_not_close": "Keep this dialog open to use this code.",
     "link.link_page_header": "Enter your code:",
     "link.dont_have_a_code": "Don't have a code?",

src/hub.js

@@ -69,6 +69,7 @@ import UIRoot from "./react-components/ui-root";
 import HubChannel from "./utils/hub-channel";
 import LinkChannel from "./utils/link-channel";
 import { connectToReticulum } from "./utils/phoenix-utils";
+import { disableiOSZoom } from "./utils/disable-ios-zoom";
 
 import "./systems/personal-space-bubble";
 import "./systems/app-mode";
@@ -133,6 +134,8 @@ if (!isBotMode) {
   registerTelemetry();
 }
 
+disableiOSZoom();
+
 AFRAME.registerInputBehaviour("trackpad_dpad4", trackpad_dpad4);
 AFRAME.registerInputBehaviour("joystick_dpad4", joystick_dpad4);
 AFRAME.registerInputBehaviour("msft_mr_axis_with_deadzone", msft_mr_axis_with_deadzone);

src/link.html

@@ -7,6 +7,7 @@
     <link rel="shortcut icon" type="image/png" href="/favicon.ico"/>
     <title>Enter Code | Hubs by Mozilla</title>
     <link href="https://fonts.googleapis.com/css?family=Zilla+Slab:300,300i,400,400i,700" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 </head>
 
 <body>

src/react-components/entry-buttons.js

@@ -38,7 +38,8 @@ EntryButton.propTypes = {
   iconSrc: PropTypes.string,
   prefixMessageId: PropTypes.string,
   mediumMessageId: PropTypes.string,
-  subtitle: PropTypes.string
+  subtitle: PropTypes.string,
+  isInHMD: PropTypes.bool
 };
 
 export const TwoDEntryButton = props => {
@@ -91,9 +92,12 @@ export const DeviceEntryButton = props => {
     ...props,
     iconSrc: DeviceEntryImg,
     prefixMessageId: mobiledetect.mobile() ? "entry.device-prefix-mobile" : "entry.device-prefix-desktop",
-    mediumMessageId: "entry.device-medium",
-    subtitle: mobiledetect.mobile() ? "entry.device-subtitle-mobile" : "entry.device-subtitle-desktop"
+    mediumMessageId: "entry.device-medium"
   };
 
+  entryButtonProps.subtitle = entryButtonProps.isInHMD
+    ? "entry.device-subtitle-vr"
+    : mobiledetect.mobile() ? "entry.device-subtitle-mobile" : "entry.device-subtitle-desktop";
+
   return <EntryButton {...entryButtonProps} />;
 };

src/react-components/home-root.js

@@ -99,6 +99,13 @@ class HomeRoot extends Component {
                 <img className="header-content__title__name" src="../assets/images/logo.svg" />
                 <div className="header-content__title__preview">preview</div>
               </div>
+              <div className="header-content__entry-code">
+                <div>
+                  <a className="header-content__entry-code__link" href="/link">
+                    <FormattedMessage id="home.have_entry_code" />
+                  </a>
+                </div>
+              </div>
               <div className="header-content__experiment">
                 <div className="header-content__experiment__container">
                   <img src="../assets/images/webvr_cube.svg" className="header-content__experiment__icon" />
@@ -132,6 +139,13 @@ class HomeRoot extends Component {
                 </div>
               </div>
             </div>
+            <div className="header-subtitle">
+              <div>
+                <a className="header-subtitle__link" href="/link">
+                  <FormattedMessage id="home.have_entry_code" />
+                </a>
+              </div>
+            </div>
             <div className="hero-content">
               <div className="hero-content__attribution">
                 Medieval Fantasy Book by{" "}

src/react-components/link-root.js

@@ -6,10 +6,12 @@ import en from "react-intl/locale-data/en";
 import { lang, messages } from "../utils/i18n";
 import classNames from "classnames";
 import styles from "../assets/stylesheets/link.scss";
+import { disableiOSZoom } from "../utils/disable-ios-zoom";
 
 const MAX_DIGITS = 4;
 
 addLocaleData([...en]);
+disableiOSZoom();
 
 class LinkRoot extends Component {
   static propTypes = {
@@ -78,8 +80,11 @@ class LinkRoot extends Component {
         }
       })
       .catch(e => {
-        console.error(e);
         this.setState({ failedAtLeastOnce: true, enteredDigits: "" });
+
+        if (!(e instanceof Error && (e.message === "in_use" || e.message === "failed"))) {
+          throw e;
+        }
       });
   };
 
@@ -106,7 +111,8 @@ class LinkRoot extends Component {
               <div className={styles.enteredDigits}>
                 <input
                   className={styles.digitInput}
-                  type="number"
+                  type="tel"
+                  pattern="[0-9]*"
                   value={this.state.enteredDigits}
                   onChange={ev => {
                     this.setState({ enteredDigits: ev.target.value });

src/react-components/ui-root.js

@@ -612,7 +612,9 @@ class UIRoot extends Component {
       this.state.entryStep === ENTRY_STEPS.start ? (
         <div className="entry-panel">
           <div className="entry-panel__button-container">
-            <TwoDEntryButton onClick={this.enter2D} />
+            {this.props.availableVREntryTypes.screen !== VR_DEVICE_AVAILABILITY.no && (
+              <TwoDEntryButton onClick={this.enter2D} />
+            )}
             {this.props.availableVREntryTypes.generic !== VR_DEVICE_AVAILABILITY.no && (
               <GenericEntryButton onClick={this.enterVR} />
             )}
@@ -626,7 +628,7 @@ class UIRoot extends Component {
                 }
               />
             )}
-            <DeviceEntryButton onClick={this.attemptLink} />
+            <DeviceEntryButton onClick={this.attemptLink} isInHMD={this.props.availableVREntryTypes.isInHMD} />
             {this.props.availableVREntryTypes.cardboard !== VR_DEVICE_AVAILABILITY.no && (
               <div className="entry-panel__secondary" onClick={this.enterVR}>
                 <FormattedMessage id="entry.cardboard" />

src/utils/disable-ios-zoom.js

@@ -0,0 +1,24 @@
+import MobileDetect from "mobile-detect";
+const mobiledetect = new MobileDetect(navigator.userAgent);
+
+export function disableiOSZoom() {
+  if (!mobiledetect.is("iPhone") && !mobiledetect.is("iPad")) return;
+
+  let lastTouchAtMs = 0;
+
+  document.addEventListener("touchmove", ev => {
+    if (ev.scale === 1) return;
+
+    ev.preventDefault();
+  });
+
+  document.addEventListener("touchend", ev => {
+    const now = new Date().getTime();
+    const isDoubleTouch = now - lastTouchAtMs <= 300;
+    lastTouchAtMs = now;
+
+    if (isDoubleTouch) {
+      ev.preventDefault();
+    }
+  });
+}

src/utils/vr-caps-detect.js

@@ -35,22 +35,27 @@ const GENERIC_ENTRY_TYPE_DEVICE_BLACKLIST = [/cardboard/i];
 // Once in a compatible browser, we should assume it will work (if it doesn't, it's because they don't have the headset,
 // haven't installed the software, our guess about their phone was wrong, etc.)
 //
-// At the time of this writing there are three VR "entry types" that will be validated by this method:
+// At the time of this writing there are the following VR "entry types" that will be validated by this method:
 //
+// - screen: Enter "on-screen" in 2D
 // - generic: Generic WebVR (platform/OS agnostic indicator if a general 'Enter VR' option should be presented.)
 // - daydream: Google Daydream
 // - gearvr: Oculus GearVR
+// - cardboard: Google Cardboard
 //
+// This function also detects if the user is already in a headset, and returns the isInHMD key to be `true` if so.
 export async function getAvailableVREntryTypes() {
   const isSamsungBrowser = browser.name === "chrome" && navigator.userAgent.match(/SamsungBrowser/);
   const isOculusBrowser = navigator.userAgent.match(/Oculus/);
+  const isInHMD = isOculusBrowser;
 
   // This needs to be kept up-to-date with the latest browsers that can support VR and Hubs.
   // Checking for navigator.getVRDisplays always passes b/c of polyfill.
   const isWebVRCapableBrowser = window.hasNativeWebVRImplementation;
 
   const isDaydreamCapableBrowser = !!(isWebVRCapableBrowser && browser.name === "chrome" && !isSamsungBrowser);
 
+  const screen = isInHMD ? VR_DEVICE_AVAILABILITY.no : VR_DEVICE_AVAILABILITY.yes;
   let generic = mobiledetect.mobile() ? VR_DEVICE_AVAILABILITY.no : VR_DEVICE_AVAILABILITY.maybe;
   let cardboard = VR_DEVICE_AVAILABILITY.no;
 
@@ -65,7 +70,8 @@ export async function getAvailableVREntryTypes() {
 
   // For daydream detection, we first check if they are on an Android compatible device, and assume they
   // may support daydream *unless* this browser has WebVR capabilities, in which case we can do better.
-  let daydream = isMaybeDaydreamCompatibleDevice() ? VR_DEVICE_AVAILABILITY.maybe : VR_DEVICE_AVAILABILITY.no;
+  let daydream =
+    isMaybeDaydreamCompatibleDevice() && !isInHMD ? VR_DEVICE_AVAILABILITY.maybe : VR_DEVICE_AVAILABILITY.no;
 
   if (isWebVRCapableBrowser) {
     const displays = await navigator.getVRDisplays();
@@ -94,5 +100,5 @@ export async function getAvailableVREntryTypes() {
     }
   }
 
-  return { generic, gearvr, daydream, cardboard };
+  return { screen, generic, gearvr, daydream, cardboard, isInHMD };
 }