Add mouse scroll to playlist

This commit is contained in:
Jordan Eldredge 2018-01-16 20:57:03 -08:00
parent c3b8b92df6
commit fb58e54a3d
2 changed files with 28 additions and 3 deletions

View file

@ -6,7 +6,7 @@ import {
promptForFileReferences
} from "./fileUtils";
import skinParser from "./skinParser";
import { BANDS } from "./constants";
import { BANDS, TRACK_HEIGHT } from "./constants";
import {
getEqfData,
nextTrack,
@ -454,6 +454,22 @@ export function scrollNTracks(n) {
};
}
export function scrollPlaylistByDelta(delta) {
return (dispatch, getState) => {
const state = getState();
const totalPixelHeight = state.playlist.trackOrder.length * TRACK_HEIGHT;
const percentDelta = delta / totalPixelHeight * 100;
dispatch({
type: SET_PLAYLIST_SCROLL_POSITION,
position: clamp(
state.display.playlistScrollPosition + percentDelta,
0,
100
)
});
};
}
export function scrollUpFourTracks() {
return scrollNTracks(-4);
}

View file

@ -5,7 +5,7 @@ import { getTimeStr } from "../../utils";
import { getVisibleTrackIds, getScrollOffset } from "../../selectors";
import { TRACK_HEIGHT } from "../../constants";
import { SELECT_ZERO } from "../../actionTypes";
import { dragSelected } from "../../actionCreators";
import { dragSelected, scrollPlaylistByDelta } from "../../actionCreators";
import TrackCell from "./TrackCell";
import TrackTitle from "./TrackTitle";
@ -13,6 +13,7 @@ class TrackList extends React.Component {
constructor(props) {
super(props);
this._handleMoveClick = this._handleMoveClick.bind(this);
this._handleWeel = this._handleWeel.bind(this);
}
_renderTracks(format) {
@ -28,6 +29,12 @@ class TrackList extends React.Component {
));
}
_handleWeel(e) {
this.props.scrollPlaylistByDelta(e.deltaY);
e.preventDefault();
e.stopPropagation();
}
_handleMoveClick(e) {
if (!this._node) {
return;
@ -65,6 +72,7 @@ class TrackList extends React.Component {
className="playlist-tracks"
style={{ height: "100%" }}
onClick={this.props.selectZero}
onWheel={this._handleWeel}
>
<div className="playlist-track-numbers">
{this._renderTracks((id, i) => `${i + 1 + offset}.`)}
@ -82,7 +90,8 @@ class TrackList extends React.Component {
const mapDispatchToProps = {
selectZero: () => ({ type: SELECT_ZERO }),
dragSelected
dragSelected,
scrollPlaylistByDelta
};
const mapStateToProps = state => ({