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

mopidy_iris/static/index.html

@@ -106,7 +106,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1603873501";
+	var build = "1604224903";
 	var version = "3.53.0";
 
 	// Construct the script tag

src/js/components/GridItem.js

@@ -55,17 +55,21 @@ class GridItem extends React.Component {
 
   renderSecondary = ({
     uri,
-    tracks_total = 0,
-    tracks,
+    tracks_total,
+    tracks = [],
     followers,
     albums_uris,
     artists,
   }) => {
+    let trackCount = 0;
+    if (tracks) trackCount = tracks.length;
+    if (tracks_total) trackCount = tracks_total;
+
     switch (uriType(uri)) {
       case 'playlist':
         return (
           <span className="grid__item__secondary__content">
-            <I18n path="specs.tracks" count={tracks.length || tracks_total} />
+            <I18n path="specs.tracks" count={trackCount} />
           </span>
         );
 

src/js/components/Services.js

@@ -299,31 +299,37 @@ class Services extends React.Component {
       }
     } = this.props;
 
-    const spotify_icon = (
+    const spotify_icon = spotifyUser ? (
       <Thumbnail
         className="menu-item__thumbnail"
         circle
         size="small"
-        images={spotifyUser ? spotifyUser.images : null}
+        images={spotifyUser.images}
       />
+    ) : (
+      <Thumbnail className="menu-item__thumbnail" circle size="small" />
     );
 
-    const lastfm_icon = (
+    const lastfm_icon = lastfmUser ? (
       <Thumbnail
         className="menu-item__thumbnail"
         circle
         size="small"
-        images={lastfmUser ? lastfmUser.images : null}
+        images={lastfmUser.images}
       />
+    ) : (
+      <Icon type="fontawesome" name="lastfm" className="menu-item__icon" />
     );
 
-    const genius_icon = (
+    const genius_icon = geniusUser ? (
       <Thumbnail
         className="menu-item__thumbnail"
         circle
         size="small"
-        images={geniusUser ? geniusUser.images : null}
+        images={geniusUser.images}
       />
+    ) : (
+      <Icon name="genius" type="svg" className="menu-item__icon" />
     );
 
     return (

src/js/locale/en.yaml

@@ -77,27 +77,27 @@ fields:
     followers: Followers
     popularity: Popularity
 time:
-  seconds: 
+  seconds:
     short: secs
     singular: second
     plural: seconds
-  minutes: 
+  minutes:
     short: mins
     singular: minute
     plural: minutes
-  hours: 
+  hours:
     short: hrs
     singular: hour
     plural: hours
-  days: 
+  days:
     short: days
     singular: day
     plural: days
-  weeks: 
+  weeks:
     short: wks
     singular: week
     plural: weeks
-  years: 
+  years:
     short: yrs
     singular: year
     plural: years
@@ -341,6 +341,8 @@ settings:
       wide_scrollbars: Use wide scrollbars
       grid_glow: Thumbnail glow effect
       grid_glow_tooltip: Disable effect for lower-power devices or older browsers
+      reverse_playlist_tracks: Reverse playlist tracks
+      reverse_playlist_tracks_tooltip: Sort tracks, most recently-added first
     sources_priority:
       label: Sources priority
       description: Drag-and-drop to prioritize search providers and results

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>