Improve how we manage windows

css/main-window.css

@@ -83,10 +83,6 @@
   }
 }
 
-#winamp2-js #main-window.closed {
-  display: none;
-}
-
 #winamp2-js #title-bar {
   position: absolute;
   top: 0;

css/winamp.css

@@ -84,7 +84,3 @@
   -webkit-transform: scale(2);
   -webkit-transform-origin: top left;
 }
-
-#winamp2-js .window.closed {
-  display: none;
-}

js/actionTypes.js

@@ -1,7 +1,7 @@
 export const LOAD_AUDIO_URL = "LOAD_AUDIO_URL";
 export const LOAD_AUDIO_FILE = "LOAD_AUDIO_FILE";
 export const CLOSE_CONTEXT_MENU = "CLOSE_CONTEXT_MENU";
-export const CLOSE_PRESETS_CONTEXT_MENU = "CLOSE_PRESET_CONTEXT_MENU";
+export const CLOSE_PRESETS_CONTEXT_MENU = "CLOSE_PRESETS_CONTEXT_MENU";
 export const CLOSE_WINAMP = "CLOSE_WINAMP";
 export const CLOSE_EQUALIZER_WINDOW = "CLOSE_EQUALIZER_WINDOW";
 export const IS_PLAYING = "IS_PLAYING";
@@ -27,6 +27,7 @@ export const TOGGLE_CONTEXT_MENU = "TOGGLE_CONTEXT_MENU";
 export const TOGGLE_PRESETS_CONTEXT_MENU = "TOGGLE_PRESET_CONTEXT_MENU";
 export const TOGGLE_DOUBLESIZE_MODE = "TOGGLE_DOUBLESIZE_MODE";
 export const TOGGLE_EQUALIZER_WINDOW = "TOGGLE_EQUALIZER_WINDOW";
+export const TOGGLE_PLAYLIST_WINDOW = "TOGGLE_PLAYLIST_WINDOW";
 export const SET_EQ_AUTO = "SET_EQ_AUTO";
 export const SET_EQ_ON = "SET_EQ_ON";
 export const SET_EQ_OFF = "SET_EQ_OFF";

js/components/App.js

@@ -7,16 +7,22 @@ import EqualizerWindow from "./EqualizerWindow";
 import Skin from "./Skin";
 import { equalizerEnabled, playlistEnabled } from "../config";
 
-const App = ({ winamp, loading }) =>
-  loading ? (
-    <div id="loading">
-      Loading<span className="ellipsis-anim">
-        <span>.</span>
-        <span>.</span>
-        <span>.</span>
-      </span>
-    </div>
-  ) : (
+const App = ({ winamp, loading, closed, equalizer, playlist }) => {
+  if (closed) {
+    return null;
+  }
+  if (loading) {
+    return (
+      <div id="loading">
+        Loading<span className="ellipsis-anim">
+          <span>.</span>
+          <span>.</span>
+          <span>.</span>
+        </span>
+      </div>
+    );
+  }
+  return (
     <div id="loaded">
       <Skin>
         {/* This is not technically kosher, since <style> tags should be in
@@ -24,12 +30,19 @@ const App = ({ winamp, loading }) =>
       </Skin>
       <WindowManager>
         <MainWindow fileInput={winamp.fileInput} mediaPlayer={winamp.media} />
-        {equalizerEnabled && <EqualizerWindow fileInput={winamp.fileInput} />}
-        {playlistEnabled && <PlaylistWindow />}
+        {equalizerEnabled &&
+        equalizer && <EqualizerWindow fileInput={winamp.fileInput} />}
+        {playlistEnabled && playlist && <PlaylistWindow />}
       </WindowManager>
     </div>
   );
+};
 
-const mapStateToProps = state => ({ loading: state.display.loading });
+const mapStateToProps = state => ({
+  loading: state.display.loading,
+  closed: state.display.closed,
+  equalizer: state.windows.equalizer,
+  playlist: state.windows.playlist
+});
 
 export default connect(mapStateToProps)(App);

js/components/EqualizerWindow/index.js

@@ -32,11 +32,10 @@ import "../../../css/equalizer-window.css";
 const bandClassName = band => `band-${band}`;
 
 const EqualizerWindow = props => {
-  const { doubled, selected, closed, volume, balance, shade } = props;
+  const { doubled, selected, volume, balance, shade } = props;
 
   const className = classnames({
     selected,
-    closed,
     doubled,
     shade,
     window: true,
@@ -99,7 +98,6 @@ const EqualizerWindow = props => {
 EqualizerWindow.propTypes = {
   doubled: PropTypes.bool.isRequired,
   selected: PropTypes.bool.isRequired,
-  closed: PropTypes.bool.isRequired,
   shade: PropTypes.bool.isRequired
 };
 
@@ -124,7 +122,6 @@ const mapDispatchToProps = dispatch => ({
 const mapStateToProps = state => ({
   doubled: state.display.doubled,
   selected: state.windows.focused === WINDOWS.EQUALIZER,
-  closed: !state.windows.equalizer,
   contextMenuSelected: state.presetsContextMenu.selected,
   shade: state.display.equalizerShade,
   volume: state.media.volume,

js/components/MainWindow/PlaylistToggleButton.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { connect } from "react-redux";
+import classnames from "classnames";
+
+import { TOGGLE_PLAYLIST_WINDOW } from "../../actionTypes";
+
+const PlaylistToggleButton = props => (
+  <div
+    id="playlist-button"
+    className={classnames({ selected: props.playlist })}
+    onClick={props.handleClick}
+  />
+);
+
+const mapStateToProps = state => ({
+  playlist: state.windows.playlist
+});
+
+const mapDispatchToProps = dispatch => ({
+  handleClick: () => dispatch({ type: TOGGLE_PLAYLIST_WINDOW })
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(
+  PlaylistToggleButton
+);

js/components/MainWindow/index.js

@@ -11,6 +11,7 @@ import ClutterBar from "./ClutterBar";
 import MainContextMenu from "./MainContextMenu";
 import Eject from "./Eject";
 import EqToggleButton from "./EqToggleButton";
+import PlaylistToggleButton from "./PlaylistToggleButton";
 import Kbps from "./Kbps";
 import Khz from "./Khz";
 import Marquee from "./Marquee";
@@ -59,7 +60,6 @@ export class MainWindow extends React.Component {
       loading,
       doubled,
       shade,
-      closed,
       llama,
       status,
       working
@@ -76,8 +76,7 @@ export class MainWindow extends React.Component {
       loading,
       doubled,
       llama,
-      shade,
-      closed
+      shade
     });
 
     return (
@@ -118,7 +117,7 @@ export class MainWindow extends React.Component {
         <MainBalance />
         <div className="windows">
           <EqToggleButton />
-          <div id="playlist-button" />
+          <PlaylistToggleButton />
         </div>
         <Position />
         <ActionButtons />
@@ -140,10 +139,10 @@ export class MainWindow extends React.Component {
 const mapStateToProps = state => {
   const {
     media: { status },
-    display: { loading, doubled, shade, closed, llama, working },
+    display: { loading, doubled, shade, llama, working },
     windows: { focused }
   } = state;
-  return { status, loading, doubled, shade, closed, llama, working, focused };
+  return { status, loading, doubled, shade, llama, working, focused };
 };
 
 const mapDispatchToProps = dispatch => ({

js/reducers.js

@@ -21,6 +21,7 @@ import {
   TOGGLE_DOUBLESIZE_MODE,
   TOGGLE_EQUALIZER_WINDOW,
   CLOSE_EQUALIZER_WINDOW,
+  TOGGLE_PLAYLIST_WINDOW,
   SET_EQ_AUTO,
   SET_EQ_ON,
   SET_EQ_OFF,
@@ -34,7 +35,7 @@ import {
   UNSET_FOCUS,
   UPDATE_TIME_ELAPSED
 } from "./actionTypes";
-import { equalizerEnabled } from "./config";
+import { equalizerEnabled, playlistEnabled } from "./config";
 
 export const userInput = (state, action) => {
   if (!state) {
@@ -57,7 +58,8 @@ export const userInput = (state, action) => {
 
 const defaultWindowsState = {
   focused: WINDOWS.MAIN,
-  equalizer: equalizerEnabled
+  equalizer: equalizerEnabled,
+  playlist: playlistEnabled
 };
 
 const windows = (state = defaultWindowsState, action) => {
@@ -71,6 +73,11 @@ const windows = (state = defaultWindowsState, action) => {
       return { ...state, equalizer: !state.equalizer };
     case CLOSE_EQUALIZER_WINDOW:
       return { ...state, equalizer: false };
+    case TOGGLE_PLAYLIST_WINDOW:
+      if (!playlistEnabled) {
+        return state;
+      }
+      return { ...state, playlist: !state.playlist };
     default:
       return state;
   }