144 lines
3.7 KiB
JavaScript
Executable File
144 lines
3.7 KiB
JavaScript
Executable File
|
|
import React from 'react';
|
|
import {
|
|
uriType,
|
|
scrollTo,
|
|
sourceIcon,
|
|
uriSource,
|
|
} from '../util/helpers';
|
|
import Link from './Link';
|
|
import Icon from './Icon';
|
|
import Thumbnail from './Thumbnail';
|
|
import LinksSentence from './LinksSentence';
|
|
|
|
export default class GridItem extends React.Component {
|
|
componentDidMount() {
|
|
const {
|
|
lastfmActions,
|
|
mopidyActions,
|
|
spotifyActions,
|
|
spotifyAvailable,
|
|
item,
|
|
} = this.props;
|
|
|
|
if (!item || item.images) return;
|
|
|
|
switch (uriType(item.uri)) {
|
|
case 'artist':
|
|
if (spotifyActions && spotifyAvailable) {
|
|
spotifyActions.getArtistImages(item);
|
|
}
|
|
break;
|
|
|
|
case 'album':
|
|
// If Mopidy doesn't find any images, then it will pass on the call to LastFM
|
|
mopidyActions.getImages('albums', [item.uri]);
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
shouldComponentUpdate = (nextProps) => {
|
|
const { item } = this.props;
|
|
return nextProps.item !== item;
|
|
}
|
|
|
|
onContextMenu = (e) => {
|
|
const { onContextMenu } = this.props;
|
|
if (onContextMenu) {
|
|
onContextMenu(e);
|
|
}
|
|
}
|
|
|
|
renderSecondary = (item) => {
|
|
const output = '';
|
|
const link_to = null;
|
|
|
|
switch (uriType(item.uri)) {
|
|
case 'playlist':
|
|
if (item.tracks_total) {
|
|
return (
|
|
<span className="grid__item__secondary__content">
|
|
{item.tracks_total}
|
|
{' '}
|
|
tracks
|
|
</span>
|
|
);
|
|
}
|
|
break;
|
|
|
|
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}
|
|
</span>
|
|
);
|
|
break;
|
|
|
|
case 'album':
|
|
return (
|
|
<span className="grid__item__secondary__content">
|
|
{item.artists !== undefined ? <LinksSentence nolinks items={item.artists} /> : null}
|
|
</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 }
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return output;
|
|
}
|
|
|
|
render = () => {
|
|
const { item, link: customLink, type, show_source_icon } = 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;
|
|
}
|
|
|
|
const link = customLink || `/${type}/${encodeURIComponent(item.uri)}`;
|
|
|
|
return (
|
|
<Link
|
|
className={`grid__item grid__item--${type}`}
|
|
to={link}
|
|
onClick={scrollTo}
|
|
onContextMenu={this.onContextMenu}
|
|
>
|
|
<Thumbnail glow size="medium" className="grid__item__thumbnail" images={images} />
|
|
<div className="grid__item__name">
|
|
{item.name ? item.name : <span className="opaque-text">{item.uri}</span>}
|
|
</div>
|
|
<div className="grid__item__secondary">
|
|
{show_source_icon && (
|
|
<Icon name={sourceIcon(item.uri)} type="fontawesome" className="source" />
|
|
)}
|
|
{this.renderSecondary(item)}
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|
|
}
|