From b637e32c5d22c6307428b2b5169cf5564f74b047 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sat, 1 Dec 2018 13:05:20 -0800
Subject: [PATCH] Ensure screenshot does not block webamp

---
 src/App.css            |  9 ++++-----
 src/FocusedSkin.js     |  9 +++++++--
 src/WebampComponent.js | 20 +++++++++-----------
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/App.css b/src/App.css
index 650534a5..809fdb51 100644
--- a/src/App.css
+++ b/src/App.css
@@ -79,11 +79,10 @@ body.overlay-open .overlay {
   color: white;
 }
 
-#focused-skin .focused-preview {
-  -webkit-transition: opacity 400ms ease-in-out;
-  -moz-transition: opacity 400ms ease-in-out;
-  -ms-transition: opacity 400ms ease-in-out;
+#focused-skin {
+  visibility: visible;
 }
-#focused-skin .focused-preview.loaded {
+#focused-skin.loaded {
   opacity: 0;
+  visibility: hidden;
 }
diff --git a/src/FocusedSkin.js b/src/FocusedSkin.js
index 7b5d53b3..3e4fc25a 100644
--- a/src/FocusedSkin.js
+++ b/src/FocusedSkin.js
@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { connect } from "react-redux";
+import classnames from "classnames";
 import WebampComponent from "./WebampComponent";
 import * as Utils from "./utils";
 import * as Selectors from "./redux/selectors";
@@ -11,9 +12,10 @@ class FocusedSkin extends React.Component {
     super(props);
     // TODO: Handle the case were we come from a permalink
     if (this.props.initialPosition == null) {
-      this.state = this._getCenteredState();
+      this.state = Object.assign({ loaded: false }, this._getCenteredState());
     } else {
       this.state = {
+        loaded: false,
         top: this.props.initialPosition.top,
         left: this.props.initialPosition.left,
         width: this.props.initialWidth,
@@ -49,9 +51,11 @@ class FocusedSkin extends React.Component {
     };
   }
   render() {
+    const { loaded } = this.state;
     return ReactDOM.createPortal(
       <div
         id="focused-skin"
+        className={classnames({ loaded })}
         style={{
           position: "fixed",
           height: this.state.height,
@@ -60,13 +64,14 @@ class FocusedSkin extends React.Component {
             this.state.left
           )}px) translateY(${Math.round(this.state.top)}px)`,
           transition:
-            "transform 400ms ease-out, height 400ms ease-out, width 400ms ease-out"
+            "all 400ms ease-out, height 400ms ease-out, width 400ms ease-out"
         }}
       >
         <WebampComponent
           key={this.props.hash} // Don't reuse instances
           skinUrl={Utils.skinUrlFromHash(this.props.hash)}
           screenshotUrl={Utils.screenshotUrlFromHash(this.props.hash)}
+          loaded={() => this.setState({ loaded: true })}
         />
         <div className="metadata">
           <div className="file-name">
diff --git a/src/WebampComponent.js b/src/WebampComponent.js
index 3ff46a8c..649230fb 100644
--- a/src/WebampComponent.js
+++ b/src/WebampComponent.js
@@ -1,13 +1,10 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import { connect } from "react-redux";
-import classnames from "classnames";
 import * as ActionCreators from "./redux/actionCreators";
 
 class WebampComponent extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { loading: true };
   }
   componentDidMount() {
     this._loadWebamp();
@@ -15,6 +12,9 @@ class WebampComponent extends React.Component {
 
   componentWillUnmount() {
     this._unmounted = true;
+    if (this._renderTimeout) {
+      clearTimeout(this._renderTimeout);
+    }
     if (this._webamp) {
       // TODO: Repace this with this._webamp.destroy() once we upgrade.
       const close = document.querySelector("#webamp #close");
@@ -50,17 +50,15 @@ class WebampComponent extends React.Component {
     // TODO: Technically we should unsubscribe this on unmount
     this._webamp.onClose(this.props.closeModal);
 
-    setTimeout(async () => {
+    this._renderTimeout = setTimeout(async () => {
       await this._webamp.renderWhenReady(this._ref);
-      this.setState({ loading: false });
-    }, 400);
-    if (this._unmounted === true) {
-      return;
-    }
+      if (!this._unmounted) {
+        this.props.loaded();
+      }
+    }, 500);
   }
 
   render() {
-    const { loading } = this.state;
     return (
       <div style={{ width: "100%", height: "100%" }}>
         <div
@@ -68,7 +66,7 @@ class WebampComponent extends React.Component {
           style={{ position: "absolute", width: "100%", height: "100%" }}
         />
         <img
-          className={classnames("focused-preview", { loaded: !loading })}
+          className={"focused-preview"}
           style={{
             width: "100%",
             height: "100%",