From b94f2074c843d5809a7f8515fd9cbd01e88b5b44 Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Thu, 13 Jul 2017 21:57:18 -0700 Subject: [PATCH] Add ability to shade/close EQ --- css/equalizer-window.css | 23 ++++++++++++++++++++ js/actionCreators.js | 7 ++++++- js/actionTypes.js | 1 + js/components/EqualizerWindow/index.js | 29 ++++++++++++++++++++------ js/components/Skin.js | 11 ++++++++-- js/reducers.js | 5 ++++- js/skinSprites.js | 11 ++++++++++ 7 files changed, 77 insertions(+), 10 deletions(-) diff --git a/css/equalizer-window.css b/css/equalizer-window.css index 7cec6aef..276dbd99 100644 --- a/css/equalizer-window.css +++ b/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 { diff --git a/js/actionCreators.js b/js/actionCreators.js index 3943127e..58f4f529 100644 --- a/js/actionCreators.js +++ b/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 }; +} diff --git a/js/actionTypes.js b/js/actionTypes.js index 450ab20f..964f55b4 100644 --- a/js/actionTypes.js +++ b/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"; diff --git a/js/components/EqualizerWindow/index.js b/js/components/EqualizerWindow/index.js index f6f76a4b..043de46b 100644 --- a/js/components/EqualizerWindow/index.js +++ b/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 (
{ onClick={props.focusWindow} > {props.shade - ? "SHADE" + ?
+
+
+
:
-
+
+
+
+
@@ -67,7 +82,7 @@ const EqualizerWindow = props => { band={hertz} onChange={props.setHertzValue(hertz)} /> - )}} + )}
}
); @@ -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 => ({ diff --git a/js/components/Skin.js b/js/components/Skin.js index 9d30c3db..67b2d105 100644 --- a/js/components/Skin.js +++ b/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 ; + return ( + + ); }; export default connect(state => ({ skinImages: state.display.skinImages }))( diff --git a/js/reducers.js b/js/reducers.js index 8bc80e06..9ec09099 100644 --- a/js/reducers.js +++ b/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: diff --git a/js/skinSprites.js b/js/skinSprites.js index cb0b8f1e..61824e58 100644 --- a/js/skinSprites.js +++ b/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 },