From f4faaf3ffe1857aa4ae68a4500350dccac1a8a03 Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Sat, 24 Mar 2018 10:20:35 -0700
Subject: [PATCH] Show loading screen until environment loaded
---
src/components/gltf-bundle.js | 5 +++++
src/hub.js | 26 +++++++++++++-------------
src/react-components/ui-root.js | 13 ++-----------
3 files changed, 20 insertions(+), 24 deletions(-)
diff --git a/src/components/gltf-bundle.js b/src/components/gltf-bundle.js
index 614db2c1b..57ed05a6c 100644
--- a/src/components/gltf-bundle.js
+++ b/src/components/gltf-bundle.js
@@ -12,6 +12,8 @@ AFRAME.registerComponent("gltf-bundle", {
},
_addGltfEntitiesForBundleJson: function(bundleJson) {
+ const loaded = [];
+
for (let i = 0; i < bundleJson.layers.length; i++) {
const layer = bundleJson.layers[i];
@@ -24,7 +26,10 @@ AFRAME.registerComponent("gltf-bundle", {
const gltfEl = document.createElement("a-gltf-entity");
gltfEl.setAttribute("src", src);
gltfEl.setAttribute("position", "0 0 0");
+ loaded.push(new Promise(resolve => gltfEl.addEventListener("loaded", resolve)));
this.el.appendChild(gltfEl);
}
+
+ Promise.all(loaded).then(() => this.el.emit("bundleloaded"));
}
});
diff --git a/src/hub.js b/src/hub.js
index 42b991d48..02e76e83d 100644
--- a/src/hub.js
+++ b/src/hub.js
@@ -234,7 +234,7 @@ function mountUI(scene) {
return uiRoot;
}
-const onReady = () => {
+const onReady = async () => {
const scene = document.querySelector("a-scene");
document.querySelector("a-scene canvas").classList.add("blurred");
window.APP.scene = scene;
@@ -248,22 +248,22 @@ const onReady = () => {
const environmentRoot = document.querySelector("#environment-root");
+ const initialEnvironmentEl = document.createElement("a-entity");
+ initialEnvironmentEl.addEventListener('bundleloaded', () => uiRoot.setState({initialEnvironmentLoaded: true}));
+ environmentRoot.appendChild(initialEnvironmentEl);
+
if (!qs.room) {
const hubId = document.location.pathname.substring(1);
-
- const res = fetch(`/api/v1/hubs/${hubId}`).then((res) => {
- return res.json();
- }).then((data) => {
- const hub = data.hubs[0];
- const defaultSpaceChannel = hub.channels.find(c => c.attributes.find(a => a.length === 1 && a[0] === "default-space"));
- const gltfBundleUrl = defaultSpaceChannel.assets.find(a => a.asset_type === "gltf_bundle").src;
- uiRoot.setState({ janusRoomId: defaultSpaceChannel.janus_room_id });
- environmentRoot.setAttribute("gltf-bundle", `src: ${gltfBundleUrl}`)
- })
- } else {
+ const res = await fetch(`/api/v1/hubs/${hubId}`);
+ const data = await res.json();
+ const hub = data.hubs[0];
+ const defaultSpaceChannel = hub.channels.find(c => c.attributes.find(a => a.length === 1 && a[0] === "default-space"));
+ const gltfBundleUrl = defaultSpaceChannel.assets.find(a => a.asset_type === "gltf_bundle").src;
+ uiRoot.setState({ janusRoomId: defaultSpaceChannel.janus_room_id });
+ initialEnvironmentEl.setAttribute("gltf-bundle", `src: ${gltfBundleUrl}`)
// If ?room is set, this is `yarn start`, so just use a default environment and query string room.
uiRoot.setState({ janusRoomId: qs.room && !isNaN(parseInt(qs.room)) ? parseInt(qs.room) : 1 });
- environmentRoot.setAttribute("gltf-bundle", "src: /assets/environments/cliff_meeting_space/bundle.json")
+ initialEnvironmentEl.setAttribute("gltf-bundle", "src: /assets/environments/cliff_meeting_space/bundle.json")
}
};
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 7b6cbd27f..e951f62db 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -87,7 +87,7 @@ class UIRoot extends Component {
autoExitTimerInterval: null,
secondsRemainingBeforeAutoExit: Infinity,
- sceneLoaded: false,
+ initialEnvironmentLoaded: false,
exited: false,
showProfileEntry: false,
@@ -99,15 +99,6 @@ class UIRoot extends Component {
this.setupTestTone();
this.props.concurrentLoadDetector.addEventListener("concurrentload", this.onConcurrentLoad);
this.micLevelMovingAverage = MovingAverage(100);
- this.props.scene.addEventListener("loaded", this.onSceneLoaded);
- }
-
- componentWillUnmount() {
- this.props.scene.removeEventListener("loaded", this.onSceneLoaded);
- }
-
- onSceneLoaded = () => {
- this.setState({ sceneLoaded: true });
}
handleForcedVREntryType = () => {
@@ -363,7 +354,7 @@ class UIRoot extends Component {
}
render() {
- if (!this.props.scene.hasLoaded || !this.state.availableVREntryTypes || !this.state.janusRoomId) {
+ if (!this.state.initialEnvironmentLoaded || !this.state.availableVREntryTypes || !this.state.janusRoomId) {
return (
<IntlProvider locale={lang} messages={messages}>
<div className="loading-panel">
--
GitLab