From 8c3ac513813b7f0992fcf8c5c243fbff0c869ac1 Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Sat, 29 Sep 2018 03:26:15 +0000
Subject: [PATCH] show screenshot after 5s delay
---
src/assets/stylesheets/scene-ui.scss | 3 ++-
src/assets/stylesheets/scene.scss | 2 +-
src/components/scene-preview-camera.js | 5 ++---
src/react-components/scene-ui.js | 15 ++++++++++-----
src/scene.js | 1 -
5 files changed, 15 insertions(+), 11 deletions(-)
diff --git a/src/assets/stylesheets/scene-ui.scss b/src/assets/stylesheets/scene-ui.scss
index 55b72bfcb..7a881a03e 100644
--- a/src/assets/stylesheets/scene-ui.scss
+++ b/src/assets/stylesheets/scene-ui.scss
@@ -89,12 +89,13 @@
height: 115%;
top: -40px;
left: -40px;
+
img {
width: 100%;
height: 100%;
- background-color: black;
}
+ background-color: black;
filter: blur(10px);
}
diff --git a/src/assets/stylesheets/scene.scss b/src/assets/stylesheets/scene.scss
index 39c9092e8..2c2d78c74 100644
--- a/src/assets/stylesheets/scene.scss
+++ b/src/assets/stylesheets/scene.scss
@@ -1,7 +1,7 @@
@import 'shared';
@import 'loader';
-.brightened {
+canvas {
filter: saturate(1.1) brightness(1.1) contrast(1.1);
}
diff --git a/src/components/scene-preview-camera.js b/src/components/scene-preview-camera.js
index 17024305c..0b7beaa29 100644
--- a/src/components/scene-preview-camera.js
+++ b/src/components/scene-preview-camera.js
@@ -29,8 +29,7 @@ AFRAME.registerComponent("scene-preview-camera", {
},
tick: function() {
- let t = (new Date().getTime() - this.startTime) / (1000.0 * DURATION);
- t = (Math.sin(t * Math.PI * 2) + 1.0) / 2.0;
+ const t = (new Date().getTime() - this.startTime) / (1000.0 * DURATION);
const from = this.backwards ? this.targetPoint : this.startPoint;
const to = this.backwards ? this.startPoint : this.targetPoint;
@@ -43,7 +42,7 @@ AFRAME.registerComponent("scene-preview-camera", {
this.el.object3D.position.set(lerp(from.x, to.x, t), lerp(from.y, to.y, t), lerp(from.z, to.z, t));
this.el.object3D.rotation.setFromQuaternion(newRot);
- if (t >= 1.0) {
+ if (t >= 0.99) {
this.backwards = !this.backwards;
this.startTime = new Date().getTime();
}
diff --git a/src/react-components/scene-ui.js b/src/react-components/scene-ui.js
index 2007269c1..ef47cc598 100644
--- a/src/react-components/scene-ui.js
+++ b/src/react-components/scene-ui.js
@@ -25,11 +25,18 @@ class SceneUI extends Component {
};
state = {
- screenshotReady: false
+ showScreenshot: false
};
constructor(props) {
super(props);
+
+ // Show screenshot if scene isn't loaded in 5 seconds
+ setTimeout(() => {
+ if (!this.props.sceneLoaded) {
+ this.setState({ showScreenshot: true });
+ }
+ }, 5000);
}
componentDidMount() {
@@ -60,18 +67,16 @@ class SceneUI extends Component {
};
render() {
- const showScreenshot = !this.props.sceneLoaded || !this.props.sceneId;
-
return (
<IntlProvider locale={lang} messages={messages}>
<div className={styles.ui}>
<div
className={classNames({
[styles.screenshot]: true,
- [styles.screenshotHidden]: !showScreenshot
+ [styles.screenshotHidden]: this.props.sceneLoaded
})}
>
- <img src={this.props.sceneScreenshotURL} onLoad={() => this.setState({ screenshotReady: true })} />
+ {this.state.showScreenshot && <img src={this.props.sceneScreenshotURL} />}
</div>
<div className={styles.whiteOverlay} />
<div className={styles.grid}>
diff --git a/src/scene.js b/src/scene.js
index c72e1bc11..4928184b1 100644
--- a/src/scene.js
+++ b/src/scene.js
@@ -87,7 +87,6 @@ function mountUI(scene, props = {}) {
const onReady = async () => {
const scene = document.querySelector("a-scene");
window.APP.scene = scene;
- document.querySelector("canvas").classList.add("brightened");
const sceneId = qs.get("scene_id") || document.location.pathname.substring(1).split("/")[1];
console.log(`Scene ID: ${sceneId}`);
--
GitLab