From 33f1ea603f4774f04f1295a94e14f7a09e541f04 Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Wed, 21 Mar 2018 09:28:55 -0700
Subject: [PATCH] Show loading screen earlier not gated on fetching VR device
types
---
src/loader.scss | 8 ++++----
src/react-components/ui-root.js | 16 +++++++--------
src/room.js | 35 +++++++++++++++++----------------
3 files changed, 30 insertions(+), 29 deletions(-)
diff --git a/src/loader.scss b/src/loader.scss
index e906ccfb1..a2e2f5706 100644
--- a/src/loader.scss
+++ b/src/loader.scss
@@ -2,8 +2,8 @@
.loader:before,
.loader:after {
background: #555;
- -webkit-animation: load1 1s infinite ease-in-out;
- animation: load1 1s infinite ease-in-out;
+ -webkit-animation: loader-animation 1s infinite ease-in-out;
+ animation: loader-animation 1s infinite ease-in-out;
width: 0.6em;
height: 1em;
border-radius: 5px;
@@ -37,7 +37,7 @@
.loader:after {
left: 1.2em;
}
-@-webkit-keyframes load1 {
+@-webkit-keyframes loader-animation {
0%,
80%,
100% {
@@ -49,7 +49,7 @@
top: -0.75em;
}
}
-@keyframes load1 {
+@keyframes loader-animation {
0%,
80%,
100% {
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 55da51ce0..3a2aebb99 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -145,7 +145,6 @@ const AUTO_EXIT_TIMER_SECONDS = 10;
class UIRoot extends Component {
static propTypes = {
enterScene: PropTypes.func,
- availableVREntryTypes: PropTypes.object,
concurrentLoadDetector: PropTypes.object,
disableAutoExitOnConcurrentLoad: PropTypes.bool,
forcedVREntryType: PropTypes.string,
@@ -154,6 +153,7 @@ class UIRoot extends Component {
}
state = {
+ availableVREntryTypes: null,
entryStep: ENTRY_STEPS.start,
enterInVR: false,
@@ -314,7 +314,7 @@ class UIRoot extends Component {
enterDaydream = async () => {
const loc = document.location;
- if (this.props.availableVREntryTypes.daydream == VR_DEVICE_AVAILABILITY.maybe) {
+ if (this.state.availableVREntryTypes.daydream == VR_DEVICE_AVAILABILITY.maybe) {
this.exit();
// We are not in mobile chrome, so launch into chrome via an Intent URL
@@ -448,7 +448,7 @@ class UIRoot extends Component {
}
render() {
- if (!this.props.scene.hasLoaded) {
+ if (!this.props.scene.hasLoaded || !this.state.availableVREntryTypes) {
return (
<div className="loading-panel">
<div className="loader-wrap">
@@ -469,13 +469,13 @@ class UIRoot extends Component {
? (
<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 &&
+ { this.state.availableVREntryTypes.generic !== VR_DEVICE_AVAILABILITY.no && <GenericEntryButton onClick={this.enterVR}/> }
+ { this.state.availableVREntryTypes.gearvr !== VR_DEVICE_AVAILABILITY.no && <GearVREntryButton onClick={this.enterGearVR}/> }
+ { this.state.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 &&
+ subtitle={this.state.availableVREntryTypes.daydream == VR_DEVICE_AVAILABILITY.maybe ? daydreamMaybeSubtitle : "" }/> }
+ { this.state.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.js b/src/room.js
index 64c1e9a29..9ae3be9e7 100644
--- a/src/room.js
+++ b/src/room.js
@@ -213,25 +213,26 @@ function onConnect() {
}
function mountUI(scene) {
- getAvailableVREntryTypes().then(availableVREntryTypes => {
- const qs = queryString.parse(location.search);
- const disableAutoExitOnConcurrentLoad = qs.allow_multi === "true"
- let forcedVREntryType = null;
+ const qs = queryString.parse(location.search);
+ const disableAutoExitOnConcurrentLoad = qs.allow_multi === "true"
+ let forcedVREntryType = null;
- if (qs.vr_entry_type) {
- forcedVREntryType = qs.vr_entry_type;
- }
+ if (qs.vr_entry_type) {
+ forcedVREntryType = qs.vr_entry_type;
+ }
+
+ const uiRoot = ReactDOM.render(<UIRoot {...{
+ scene,
+ enterScene,
+ exitScene,
+ concurrentLoadDetector,
+ disableAutoExitOnConcurrentLoad,
+ forcedVREntryType,
+ store
+ }} />, document.getElementById("ui-root"));
- ReactDOM.render(<UIRoot {...{
- availableVREntryTypes,
- scene,
- enterScene,
- exitScene,
- concurrentLoadDetector,
- disableAutoExitOnConcurrentLoad,
- forcedVREntryType,
- store
- }} />, document.getElementById("ui-root"));
+ getAvailableVREntryTypes().then(availableVREntryTypes => {
+ uiRoot.setState({ availableVREntryTypes });
});
}
--
GitLab