Pad track number

Fixes #412

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## Next version
 
 * Marquee now displays one additional character: https://github.com/captbaritone/webamp/issues/543
+* Track numbers in playlist are now padded to the length of the longest track number.
 
 ## 1.0.0
 

css/playlist-window.css

@@ -79,15 +79,10 @@
     user-select: none;
 }
 
-#webamp .playlist-track-numbers > div,
 #webamp .playlist-track-durations > div {
     padding-right: 3px;
     text-align: right;
 }
-#webamp .playlist-track-numbers > div {
-    text-align: center;
-    padding-left: 1px;
-}
 
 #webamp .playlist-track-titles {
     flex: 1 1 auto;

js/components/PlaylistWindow/TrackList.js

@@ -2,13 +2,21 @@ import React from "react";
 import { connect } from "react-redux";
 
 import { getTimeStr } from "../../utils";
-import { getVisibleTrackIds, getScrollOffset } from "../../selectors";
+import {
+  getVisibleTrackIds,
+  getScrollOffset,
+  getNumberOfTracks
+} from "../../selectors";
 import { TRACK_HEIGHT } from "../../constants";
 import { SELECT_ZERO } from "../../actionTypes";
 import { dragSelected, scrollPlaylistByDelta } from "../../actionCreators";
 import TrackCell from "./TrackCell";
 import TrackTitle from "./TrackTitle";
 
+function getNumberLength(number) {
+  return number.toString().length;
+}
+
 class TrackList extends React.Component {
   constructor(props) {
     super(props);
@@ -57,6 +65,9 @@ class TrackList extends React.Component {
 
   render() {
     const { tracks, offset } = this.props;
+    const maxTrackNumberLength = getNumberLength(this.props.numberOfTracks);
+    const paddedTrackNumForIndex = i =>
+      (i + 1 + offset).toString().padStart(maxTrackNumberLength, "\u00A0");
     return (
       <div
         ref={node => {
@@ -67,11 +78,10 @@ class TrackList extends React.Component {
         onClick={this.props.selectZero}
         onWheel={this.props.scrollPlaylistByDelta}
       >
-        <div className="playlist-track-numbers">
-          {this._renderTracks((id, i) => `${i + 1 + offset}.`)}
-        </div>
         <div className="playlist-track-titles">
-          {this._renderTracks(id => <TrackTitle id={id} />)}
+          {this._renderTracks((id, i) => (
+            <TrackTitle id={id} paddedTrackNumber={paddedTrackNumForIndex(i)} />
+          ))}
         </div>
         <div className="playlist-track-durations">
           {this._renderTracks(id => getTimeStr(tracks[id].duration))}
@@ -90,7 +100,8 @@ const mapDispatchToProps = {
 const mapStateToProps = state => ({
   offset: getScrollOffset(state),
   trackIds: getVisibleTrackIds(state),
-  tracks: state.playlist.tracks
+  tracks: state.playlist.tracks,
+  numberOfTracks: getNumberOfTracks(state)
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(TrackList);

js/components/PlaylistWindow/TrackTitle.js

@@ -2,7 +2,11 @@ import React from "react";
 import { connect } from "react-redux";
 import { getTrackDisplayName } from "../../selectors";
 
-const TrackTitle = props => <span>{props.title}</span>;
+const TrackTitle = props => (
+  <span>
+    {props.paddedTrackNumber}. {props.title}
+  </span>
+);
 
 const mapStateToProps = (state, ownProps) => ({
   title: getTrackDisplayName(state, ownProps.id)

js/components/PlaylistWindow/__snapshots__/index.test.js.snap

@@ -74,9 +74,6 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
           }
         }
       >
-        <div
-          className="playlist-track-numbers"
-        />
         <div
           className="playlist-track-titles"
         />

js/selectors.js

@@ -210,7 +210,7 @@ export const getMediaText = createSelector(
         `${minimalMediaText} (${getTimeStr(duration)})  ***  `
 );
 
-const getNumberOfTracks = state => getTrackOrder(state).length;
+export const getNumberOfTracks = state => getTrackOrder(state).length;
 const getPlaylistDuration = createSelector(getTracks, tracks =>
   Object.values(tracks).reduce((total, track) => total + track.duration, 0)
 );