Make playlist scroll discrete. Fixes #429

This commit is contained in:
Jordan Eldredge 2018-01-01 21:13:30 -08:00
parent f595ba735e
commit efa3ea7fe3
2 changed files with 27 additions and 18 deletions

View file

@ -3,11 +3,11 @@ import { connect } from "react-redux";
import Slider from "rc-slider/lib/Slider";
import { setPlaylistScrollPosition } from "../../actionCreators";
import { getVisibleTrackIds } from "../../selectors";
import { getVisibleTrackIds, getPlaylistScrollPosition } from "../../selectors";
const Handle = () => <div className="playlist-scrollbar-handle" />;
const PlaylistWindow = props => (
const ScrollBar = props => (
<Slider
className="playlist-scrollbar"
type="range"
@ -27,16 +27,10 @@ const mapDispatchToProps = {
setPlaylistScrollPosition(100 - position)
};
const mapStateToProps = state => {
const {
display: { playlistScrollPosition },
playlist: { trackOrder }
} = state;
const mapStateToProps = state => ({
playlistScrollPosition: getPlaylistScrollPosition(state),
allTracksAreVisible:
getVisibleTrackIds(state).length === state.playlist.length
});
return {
playlistScrollPosition,
allTracksAreVisible: getVisibleTrackIds(state).length === trackOrder.length
};
};
export default connect(mapStateToProps, mapDispatchToProps)(PlaylistWindow);
export default connect(mapStateToProps, mapDispatchToProps)(ScrollBar);

View file

@ -103,9 +103,6 @@ export const nextTrack = (state, n = 1) => {
return trackOrder[nextIndex];
};
export const getPlaylistScrollPosition = state =>
state.display.playlistScrollPosition;
const BASE_WINDOW_HEIGHT = 58;
export const getNumberOfVisibleTracks = state => {
const { playlistSize } = state.display;
@ -122,8 +119,26 @@ export const getOverflowTrackCount = createSelector(
Math.max(0, trackOrder.length - numberOfVisibleTracks)
);
const _getPlaylistScrollPosition = state =>
state.display.playlistScrollPosition;
export const getPlaylistScrollPosition = createSelector(
getOverflowTrackCount,
_getPlaylistScrollPosition,
(overflowTrackCount, playlistScrollPosition) => {
if (overflowTrackCount === 0) {
return 0;
}
return Math.round(
Math.round(overflowTrackCount * playlistScrollPosition / 100) /
overflowTrackCount *
100
);
}
);
export const getScrollOffset = createSelector(
getPlaylistScrollPosition,
_getPlaylistScrollPosition,
getTrackOrder,
getNumberOfVisibleTracks,
(playlistScrollPosition, trackOrder, numberOfVisibleTracks) => {