Allow custom windows to be provided via Webamp config

js/components/App.js

@@ -5,17 +5,11 @@ import WindowManager from "./WindowManager";
 import MainWindow from "./MainWindow";
 import PlaylistWindow from "./PlaylistWindow";
 import EqualizerWindow from "./EqualizerWindow";
-import AvsWindow from "./AvsWindow";
+import GenWindow from "./GenWindow";
 import Skin from "./Skin";
 
 import "../../css/webamp.css";
 
-const genWindowMap = {
-  AVS_WINDOW: AvsWindow
-};
-
-const GEN_WINDOWS = ["AVS_WINDOW"];
-
 const App = ({
   media,
   closed,
@@ -23,7 +17,8 @@ const App = ({
   playlist,
   openWindows,
   container,
-  filePickers
+  filePickers,
+  genWindows = {}
 }) => {
   if (closed) {
     return null;
@@ -34,10 +29,22 @@ const App = ({
     playlist: playlist && <PlaylistWindow />
   };
   // Add any "generic" windows
-  GEN_WINDOWS.forEach((windowId, i) => {
-    const Component = genWindowMap[windowId];
+  Object.keys(genWindows).forEach((windowId, i) => {
+    const windowInfo = genWindows[windowId];
+    const { title, Component } = windowInfo;
     windows[`genWindow${i}`] = openWindows.has(windowId) && (
-      <Component key={i} />
+      <GenWindow
+        key={i}
+        title={title}
+        close={() => {
+          // TODO: Allow windows to close
+        }}
+        windowId={windowId}
+      >
+        {({ height, width }) => (
+          <Component analyser={media._analyser} width={width} height={height} />
+        )}
+      </GenWindow>
     );
   });
   return (

js/components/GenWindow/index.js

@@ -2,6 +2,7 @@ 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, CLOSE_GEN_WINDOW } from "../../actionTypes";
 import { scrollVolume } from "../../actionCreators";
@@ -20,6 +21,9 @@ const Text = ({ children }) => {
   ));
 };
 
+const CHROME_WIDTH = 19;
+const CHROME_HEIGHT = 34;
+
 // Named export for testing
 export class GenWindow extends React.Component {
   constructor(props) {
@@ -64,7 +68,12 @@ export class GenWindow extends React.Component {
           <div className="gen-middle-left draggable">
             <div className="gen-middle-left-bottom draggable" />
           </div>
-          <div className="gen-middle-center">{children}</div>
+          <div className="gen-middle-center">
+            {children({
+              width: width - CHROME_WIDTH,
+              height: height - CHROME_HEIGHT
+            })}
+          </div>
           <div className="gen-middle-right draggable">
             <div className="gen-middle-right-bottom draggable" />
           </div>
@@ -87,7 +96,7 @@ export class GenWindow extends React.Component {
 GenWindow.propTypes = {
   title: PropTypes.string.isRequired,
   windowId: PropTypes.string.isRequired,
-  children: PropTypes.node,
+  children: PropTypes.func.isRequired,
   close: PropTypes.func.isRequired,
   selected: PropTypes.bool.isRequired
 };

js/components/GenWindow/index.test.js

@@ -13,7 +13,9 @@ describe("GenWindow", () => {
           close={() => {}}
           windowId="TEST_WINDOW_ID"
           scrollVolume={() => {}}
-        />
+        >
+          {() => {}}
+        </GenWindow>
       )
       .toJSON();
     expect(tree).toMatchSnapshot();

js/webamp.js

@@ -121,6 +121,7 @@ class Winamp {
           media={this.media}
           container={this.options.container}
           filePickers={this.options.filePickers}
+          genWindows={this.options.__extraWindows}
         />
       </Provider>,
       node