From efa3ea7fe31d2b536caf03b800f93244410dfee3 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Mon, 1 Jan 2018 21:13:30 -0800
Subject: [PATCH] Make playlist scroll discrete. Fixes #429

---
 js/components/PlaylistWindow/ScrollBar.js | 22 ++++++++--------------
 js/selectors.js                           | 23 +++++++++++++++++++----
 2 files changed, 27 insertions(+), 18 deletions(-)

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 = () => <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);
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) => {