Add ability to shade/close EQ

css/equalizer-window.css

@@ -4,9 +4,32 @@
   width: 275px;
 }
 
+#winamp2-js #equalizer-window.shade {
+  height: 14px;
+}
+
 #winamp2-js .equalizer-top {
   height: 14px;
   width: 275px;
+  position: relative;
+}
+
+#winamp2-js #equalizer-close {
+  position: absolute;
+  height: 9px;
+  width: 9px;
+  left: 264px;
+  top: 3px;
+  cursor: url('../cursors/MAINMENU.PNG'), auto;
+}
+
+#winamp2-js #equalizer-shade {
+  position: absolute;
+  height: 9px;
+  width: 9px;
+  left: 254px;
+  top: 3px;
+  cursor: url('../cursors/MAINMENU.PNG'), auto;
 }
 
 #winamp2-js #on {

js/actionCreators.js

@@ -21,7 +21,8 @@ import {
   TOGGLE_SHUFFLE,
   SET_EQ_ON,
   SET_EQ_OFF,
-  TOGGLE_EQUALIZER_SHADE_MODE
+  TOGGLE_EQUALIZER_SHADE_MODE,
+  CLOSE_EQUALIZER_WINDOW
 } from "./actionTypes";
 
 export function play() {
@@ -227,3 +228,7 @@ export function downloadPreset() {
 export function toggleEqualizerShadeMode() {
   return { type: TOGGLE_EQUALIZER_SHADE_MODE };
 }
+
+export function closeEqualizerWindow() {
+  return { type: CLOSE_EQUALIZER_WINDOW };
+}

js/actionTypes.js

@@ -3,6 +3,7 @@ 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_WINAMP = "CLOSE_WINAMP";
+export const CLOSE_EQUALIZER_WINDOW = "CLOSE_EQUALIZER_WINDOW";
 export const IS_PLAYING = "IS_PLAYING";
 export const IS_STOPPED = "IS_STOPPED";
 export const OPEN_FILE_DIALOG = "OPEN_FILE_DIALOG";

js/components/EqualizerWindow/index.js

@@ -9,7 +9,9 @@ import {
   setPreamp,
   setEqToMax,
   setEqToMid,
-  setEqToMin
+  setEqToMin,
+  closeEqualizerWindow,
+  toggleEqualizerShadeMode
 } from "../../actionCreators";
 
 import {
@@ -35,7 +37,8 @@ const EqualizerWindow = props => {
     closed,
     doubled,
     window: true,
-    draggable: true
+    draggable: true,
+    shade: props.shade
   });
   return (
     <div
@@ -44,9 +47,21 @@ const EqualizerWindow = props => {
       onClick={props.focusWindow}
     >
       {props.shade
-        ? "SHADE"
+        ? <div className="draggable">
+            <div
+              id="equalizer-shade"
+              onClick={props.toggleEqualizerShadeMode}
+            />
+            <div id="equalizer-close" onClick={props.closeEqualizerWindow} />
+          </div>
         : <div>
-            <div className="equalizer-top title-bar draggable" />
+            <div className="equalizer-top title-bar draggable">
+              <div
+                id="equalizer-shade"
+                onClick={props.toggleEqualizerShadeMode}
+              />
+              <div id="equalizer-close" onClick={props.closeEqualizerWindow} />
+            </div>
             <EqOn />
             <EqAuto />
             <EqGraph />
@@ -67,7 +82,7 @@ const EqualizerWindow = props => {
                 band={hertz}
                 onChange={props.setHertzValue(hertz)}
               />
-            )}}
+            )}
           </div>}
     </div>
   );
@@ -93,7 +108,9 @@ const mapDispatchToProps = dispatch => ({
     // TODO: Consider binding to a ref instead.
     // https://stackoverflow.com/a/24421834
     e.nativeEvent.stopImmediatePropagation();
-  }
+  },
+  closeEqualizerWindow: () => dispatch(closeEqualizerWindow()),
+  toggleEqualizerShadeMode: () => dispatch(toggleEqualizerShadeMode())
 });
 
 const mapStateToProps = state => ({

js/components/Skin.js

@@ -75,7 +75,7 @@ const imageSelectors = {
   PLAYLIST_BOTTOM_RIGHT_CORNER: [".playlist-bottom-right"],
   PLAYLIST_VISUALIZER_BACKGROUND: [".playlist-visualizer"],
   PLAYLIST_SHADE_BACKGROUND: ["#playlist.shade"],
-  EQ_WINDOW_BACKGROUND: ["#equalizer-window"],
+  EQ_WINDOW_BACKGROUND: ["#equalizer-window:not(.shade)"],
   EQ_TITLE_BAR: [".equalizer-top"],
   EQ_TITLE_BAR_SELECTED: [".selected .equalizer-top"],
   EQ_SLIDER_BACKGROUND: [".band"],
@@ -93,6 +93,9 @@ const imageSelectors = {
   EQ_PRESETS_BUTTON: ["#presets"],
   EQ_PRESETS_BUTTON_SELECTED: ["#presets:active"],
   EQ_PREAMP_LINE: ["#preamp-line"],
+  EQ_SHADE_BACKGROUND: ["#equalizer-window.shade"],
+  EQ_SHADE_BACKGROUND_SELECTED: ["#equalizer-window.shade.selected"],
+  EQ_SHADE_SLIDER: ["#equalizer-window.shade .slider"],
   MAIN_POSITION_SLIDER_BACKGROUND: ["#position"],
   MAIN_POSITION_SLIDER_THUMB: [
     "#position::-webkit-slider-thumb",
@@ -213,7 +216,11 @@ const Skin = props => {
       "#winamp2-js .status #time #minus-sign { top: 0px; left: -1px; width: 9px; height: 13px; }"
     );
   }
-  return <style type="text/css">{cssRules.join("\n")}</style>;
+  return (
+    <style type="text/css">
+      {cssRules.join("\n")}
+    </style>
+  );
 };
 
 export default connect(state => ({ skinImages: state.display.skinImages }))(

js/reducers.js

@@ -20,6 +20,7 @@ import {
   TOGGLE_PRESETS_CONTEXT_MENU,
   TOGGLE_DOUBLESIZE_MODE,
   TOGGLE_EQUALIZER_WINDOW,
+  CLOSE_EQUALIZER_WINDOW,
   SET_EQ_AUTO,
   SET_EQ_ON,
   SET_EQ_OFF,
@@ -68,6 +69,8 @@ const windows = (state, action) => {
         return state;
       }
       return { ...state, equalizer: !state.equalizer };
+    case CLOSE_EQUALIZER_WINDOW:
+      return { ...state, equalizer: false };
     default:
       return state;
   }
@@ -96,7 +99,7 @@ const display = (state, action) => {
     case TOGGLE_SHADE_MODE:
       return { ...state, shade: !state.shade };
     case TOGGLE_EQUALIZER_SHADE_MODE:
-      return { ...state, equalizerShade: !state.shade };
+      return { ...state, equalizerShade: !state.equalizerShade };
     case TOGGLE_LLAMA_MODE:
       return { ...state, llama: !state.llama };
     case STEP_MARQUEE:

js/skinSprites.js

@@ -217,6 +217,17 @@ export default {
     },
     { name: "PLAYLIST_SHADE_BACKGROUND", x: 72, y: 57, width: 25, height: 14 }
   ],
+  EQ_EX: [
+    {
+      name: "EQ_SHADE_BACKGROUND_SELECTED",
+      x: 0,
+      y: 0,
+      width: 275,
+      height: 14
+    },
+    { name: "EQ_SHADE_BACKGROUND", x: 0, y: 15, width: 275, height: 14 },
+    { name: "EQ_SHADE_SLIDER", x: 1, y: 30, width: 9, height: 7 }
+  ],
   EQMAIN: [
     { name: "EQ_WINDOW_BACKGROUND", x: 0, y: 0, width: 275, height: 116 },
     { name: "EQ_TITLE_BAR", x: 0, y: 149, width: 275, height: 14 },