Sidescrolling details only on mobile; Polishing pre-release

src/js/views/Album.js

@@ -91,19 +91,13 @@ class Album extends React.Component {
   }
 
   setWindowTitle = (album = this.props.album) => {
-    const { uiActions: { setWindowTitle }, artists } = this.props;
+    const { uiActions: { setWindowTitle } } = this.props;
 
     if (album) {
-      let artistNames = [];
-      if (album.artists_uris && artists) {
-        for (let i = 0; i < album.artists_uris.length; i++) {
-          const uri = album.artists_uris[i];
-          if (artists.hasOwnProperty(uri)) {
-            artistNames.push(artists[uri].name);
-          }
-        }
-      }
-      setWindowTitle(i18n('album.title_window', { name: album.name, artist: artistNames.join() }));
+      setWindowTitle(i18n('album.title_window', {
+        name: album.name,
+        artist: album.artists?.map((artist) => artist.name).join(),
+      }));
     } else {
       setWindowTitle(i18n('album.title'));
     }
@@ -241,7 +235,7 @@ class Album extends React.Component {
         <div className="title">
           <h1>{album.name}</h1>
 
-          <ul className="details">
+          <ul className="details details--one-line">
             {!slim_mode ? (
               <li className="source">
                 <Icon type="fontawesome" name={sourceIcon(album.uri)} />

src/js/views/Artist.js

@@ -29,7 +29,7 @@ import { i18n, I18n } from '../locale';
 import Button from '../components/Button';
 import { trackEvent } from '../components/Trackable';
 import {
-  makeArtistSelector,
+  makeItemSelector,
   makeLoadingSelector,
 } from '../util/selectors';
 import { nice_number } from '../components/NiceNumber';
@@ -72,8 +72,7 @@ class Artist extends React.Component {
       loadArtist(uri, { full: true });
     }
 
-    if (!prevArtist && artist) this.setWindowTitle(artist);
-    if (prevUri !== uri && artist) this.setWindowTitle(artist);
+    if (prevArtist?.uri !== artist?.uri && artist) this.setWindowTitle(artist);
   }
 
   onChangeTracksFilter = (value) => {
@@ -193,8 +192,8 @@ class Artist extends React.Component {
     let {
       tracks,
       related_artists,
-      albums,
     } = artist;
+    let { albums } = this.props;
 
     if (sort && albums) {
       albums = sortItems(albums, sort, sort_reverse);
@@ -604,12 +603,18 @@ class Artist extends React.Component {
 const mapStateToProps = (state, props) => {
   const uri = decodeURIComponent(props.match.params.uri);
   const loadingSelector = makeLoadingSelector([`(.*)${uri}(.*)`, '^((?!contains).)*$', '^((?!albums).)*$', '^((?!related-artists).)*$', '^((?!top-tracks).)*$']);
-  const artistSelector = makeArtistSelector(uri);
+  const artistSelector = makeItemSelector(uri);
   const artist = artistSelector(state);
+  let albums = null;
+  if (artist && artist.albums_uris) {
+    const albumsSelector = makeItemSelector(artist.albums_uris);
+    albums = albumsSelector(state);
+  }
 
   return {
     uri,
     artist,
+    albums,
     loading: loadingSelector(state),
     theme: state.ui.theme,
     slim_mode: state.ui.slim_mode,

src/js/views/Playlist.js

@@ -407,7 +407,7 @@ class Playlist extends React.Component {
             />
           )}
 
-          <ul className="details">
+          <ul className="details details--one-line">
             {!slim_mode && (
               <li className="source">
                 <Icon type="fontawesome" name={sourceIcon(playlist.uri)} />

src/js/views/Track.js

@@ -268,7 +268,7 @@ class Track extends React.Component {
             {track.artists && <LinksSentence items={track.artists} type="artist" />}
           </h2>
 
-          <ul className="details">
+          <ul className="details details--one-line">
             {!slim_mode && (
               <li className="source">
                 <Icon type="fontawesome" name={sourceIcon(uri)} />

src/js/views/User.js

@@ -153,7 +153,7 @@ class User extends React.Component {
                     <ContextMenuTrigger onTrigger={this.handleContextMenu} />
                   </div>
                   <h2>
-                    <ul className="details">
+                    <ul className="details details--one-line">
                       {!slim_mode && (
                         <li className="source">
                           <Icon type="fontawesome" name={sourceIcon(user.uri)} />

src/js/views/library/LibraryTracks.js

@@ -37,9 +37,6 @@ class LibraryTracks extends React.Component {
 
   componentDidMount() {
     const {
-      location: {
-        state = {},
-      },
       uiActions: {
         setWindowTitle,
       },
@@ -170,7 +167,6 @@ class LibraryTracks extends React.Component {
       loading_progress,
     } = this.props;
     const {
-      limit,
       filter,
     } = this.state;
     let { tracks } = this.props;
@@ -187,20 +183,9 @@ class LibraryTracks extends React.Component {
       tracks = applyFilter('name', filter, tracks);
     }
 
-    // Apply our lazy-load-rendering
-    const total_tracks = tracks.length;
-    tracks = tracks.slice(0, limit);
-
     return (
       <section className="content-wrapper">
-        <TrackList
-          tracks={tracks}
-        />
-        <LazyLoadListener
-          loadKey={total_tracks > limit ? limit : total_tracks}
-          showLoader={limit < total_tracks}
-          loadMore={this.loadMore}
-        />
+        <TrackList tracks={tracks} />
       </section>
     );
   }
@@ -216,7 +201,6 @@ class LibraryTracks extends React.Component {
     } = this.props;
     const {
       filter,
-      per_page,
     } = this.state;
 
     const source_options = [
@@ -260,7 +244,7 @@ class LibraryTracks extends React.Component {
       <>
         <FilterField
           initialValue={filter}
-          handleChange={(value) => this.setState({ filter: value, limit: per_page })}
+          handleChange={(value) => this.setState({ filter: value })}
           onSubmit={() => uiActions.hideContextMenu()}
         />
         <DropdownField