Merge branch 'develop'

mopidy_iris/static/app.js

@@ -155049,7 +155049,7 @@ var Hotkeys = function Hotkeys() {
         }));
       }
     });
-  });
+  }, {}, [play_time_position]);
   Object(react_hotkeys_hook__WEBPACK_IMPORTED_MODULE_2__["useHotkeys"])('f', function (e) {
     return prepare({
       e: e,
@@ -155062,7 +155062,7 @@ var Hotkeys = function Hotkeys() {
         }));
       }
     });
-  });
+  }, {}, [play_time_position]);
   Object(react_hotkeys_hook__WEBPACK_IMPORTED_MODULE_2__["useHotkeys"])(',', function (e) {
     return prepare({
       e: e,

mopidy_iris/static/index.html

@@ -115,7 +115,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1629516953";
+	var build = "1629608847";
 	var version = "3.58.1";
 
 	// Construct the script tag

src/js/components/GridItem.js

@@ -110,7 +110,10 @@ const GridItem = ({
     to = item.link;
   } else {
     to = `/${item.type}/${encodeUri(item.uri)}`;
-    if (item.name && item.type !== 'artist') to += `/${item.name}`;
+    if (item.name && item.type !== 'artist') {
+      // Strip out "%"; this causes conflicts with our uri decoder
+      to += `/${item.name.replace('%','')}`;
+    }
   }
 
   return (

src/js/components/Hotkeys.js

@@ -132,7 +132,7 @@ const Hotkeys = () => {
       dispatch(mopidyActions.setTimePosition(new_position));
       dispatch(uiActions.createNotification({ content: 'fast_rewind', type: 'shortcut' }));
     },
-  }));
+  }), {}, [play_time_position]);
 
   useHotkeys('f', (e) => prepare({
     e,
@@ -141,7 +141,7 @@ const Hotkeys = () => {
       dispatch(mopidyActions.setTimePosition(play_time_position + 30000));
       dispatch(uiActions.createNotification({ content: 'fast_forward', type: 'shortcut' }));
     },
-  }));
+  }), {}, [play_time_position]);
 
   useHotkeys(',', (e) => prepare({
     e,

src/js/components/Track.js

@@ -11,7 +11,7 @@ import {
   isTouchDevice,
   uriType,
 } from '../util/helpers';
-import { I18n } from '../locale';
+import { I18n, i18n } from '../locale';
 
 const MiddleColumn = ({
   track_context,
@@ -333,6 +333,7 @@ const Track = ({
   if (item.type !== undefined) className += ` list__item--${item.type}`;
   if (item.playing) className += ' list__item--playing';
   if (item.loading) className += ' list__item--loading';
+  if (item.is_playable === false) className += ' list__item--disabled';
   if (hover) className += ' list__item--hover';
   if (track_middle_column) className += ' list__item--has-middle-column';
   if (track_details.length > 0) className += ' list__item--has-details';
@@ -365,7 +366,8 @@ const Track = ({
         {track_middle_column}
         <div className="list__item__column list__item__column--right">
           {drag_zone}
-          {item.is_explicit && <span className="flag flag--dark">EXPLICIT</span>}
+          {item.is_explicit && <span className="flag flag--dark">{i18n('track.explicit').toUpperCase()}</span>}
+          {item.is_playable === false && <span className="flag flag--dark">{i18n('track.unplayable').toUpperCase()}</span>}
           {(track_context === 'album' || track_context === 'artist') && item.track_number && (
             <span className="mid_grey-text list__item__column__item list__item__column__item--track-number">
               <span>

src/js/components/TrackList.js

@@ -44,7 +44,7 @@ const TrackList = ({
       window.removeEventListener('touchmove', onTouchMove, false);
       window.removeEventListener('touchend', onTouchEnd, false);
     }
-  }, []);
+  }, [selected_tracks]);
 
   const onKeyDown = (e) => {
     const {

src/js/locale/en.yaml

@@ -340,6 +340,7 @@ track:
   title_window: '%{name} by %{artists} (track)'
   lyrics_origin: 'Origin: '
   explicit: Explicit
+  unplayable: Unplayable
   disc_number: 'Disc %{number}'
   track_number: 'Track %{number}'
   unknown_album: Unknown album

src/js/services/genius/actions.js

@@ -237,13 +237,19 @@ export function findTrackLyrics(uri) {
       .then(
         (response) => {
           if (response.hits && response.hits.length > 0) {
+            const standardized_track_artist_name = track.artists[0].name.toLowerCase();
             const lyrics_results = [];
             for (let i = 0; i < response.hits.length; i++) {
-              lyrics_results.push({
-                title: response.hits[i].result.full_title,
-                url: response.hits[i].result.url,
-                path: response.hits[i].result.path,
-              });
+              const result = response.hits[i].result;
+              const result_artist_name = result.primary_artist ? result.primary_artist.name : null;
+              if (result_artist_name &&
+                  result_artist_name.toLowerCase() === standardized_track_artist_name) {
+                lyrics_results.push({
+                  title: result.full_title,
+                  url: result.url,
+                  path: result.path,
+                });
+              }
             }
             dispatch(coreActions.itemLoaded({
               uri: track.uri,

src/js/services/mopidy/middleware.js

@@ -818,7 +818,14 @@ const MopidyMiddleware = (function () {
         if (playlist && playlist.tracks) {
           store.dispatch(
             mopidyActions.playURIs(
-              arrayOf('uri', sortItems(playlist.tracks, sortField, sortReverse)),
+              arrayOf(
+                'uri',
+                sortItems(
+                  playlist.tracks.filter((t) => t?.is_playable !== false),
+                  sortField,
+                  sortReverse,
+                ),
+              ),
               action.uri,
               action.shuffle,
             ),

src/js/services/spotify/actions.js

@@ -419,6 +419,9 @@ export function getFeaturedPlaylists(forceRefetch = false) {
 
 export function getCategories() {
   return (dispatch, getState) => {
+    const loaderId = generateGuid();
+    dispatch(uiActions.startLoading(loaderId, 'spotify_categories'));
+
     let endpoint = 'browse/categories';
     endpoint += '?limit=50';
     endpoint += `&country=${getState().spotify.country}`;
@@ -427,12 +430,31 @@ export function getCategories() {
     request({ dispatch, getState, endpoint })
       .then(
         (response) => {
-          dispatch({
-            type: 'SPOTIFY_CATEGORIES_LOADED',
-            categories: formatCategories(response.categories.items),
+          let results = formatCategories(response.categories.items);
+
+          const fetchResults = (resultsEndpoint) => request({
+            dispatch,
+            getState,
+            endpoint: resultsEndpoint,
+          }).then((response) => {
+            results = [
+              ...results,
+              ...formatCategories(response.categories.items),
+            ];
+            if (response.categories.next) {
+              fetchResults(response.categories.next);
+            } else {
+              dispatch({
+                type: 'SPOTIFY_CATEGORIES_LOADED',
+                categories: results,
+              });
+              dispatch(uiActions.stopLoading(loaderId));
+            }
           });
+          fetchResults(endpoint);
         },
         (error) => {
+          dispatch(uiActions.stopLoading(loaderId));
           dispatch(coreActions.handleException(
             'Could not load categories',
             error,
@@ -1288,7 +1310,10 @@ export function getPlaylistTracks(uri, { forceRefetch, callbackAction } = {}) {
       dispatch, getState, endpoint, uri,
     })
       .then((response) => {
-        tracks = [...tracks, ...formatTracks(response.items)];
+        tracks = [
+          ...tracks,
+          ...formatTracks(response.items.filter((i) => i.track)), // Omit falsy tracks, #748
+        ];
         if (response.next) {
           fetchTracks(`${response.next}${forceRefetch ? `&refetch=${Date.now()}` : ''}`);
         } else {

src/js/util/format.js

@@ -592,6 +592,7 @@ const formatTrack = function (data) {
     'loading',
     'uri',
     'in_library',
+    'is_playable',
     'tlid',
     'provider',
     'name',

src/js/views/discover/DiscoverCategories.js

@@ -1,72 +1,95 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import Header from '../../components/Header';
 import Icon from '../../components/Icon';
+import Button from '../../components/Button';
+import FilterField from '../../components/Fields/FilterField';
 import { Grid } from '../../components/Grid';
 import Loader from '../../components/Loader';
 import * as uiActions from '../../services/ui/actions';
 import * as spotifyActions from '../../services/spotify/actions';
-import {
-  encodeUri,
-} from '../../util/format';
+import { encodeUri } from '../../util/format';
 import { i18n, I18n } from '../../locale';
 import { indexToArray } from '../../util/arrays';
 import { makeLoadingSelector } from '../../util/selectors';
+import { applyFilter } from '../../util/arrays';
 
-class DiscoverCategories extends React.Component {
-  componentDidMount() {
-    const {
-      categories,
-      spotifyActions: {
-        getCategories,
-      },
-      uiActions: {
-        setWindowTitle,
-      },
-    } = this.props;
+const SORT_KEY = 'discover_categories';
 
+const DiscoverCategories = ({
+  loading,
+  categories: categoriesProp,
+  spotifyActions: {
+    getCategories,
+  },
+}) => {
+  const {
+    setWindowTitle,
+    hideContextMenu,
+  } = uiActions;
+  const [filter, setFilter] = useState('');
+  let categories = categoriesProp;
+
+  useEffect(() => {
     // Check for an empty category index, or where we've only got one loaded
     // This would be the case if you've refreshed from within a category and only loaded
     // the single record.
     if (!categories || Object.keys(categories).length <= 1) {
       getCategories();
     }
     setWindowTitle(i18n('discover.categories.title'));
+  }, []);
+
+  const refresh = () => {
+    hideContextMenu();
+    getCategories();
   }
 
-  render = () => {
-    const {
-      loading,
-      categories,
-      uiActions,
-    } = this.props;
+  if (filter && filter !== '') categories = applyFilter('name', filter, categories);
 
-    if (loading) {
-      return <Loader body loading />;
-    }
+  const options = (
+    <>
+      <FilterField
+        initialValue={filter}
+        handleChange={setFilter}
+        onSubmit={() => hideContextMenu()}
+      />
+      <Button
+        noHover
+        onClick={refresh}
+        tracking={{ category: 'DiscoverCategory', action: 'Refresh' }}
+      >
+        <Icon name="refresh" />
+        <I18n path="actions.refresh" />
+      </Button>
+    </>
+  );
 
-    return (
-      <div className="view discover-categories-view">
-        <Header uiActions={uiActions}>
-          <Icon name="mood" type="material" />
-          <I18n path="discover.categories.title" />
-        </Header>
-        <section className="content-wrapper grid-wrapper">
+  return (
+    <div className="view discover-categories-view">
+      <Header uiActions={uiActions} options={options}>
+        <Icon name="mood" type="material" />
+        <I18n path="discover.categories.title" />
+      </Header>
+      <section className="content-wrapper grid-wrapper">
+        {loading ? (
+          <Loader body loading />
+        ) : (
           <Grid
             className="grid--tiles"
             items={categories}
             getLink={(item) => `/discover/categories/${encodeUri(item.uri)}`}
             sourceIcon={false}
           />
-        </section>
-      </div>
-    );
-  }
+        )}
+      </section>
+    </div>
+  );
 }
 
 const mapStateToProps = (state) => {
-  const loadingSelector = makeLoadingSelector(['(.*)categories(.*)']);
+  const loadingSelector = makeLoadingSelector(['spotify_categories']);
 
   return {
     loading: loadingSelector(state),