Implemnt scroll buttons

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;

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);
+}

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]}

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 => {

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)
+);