From dc4cc361e50520d256ca18b112e0d07975c1d4ee Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Tue, 20 Mar 2018 18:16:21 -0700
Subject: [PATCH] Add cardboard entry link
---
src/assets/translations.data.json | 2 ++
src/react-components/ui-root.js | 10 +++++++++-
src/room.scss | 13 +++++++++++++
src/utils/vr-caps-detect.js | 7 ++++++-
4 files changed, 30 insertions(+), 2 deletions(-)
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index 48f19f8ff..28b9714d5 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -8,8 +8,10 @@
"entry.generic-medium": "VR",
"entry.gearvr-prefix": "Enter on ",
"entry.gearvr-medium": "GearVR",
+ "entry.cardboard": "Enter on Google Cardboard",
"entry.daydream-prefix": "Enter on ",
"entry.daydream-medium": "Daydream",
+ "entry.daydream-via-chrome": "Using Google Chrome",
"profile.save": "SAVE",
"profile.display_name.validation_warning": "Alphanumerics and hyphens. At least 3 characters, no more than 32",
"profile.header": "Your identity",
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index ec9308d40..4bf00a571 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -51,6 +51,7 @@ const EntryButton = (props) => (
<span className="entry-button--bolded">
<FormattedMessage id={ props.mediumMessageId }/>
</span>
+ { props.subtitle && (<div className="entry-button__subtitle">{props.subtitle}</div>) }
</div>
</div>
</div>
@@ -449,13 +450,20 @@ class UIRoot extends Component {
);
}
+ const daydreamMaybeSubtitle = messages["entry.daydream-via-chrome"];
+
const entryPanel = this.state.entryStep === ENTRY_STEPS.start
? (
<div className="entry-panel">
<TwoDEntryButton onClick={this.enter2D}/>
{ this.props.availableVREntryTypes.generic !== VR_DEVICE_AVAILABILITY.no && <GenericEntryButton onClick={this.enterVR}/> }
{ this.props.availableVREntryTypes.gearvr !== VR_DEVICE_AVAILABILITY.no && <GearVREntryButton onClick={this.enterGearVR}/> }
- { this.props.availableVREntryTypes.daydream !== VR_DEVICE_AVAILABILITY.no && <DaydreamEntryButton onClick={this.enterDaydream}/> }
+ { this.props.availableVREntryTypes.daydream !== VR_DEVICE_AVAILABILITY.no &&
+ <DaydreamEntryButton
+ onClick={this.enterDaydream}
+ subtitle={this.props.availableVREntryTypes.daydream == VR_DEVICE_AVAILABILITY.maybe ? daydreamMaybeSubtitle : "" }/> }
+ { this.props.availableVREntryTypes.cardboard !== VR_DEVICE_AVAILABILITY.no &&
+ (<div className="entry-panel__secondary" onClick={this.enterVR}><FormattedMessage id="entry.cardboard"/></div>) }
</div>
) : null;
diff --git a/src/room.scss b/src/room.scss
index 7d1ba326c..ce5f78e6c 100644
--- a/src/room.scss
+++ b/src/room.scss
@@ -198,6 +198,11 @@ $darker-grey: rgba(64, 64, 64, 1.0);
font-weight: bold;
}
+.entry-button__subtitle {
+ font-size: 0.7em;
+ color: $light-text;
+}
+
.entry-panel {
display: flex;
flex-direction: column;
@@ -205,6 +210,14 @@ $darker-grey: rgba(64, 64, 64, 1.0);
justify-content: center;
}
+.entry-panel__secondary {
+ width: 100%;
+ text-align: center;
+ margin-top: 10px;
+ cursor: pointer;
+ color: $grey-text;
+}
+
.entry-button {
display: flex;
margin-left: 40px;
diff --git a/src/utils/vr-caps-detect.js b/src/utils/vr-caps-detect.js
index 3d27ca3c0..d0c96d8fb 100644
--- a/src/utils/vr-caps-detect.js
+++ b/src/utils/vr-caps-detect.js
@@ -44,6 +44,7 @@ export async function getAvailableVREntryTypes() {
const isDaydreamCapableBrowser = !!(isWebVRCapableBrowser && browser.name === "chrome" && !isSamsungBrowser);
let generic = VR_DEVICE_AVAILABILITY.no;
+ let cardboard = VR_DEVICE_AVAILABILITY.no;
// We only consider GearVR support as "maybe" and never "yes". The only browser
// that will detect GearVR outside of VR is Samsung Internet, and we'd prefer to launch into Oculus
@@ -64,6 +65,10 @@ export async function getAvailableVREntryTypes() {
? VR_DEVICE_AVAILABILITY.yes
: VR_DEVICE_AVAILABILITY.no;
+ cardboard = displays.find(d => d.capabilities.canPresent && d.displayName.match(/\Wcardboard\W/i))
+ ? VR_DEVICE_AVAILABILITY.yes
+ : VR_DEVICE_AVAILABILITY.no;
+
// For daydream detection, in a WebVR browser we can increase confidence in daydream compatibility.
const hasDaydreamWebVRDevice = displays.find(d => d.displayName.match(/\Wdaydream\W/i));
@@ -77,5 +82,5 @@ export async function getAvailableVREntryTypes() {
}
}
- return { generic, gearvr, daydream };
+ return { generic, gearvr, daydream, cardboard };
}
--
GitLab