Consistent track title and filter/sort options; Adding track_number to album tracks, concat disc.track not working for sort

2020-11-07 22:03:58 +13:00
parent f337a112cb
commit a01b2b93d8
16 changed files with 1163 additions and 818 deletions
--- a/src/js/views/Album.js
+++ b/src/js/views/Album.js
@ -10,9 +10,10 @@ import Loader from '../components/Loader';
 import FollowButton from '../components/Fields/FollowButton';
 import { nice_number } from '../components/NiceNumber';
 import { Dater } from '../components/Dater';
-import LazyLoadListener from '../components/LazyLoadListener';
 import ContextMenuTrigger from '../components/ContextMenuTrigger';
 import Icon from '../components/Icon';
+import DropdownField from '../components/Fields/DropdownField';
+import FilterField from '../components/Fields/FilterField';
 import { i18n, I18n } from '../locale';
 import * as coreActions from '../services/core/actions';
 import * as uiActions from '../services/ui/actions';
@ -25,8 +26,18 @@ import {
 } from '../util/helpers';
 import Button from '../components/Button';
 import { makeLoadingSelector, makeItemSelector } from '../util/selectors';
+import { applyFilter, sortItems } from '../util/arrays';
+import { trackEvent } from '../components/Trackable';

 class Album extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      filter: '',
+    };
+  }
+
  componentDidMount = () => {
    const {
      uri,
@ -154,6 +165,29 @@ class Album extends React.Component {
    playURIs([uri], uri);
  }

+  onChangeSort = (value) => {
+    const {
+      sort,
+      sort_reverse,
+      uiActions: {
+        set,
+        hideContextMenu,
+      },
+    } = this.props;
+
+    let reverse = false;
+    if (value !== null && sort === value) {
+      reverse = !sort_reverse;
+    }
+
+    set({
+      album_tracks_sort_reverse: reverse,
+      album_tracks_sort: value,
+    });
+    hideContextMenu();
+    trackEvent({ category: 'Album', action: 'SortTracks', label: `${value} ${reverse ? 'DESC' : 'ASC'}` });
+  }
+
  inLibrary = () => {
    const { uri } = this.props;
    const library = `${uriSource(uri)}_library_albums`;
@ -166,7 +200,17 @@ class Album extends React.Component {
      album,
      loading,
      slim_mode,
+      sort,
+      sort_reverse,
    } = this.props;
+    let {
+      album: {
+        tracks,
+      } = {},
+    } = this.props;
+    const {
+      filter,
+    } = this.state;

    if (loading) {
      return <Loader body loading />;
@ -180,6 +224,25 @@ class Album extends React.Component {
      );
    }

+    if (sort && tracks) {
+      tracks = sortItems(tracks, sort, sort_reverse);
+    }
+
+    if (filter && filter !== '') {
+      tracks = applyFilter('name', filter, tracks);
+    }
+
+    const sort_options = [
+      {
+        value: 'disc_track',
+        label: i18n('album.tracks.sort.disc_track'),
+      },
+      {
+        value: 'name',
+        label: i18n('album.tracks.sort.name'),
+      },
+    ];
+
    return (
      <div className="view album-view content-wrapper preserve-3d">
        <div className="thumbnail-wrapper">
@ -255,9 +318,29 @@ class Album extends React.Component {
        </div>

        <section className="list-wrapper">
+          <h4 className="no-bottom-margin">
+            <I18n path="album.tracks.title" />
+            <div className="actions-wrapper">
+              <FilterField
+                initialValue={filter}
+                handleChange={(value) => this.setState({ filter: value })}
+                onSubmit={() => uiActions.hideContextMenu()}
+              />
+              <DropdownField
+                icon="swap_vert"
+                name="Sort"
+                value={sort}
+                valueAsLabel
+                options={sort_options}
+                selected_icon={sort ? (sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : null}
+                handleChange={this.onChangeSort}
+              />
+            </div>
+          </h4>
          <TrackList
            className="album-track-list"
-            tracks={album.tracks}
+            tracks={tracks}
+            track_context="album"
            uri={album.uri}
          />
        </section>
@ -292,6 +375,8 @@ const mapStateToProps = (state, ownProps) => {
    spotify_library_albums: state.spotify.library_albums,
    local_library_albums: state.mopidy.library_albums,
    spotify_authorized: state.spotify.authorization,
+    sort: (state.ui.album_tracks_sort ? state.ui.album_tracks_sort : 'disc_track'),
+    sort_reverse: (!!state.ui.album_tracks_sort_reverse),
  };
 };

--- a/src/js/views/Artist.js
+++ b/src/js/views/Artist.js
@ -14,6 +14,7 @@ import RelatedArtists from '../components/RelatedArtists';
 import FollowButton from '../components/Fields/FollowButton';
 import ContextMenuTrigger from '../components/ContextMenuTrigger';
 import DropdownField from '../components/Fields/DropdownField';
+import FilterField from '../components/Fields/FilterField';
 import Icon from '../components/Icon';
 import Loader from '../components/Loader';
 import * as coreActions from '../services/core/actions';
@ -35,6 +36,14 @@ import {
 } from '../util/selectors';

 class Artist extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      filter: '',
+    };
+  }
+
  componentDidMount() {
    const {
      uri,
@ -156,8 +165,11 @@ class Artist extends React.Component {
      artist,
      sort,
      sort_reverse,
-      filter,
+      filterType 
    } = this.props;
+    const {
+      filter,
+    } = this.state;
    let {
      tracks,
      related_artists,
@ -168,8 +180,12 @@ class Artist extends React.Component {
      albums = sortItems(albums, sort, sort_reverse);
    }

-    if (filter && albums) {
-      albums = applyFilter('type', filter, albums);
+    if (filterType && albums) {
+      albums = applyFilter('type', filterType, albums);
+    }
+
+    if (filter && filter !== '') {
+      albums = applyFilter('name', filter, albums);
    }

    const sort_options = [
@ -191,7 +207,7 @@ class Artist extends React.Component {
      },
    ];

-    const filter_options = [
+    const filter_type_options = [
      {
        value: null,
        label: i18n('artist.albums.filter.all'),
@ -241,6 +257,11 @@ class Artist extends React.Component {
          <h4>
            <I18n path="artist.overview.albums" />
            <div className="actions-wrapper">
+              <FilterField
+                initialValue={filter}
+                handleChange={(value) => this.setState({ filter: value })}
+                onSubmit={() => uiActions.hideContextMenu()}
+              />
              <DropdownField
                icon="swap_vert"
                name="Sort"
@ -253,22 +274,11 @@ class Artist extends React.Component {
              <DropdownField
                icon="filter_list"
                name="Filter"
-                value={filter}
+                value={filterType}
                valueAsLabel
-                options={filter_options}
+                options={filter_type_options}
                handleChange={this.onChangeFilter}
              />
-              {(sort || filter) && (
-                <Button
-                  discrete
-                  type="destructive"
-                  size="small"
-                  onClick={this.onResetFilters}
-                >
-                  <Icon name="clear" />
-                  <I18n path="actions.reset" />
-                </Button>
-              )}
            </div>
          </h4>

@ -537,7 +547,7 @@ const mapStateToProps = (state, ownProps) => {
    loading: loadingSelector(state),
    theme: state.ui.theme,
    slim_mode: state.ui.slim_mode,
-    filter: (state.ui.artist_albums_filter ? state.ui.artist_albums_filter : null),
+    filterType: (state.ui.artist_albums_filter ? state.ui.artist_albums_filter : null),
    sort: (state.ui.artist_albums_sort ? state.ui.artist_albums_sort : null),
    sort_reverse: (!!state.ui.artist_albums_sort_reverse),
    spotify_authorized: state.spotify.authorization,
--- a/src/js/views/Playlist.js
+++ b/src/js/views/Playlist.js
@ -15,6 +15,7 @@ import ContextMenuTrigger from '../components/ContextMenuTrigger';
 import URILink from '../components/URILink';
 import Icon from '../components/Icon';
 import DropdownField from '../components/Fields/DropdownField';
+import FilterField from '../components/Fields/FilterField';
 import * as coreActions from '../services/core/actions';
 import * as uiActions from '../services/ui/actions';
 import * as mopidyActions from '../services/mopidy/actions';
@ -28,7 +29,7 @@ import {
 import { trackEvent } from '../components/Trackable';
 import { i18n, I18n } from '../locale';
 import { makeItemSelector, makeLoadingSelector } from '../util/selectors';
-import { sortItems } from '../util/arrays';
+import { sortItems, applyFilter } from '../util/arrays';

 class Playlist extends React.Component {
  constructor(props) {
@ -36,6 +37,10 @@ class Playlist extends React.Component {

    let { uri } = props;

+    this.state = {
+      filter: '',
+    };
+
    // Spotify upgraded their playlists URI to remove user component (Sept 2018)
    // We accept the old format, and redirect to the new one
    if (uri.includes('spotify:user:')) {
@ -323,6 +328,9 @@ class Playlist extends React.Component {
      sort,
      sort_reverse,
    } = this.props;
+    const {
+      filter,
+    } = this.state;

    if (!playlist) {
      if (loading) {
@ -351,11 +359,11 @@ class Playlist extends React.Component {
      tracks = sortItems(tracks, sort, sort_reverse);
    }

+    if (filter && filter !== '') {
+      tracks = applyFilter('name', filter, tracks);
+    }
+
    const sort_options = [
-      {
-        value: null,
-        label: i18n('playlist.tracks.sort.default'),
-      },
      {
        value: 'sort_id',
        label: i18n('playlist.tracks.sort.sort_id'),
@ -434,6 +442,11 @@ class Playlist extends React.Component {
        <h4 className="no-bottom-margin">
          <I18n path="playlist.tracks.title" />
          <div className="actions-wrapper">
+            <FilterField
+              initialValue={filter}
+              handleChange={(value) => this.setState({ filter: value })}
+              onSubmit={() => uiActions.hideContextMenu()}
+            />
            <DropdownField
              icon="swap_vert"
              name="Sort"
@ -496,7 +509,7 @@ const mapStateToProps = (state, ownProps) => {
    local_library_playlists,
    spotify_authorized,
    spotify_userid: (me && me.id) || null,
-    sort: (state.ui.playlist_tracks_sort ? state.ui.playlist_tracks_sort : null),
+    sort: (state.ui.playlist_tracks_sort ? state.ui.playlist_tracks_sort : 'sort_id'),
    sort_reverse: (!!state.ui.playlist_tracks_sort_reverse),
  };
 };