Fix handle for EQ shade sliders

This commit is contained in:
Jordan Eldredge 2017-09-04 16:12:38 -07:00
parent 3aa7f7f52b
commit 1ead097fcd
3 changed files with 31 additions and 5 deletions

View file

@ -4,6 +4,7 @@ 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 {
@ -42,10 +43,9 @@ const EqualizerWindow = props => {
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";
const classes = ["left", "center", "right"];
const eqVolumeClassName = segment(0, 100, volume, classes);
const eqBalanceClassName = segment(-100, 100, balance, classes);
return (
<div
id="equalizer-window"

View file

@ -91,3 +91,7 @@ export const merge = (target, source) => {
Object.assign(target || {}, source);
return target;
};
// Maps a value in a range (defined my min/max) to the corresponding value in the array `newValues`.
export const segment = (min, max, value, newValues) =>
newValues[Math.floor((value - min) / (max - min) * (newValues.length - 1))];

View file

@ -7,7 +7,8 @@ import {
parseViscolors,
parseIni,
normalize,
denormalize
denormalize,
segment
} from "./utils";
const fixture = filename =>
@ -134,3 +135,24 @@ test("denormalize", () => {
expect(denormalize(1)).toBe(1);
expect(denormalize(100)).toBe(64);
});
describe("segment", () => {
it("can handle min", () => {
expect(segment(0, 100, 0, [0, 1, 2])).toBe(0);
expect(segment(1, 100, 1, [0, 1, 2])).toBe(0);
expect(segment(-1, 100, -1, [0, 1, 2])).toBe(0);
});
it("can handle max", () => {
expect(segment(0, 100, 100, [0, 1, 2])).toBe(2);
expect(segment(1, 100, 100, [0, 1, 2])).toBe(2);
expect(segment(-1, 100, 100, [0, 1, 2])).toBe(2);
});
it("can handle mid", () => {
expect(segment(0, 2, 1, [0, 1, 2])).toBe(1);
expect(segment(0, 2, 1.5, [0, 1, 2])).toBe(1);
expect(segment(-1, 2, 0.5, [0, 1, 2])).toBe(1);
});
it("can handle mid", () => {
expect(segment(-100, 100, -100, ["left", "center", "right"])).toBe("left");
});
});