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

mopidy_iris/static/index.html

@@ -100,7 +100,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1583394938";
+	var build = "1583436521";
 	var version = "3.45.1";
 
 	// Construct the script tag

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,
 });
 

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>

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;
       }
     }
   };

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,