Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-19 09:33:47 +00:00
Code Issues Projects Releases Wiki Activity

Scope rendering better

Browse source
This commit is contained in:
Jordan Eldredge 2017-10-23 18:17:15 -07:00
parent 3045733c63
commit f2ef95ec06
3 changed files with 46 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

5
js/components/EqualizerWindow/EqAuto.js
View file

@ -16,4 +16,7 @@ const toggleAuto = () => (dispatch, getState) => {
};
const mapDispatchToProps = { toggleAuto };
export default connect(state => state.equalizer, mapDispatchToProps)(EqAuto);
export default connect(
state => ({ toggleAuto: state.equalizer.toggleAuto }),
mapDispatchToProps
)(EqAuto);

38
js/components/EqualizerWindow/EqualizerShade.js Normal file
View file

@ -0,0 +1,38 @@
import React from "react";
import { connect } from "react-redux";
import Volume from "../Volume";
import Balance from "../Balance";
import { segment } from "../../utils";
import {
closeEqualizerWindow,
toggleEqualizerShadeMode
} from "../../actionCreators";
const EqualizerShade = props => {
const { volume, balance } = props;
const classes = ["left", "center", "right"];
const eqVolumeClassName = segment(0, 100, volume, classes);
const eqBalanceClassName = segment(-100, 100, balance, classes);
return (
<div className="draggable">
<div id="equalizer-shade" onClick={props.toggleEqualizerShadeMode} />
<div id="equalizer-close" onClick={props.closeEqualizerWindow} />
<Volume id="equalizer-volume" className={eqVolumeClassName} />
<Balance id="equalizer-balance" className={eqBalanceClassName} />
</div>
);
};
const mapDispatchToProps = {
closeEqualizerWindow,
toggleEqualizerShadeMode
};
const mapStateToProps = state => ({
volume: state.media.volume,
balance: state.media.balance
});
export default connect(mapStateToProps, mapDispatchToProps)(EqualizerShade);

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

@ -2,9 +2,6 @@ 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 { segment } from "../../utils";
import { BANDS, WINDOWS } from "../../constants";
import {
@ -24,13 +21,14 @@ import EqOn from "./EqOn";
import EqAuto from "./EqAuto";
import EqGraph from "./EqGraph";
import PresetsContextMenu from "./PresetsContextMenu";
import EqualizerShade from "./EqualizerShade";
import "../../../css/equalizer-window.css";
const bandClassName = band => `band-${band}`;
const EqualizerWindow = props => {
const { doubled, selected, volume, balance, shade } = props;
const { doubled, selected, shade } = props;
const className = classnames({
selected,
@ -39,10 +37,6 @@ const EqualizerWindow = props => {
window: true,
draggable: true
});
const classes = ["left", "center", "right"];
const eqVolumeClassName = segment(0, 100, volume, classes);
const eqBalanceClassName = segment(-100, 100, balance, classes);
return (
<div
id="equalizer-window"
@ -50,12 +44,7 @@ const EqualizerWindow = props => {
onMouseDown={props.focusWindow}
>
{props.shade ? (
<div className="draggable">
<div id="equalizer-shade" onClick={props.toggleEqualizerShadeMode} />
<div id="equalizer-close" onClick={props.closeEqualizerWindow} />
<Volume id="equalizer-volume" className={eqVolumeClassName} />
<Balance id="equalizer-balance" className={eqBalanceClassName} />
</div>
<EqualizerShade />
) : (
<div>
<div className="equalizer-top title-bar draggable">
@ -108,9 +97,7 @@ const mapDispatchToProps = dispatch => ({
const mapStateToProps = state => ({
doubled: state.display.doubled,
selected: state.windows.focused === WINDOWS.EQUALIZER,
shade: state.display.equalizerShade,
volume: state.media.volume,
balance: state.media.balance
shade: state.display.equalizerShade
});
export default connect(mapStateToProps, mapDispatchToProps)(EqualizerWindow);