Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-28 20:40:39 +00:00
Code Issues Projects Releases Wiki Activity

Support volume and balance in shade eq

Browse source
This commit is contained in:
Jordan Eldredge 2017-07-15 10:32:09 -07:00
parent b94f2074c8
commit 8f211d79bb
12 changed files with 232 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

64
css/equalizer-window.css
View file

@ -8,6 +8,70 @@
height: 14px;
}
#winamp2-js #equalizer-volume {
position: absolute;
left: 60px;
top: 4px;
height: 6px;
width: 97px;
background-position: 0 0;
cursor: url('../cursors/POSBAR.PNG'), auto;
}
#winamp2-js #equalizer-volume::-webkit-slider-thumb {
height: 7px;
width: 2px;
cursor: url('../cursors/POSBAR.PNG'), auto;
}
#winamp2-js #equalizer-volume::-moz-range-thumb {
height: 7px;
width: 2px;
cursor: url('../cursors/POSBAR.PNG'), auto;
}
#winamp2-js #equalizer-volume.center::-webkit-slider-thumb {
width: 5px;
cursor: url('../cursors/POSBAR.PNG'), auto;
}
#winamp2-js #equalizer-volume.center::-moz-range-thumb {
width: 5px;
cursor: url('../cursors/POSBAR.PNG'), auto;
}
#winamp2-js #equalizer-balance {
position: absolute;
left: 164px;
top: 4px;
height: 6px;
width: 43px;
background-position: 0 0;
cursor: url('../cursors/POSBAR.PNG'), auto;
}
#winamp2-js #equalizer-balance::-webkit-slider-thumb {
height: 7px;
width: 2px;
cursor: url('../cursors/POSBAR.PNG'), auto;
}
#winamp2-js #equalizer-balance::-moz-range-thumb {
height: 7px;
width: 2px;
cursor: url('../cursors/POSBAR.PNG'), auto;
}
#winamp2-js #equalizer-balance.center::-webkit-slider-thumb {
width: 5px;
cursor: url('../cursors/POSBAR.PNG'), auto;
}
#winamp2-js #equalizer-balance.center::-moz-range-thumb {
width: 5px;
cursor: url('../cursors/POSBAR.PNG'), auto;
}
#winamp2-js .equalizer-top {
height: 14px;
width: 275px;

31
js/components/Balance.js Normal file
View file

@ -0,0 +1,31 @@
import React from "react";
import { connect } from "react-redux";
import { setBalance } from "../actionCreators";
import { SET_FOCUS, UNSET_FOCUS } from "../actionTypes";
const Balance = props =>
<input
id={props.id}
className={props.className}
type="range"
min="-100"
max="100"
step="1"
value={props.balance}
style={props.style}
onChange={props.handleChange}
onMouseDown={props.showMarquee}
onMouseUp={props.hideMarquee}
/>;
const mapDispatchToProps = dispatch => ({
handleChange: e => dispatch(setBalance(e.target.value)),
showMarquee: () => dispatch({ type: SET_FOCUS, input: "balance" }),
hideMarquee: () => dispatch({ type: UNSET_FOCUS })
});
export default connect(
state => ({ balance: state.media.balance }),
mapDispatchToProps
)(Balance);

8
js/components/EqualizerWindow/EqGraph.js
View file

@ -23,11 +23,17 @@ class EqGraph extends React.Component {
this.canvasCtx.imageSmoothingEnabled = false;
this.width = this.canvas.width * 1; // Cast to int
this.height = this.canvas.height * 1; // Cast to int
if (this.props.lineColorsImage) {
this.createColorPattern(this.props.lineColorsImage);
}
if (this.props.preampLineUrl) {
this.createPreampLineImage(this.props.preampLineUrl);
}
}
componentDidUpdate() {
this.canvasCtx.clearRect(0, 0, this.width, this.height);
//this.createColorPattern();
this.drawPreampLine();
this.drawEqLine(); // This should paint on top of the preamp line
}

19
js/components/EqualizerWindow/index.js
View file

@ -2,6 +2,8 @@ import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import classnames from "classnames";
import Volume from "../Volume";
import Balance from "../Balance";
import { BANDS, WINDOWS } from "../../constants";
import {
@ -30,16 +32,21 @@ import "../../../css/equalizer-window.css";
const bandClassName = band => `band-${band}`;
const EqualizerWindow = props => {
const { doubled, selected, closed } = props;
const { doubled, selected, closed, volume, balance, shade } = props;
const className = classnames({
selected,
closed,
doubled,
shade,
window: true,
draggable: true,
shade: props.shade
draggable: true
});
const v = Math.round(volume);
const eqVolumeClassName = v === 50 ? "center" : v > 50 ? "right" : "left";
const b = Math.round(balance);
const eqBalanceClassName = b === 0 ? "center" : v > 0 ? "right" : "left";
return (
<div
id="equalizer-window"
@ -53,6 +60,8 @@ const EqualizerWindow = props => {
onClick={props.toggleEqualizerShadeMode}
/>
<div id="equalizer-close" onClick={props.closeEqualizerWindow} />
<Volume id="equalizer-volume" className={eqVolumeClassName} />
<Balance id="equalizer-balance" className={eqBalanceClassName} />
</div>
: <div>
<div className="equalizer-top title-bar draggable">
@ -118,7 +127,9 @@ const mapStateToProps = state => ({
selected: state.windows.focused === WINDOWS.EQUALIZER,
closed: !state.windows.equalizer,
contextMenuSelected: state.presetsContextMenu.selected,
shade: state.display.equalizerShade
shade: state.display.equalizerShade,
volume: state.media.volume,
balance: state.media.balance
});
export default connect(mapStateToProps, mapDispatchToProps)(EqualizerWindow);

36
js/components/MainWindow/Balance.js
View file

@ -1,36 +0,0 @@
import React from "react";
import { connect } from "react-redux";
import { setBalance } from "../../actionCreators";
import { SET_FOCUS, UNSET_FOCUS } from "../../actionTypes";
const offsetFromBalance = balance => {
const percent = Math.abs(balance) / 100;
const sprite = Math.round(percent * 28);
const offset = (sprite - 1) * 15;
return offset;
};
const Balance = ({ balance, handleChange, showMarquee, hideMarquee }) =>
<input
id="balance"
type="range"
min="-100"
max="100"
step="1"
value={balance}
style={{ backgroundPosition: `0 -${offsetFromBalance(balance)}px` }}
onChange={handleChange}
onMouseDown={showMarquee}
onMouseUp={hideMarquee}
/>;
const mapStateToProps = state => state.media;
const mapDispatchToProps = dispatch => ({
handleChange: e => dispatch(setBalance(e.target.value)),
showMarquee: () => dispatch({ type: SET_FOCUS, input: "balance" }),
hideMarquee: () => dispatch({ type: UNSET_FOCUS })
});
export default connect(mapStateToProps, mapDispatchToProps)(Balance);

21
js/components/MainWindow/MainBalance.js Normal file
View file

@ -0,0 +1,21 @@
import React from "react";
import { connect } from "react-redux";
import Balance from "../Balance";
const offsetFromBalance = balance => {
const percent = Math.abs(balance) / 100;
const sprite = Math.round(percent * 28);
const offset = (sprite - 1) * 15;
return offset;
};
const MainBalance = props =>
<Balance
id="balance"
style={{ backgroundPosition: `0 -${offsetFromBalance(props.balance)}px` }}
/>;
const mapStateToProps = state => ({ balance: state.media.balance });
export default connect(mapStateToProps)(MainBalance);

22
js/components/MainWindow/MainVolume.js Normal file
View file

@ -0,0 +1,22 @@
import React from "react";
import { connect } from "react-redux";
import Volume from "../Volume";
const MainVolume = props => {
const { volume } = props;
const percent = volume / 100;
const sprite = Math.round(percent * 28);
const offset = (sprite - 1) * 15;
const style = {
backgroundPosition: `0 -${offset}px`
};
return <Volume style={style} id="volume" />;
};
const mapStateToProps = state => ({
volume: state.media.volume
});
export default connect(mapStateToProps)(MainVolume);

41
js/components/MainWindow/Volume.js
View file

@ -1,41 +0,0 @@
import React from "react";
import { connect } from "react-redux";
import { setVolume } from "../../actionCreators";
import { SET_FOCUS, UNSET_FOCUS } from "../../actionTypes";
const Volume = props => {
const { volume } = props;
const percent = volume / 100;
const sprite = Math.round(percent * 28);
const offset = (sprite - 1) * 15;
const style = {
backgroundPosition: `0 -${offset}px`
};
return (
<input
id="volume"
type="range"
min="0"
max="100"
step="1"
value={volume}
style={style}
onChange={props.setVolume}
onMouseDown={props.showMarquee}
onMouseUp={props.hideMarquee}
/>
);
};
const mapStateToProps = state => state.media;
const mapDispatchToProps = dispatch => ({
showMarquee: () => dispatch({ type: SET_FOCUS, input: "volume" }),
hideMarquee: () => dispatch({ type: UNSET_FOCUS }),
setVolume: e => dispatch(setVolume(e.target.value))
});
export default connect(mapStateToProps, mapDispatchToProps)(Volume);

8
js/components/MainWindow/index.js
View file

@ -5,7 +5,7 @@ import classnames from "classnames";
import { WINDOWS } from "../../constants";
import ActionButtons from "./ActionButtons";
import Balance from "./Balance";
import MainBalance from "./MainBalance";
import Close from "./Close";
import ClutterBar from "./ClutterBar";
import MainContextMenu from "./MainContextMenu";
@ -22,7 +22,7 @@ import ShadeTime from "./ShadeTime";
import Shuffle from "./Shuffle";
import Time from "./Time";
import Visualizer from "./Visualizer";
import Volume from "./Volume";
import MainVolume from "./MainVolume";
import { SET_FOCUSED_WINDOW, TOGGLE_CONTEXT_MENU } from "../../actionTypes";
@ -115,8 +115,8 @@ export class MainWindow extends React.Component {
<Khz />
<MonoStereo />
</div>
<Volume />
<Balance />
<MainVolume />
<MainBalance />
<div className="windows">
<EqToggleButton />
<div id="playlist-button" />

27
js/components/Skin.js
View file

@ -95,7 +95,30 @@ const imageSelectors = {
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"],
EQ_SHADE_VOLUME_SLIDER_LEFT: [
"#equalizer-volume.left::-webkit-slider-thumb",
"#equalizer-volume.left::-moz-range-thumb"
],
EQ_SHADE_VOLUME_SLIDER_CENTER: [
"#equalizer-volume.center::-webkit-slider-thumb",
"#equalizer-volume.center::-moz-range-thumb"
],
EQ_SHADE_VOLUME_SLIDER_RIGHT: [
"#equalizer-volume.right::-webkit-slider-thumb",
"#equalizer-volume.right::-moz-range-thumb"
],
EQ_SHADE_BALANCE_SLIDER_LEFT: [
"#equalizer-balance.left::-webkit-slider-thumb",
"#equalizer-balance.left::-moz-range-thumb"
],
EQ_SHADE_BALANCE_SLIDER_CENTER: [
"#equalizer-balance.center::-webkit-slider-thumb",
"#equalizer-balance.center::-moz-range-thumb"
],
EQ_SHADE_BALANCE_SLIDER_RIGHT: [
"#equalizer-balance.right::-webkit-slider-thumb",
"#equalizer-balance.right::-moz-range-thumb"
],
MAIN_POSITION_SLIDER_BACKGROUND: ["#position"],
MAIN_POSITION_SLIDER_THUMB: [
"#position::-webkit-slider-thumb",
@ -159,7 +182,7 @@ const imageSelectors = {
"#button-v.selected"
],
MAIN_SHADE_BACKGROUND: [".shade #title-bar"],
MAIN_SHADE_BACKGROUND_SELECTED: [".shade #title-bar.selected"],
MAIN_SHADE_BACKGROUND_SELECTED: [".shade.selected #title-bar"],
MAIN_SHADE_BUTTON_SELECTED: [".shade #title-bar #shade"],
MAIN_SHADE_BUTTON_SELECTED_DEPRESSED: [".shade #title-bar #shade:active"],
MAIN_SHADE_POSITION_BACKGROUND: [".shade #position"],

30
js/components/Volume.js Normal file
View file

@ -0,0 +1,30 @@
import React from "react";
import { connect } from "react-redux";
import { setVolume } from "../actionCreators";
import { SET_FOCUS, UNSET_FOCUS } from "../actionTypes";
const Volume = props =>
<input
id={props.id}
type="range"
min="0"
max="100"
step="1"
value={props.volume}
style={props.style}
className={props.className}
onChange={props.setVolume}
onMouseDown={props.showMarquee}
onMouseUp={props.hideMarquee}
/>;
const mapStateToProps = state => state.media;
const mapDispatchToProps = dispatch => ({
showMarquee: () => dispatch({ type: SET_FOCUS, input: "volume" }),
hideMarquee: () => dispatch({ type: UNSET_FOCUS }),
setVolume: e => dispatch(setVolume(e.target.value))
});
export default connect(mapStateToProps, mapDispatchToProps)(Volume);

14
js/skinSprites.js
View file

@ -226,7 +226,19 @@ export default {
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 }
{ name: "EQ_SHADE_VOLUME_SLIDER_LEFT", x: 1, y: 30, width: 2, height: 7 },
{ name: "EQ_SHADE_VOLUME_SLIDER_CENTER", x: 3, y: 30, width: 5, height: 7 },
{ name: "EQ_SHADE_VOLUME_SLIDER_RIGHT", x: 8, y: 30, width: 2, height: 7 },
// TODO
{ name: "EQ_SHADE_BALANCE_SLIDER_LEFT", x: 11, y: 30, width: 2, height: 7 },
{
name: "EQ_SHADE_BALANCE_SLIDER_CENTER",
x: 13,
y: 30,
width: 5,
height: 7
},
{ name: "EQ_SHADE_BALANCE_SLIDER_RIGHT", x: 18, y: 30, width: 2, height: 7 }
],
EQMAIN: [
{ name: "EQ_WINDOW_BACKGROUND", x: 0, y: 0, width: 275, height: 116 },