mirror of
https://github.com/captbaritone/webamp.git
synced 2026-08-04 07:55:28 +00:00
Switch to rc-slider for vertical sliders
This commit is contained in:
Jordan Eldredge
parent
31a6ba289c
commit
be576a2dc3
6 changed files with 146 additions and 64 deletions
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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 = () => <div className="rc-slider-handle" />;
|
||||
|
||||
const style = {
|
||||
backgroundPosition: `-${xOffset}px -${yOffset}px`
|
||||
const Band = ({ value, backgroundPosition, id, onChange }) => (
|
||||
<div id={id} className="band" style={{ backgroundPosition }}>
|
||||
<Slider
|
||||
type="range"
|
||||
min={0}
|
||||
max={MAX_VALUE}
|
||||
step={1}
|
||||
value={MAX_VALUE - value}
|
||||
vertical
|
||||
onChange={onChange}
|
||||
handle={Handle}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
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 (
|
||||
<div id={props.id} className="band" style={style}>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
step="1"
|
||||
value={value}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default connect(state => state.equalizer.sliders)(Band);
|
||||
export default connect(mapStateToProps)(Band);
|
||||
|
|
|
|||
|
|
@ -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()),
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
107
yarn.lock
107
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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue