diff --git a/js/actionCreators.js b/js/actionCreators.js
index 4ef3e2b0..25349f57 100644
--- a/js/actionCreators.js
+++ b/js/actionCreators.js
@@ -142,6 +142,15 @@ export function adjustVolume(volumeDiff) {
};
}
+export function scrollVolume(e) {
+ e.preventDefault();
+ return (dispatch, getState) => {
+ const currentVolume = getState().media.volume;
+ // Using pixels as percentage difference here is a bit arbirary, but... oh well.
+ return dispatch(setVolume(currentVolume + e.deltaY));
+ };
+}
+
export function setBalance(balance) {
balance = clamp(balance, -100, 100);
// The balance clips to the center
diff --git a/js/components/EqualizerWindow/index.js b/js/components/EqualizerWindow/index.js
index 1726f04a..3ea87426 100644
--- a/js/components/EqualizerWindow/index.js
+++ b/js/components/EqualizerWindow/index.js
@@ -11,7 +11,8 @@ import {
setEqToMid,
setEqToMin,
closeEqualizerWindow,
- toggleEqualizerShadeMode
+ toggleEqualizerShadeMode,
+ scrollVolume
} from "../../actionCreators";
import { SET_FOCUSED_WINDOW } from "../../actionTypes";
@@ -42,6 +43,7 @@ const EqualizerWindow = props => {
id="equalizer-window"
className={className}
onMouseDown={props.focusWindow}
+ onWheel={props.scrollVolume}
>
{props.shade ? (
@@ -94,7 +96,8 @@ const mapDispatchToProps = dispatch => ({
setEqToMax: () => dispatch(setEqToMax()),
setHertzValue: hertz => value => dispatch(setEqBand(hertz, value)),
closeEqualizerWindow: () => dispatch(closeEqualizerWindow()),
- toggleEqualizerShadeMode: () => dispatch(toggleEqualizerShadeMode())
+ toggleEqualizerShadeMode: () => dispatch(toggleEqualizerShadeMode()),
+ scrollVolume: e => dispatch(scrollVolume(e))
});
const mapStateToProps = state => ({
diff --git a/js/components/GenWindow/index.js b/js/components/GenWindow/index.js
index 73b2211b..4cb3e5e8 100644
--- a/js/components/GenWindow/index.js
+++ b/js/components/GenWindow/index.js
@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
import classnames from "classnames";
import { SET_FOCUSED_WINDOW, CLOSE_GEN_WINDOW } from "../../actionTypes";
+import { scrollVolume } from "../../actionCreators";
const Text = ({ children }) => {
const letters = children.split("");
@@ -24,11 +25,13 @@ export const GenWindow = ({
close,
title,
setFocus,
- windowId
+ windowId,
+ scrollVolume: handleWheel
}) => (
setFocus(windowId)}
+ onWheel={handleWheel}
>
@@ -73,7 +76,8 @@ const mapStateToProps = (state, ownProps) => ({
const mapDispatchToProps = {
setFocus: windowId => ({ type: SET_FOCUSED_WINDOW, window: windowId }),
- close: windowId => ({ type: CLOSE_GEN_WINDOW, windowId })
+ close: windowId => ({ type: CLOSE_GEN_WINDOW, windowId }),
+ scrollVolume
};
export default connect(mapStateToProps, mapDispatchToProps)(GenWindow);
diff --git a/js/components/MainWindow/index.js b/js/components/MainWindow/index.js
index 08e75a16..1249b275 100644
--- a/js/components/MainWindow/index.js
+++ b/js/components/MainWindow/index.js
@@ -6,7 +6,8 @@ import { WINDOWS } from "../../constants";
import {
loadFilesFromReferences,
removeAllTracks,
- toggleMainWindowShadeMode
+ toggleMainWindowShadeMode,
+ scrollVolume
} from "../../actionCreators";
import DropTarget from "../DropTarget";
@@ -82,6 +83,7 @@ export class MainWindow extends React.Component {
className={className}
onMouseDown={this._handleClick}
handleDrop={this._handleDrop}
+ onWheel={this.props.scrollVolume}
>
({ type: SET_FOCUSED_WINDOW, window: WINDOWS.MAIN }),
loadFilesFromReferences: e => loadFilesFromReferences(e.dataTransfer.files),
removeAllTracks,
- toggleMainWindowShadeMode
+ toggleMainWindowShadeMode,
+ scrollVolume
};
export default connect(mapStateToProps, mapDispatchToProps)(MainWindow);
diff --git a/js/components/PlaylistWindow/index.js b/js/components/PlaylistWindow/index.js
index 27e32264..cb8af65e 100644
--- a/js/components/PlaylistWindow/index.js
+++ b/js/components/PlaylistWindow/index.js
@@ -19,7 +19,8 @@ import {
scrollUpFourTracks,
scrollDownFourTracks,
loadFilesFromReferences,
- togglePlaylistShadeMode
+ togglePlaylistShadeMode,
+ scrollVolume
} from "../../actionCreators";
import { clamp } from "../../utils";
@@ -91,6 +92,7 @@ class PlaylistWindow extends React.Component {
style={style}
onMouseDown={focusPlaylist}
handleDrop={this._handleDrop}
+ onWheel={this.props.scrollVolume}
>
loadFilesFromReferences(e.dataTransfer.files, false, startIndex),
- togglePlaylistShadeMode
+ togglePlaylistShadeMode,
+ scrollVolume
};
const mapStateToProps = state => {