diff --git a/src/assets/stylesheets/scene-ui.scss b/src/assets/stylesheets/scene-ui.scss index 897ea45c87c242584447d246e3d8f6e5f05e55cd..f5c67f42a4d44ca740097add74e917293515c1a6 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 f2a148b83b4fce22f40c6872f1c1549294160f7c..2007269c186e2a963f7651b481b8df46abbf497d 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 29829f1739c0da00d717c72742f6c87bf7e70ebe..c72e1bc11de69cc6f2e1b3a5cb3562e990ea936a 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 }); };