Control volume with scroll wheel. Fixes #442

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

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 ? (
         <EqualizerShade />
@@ -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 => ({

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
 }) => (
   <div
     className={classnames("gen-window", "window", { selected })}
     onMouseDown={() => setFocus(windowId)}
+    onWheel={handleWheel}
   >
     <div className="gen-top draggable">
       <div className="gen-top-left draggable" />
@@ -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);

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}
       >
         <div
           id="title-bar"
@@ -147,6 +149,7 @@ const mapDispatchToProps = {
   setFocus: () => ({ type: SET_FOCUSED_WINDOW, window: WINDOWS.MAIN }),
   loadFilesFromReferences: e => loadFilesFromReferences(e.dataTransfer.files),
   removeAllTracks,
-  toggleMainWindowShadeMode
+  toggleMainWindowShadeMode,
+  scrollVolume
 };
 export default connect(mapStateToProps, mapDispatchToProps)(MainWindow);

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}
       >
         <div
           className="playlist-top draggable"
@@ -155,7 +157,8 @@ const mapDispatchToProps = {
   scrollDownFourTracks,
   loadFilesFromReferences: (e, startIndex) =>
     loadFilesFromReferences(e.dataTransfer.files, false, startIndex),
-  togglePlaylistShadeMode
+  togglePlaylistShadeMode,
+  scrollVolume
 };
 
 const mapStateToProps = state => {