diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json index 48f19f8ffff5d89e6892f6a44f5f0f67225f023c..28b9714d52bcb9ab572ce53a8703df6ca21405f6 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 ec9308d40cc0542177d32575d2fedf71341b4e9b..4bf00a57125855931747181ebed8fec9020d3e9f 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 7d1ba326c2cd986437455407f59072e9d2303ef4..ce5f78e6c7acbb7262570f09443fd0617cdc84d7 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 3d27ca3c026f046f2446fb9ce4499b5f4fe63536..d0c96d8fbff5b277622a28cd55cb649fc4054efd 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 }; }