Using Mopidy as gateway for non-spotify image requests, fixes #496

2020-03-06 11:01:33 +13:00
parent 9f378288c0
commit 242b29e216
7 changed files with 27174 additions and 19166 deletions
--- a/src/js/components/AlbumGrid.js
+++ b/src/js/components/AlbumGrid.js
@ -10,48 +10,51 @@ import * as lastfmActions from '../services/lastfm/actions';
 import GridItem from './GridItem';

 class AlbumGrid extends React.Component {
-  handleContextMenu(e, item) {
+  handleContextMenu = (e, item) => {
+    const { uiActions: { showContextMenu } } = this.props;
    e.preventDefault();
-    const data = {
+    showContextMenu({
      e,
      context: 'album',
      uris: [item.uri],
      items: [item],
      tracklist_uri: item.uri,
-    };
-    this.props.uiActions.showContextMenu(data);
+    });
  }

-  render() {
-    if (this.props.albums) {
-      let className = 'grid grid--albums';
-      if (this.props.className) className += ` ${this.props.className}`;
-      if (this.props.single_row) className += ' grid--single-row';
-      if (this.props.mini) className += ' grid--mini';
+  render = () => {
+    const {
+      albums,
+      className,
+      mini,
+      lastfmActions,
+      mopidyActions,
+      show_source_icon,
+    } = this.props;

-      return (
-        <div className={className}>
-          {
-						this.props.albums.map((album) => (
-  <GridItem
-    key={album.uri}
-    type="album"
-    item={album}
-    lastfmActions={this.props.lastfmActions}
-    mopidyActions={this.props.mopidyActions}
-    show_source_icon={this.props.show_source_icon}
-    onContextMenu={(e) => this.handleContextMenu(e, album)}
-  />
-						))
-					}
-        </div>
-      );
-    }
-    return null;
+    if (!albums) return null;
+
+    return (
+      <div className={`grid grid--albums ${className} ${mini ? ' grid--mini' : ''}`}>
+        {
+          albums.map((album) => (
+            <GridItem
+              key={album.uri}
+              type="album"
+              item={album}
+              lastfmActions={lastfmActions}
+              mopidyActions={mopidyActions}
+              show_source_icon={show_source_icon}
+              onContextMenu={(e) => this.handleContextMenu(e, album)}
+            />
+          ))
+        }
+      </div>
+    );
  }
 }

-const mapStateToProps = (state, ownProps) => ({
+const mapStateToProps = (state) => ({
  artists: state.core.artists,
 });

--- a/src/js/components/GridItem.js
+++ b/src/js/components/GridItem.js
@ -4,7 +4,6 @@ import {
  uriType,
  scrollTo,
  sourceIcon,
-  uriSource,
 } from '../util/helpers';
 import Link from './Link';
 import Icon from './Icon';
@ -14,7 +13,6 @@ import LinksSentence from './LinksSentence';
 export default class GridItem extends React.Component {
  componentDidMount() {
    const {
-      lastfmActions,
      mopidyActions,
      spotifyActions,
      spotifyAvailable,
@ -52,71 +50,57 @@ export default class GridItem extends React.Component {
    }
  }

-  renderSecondary = (item) => {
-    const output = '';
-    const link_to = null;
-
-    switch (uriType(item.uri)) {
+  renderSecondary = ({
+    uri,
+    tracks_total,
+    followers,
+    albums_uris,
+    artists,
+  }) => {
+    switch (uriType(uri)) {
      case 'playlist':
-        if (item.tracks_total) {
-          return (
-            <span className="grid__item__secondary__content">
-              {item.tracks_total}
-              {' '}
-tracks
-            </span>
-          );
-        }
-        break;
+        return tracks_total ? (
+          <span className="grid__item__secondary__content">
+            {`${tracks_total} tracks`}
+          </span>
+        ) : null;

      case 'artist':
        return (
          <span className="grid__item__secondary__content">
-            {item.followers !== undefined ? `${item.followers.toLocaleString()} followers ` : null}
-            {item.albums_uris !== undefined ? `${item.albums_uris.length} albums` : null}
+            {followers && `${followers.toLocaleString()} followers `}
+            {albums_uris && `${albums_uris.length} albums`}
          </span>
        );
-        break;

      case 'album':
        return (
          <span className="grid__item__secondary__content">
-            {item.artists !== undefined ? <LinksSentence nolinks items={item.artists} /> : null}
+            {artists && <LinksSentence nolinks items={artists} />}
          </span>
        );
-        break;

      default:
        return (
          <span className="grid__item__secondary__content">
-            { item.artists !== undefined ? <LinksSentence nolinks items={item.artists} /> : null }
-            { item.followers !== undefined ? `${item.followers.toLocaleString()} followers` : null }
+            {artists && <LinksSentence nolinks items={item.artists} /> }
+            {followers && `${followers.toLocaleString()} followers` }
          </span>
        );
    }
-
-    return output;
  }

  render = () => {
-    const { item, link: customLink, type, show_source_icon } = this.props;
+    const {
+      item: { album },
+      link: customLink,
+      type,
+      show_source_icon,
+    } = this.props;
+    let { item } = this.props;
+
    if (!item) return null;
-
-    const album = {
-      ...item.album,
-      added_at: item.album && item.album.added_at,
-    };
-
-    let images = null;
-    if (album.images) {
-      if (Array.isArray(album.images)) {
-        images = album.images[0];
-      } else {
-        images = album.images;
-      }
-    } else if (item.icons) {
-      images = item.icons;
-    }
+    if (album) item = { ...item, ...album };

    const link = customLink || `/${type}/${encodeURIComponent(item.uri)}`;

@ -127,7 +111,7 @@ tracks
        onClick={scrollTo}
        onContextMenu={this.onContextMenu}
      >
-        <Thumbnail glow size="medium" className="grid__item__thumbnail" images={images} />
+        <Thumbnail glow size="medium" className="grid__item__thumbnail" images={item.images || item.icons} />
        <div className="grid__item__name">
          {item.name ? item.name : <span className="opaque-text">{item.uri}</span>}
        </div>
--- a/src/js/services/lastfm/actions.js
+++ b/src/js/services/lastfm/actions.js
@ -1,5 +1,5 @@

-import { formatImages } from '../../util/format';
+import { formatImages, collate } from '../../util/format';
 import { generateGuid } from '../../util/helpers';

 const coreActions = require('../core/actions');
@ -302,10 +302,13 @@ export function getImages(context, uri) {

          if (record.mbid) {
            var params = `method=album.getInfo&mbid=${record.mbid}`;
-          } else if (record.artists && record.artists.length > 0 && record.album) {
-            var artist = encodeURIComponent(record.artists[0].name);
-            var album = encodeURIComponent(record.album.name);
-            var params = `method=album.getInfo&album=${album}&artist=${artist}`;
+          } else {
+            record = collate(record, { artists: getState().core.artists });
+            if (record.artists && record.artists.length > 0 && record.album) {
+              var artist = encodeURIComponent(record.artists[0].name);
+              var album = encodeURIComponent(record.album.name);
+              var params = `method=album.getInfo&album=${album}&artist=${artist}`;
+            }
          }

          if (params) {
@ -325,10 +328,13 @@ export function getImages(context, uri) {

          if (record.mbid) {
            var params = `method=album.getInfo&mbid=${record.mbid}`;
-          } else if (record.artists && record.artists.length > 0) {
-            var artist = encodeURIComponent(record.artists[0].name);
-            var album = encodeURIComponent(record.name);
-            var params = `method=album.getInfo&album=${album}&artist=${artist}`;
+          } else {
+            record = collate(record, { artists: getState().core.artists });
+            if (record.artists && record.artists.length > 0) {
+              var artist = encodeURIComponent(record.artists[0].name);
+              var album = encodeURIComponent(record.name);
+              var params = `method=album.getInfo&album=${album}&artist=${artist}`;
+            }
          }

          if (params) {
@ -343,6 +349,9 @@ export function getImages(context, uri) {
              );
          }
          break;
+
+        default:
+          break;
      }
    }
  };
--- a/src/js/services/mopidy/middleware.js
+++ b/src/js/services/mopidy/middleware.js
@ -2327,9 +2327,8 @@ const MopidyMiddleware = (function () {
              for (const uri in response) {
                if (response.hasOwnProperty(uri)) {
                  let images = response[uri];
-                  images = formatImages(digestMopidyImages(store.getState().mopidy, images));
-
-                  if (images) {
+                  if (images.length) {
+                    images = formatImages(digestMopidyImages(store.getState().mopidy, images));
                    records.push({
                      uri,
                      images,