From be576a2dc3c0da9d824755b19b6fb2a723c9d89f Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Fri, 24 Mar 2017 17:34:53 +0000 Subject: [PATCH] Switch to rc-slider for vertical sliders --- css/equalizer-window.css | 40 +++--------- js/components/Band.js | 50 +++++++++------ js/components/EqualizerWindow.js | 2 +- js/components/Skin.js | 10 +-- package.json | 1 + yarn.lock | 107 ++++++++++++++++++++++++++++++- 6 files changed, 146 insertions(+), 64 deletions(-) diff --git a/css/equalizer-window.css b/css/equalizer-window.css index 52421e80..d502b24d 100644 --- a/css/equalizer-window.css +++ b/css/equalizer-window.css @@ -136,41 +136,17 @@ height: 63px; } -#winamp2-js .band input[type=range] { - /* These two numbers are pure magic. No idea why they work */ - margin-left: -25px; - margin-top: 25px; - width: 63px; - height: 14px; - background-position: 0 0; - transform: rotate(270deg); +#winamp2-js .band .rc-slider { + height: 51px; + width: 14px; + margin-top: 6px; cursor:url('../cursors/POSBAR.PNG'), auto; } -#winamp2-js .band input[type=range]::-webkit-slider-thumb { - height: 11px; +#winamp2-js .band .rc-slider .rc-slider-handle { width: 11px; - /* Confusingly, due to rotation, this is actually left margin */ - margin-top: -1px; - cursor:url('../cursors/POSBAR.PNG'), auto; - /* Counteract the input's rotation */ - -webkit-transform: rotate(-270deg); - -moz-transform: rotate(-270deg); - -ms-transform: rotate(-270deg); - -o-transform: rotate(-270deg); - transform: rotate(-270deg); -} - -#winamp2-js .band input[type=range]::-moz-range-thumb { height: 11px; - width: 11px; - /* Confusingly, due to rotation, this is actually left margin */ - margin-top: -1px; + margin: -6px 0 0 1px; + position: absolute; cursor:url('../cursors/POSBAR.PNG'), auto; - /* Counteract the input's rotation */ - -webkit-transform: rotate(-270deg); - -moz-transform: rotate(-270deg); - -ms-transform: rotate(-270deg); - -o-transform: rotate(-270deg); - transform: rotate(-270deg); -} +} \ No newline at end of file diff --git a/js/components/Band.js b/js/components/Band.js index 6e637c1a..781e6169 100644 --- a/js/components/Band.js +++ b/js/components/Band.js @@ -1,6 +1,8 @@ import React from "react"; import { connect } from "react-redux"; +import Slider from "rc-slider/lib/Slider"; +const MAX_VALUE = 100; // Given a value between 1-100, return the sprite number (0-27) export const spriteNumber = value => { const percent = value / 100; @@ -14,28 +16,34 @@ export const spriteOffsets = number => { return { x, y }; }; -const Band = props => { - const value = props[props.band]; - const offset = spriteOffsets(spriteNumber(value)); - const xOffset = offset.x * 15; // Each sprite is 15px wide - const yOffset = offset.y * 65; // Each sprite is 15px tall +const Handle = () =>
; - const style = { - backgroundPosition: `-${xOffset}px -${yOffset}px` +const Band = ({ value, backgroundPosition, id, onChange }) => ( +
+ +
+); + +const mapStateToProps = (state, ownProps) => { + const value = state.equalizer.sliders[ownProps.band]; + const { x, y } = spriteOffsets(spriteNumber(value)); + const xOffset = x * 15; // Each sprite is 15px wide + const yOffset = y * 65; // Each sprite is 15px tall + const backgroundPosition = `-${xOffset}px -${yOffset}px`; + return { + id: ownProps.id, + value, + backgroundPosition }; - - return ( -
- -
- ); }; -export default connect(state => state.equalizer.sliders)(Band); +export default connect(mapStateToProps)(Band); diff --git a/js/components/EqualizerWindow.js b/js/components/EqualizerWindow.js index 46f201ed..11930b13 100644 --- a/js/components/EqualizerWindow.js +++ b/js/components/EqualizerWindow.js @@ -68,7 +68,7 @@ EqualizerWindow.propTypes = { const mapDispatchToProps = dispatch => ({ focusWindow: () => dispatch({ type: SET_FOCUSED_WINDOW, window: WINDOWS.EQUALIZER }), - setPreampValue: e => dispatch(setPreamp(e.target.value)), + setPreampValue: value => dispatch(setPreamp(value)), setEqToMin: () => dispatch(setEqToMin()), setEqToMid: () => dispatch(setEqToMid()), setEqToMax: () => dispatch(setEqToMax()), diff --git a/js/components/Skin.js b/js/components/Skin.js index 52e19ab9..9d30c3db 100644 --- a/js/components/Skin.js +++ b/js/components/Skin.js @@ -79,14 +79,8 @@ const imageSelectors = { EQ_TITLE_BAR: [".equalizer-top"], EQ_TITLE_BAR_SELECTED: [".selected .equalizer-top"], EQ_SLIDER_BACKGROUND: [".band"], - EQ_SLIDER_THUMB: [ - ".band input::-webkit-slider-thumb", - ".band input::-moz-range-thumb" - ], - EQ_SLIDER_THUMB_SELECTED: [ - ".band input::-webkit-slider-thumb:active", - ".band input::-moz-range-thumb:active" - ], + EQ_SLIDER_THUMB: [".band .rc-slider-handle"], + EQ_SLIDER_THUMB_SELECTED: [".band .rc-slider-handle:active"], EQ_ON_BUTTON: ["#on"], EQ_ON_BUTTON_DEPRESSED: ["#on:active"], EQ_ON_BUTTON_SELECTED: ["#on.selected"], diff --git a/package.json b/package.json index 8cb522df..6f630614 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,7 @@ "cardinal-spline-js": "^2.3.6", "classnames": "^2.2.5", "jszip": "^2.6.0", + "rc-slider": "^6.3.1", "react": "^15.3.1", "react-dom": "^15.4.2", "react-redux": "^5.0.2", diff --git a/yarn.lock b/yarn.lock index 05886cd2..0609b826 100644 --- a/yarn.lock +++ b/yarn.lock @@ -47,6 +47,12 @@ acorn@^4.0.3, acorn@^4.0.4: version "4.0.11" resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.11.tgz#edcda3bd937e7556410d42ed5860f67399c794c0" +add-dom-event-listener@1.x: + version "1.0.2" + resolved "https://registry.yarnpkg.com/add-dom-event-listener/-/add-dom-event-listener-1.0.2.tgz#8faed2c41008721cf111da1d30d995b85be42bed" + dependencies: + object-assign "4.x" + ajv-keywords@^1.0.0, ajv-keywords@^1.1.1: version "1.5.1" resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c" @@ -746,7 +752,7 @@ babel-register@^6.24.0: mkdirp "^0.5.1" source-map-support "^0.4.2" -babel-runtime@^6.18.0, babel-runtime@^6.22.0: +babel-runtime@6.x, babel-runtime@^6.18.0, babel-runtime@^6.22.0: version "6.23.0" resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b" dependencies: @@ -1169,6 +1175,16 @@ commondir@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b" +component-classes@^1.2.5: + version "1.2.6" + resolved "https://registry.yarnpkg.com/component-classes/-/component-classes-1.2.6.tgz#c642394c3618a4d8b0b8919efccbbd930e5cd691" + dependencies: + component-indexof "0.0.3" + +component-indexof@0.0.3: + version "0.0.3" + resolved "https://registry.yarnpkg.com/component-indexof/-/component-indexof-0.0.3.tgz#11d091312239eb8f32c8f25ae9cb002ffe8d3c24" + compressible@~2.0.8: version "2.0.9" resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.9.tgz#6daab4e2b599c2770dd9e21e7a891b1c5a755425" @@ -1296,6 +1312,12 @@ crypto-browserify@^3.11.0: public-encrypt "^4.0.0" randombytes "^2.0.0" +css-animation@^1.3.0: + version "1.3.2" + resolved "https://registry.yarnpkg.com/css-animation/-/css-animation-1.3.2.tgz#df515820ef5903733ad2db0999403b3037b8b880" + dependencies: + component-classes "^1.2.5" + css-color-names@0.0.4: version "0.0.4" resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" @@ -1527,6 +1549,10 @@ doctrine@^2.0.0: esutils "^2.0.2" isarray "^1.0.0" +dom-align@1.x: + version "1.5.3" + resolved "https://registry.yarnpkg.com/dom-align/-/dom-align-1.5.3.tgz#b906b616822a5e599f579ec8505e367c51da7588" + domain-browser@^1.1.1: version "1.1.7" resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc" @@ -3107,10 +3133,30 @@ lodash-es@^4.2.0, lodash-es@^4.2.1: version "4.17.4" resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7" +lodash._getnative@^3.0.0: + version "3.9.1" + resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5" + lodash.camelcase@^4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6" +lodash.isarguments@^3.0.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a" + +lodash.isarray@^3.0.0: + version "3.0.4" + resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55" + +lodash.keys@^3.1.2: + version "3.1.2" + resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a" + dependencies: + lodash._getnative "^3.0.0" + lodash.isarguments "^3.0.0" + lodash.isarray "^3.0.0" + lodash.memoize@^4.1.0: version "4.1.2" resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" @@ -3411,7 +3457,7 @@ oauth-sign@~0.8.1: version "0.8.2" resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43" -object-assign@^4.0.1, object-assign@^4.1.0: +object-assign@4.x, object-assign@^4.0.1, object-assign@^4.1.0: version "4.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" @@ -4029,6 +4075,51 @@ range-parser@^1.0.3, range-parser@~1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e" +rc-align@2.x: + version "2.3.3" + resolved "https://registry.yarnpkg.com/rc-align/-/rc-align-2.3.3.tgz#15e2fd329fde9c2dec16e4a0e0ec20fba2ffdbc0" + dependencies: + dom-align "1.x" + rc-util "4.x" + +rc-animate@2.x: + version "2.3.3" + resolved "https://registry.yarnpkg.com/rc-animate/-/rc-animate-2.3.3.tgz#9f123990aa625c5867ace88412a185e46b307d03" + dependencies: + css-animation "^1.3.0" + +rc-slider@^6.3.1: + version "6.3.1" + resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-6.3.1.tgz#67ce34360902d69258efe0010b69de80db750cc3" + dependencies: + babel-runtime "6.x" + classnames "^2.2.5" + rc-tooltip "^3.4.2" + rc-util "^4.0.0" + warning "^3.0.0" + +rc-tooltip@^3.4.2: + version "3.4.2" + resolved "https://registry.yarnpkg.com/rc-tooltip/-/rc-tooltip-3.4.2.tgz#c5c89c347ed790f7f290ef825d5e24e8fb599166" + dependencies: + rc-trigger "1.x" + +rc-trigger@1.x: + version "1.9.1" + resolved "https://registry.yarnpkg.com/rc-trigger/-/rc-trigger-1.9.1.tgz#70cf50cc268ff46e335ee9c95f46c94d8074275c" + dependencies: + babel-runtime "6.x" + rc-align "2.x" + rc-animate "2.x" + rc-util "4.x" + +rc-util@4.x, rc-util@^4.0.0: + version "4.0.2" + resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-4.0.2.tgz#5804f8b141a13c8c14d7c265a7d21d298195af46" + dependencies: + add-dom-event-listener "1.x" + shallowequal "^0.2.2" + rc@^1.1.7: version "1.1.7" resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.7.tgz#c5ea564bb07aff9fd3a5b32e906c1d3a65940fea" @@ -4404,6 +4495,12 @@ sha.js@^2.3.6: dependencies: inherits "^2.0.1" +shallowequal@^0.2.2: + version "0.2.2" + resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-0.2.2.tgz#1e32fd5bcab6ad688a4812cb0cc04efc75c7014e" + dependencies: + lodash.keys "^3.1.2" + shelljs@^0.7.5: version "0.7.7" resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.7.tgz#b2f5c77ef97148f4b4f6e22682e10bba8667cff1" @@ -4923,6 +5020,12 @@ walker@~1.0.5: dependencies: makeerror "1.0.x" +warning@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c" + dependencies: + loose-envify "^1.0.0" + watch@~0.10.0: version "0.10.0" resolved "https://registry.yarnpkg.com/watch/-/watch-0.10.0.tgz#77798b2da0f9910d595f1ace5b0c2258521f21dc"