Add AvsWindow on top of GenWindow

css/gen-window.css

@@ -81,6 +81,7 @@
 
 #winamp2-js .gen-middle-center {
     flex-grow: 1;
+    position: relative;
 }
 
 #winamp2-js .gen-middle-right {

js/components/AvsWindow/index.js

@@ -0,0 +1,21 @@
+import React from "react";
+import GenWindow from "../GenWindow";
+import "../../../css/gen-window.css";
+
+const AvsWindow = () => (
+  <GenWindow title="Avs" close={() => {}} windowId="AVS_WINDOW">
+    <canvas
+      style={{
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: "100%",
+        width: "100%"
+      }}
+    />
+  </GenWindow>
+);
+
+export default AvsWindow;

js/components/GenWindow/__snapshots__/index.test.js.snap

@@ -3,6 +3,7 @@
 exports[`GenWindow renders to snapshot 1`] = `
 <div
   className="gen-window window selected"
+  onMouseDown={[Function]}
 >
   <div
     className="gen-top draggable"

js/components/GenWindow/index.js

@@ -1,7 +1,9 @@
 import React from "react";
+import { connect } from "react-redux";
 import PropTypes from "prop-types";
 import classnames from "classnames";
-import "../../../css/gen-window.css";
+
+import { SET_FOCUSED_WINDOW } from "../../actionTypes";
 
 const Text = ({ children }) => {
   const letters = children.split("");
@@ -15,8 +17,19 @@ const Text = ({ children }) => {
   ));
 };
 
-const GenWindow = ({ selected, children, close, title }) => (
-  <div className={classnames("gen-window", "window", { selected })}>
+// Named export for testing
+export const GenWindow = ({
+  selected,
+  children,
+  close,
+  title,
+  setFocus,
+  windowId
+}) => (
+  <div
+    className={classnames("gen-window", "window", { selected })}
+    onMouseDown={() => setFocus(windowId)}
+  >
     <div className="gen-top draggable">
       <div className="gen-top-left draggable" />
       <div className="gen-top-left-right-fill draggable" />
@@ -48,9 +61,18 @@ const GenWindow = ({ selected, children, close, title }) => (
 
 GenWindow.propTypes = {
   title: PropTypes.string.isRequired,
+  windowId: PropTypes.string.isRequired,
   children: PropTypes.node,
   close: PropTypes.func.isRequired,
   selected: PropTypes.bool.isRequired
 };
 
-export default GenWindow;
+const mapStateToProps = (state, ownProps) => ({
+  selected: state.windows.focused === ownProps.windowId
+});
+
+const mapDispatchToProps = {
+  setFocus: window => ({ type: SET_FOCUSED_WINDOW, window })
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(GenWindow);

js/components/GenWindow/index.test.js

@@ -1,12 +1,19 @@
 import React from "react";
 import renderer from "react-test-renderer";
 
-import GenWindow from "./index";
+import { GenWindow } from "./index";
 
 describe("GenWindow", () => {
   it("renders to snapshot", () => {
     const tree = renderer
-      .create(<GenWindow title="My Window" selected close={() => {}} />)
+      .create(
+        <GenWindow
+          title="My Window"
+          selected
+          close={() => {}}
+          windowId="TEST_WINDOW_ID"
+        />
+      )
       .toJSON();
     expect(tree).toMatchSnapshot();
   });