From 75ac21322a67c8c680753f1673b8c29cc11bcb45 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Thu, 14 Sep 2017 20:42:55 -0700
Subject: [PATCH] Start work on playlist scoll handle

---
 css/playlist-window.css               |  8 ++++++++
 js/components/PlaylistWindow/index.js |  2 ++
 js/components/Skin.js                 |  2 ++
 js/skinSprites.js                     | 16 +++++++++++++++-
 4 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/css/playlist-window.css b/css/playlist-window.css
index 78a85a7b..04587755 100644
--- a/css/playlist-window.css
+++ b/css/playlist-window.css
@@ -42,6 +42,14 @@
   background-repeat: repeat-y;
   height: 100%;
   background-position: top right;
+  padding-right: 7px;
+  padding-top: 0px;
+}
+
+#winamp2-js .playlist-scrollbar {
+  height: 100%;
+  float: right;
+  width: 8px;
 }
 
 #winamp2-js .playlist-bottom {
diff --git a/js/components/PlaylistWindow/index.js b/js/components/PlaylistWindow/index.js
index 74cd2cc8..4096bafe 100644
--- a/js/components/PlaylistWindow/index.js
+++ b/js/components/PlaylistWindow/index.js
@@ -37,6 +37,8 @@ const PlaylistWindow = props => {
               <div id="shade-playlist" />
             </div>
           </div>
+          {/* Eventual content lives here */}
+          <div className="playlist-scrollbar" />
           <div className="playlist-bottom">
             <div className="playlist-bottom-left" />
             <div className="playlist-visualizer" />
diff --git a/js/components/Skin.js b/js/components/Skin.js
index 77e75f1e..ff81498e 100644
--- a/js/components/Skin.js
+++ b/js/components/Skin.js
@@ -70,6 +70,8 @@ const imageSelectors = {
   PLAYLIST_TOP_RIGHT_CORNER_SELECTED: [".selected .playlist-top-right"],
   PLAYLIST_LEFT_TILE: [".playlist-left"],
   PLAYLIST_RIGHT_TILE: [".playlist-right"],
+  PLAYLIST_SCROLL_HANDLE: [".playlist-scrollbar"],
+  PLAYLIST_SCROLL_HANDLE_SELECTED: [".playlist-scrollbar:active"],
   PLAYLIST_BOTTOM_TILE: [".playlist-bottom"],
   PLAYLIST_BOTTOM_LEFT_CORNER: [".playlist-bottom-left"],
   PLAYLIST_BOTTOM_RIGHT_CORNER: [".playlist-bottom-right"],
diff --git a/js/skinSprites.js b/js/skinSprites.js
index e15e16f7..8789962a 100644
--- a/js/skinSprites.js
+++ b/js/skinSprites.js
@@ -215,7 +215,21 @@ export default {
       width: 75,
       height: 38
     },
-    { name: "PLAYLIST_SHADE_BACKGROUND", x: 72, y: 57, width: 25, height: 14 }
+    { name: "PLAYLIST_SHADE_BACKGROUND", x: 72, y: 57, width: 25, height: 14 },
+    {
+      name: "PLAYLIST_SCROLL_HANDLE",
+      x: 61,
+      y: 53,
+      width: 8,
+      height: 18
+    },
+    {
+      name: "PLAYLIST_SCROLL_HANDLE_SELECTED",
+      x: 52,
+      y: 53,
+      width: 8,
+      height: 18
+    }
   ],
   EQ_EX: [
     {