From f3374f4d57145d3da504b735d224e654630cb4ee Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sun, 19 Nov 2017 18:09:51 -0800
Subject: [PATCH] Playlist track number fixes

---
 css/playlist-window.css                   | 1 +
 js/components/PlaylistWindow/TrackList.js | 7 ++++---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/css/playlist-window.css b/css/playlist-window.css
index a5b72708..6172cc9e 100644
--- a/css/playlist-window.css
+++ b/css/playlist-window.css
@@ -67,6 +67,7 @@
   padding-right: 3px;
 }
 #winamp2-js .playlist-track-numbers > div {
+  text-align: center;
   padding-left: 1px;
 }
 
diff --git a/js/components/PlaylistWindow/TrackList.js b/js/components/PlaylistWindow/TrackList.js
index b256909a..c167d877 100644
--- a/js/components/PlaylistWindow/TrackList.js
+++ b/js/components/PlaylistWindow/TrackList.js
@@ -2,17 +2,17 @@ import React from "react";
 import { connect } from "react-redux";
 
 import { getTimeStr } from "../../utils";
-import { getVisibleTrackIds } from "../../selectors";
+import { getVisibleTrackIds, getScrollOffset } from "../../selectors";
 import TrackCell from "./TrackCell";
 
 const TrackList = props => {
-  const { trackIds, tracks } = props;
+  const { trackIds, tracks, offset } = props;
   return (
     <div className="playlist-tracks">
       <div className="playlist-track-numbers">
         {trackIds.map((id, i) => (
           <TrackCell key={id} id={id}>
-            {`${i + 1}.`}
+            {`${i + 1 + offset}.`}
           </TrackCell>
         ))}
       </div>
@@ -37,6 +37,7 @@ const TrackList = props => {
 const mapDispatchToProps = () => ({});
 
 const mapStateToProps = state => ({
+  offset: getScrollOffset(state),
   trackIds: getVisibleTrackIds(state),
   tracks: state.tracks
 });