Show headset link options on hub.link only if in headset, fix up some copy

src/assets/translations.data.json

@@ -5,22 +5,22 @@
     "auth.verified": "Your email has been verified!",
     "auth.spoke-verified": "You email has been verified! {br} You can now close this browser tab and return to Spoke.",
     "entry.enter-room-title": "Lobby",
-    "entry.enter-room": "Enter Room",
+    "entry.enter-room": "Next",
     "entry.screen-prefix": "Enter on ",
     "entry.desktop-screen": "Screen",
     "entry.mobile-screen": "Phone",
     "entry.mobile-safari": "Safari",
-    "entry.generic-prefix": "Enter with ",
-    "entry.generic-medium": "PC VR",
+    "entry.generic-prefix": " ",
+    "entry.generic-medium": "Connected Headset",
     "entry.generic-subtitle-desktop": "Oculus or SteamVR",
     "entry.gearvr-prefix": "Enter on ",
     "entry.gearvr-medium": "Gear VR",
     "entry.choose-device": "Choose Device",
-    "entry.device-prefix-desktop": "Use a ",
-    "entry.device-prefix-mobile": "Use a ",
+    "entry.device-prefix-desktop": " ",
+    "entry.device-prefix-mobile": " ",
     "entry.device-medium": "Mobile Headset",
-    "entry.device-subtitle-desktop": "Standalone or Phone Clip-in",
-    "entry.device-subtitle-mobile": "Standalone or Phone Clip-in",
+    "entry.device-subtitle-desktop": "Standalone or Mobile VR",
+    "entry.device-subtitle-mobile": "Standalone or Mobile VR",
     "entry.device-subtitle-vr": "Phone or PC",
     "entry.cardboard": "Enter on Google Cardboard",
     "entry.daydream-prefix": "Enter on ",
@@ -84,7 +84,7 @@
     "link.in_your_browser": "In your headset's browser, go to:",
     "link.enter_code": "Then, enter this one-time link code:",
     "link.do_not_close": "Keep this open to use this code.",
-    "link.connect_headset": "Connect Mobile Headset",
+    "link.connect_headset": "Link VR Headset",
     "link.cancel": "cancel",
     "invite.enter_via": "Enter via ",
     "invite.tweet": "tweet",

src/link.js

@@ -6,6 +6,7 @@ import LinkRoot from "./react-components/link-root";
 import LinkChannel from "./utils/link-channel";
 import { connectToReticulum } from "./utils/phoenix-utils";
 import Store from "./storage/store";
+import { detectInHMD } from "./utils/vr-caps-detect.js";
 
 registerTelemetry();
 
@@ -17,4 +18,7 @@ const linkChannel = new LinkChannel(store);
 
 linkChannel.setSocket(socket);
 
-ReactDOM.render(<LinkRoot store={store} linkChannel={linkChannel} />, document.getElementById("link-root"));
+ReactDOM.render(
+  <LinkRoot store={store} linkChannel={linkChannel} showHeadsetLinkOption={detectInHMD()} />,
+  document.getElementById("link-root")
+);

src/react-components/link-root.js

@@ -20,7 +20,8 @@ class LinkRoot extends Component {
   static propTypes = {
     intl: PropTypes.object,
     store: PropTypes.object,
-    linkChannel: PropTypes.object
+    linkChannel: PropTypes.object,
+    showHeadsetLinkOption: PropTypes.bool
   };
 
   state = {
@@ -178,16 +179,18 @@ class LinkRoot extends Component {
               </div>
 
               <div className={styles.enteredFooter}>
-                {!this.state.isAlphaMode && (
-                  <img onClick={() => this.toggleMode()} src={HeadsetIcon} className={styles.headsetIcon} />
-                )}
-                {!this.state.isAlphaMode && (
-                  <span>
-                    <a href="#" onClick={() => this.toggleMode()}>
-                      <FormattedMessage id="link.linking_a_headset" />
-                    </a>
-                  </span>
-                )}
+                {!this.state.isAlphaMode &&
+                  this.props.showHeadsetLinkOption && (
+                    <img onClick={() => this.toggleMode()} src={HeadsetIcon} className={styles.headsetIcon} />
+                  )}
+                {!this.state.isAlphaMode &&
+                  this.props.showHeadsetLinkOption && (
+                    <span>
+                      <a href="#" onClick={() => this.toggleMode()}>
+                        <FormattedMessage id="link.linking_a_headset" />
+                      </a>
+                    </span>
+                  )}
               </div>
             </div>
 
@@ -208,15 +211,19 @@ class LinkRoot extends Component {
                   {d}
                 </button>
               ))}
-              <button
-                className={classNames(styles.keypadButton, styles.keypadToggleMode)}
-                onTouchStart={() => this.toggleMode()}
-                onClick={() => {
-                  if (!hasTouchEvents) this.toggleMode();
-                }}
-              >
-                {this.state.isAlphaMode ? "123" : "ABC"}
-              </button>
+              {this.props.showHeadsetLinkOption ? (
+                <button
+                  className={classNames(styles.keypadButton, styles.keypadToggleMode)}
+                  onTouchStart={() => this.toggleMode()}
+                  onClick={() => {
+                    if (!hasTouchEvents) this.toggleMode();
+                  }}
+                >
+                  {this.state.isAlphaMode ? "123" : "ABC"}
+                </button>
+              ) : (
+                <div />
+              )}
               {!this.state.isAlphaMode && (
                 <button
                   disabled={this.state.entered.length === this.maxAllowedChars()}

src/utils/vr-caps-detect.js

@@ -22,6 +22,11 @@ function isMaybeDaydreamCompatibleDevice(ua) {
 // that can be entered into as a "generic" entry flow.
 const GENERIC_ENTRY_TYPE_DEVICE_BLACKLIST = [/cardboard/i];
 
+export function detectInHMD() {
+  const isOculusBrowser = /Oculus/.test(navigator.userAgent);
+  return isOculusBrowser;
+}
+
 // Tries to determine VR entry compatibility regardless of the current browser.
 //
 // For each VR "entry type", returns VR_DEVICE_AVAILABILITY.yes if that type can be launched into directly from this browser
@@ -45,7 +50,6 @@ const GENERIC_ENTRY_TYPE_DEVICE_BLACKLIST = [/cardboard/i];
 export async function getAvailableVREntryTypes() {
   const ua = navigator.userAgent;
   const isSamsungBrowser = browser.name === "chrome" && /SamsungBrowser/.test(ua);
-  const isOculusBrowser = /Oculus/.test(ua);
 
   // 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.
@@ -63,7 +67,9 @@ export async function getAvailableVREntryTypes() {
     : VR_DEVICE_AVAILABILITY.no;
 
   const displays = isWebVRCapableBrowser ? await navigator.getVRDisplays() : [];
-  const isInHMD = isOculusBrowser;
+
+  const isOculusBrowser = /Oculus/.test(ua);
+  const isInHMD = detectInHMD();
 
   const screen = isInHMD
     ? VR_DEVICE_AVAILABILITY.no