diff --git a/package.json b/package.json
index 2637b8f2..25c59696 100644
--- a/package.json
+++ b/package.json
@@ -8,9 +8,11 @@
"image-average-color": "^1.0.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
+ "react-redux": "^5.1.1",
"react-scripts": "1.1.1",
+ "redux": "^4.0.1",
"shell-escape": "^0.2.0",
- "webamp": "^1.0.0"
+ "webamp": "^1.3.0-beta.0"
},
"scripts": {
"start": "react-scripts start",
diff --git a/public/llama.mp3 b/public/llama.mp3
new file mode 100644
index 00000000..7262ff2b
Binary files /dev/null and b/public/llama.mp3 differ
diff --git a/src/App.css b/src/App.css
index 6401640b..9a254dbb 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +1,11 @@
+body {
+ margin: 0;
+}
+
+body.overlay-open {
+ overflow: hidden;
+}
+
.screenshot {
height: 100%;
opacity: 0;
@@ -10,27 +18,8 @@
-webkit-backface-visibility: hidden;
}
-.skin:hover {
- /*
- z-index: 10;
- box-shadow: 0px 0px 15px 5px rgba(46, 46, 139, 0.75);
- */
-}
-
-.priority {
- position: absolute;
- background: white;
-}
-
.overlay {
- /* recommendation:
- don't focus on the number "1000" here, but rather,
- you should have a documented system for z-index and
- follow that system. This number should be pretty
- high on the scale in that system.
- */
z-index: 1000;
-
position: fixed;
top: 0;
left: 0;
@@ -38,3 +27,14 @@
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
}
+
+#close-modal {
+ color: white;
+ position: fixed;
+ top: 10px;
+ right: 10px;
+ padding: 0;
+ font-size: 50px;
+ line-height: 50px;
+ text-decoration: none;
+}
diff --git a/src/App.js b/src/App.js
index 40c5f4e8..8b1f9d08 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,12 @@
import React from "react";
import skins from "./skins.json";
import "./App.css";
-import { Overlay } from "./Overlay";
+import { connect } from "react-redux";
+import Overlay from "./Overlay";
import Skin from "./Skin";
import FocusedSkin from "./FocusedSkin";
import * as Utils from "./utils";
+import * as Selectors from "./redux/selectors";
import { SKIN_WIDTH, SKIN_HEIGHT, SKIN_RATIO } from "./constants";
const hashes = Object.keys(skins);
@@ -24,7 +26,6 @@ class App extends React.Component {
...Utils.getWindowSize(),
scrollTop: getScrollTop(),
scrollDirection: null,
- selectedSkinHash: null,
selectedSkinPosition: null
};
this._handleScroll();
@@ -34,7 +35,7 @@ class App extends React.Component {
}
_handleSelectSkin(hash, position) {
- this.setState({ selectedSkinHash: hash, selectedSkinPosition: position });
+ this.props.setSelectedSkin(hash, position);
}
_handleResize() {
@@ -135,15 +136,9 @@ class App extends React.Component {
>
{skinElements}
- {this.state.selectedSkinHash && (
+ {this.props.selectedSkinHash == null || (
-
+
)}
@@ -151,4 +146,17 @@ class App extends React.Component {
}
}
-export default App;
+const mapStateToProps = state => ({
+ selectedSkinHash: Selectors.getSelectedSkinHash(state)
+});
+
+const mapDispatchToProps = dispatch => ({
+ // TODO: Extract to action creator
+ setSelectedSkin(hash, position) {
+ dispatch({ type: "SELECT_SKIN", hash, position });
+ }
+});
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(App);
diff --git a/src/FocusedSkin.js b/src/FocusedSkin.js
index bfd4e2e1..29553e03 100644
--- a/src/FocusedSkin.js
+++ b/src/FocusedSkin.js
@@ -1,30 +1,42 @@
import React from "react";
+import { connect } from "react-redux";
+import WebampComponent from "./WebampComponent";
import * as Utils from "./utils";
+import * as Selectors from "./redux/selectors";
import { SCREENSHOT_HEIGHT, SCREENSHOT_WIDTH } from "./constants";
-export default class FocusedSkin extends React.Component {
+class FocusedSkin extends React.Component {
constructor(props) {
super(props);
// TODO: Handle the case were we come from a permalink
- this.state = {
- top: this.props.initialTop,
- left: this.props.initialLeft,
- width: this.props.initialWidth,
- height: this.props.initialHeight
- };
+ if (this.props.initialPosition == null) {
+ this.state = this._getCenteredState();
+ } else {
+ this.state = {
+ top: this.props.initialPosition.top,
+ left: this.props.initialPosition.left,
+ width: this.props.initialWidth,
+ height: this.props.initialHeight
+ };
+ }
}
componentDidMount() {
setTimeout(() => {
// TODO: Observe DOM and recenter
- const { windowWidth, windowHeight } = Utils.getWindowSize();
- this.setState({
- top: (windowHeight - SCREENSHOT_HEIGHT) / 2,
- left: (windowWidth - SCREENSHOT_WIDTH) / 2,
- height: SCREENSHOT_HEIGHT,
- width: SCREENSHOT_WIDTH
- });
+ this.setState(this._getCenteredState());
}, 0);
}
+
+ _getCenteredState() {
+ // TODO: Observe DOM and recenter
+ const { windowWidth, windowHeight } = Utils.getWindowSize();
+ return {
+ top: (windowHeight - SCREENSHOT_HEIGHT) / 2,
+ left: (windowWidth - SCREENSHOT_WIDTH) / 2,
+ height: SCREENSHOT_HEIGHT,
+ width: SCREENSHOT_WIDTH
+ };
+ }
render() {
return (
-
})
+ )}
![]()
{
+ await this._webamp.renderWhenReady(this._ref);
+ }, 400);
+ if (this._unmounted === true) {
+ return;
+ }
+ // this.setState({ loading: false });
+ }
+
+ render() {
+ return (
+ (this._ref = node)}
+ >
+
+