Convert __extraWindows into an array

js/actionCreators.js

@@ -27,7 +27,8 @@ import {
   base64FromArrayBuffer,
   downloadURI,
   normalize,
-  sort
+  sort,
+  uniqueId
 } from "./utils";
 import {
   CLOSE_WINAMP,
@@ -276,11 +277,6 @@ export function fetchMediaDuration(url, id) {
   };
 }
 
-let counter = 0;
-function uniqueId() {
-  return counter++;
-}
-
 export function loadMediaFiles(tracks, loadStyle = null, atIndex = 0) {
   return dispatch => {
     if (loadStyle === LOAD_STYLE.PLAY) {

js/components/App.js

@@ -18,7 +18,7 @@ const App = ({
   openWindows,
   container,
   filePickers,
-  genWindows = {}
+  genWindows = []
 }) => {
   if (closed) {
     return null;
@@ -29,23 +29,21 @@ const App = ({
     playlist: playlist && <PlaylistWindow />
   };
   // Add any "generic" windows
-  Object.keys(genWindows).forEach((windowId, i) => {
-    const windowInfo = genWindows[windowId];
-    const { title, Component } = windowInfo;
-    windows[`genWindow${i}`] = openWindows.has(windowId) && (
-      <GenWindow
-        key={i}
-        title={title}
-        close={() => {
-          // TODO: Allow windows to close
-        }}
-        windowId={windowId}
-      >
-        {({ height, width }) => (
-          <Component analyser={media._analyser} width={width} height={height} />
-        )}
-      </GenWindow>
-    );
+  genWindows.forEach(genWindow => {
+    const { id, title, Component } = genWindow;
+    if (openWindows.has(id)) {
+      windows[`genWindow${id}`] = (
+        <GenWindow key={id} title={title} windowId={id}>
+          {({ height, width }) => (
+            <Component
+              analyser={media._analyser}
+              width={width}
+              height={height}
+            />
+          )}
+        </GenWindow>
+      );
+    }
   });
   return (
     <div role="application" id="webamp">

js/reducers/windows.js

@@ -15,7 +15,6 @@ const defaultWindowsState = {
   focused: WINDOWS.MAIN,
   equalizer: true,
   playlist: true,
-  // openGenWindows: ["AVS_WINDOW"]
   openGenWindows: [],
   positions: {}
 };

js/utils.js

@@ -252,3 +252,8 @@ export function debounce(func, delay) {
     }, delay);
   };
 }
+
+let counter = 0;
+export function uniqueId() {
+  return counter++;
+}

js/webamp.js

@@ -9,13 +9,15 @@ import Media from "./media";
 import { getTrackCount } from "./selectors";
 import { setSkinFromUrl, loadMediaFiles } from "./actionCreators";
 import { LOAD_STYLE } from "./constants";
+import { uniqueId } from "./utils";
 
 import {
   SET_AVAILABLE_SKINS,
   NETWORK_CONNECTED,
   NETWORK_DISCONNECTED,
   CLOSE_WINAMP,
-  MINIMIZE_WINAMP
+  MINIMIZE_WINAMP,
+  OPEN_GEN_WINDOW
 } from "./actionTypes";
 import Emitter from "./emitter";
 
@@ -51,7 +53,8 @@ class Winamp {
       initialTracks,
       avaliableSkins, // Old misspelled name
       availableSkins,
-      enableHotkeys = false
+      enableHotkeys = false,
+      __extraWindows
     } = this.options;
 
     this.media = new Media();
@@ -65,6 +68,18 @@ class Winamp {
       type: navigator.onLine ? NETWORK_CONNECTED : NETWORK_DISCONNECTED
     });
 
+    this.genWindows = [];
+    if (__extraWindows) {
+      this.genWindows = __extraWindows.map(genWindow => ({
+        id: `${genWindow.title}-${uniqueId()}`,
+        ...genWindow
+      }));
+    }
+
+    this.genWindows.forEach(genWindow => {
+      this.store.dispatch({ type: OPEN_GEN_WINDOW, windowId: genWindow.id });
+    });
+
     window.addEventListener("online", () =>
       this.store.dispatch({ type: NETWORK_CONNECTED })
     );
@@ -121,7 +136,7 @@ class Winamp {
           media={this.media}
           container={this.options.container}
           filePickers={this.options.filePickers}
-          genWindows={this.options.__extraWindows}
+          genWindows={this.genWindows}
         />
       </Provider>,
       node