Track count, fixes #626; Toggle playlist track order, fixes #583; Reinstating service icons

src/js/views/Playlist.js

@@ -9,7 +9,6 @@ import Thumbnail from '../components/Thumbnail';
 import PinButton from '../components/Fields/PinButton';
 import { nice_number } from '../components/NiceNumber';
 import { Dater, dater } from '../components/Dater';
-import LazyLoadListener from '../components/LazyLoadListener';
 import FollowButton from '../components/Fields/FollowButton';
 import Loader from '../components/Loader';
 import ContextMenuTrigger from '../components/ContextMenuTrigger';
@@ -22,12 +21,12 @@ import * as spotifyActions from '../services/spotify/actions';
 import {
   uriSource,
   getFromUri,
-  isLoading,
   sourceIcon,
   decodeMopidyUri,
 } from '../util/helpers';
 import { i18n, I18n } from '../locale';
 import { makeItemSelector, makeLoadingSelector } from '../util/selectors';
+import { sortItems } from '../util/arrays';
 
 class Playlist extends React.Component {
   constructor(props) {
@@ -275,6 +274,7 @@ class Playlist extends React.Component {
       playlist,
       loading,
       slim_mode,
+      reverse_playlist_tracks,
     } = this.props;
 
     if (!playlist) {
@@ -295,6 +295,8 @@ class Playlist extends React.Component {
       context = 'editable-playlist';
     }
 
+    const tracks = reverse_playlist_tracks ? sortItems(playlist.tracks, '', true) : playlist.tracks;
+
     return (
       <div className="view playlist-view content-wrapper preserve-3d">
 
@@ -353,7 +355,7 @@ class Playlist extends React.Component {
             uri={playlist.uri}
             className="playlist-track-list"
             track_context={context}
-            tracks={playlist.tracks}
+            tracks={tracks}
             removeTracks={this.removeTracks}
             reorderTracks={this.reorderTracks}
           />
@@ -371,6 +373,7 @@ const mapStateToProps = (state, ownProps) => {
       allow_reporting,
       slim_mode,
       theme,
+      reverse_playlist_tracks,
     } = {},
     spotify: {
       library_playlists: spotify_library_playlists,
@@ -398,6 +401,7 @@ const mapStateToProps = (state, ownProps) => {
     local_library_playlists,
     spotify_authorized,
     spotify_userid: (me && me.id) || null,
+    reverse_playlist_tracks,
   };
 };
 

src/js/views/Settings.js

@@ -247,7 +247,7 @@ class Settings extends React.Component {
             <I18n path="settings.interface.title" />
             <a name="interface" />
           </h4>
-          
+
           <div className="field dropdown">
             <div className="name"><I18n path="settings.interface.language.label" /></div>
             <div className="input">
@@ -387,6 +387,20 @@ class Settings extends React.Component {
                   </span>
                 </span>
               </label>
+              <label>
+                <input
+                  type="checkbox"
+                  name="reverse_playlist_tracks"
+                  checked={ui.reverse_playlist_tracks}
+                  onChange={() => uiActions.set({ reverse_playlist_tracks: !ui.reverse_playlist_tracks })}
+                />
+                <span className="label tooltip">
+                  <I18n path="settings.interface.behavior.reverse_playlist_tracks" />
+                  <span className="tooltip__content">
+                    <I18n path="settings.interface.behavior.reverse_playlist_tracks_tooltip" />
+                  </span>
+                </span>
+              </label>
             </div>
           </div>