From caeb4652c18b1d71230b5f688065f99999aff4fa Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sun, 19 Nov 2017 18:05:22 -0800
Subject: [PATCH] Implemnt scroll buttons

---
 css/playlist-window.css                       | 15 ++++++++++
 js/actionCreators.js                          | 28 ++++++++++++++++++-
 .../__snapshots__/index.test.js.snap          |  8 ++++++
 js/components/PlaylistWindow/index.js         | 16 +++++++++--
 js/selectors.js                               | 13 +++++++--
 5 files changed, 74 insertions(+), 6 deletions(-)

diff --git a/css/playlist-window.css b/css/playlist-window.css
index fdc020e0..a5b72708 100644
--- a/css/playlist-window.css
+++ b/css/playlist-window.css
@@ -274,6 +274,21 @@
   background-position-x: right;
 }
 
+#winamp2-js #playlist-window #playlist-scroll-up-button,
+#winamp2-js #playlist-window #playlist-scroll-down-button {
+  position: absolute;
+  width: 8px;
+  height: 5px;
+  right: 7px;
+}
+
+#winamp2-js #playlist-window #playlist-scroll-up-button {
+  top: 2px;
+}
+#winamp2-js #playlist-window #playlist-scroll-down-button {
+  top: 8px;
+}
+
 #winamp2-js #playlist-window-shade #playlist-resize-target {
   position: absolute;
   right: 20px;
diff --git a/js/actionCreators.js b/js/actionCreators.js
index a50f263c..ee57447e 100644
--- a/js/actionCreators.js
+++ b/js/actionCreators.js
@@ -2,7 +2,12 @@ import { parser, creator } from "winamp-eqf";
 import MyFile from "./myFile";
 import skinParser from "./skinParser";
 import { BANDS } from "./constants";
-import { getEqfData, nextTrack } from "./selectors";
+import {
+  getEqfData,
+  nextTrack,
+  getScrollOffset,
+  getOverflowTrackCount
+} from "./selectors";
 
 import {
   clamp,
@@ -315,3 +320,24 @@ export function toggleVisualizerStyle() {
 export function setPlaylistScrollPosition(position) {
   return { type: SET_PLAYLIST_SCROLL_POSITION, position };
 }
+
+export function scrollNTracks(n) {
+  return (dispatch, getState) => {
+    const state = getState();
+    const overflow = getOverflowTrackCount(state);
+    const currentOffset = getScrollOffset(state);
+    const position = overflow ? clamp((currentOffset + n) / overflow, 0, 1) : 0;
+    return dispatch({
+      type: SET_PLAYLIST_SCROLL_POSITION,
+      position: position * 100
+    });
+  };
+}
+
+export function scrollUpFourTracks() {
+  return scrollNTracks(-4);
+}
+
+export function scrollDownFourTracks() {
+  return scrollNTracks(4);
+}
diff --git a/js/components/PlaylistWindow/__snapshots__/index.test.js.snap b/js/components/PlaylistWindow/__snapshots__/index.test.js.snap
index 136c940a..d0deafb7 100644
--- a/js/components/PlaylistWindow/__snapshots__/index.test.js.snap
+++ b/js/components/PlaylistWindow/__snapshots__/index.test.js.snap
@@ -247,6 +247,14 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
           className="bar"
         />
       </div>
+      <div
+        id="playlist-scroll-up-button"
+        onClick={[Function]}
+      />
+      <div
+        id="playlist-scroll-down-button"
+        onClick={[Function]}
+      />
       <div
         id="playlist-resize-target"
         onMouseDown={[Function]}
diff --git a/js/components/PlaylistWindow/index.js b/js/components/PlaylistWindow/index.js
index 928ca697..d81f7f22 100644
--- a/js/components/PlaylistWindow/index.js
+++ b/js/components/PlaylistWindow/index.js
@@ -30,7 +30,9 @@ import {
   pause,
   stop,
   openFileDialog,
-  toggleVisualizerStyle
+  toggleVisualizerStyle,
+  scrollUpFourTracks,
+  scrollDownFourTracks
 } from "../../actionCreators";
 
 import "../../../css/playlist-window.css";
@@ -117,6 +119,14 @@ const PlaylistWindow = props => {
           </div>
           <MiniTime />
           <ListMenu />
+          <div
+            id="playlist-scroll-up-button"
+            onClick={props.scrollUpFourTracks}
+          />
+          <div
+            id="playlist-scroll-down-button"
+            onClick={props.scrollDownFourTracks}
+          />
           <ResizeTarget />
         </div>
       </div>
@@ -136,7 +146,9 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
   openFileDialog: () => dispatch(openFileDialog(ownProps.fileInput)),
   close: () => dispatch({ type: TOGGLE_PLAYLIST_WINDOW }),
   toggleShade: () => dispatch({ type: TOGGLE_PLAYLIST_SHADE_MODE }),
-  toggleVisualizerStyle: () => dispatch(toggleVisualizerStyle())
+  toggleVisualizerStyle: () => dispatch(toggleVisualizerStyle()),
+  scrollUpFourTracks: () => dispatch(scrollUpFourTracks()),
+  scrollDownFourTracks: () => dispatch(scrollDownFourTracks())
 });
 
 const mapStateToProps = state => {
diff --git a/js/selectors.js b/js/selectors.js
index 741d2942..40d58f2f 100644
--- a/js/selectors.js
+++ b/js/selectors.js
@@ -119,13 +119,20 @@ export const getOverflowTrackCount = createSelector(
     Math.max(0, trackOrder.length - numberOfVisibleTracks)
 );
 
-export const getVisibleTrackIds = createSelector(
+export const getScrollOffset = createSelector(
   getPlaylistScrollPosition,
   getTrackOrder,
   getNumberOfVisibleTracks,
   (playlistScrollPosition, trackOrder, numberOfVisibleTracks) => {
     const overflow = Math.max(0, trackOrder.length - numberOfVisibleTracks);
-    const offset = percentToIndex(playlistScrollPosition / 100, overflow + 1);
-    return trackOrder.slice(offset, offset + numberOfVisibleTracks);
+    return percentToIndex(playlistScrollPosition / 100, overflow + 1);
   }
 );
+
+export const getVisibleTrackIds = createSelector(
+  getScrollOffset,
+  getTrackOrder,
+  getNumberOfVisibleTracks,
+  (offset, trackOrder, numberOfVisibleTracks) =>
+    trackOrder.slice(offset, offset + numberOfVisibleTracks)
+);