From 2f65569b68ae2fcb6d7327e1f4aee8d37307826c Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Sun, 14 Oct 2018 17:54:22 +0000
Subject: [PATCH] Show headset link options on hub.link only if in headset, fix
up some copy
---
src/assets/translations.data.json | 16 +++++------
src/link.js | 6 +++-
src/react-components/link-root.js | 47 ++++++++++++++++++-------------
src/utils/vr-caps-detect.js | 10 +++++--
4 files changed, 48 insertions(+), 31 deletions(-)
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index c61b991c4..b0bd613fd 100644
--- a/src/assets/translations.data.json
+++ b/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",
diff --git a/src/link.js b/src/link.js
index 401fe54d9..7f803b75a 100644
--- a/src/link.js
+++ b/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")
+);
diff --git a/src/react-components/link-root.js b/src/react-components/link-root.js
index 5253de013..be652f7b1 100644
--- a/src/react-components/link-root.js
+++ b/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()}
diff --git a/src/utils/vr-caps-detect.js b/src/utils/vr-caps-detect.js
index d5ad87eff..fc2737ad4 100644
--- a/src/utils/vr-caps-detect.js
+++ b/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
--
GitLab