diff --git a/js/components/PlaylistWindow/ScrollBar.js b/js/components/PlaylistWindow/ScrollBar.js
index 0de43480..6c0e1bf1 100644
--- a/js/components/PlaylistWindow/ScrollBar.js
+++ b/js/components/PlaylistWindow/ScrollBar.js
@@ -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 = () =>
;
-const PlaylistWindow = props => (
+const ScrollBar = props => (
{
- 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);
diff --git a/js/selectors.js b/js/selectors.js
index 5a45f07b..af47030d 100644
--- a/js/selectors.js
+++ b/js/selectors.js
@@ -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) => {