From 390fd99e05c4882cd35e7978c45bb34cea4344d9 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Wed, 27 Sep 2017 20:17:01 -0700
Subject: [PATCH] Get playlist scroll bar working. Kinda.

---
 css/playlist-window.css               |  3 +++
 js/actionTypes.js                     |  1 +
 js/components/PlaylistWindow/index.js | 26 +++++++++++++++++++++-----
 js/reducers.js                        |  8 ++++++--
 4 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/css/playlist-window.css b/css/playlist-window.css
index a501255c..3384674d 100644
--- a/css/playlist-window.css
+++ b/css/playlist-window.css
@@ -56,6 +56,8 @@
   background-position: top right;
   width: 20px;
   position: relative;
+  padding-bottom: 9px;
+  padding-top: 9px;
 }
 
 #winamp2-js .playlist-scrollbar {
@@ -67,6 +69,7 @@
 #winamp2-js .playlist-scrollbar-handle {
   width: 8x;
   height: 18px;
+  margin-top: -9px;
 }
 
 #winamp2-js .playlist-bottom {
diff --git a/js/actionTypes.js b/js/actionTypes.js
index 2fa5a591..a7ddc3ff 100644
--- a/js/actionTypes.js
+++ b/js/actionTypes.js
@@ -39,3 +39,4 @@ export const UNSET_FOCUS = "UNSET_FOCUS";
 export const UPDATE_TIME_ELAPSED = "UPDATE_TIME_ELAPSED";
 export const SET_USER_MESSAGE = "SET_USER_MESSAGE";
 export const UNSET_USER_MESSAGE = "UNSET_USER_MESSAGE";
+export const SET_PLAYLIST_SCROLL_POSITION = "SET_PLAYLIST_SCROLL_POSITION";
diff --git a/js/components/PlaylistWindow/index.js b/js/components/PlaylistWindow/index.js
index 7e2fdf1c..d46bcff8 100644
--- a/js/components/PlaylistWindow/index.js
+++ b/js/components/PlaylistWindow/index.js
@@ -5,7 +5,10 @@ import Slider from "rc-slider/lib/Slider";
 
 import MiniTime from "../MiniTime";
 import { WINDOWS } from "../../constants";
-import { SET_FOCUSED_WINDOW } from "../../actionTypes";
+import {
+  SET_FOCUSED_WINDOW,
+  SET_PLAYLIST_SCROLL_POSITION
+} from "../../actionTypes";
 import { play, pause, stop, openFileDialog } from "../../actionCreators";
 
 import "../../../css/playlist-window.css";
@@ -13,7 +16,13 @@ import "../../../css/playlist-window.css";
 const Handle = () => <div className="playlist-scrollbar-handle" />;
 
 const PlaylistWindow = props => {
-  const { skinPlaylistStyle, focusPlaylist, focused } = props;
+  const {
+    skinPlaylistStyle,
+    focusPlaylist,
+    focused,
+    playlistScrollPosition,
+    setPlaylistScrollPosition
+  } = props;
   const style = {};
   if (props) {
     style.color = skinPlaylistStyle.Normal;
@@ -45,6 +54,8 @@ const PlaylistWindow = props => {
             min={0}
             max={100}
             step={1}
+            value={100 - playlistScrollPosition}
+            onChange={setPlaylistScrollPosition}
             vertical
             handle={Handle}
           />
@@ -81,12 +92,17 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
   play: () => dispatch(play()),
   pause: () => dispatch(pause()),
   stop: () => dispatch(stop()),
-  openFileDialog: () => dispatch(openFileDialog(ownProps.fileInput))
+  openFileDialog: () => dispatch(openFileDialog(ownProps.fileInput)),
+  setPlaylistScrollPosition: position =>
+    dispatch({ type: SET_PLAYLIST_SCROLL_POSITION, position })
 });
 
 const mapStateToProps = state => {
-  const { windows: { focused }, display: { skinPlaylistStyle } } = state;
-  return { focused, skinPlaylistStyle };
+  const {
+    windows: { focused },
+    display: { skinPlaylistStyle, playlistScrollPosition }
+  } = state;
+  return { focused, skinPlaylistStyle, playlistScrollPosition };
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(PlaylistWindow);
diff --git a/js/reducers.js b/js/reducers.js
index 047b7d27..3a8734ae 100644
--- a/js/reducers.js
+++ b/js/reducers.js
@@ -32,7 +32,8 @@ import {
   UNSET_FOCUS,
   UPDATE_TIME_ELAPSED,
   SET_USER_MESSAGE,
-  UNSET_USER_MESSAGE
+  UNSET_USER_MESSAGE,
+  SET_PLAYLIST_SCROLL_POSITION
 } from "./actionTypes";
 import { playlistEnabled } from "./config";
 
@@ -98,7 +99,8 @@ const defaultDisplayState = {
   skinImages: {},
   skinColors: null,
   skinPlaylistStyle: {},
-  visualizerStyle: 2
+  visualizerStyle: 2,
+  playlistScrollPosition: 0
 };
 
 const display = (state = defaultDisplayState, action) => {
@@ -132,6 +134,8 @@ const display = (state = defaultDisplayState, action) => {
       };
     case TOGGLE_VISUALIZER_STYLE:
       return { ...state, visualizerStyle: (state.visualizerStyle + 1) % 3 };
+    case SET_PLAYLIST_SCROLL_POSITION:
+      return { ...state, playlistScrollPosition: action.position };
     default:
       return state;
   }