From 07ce839d48d6c770f720a9a2d7d2c3ee597d3e9f Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Wed, 26 Sep 2018 05:38:35 +0000
Subject: [PATCH] Fade in from screenshot
---
src/assets/stylesheets/scene-ui.scss | 31 ++++++++++++++++++++++++-
src/react-components/scene-ui.js | 34 +++++++++++++---------------
src/scene.js | 3 ++-
3 files changed, 48 insertions(+), 20 deletions(-)
diff --git a/src/assets/stylesheets/scene-ui.scss b/src/assets/stylesheets/scene-ui.scss
index 897ea45c8..f5c67f42a 100644
--- a/src/assets/stylesheets/scene-ui.scss
+++ b/src/assets/stylesheets/scene-ui.scss
@@ -10,7 +10,15 @@
position: absolute;
pointer-events: none;
color: white;
+}
+
+:local(.whiteOverlay) {
background-color: rgba(255, 255, 255, 0.2);
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ position: absolute;
}
:local(.grid) {
@@ -19,6 +27,7 @@
grid-template-rows: 1fr 3fr 1fr;
width: 100%;
height: 100%;
+ background-color: rgba(255, 255, 255, 0.2);
}
:local(.mainPanel) {
@@ -71,6 +80,26 @@
:local(.attribution) {
font-size: 1.0em;
- font-weight: light;
white-space: wrap;
}
+
+:local(.screenshot) {
+ position: absolute;
+ width: 110%;
+ height: 110%;
+ top: -40px;
+ left: -40px;
+ img {
+ width: 100%;
+ height: 100%;
+ background-color: black;
+ }
+
+ filter: blur(10px);
+}
+
+:local(.screenshotHidden) {
+ visibility: hidden;
+ opacity: 0;
+ transition: visibility 0s 1s, opacity 1s linear;
+}
diff --git a/src/react-components/scene-ui.js b/src/react-components/scene-ui.js
index f2a148b83..2007269c1 100644
--- a/src/react-components/scene-ui.js
+++ b/src/react-components/scene-ui.js
@@ -1,6 +1,6 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-//import classNames from "classnames";
+import classNames from "classnames";
import { IntlProvider, FormattedMessage, addLocaleData } from "react-intl";
import en from "react-intl/locale-data/en";
import styles from "../assets/stylesheets/scene-ui.scss";
@@ -20,10 +20,13 @@ class SceneUI extends Component {
sceneId: PropTypes.string,
sceneName: PropTypes.string,
sceneDescription: PropTypes.string,
- sceneAttribution: PropTypes.string
+ sceneAttribution: PropTypes.string,
+ sceneScreenshotURL: PropTypes.string
};
- state = {};
+ state = {
+ screenshotReady: false
+ };
constructor(props) {
super(props);
@@ -57,25 +60,20 @@ class SceneUI extends Component {
};
render() {
- if (!this.props.sceneLoaded || !this.props.sceneId) {
- return (
- <IntlProvider locale={lang} messages={messages}>
- <div className="loading-panel">
- <div className="loader-wrap">
- <div className="loader">
- <div className="loader-center" />
- </div>
- </div>
-
- <img className="loading-panel__logo" src="../assets/images/logo.svg" />
- </div>
- </IntlProvider>
- );
- }
+ 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
+ })}
+ >
+ <img src={this.props.sceneScreenshotURL} onLoad={() => this.setState({ screenshotReady: true })} />
+ </div>
+ <div className={styles.whiteOverlay} />
<div className={styles.grid}>
<div className={styles.mainPanel}>
<a href="/" className={styles.logo}>
diff --git a/src/scene.js b/src/scene.js
index 29829f173..c72e1bc11 100644
--- a/src/scene.js
+++ b/src/scene.js
@@ -132,7 +132,8 @@ const onReady = async () => {
remountUI({
sceneName: sceneInfo.name,
sceneDescription: sceneInfo.description,
- sceneAttribution: sceneInfo.attribution
+ sceneAttribution: sceneInfo.attribution,
+ sceneScreenshotURL: sceneInfo.screenshot_url
});
};
--
GitLab