secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Loading artwork on render of GridItem, regardless of URI type; fixes #321

Browse Source
This commit is contained in:
James Barnsley
2018-08-24 15:42:47 +12:00
parent c734dd7fe5
commit 1cbe7ed3ad
8 changed files with 70 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
mopidy_iris/static/app.js
View File

@ -4460,11 +4460,10 @@ var Thumbnail = function (_React$Component) {
}
return images[size];
// No images
} else {
return __webpack_require__(285);
}
// No images
return null;
}
}, {
key: 'zoom',
@ -4488,7 +4487,7 @@ var Thumbnail = function (_React$Component) {
}
var zoom_icon = null;
if (this.props.canZoom) {
if (this.props.canZoom && image) {
zoom_icon = _react2.default.createElement(
_reactRouter.Link,
{ className: 'zoom', target: '_blank', rel: 'external', href: image },
@ -4499,7 +4498,7 @@ var Thumbnail = function (_React$Component) {
return _react2.default.createElement(
'div',
{ className: class_name },
_react2.default.createElement('div', { className: 'image loaded', style: { backgroundImage: 'url("' + image + '")' } }),
_react2.default.createElement('div', { className: 'image loaded', style: { backgroundImage: 'url("' + (image ? image : __webpack_require__(285)) + '")' } }),
zoom_icon
);
}
@ -16836,10 +16835,7 @@ function getTrack(uri) {
var merged_track = Object.assign({}, {
uri: track.uri
}, response.track, track);
dispatch({
type: 'TRACK_LOADED',
track: merged_track
});
dispatch(coreActions.trackLoaded(merged_track));
}
});
};
@ -16859,18 +16855,17 @@ function getArtist(uri, artist) {
}
sendRequest(dispatch, getState, params).then(function (response) {
if (response.artist) {
dispatch({
type: 'ARTIST_LOADED',
artist: {
uri: uri,
images: response.artist.image,
mbid: response.artist.mbid,
bio: response.artist.bio,
listeners: parseInt(response.artist.stats.listeners),
play_count: parseInt(response.artist.stats.playcount),
on_tour: response.artist.stats.ontour
}
});
var artist = {
uri: uri,
images: response.artist.image,
mbid: response.artist.mbid,
bio: response.artist.bio,
listeners: parseInt(response.artist.stats.listeners),
play_count: parseInt(response.artist.stats.playcount),
on_tour: response.artist.stats.ontour
};
dispatch(coreActions.artistLoaded(artist));
}
});
};
@ -16889,7 +16884,7 @@ function getAlbum(artist, album) {
}
sendRequest(dispatch, getState, params).then(function (response) {
if (response.album) {
dispatch(coreActions.albumsLoaded([response.album]));
dispatch(coreActions.albumLoaded(response.album));
}
});
};
@ -16916,8 +16911,8 @@ function getImages(context, uri) {
sendRequest(dispatch, getState, params).then(function (response) {
if (response.album) {
record = Object.assign({}, record, { images: response.album.image });
dispatch(coreActions.tracksLoaded([record]));
dispatch(coreActions.albumsLoaded([response.album]));
dispatch(coreActions.trackLoaded(record));
dispatch(coreActions.albumLoaded(response.album));
}
});
}
@ -16937,7 +16932,7 @@ function getImages(context, uri) {
sendRequest(dispatch, getState, params).then(function (response) {
if (response.album) {
record = Object.assign({}, record, { images: response.album.image });
dispatch(coreActions.albumsLoaded([record]));
dispatch(coreActions.albumLoaded(record));
}
});
}
@ -19523,6 +19518,13 @@ var ArtistGrid = function (_React$Component) {
}
_createClass(ArtistGrid, [{
key: 'itemMounted',
value: function itemMounted(item) {
if (!item.images) {
this.props.lastfmActions.getArtist(item.uri, item.name);
}
}
}, {
key: 'handleContextMenu',
value: function handleContextMenu(e, item) {
console.log(item);
@ -19557,12 +19559,12 @@ var ArtistGrid = function (_React$Component) {
onClick: function onClick(e) {
_reactRouter.hashHistory.push(global.baseURL + 'artist/' + encodeURIComponent(artist.uri));
},
onLoad: function onLoad() {
return _this2.handleLoad(artist.uri);
},
lastfmActions: _this2.props.lastfmActions,
onContextMenu: function onContextMenu(e) {
return _this2.handleContextMenu(e, artist);
},
onMount: function onMount() {
return _this2.itemMounted(artist);
}
});
})
@ -19683,12 +19685,11 @@ var GridItem = function (_React$Component) {
_createClass(GridItem, [{
key: 'componentDidMount',
value: function componentDidMount() {
if (this.props.item && !this.props.item.images) {
switch (this.props.item.type) {
case 'artist':
this.props.lastfmActions.getArtist(this.props.item.uri, this.props.item.name);
break;
}
// A mount callback allows us to run checks on render
// We use this for loading artwork, but only when it's displayed
if (this.props.onMount) {
this.props.onMount();
}
}
}, {
@ -20025,9 +20026,6 @@ var AlbumGrid = function (_React$Component) {
onClick: function onClick(e) {
_reactRouter.hashHistory.push(global.baseURL + 'album/' + encodeURIComponent(album.uri));
},
onLoad: function onLoad() {
return _this2.handleLoad(album.uri);
},
onContextMenu: function onContextMenu(e) {
return _this2.handleContextMenu(e, album);
}

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/index.html
View File

@ -98,7 +98,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1535056581";
var build = "1535070753";
var version = "3.24.0";
// Construct the script tag

1
src/js/components/AlbumGrid.js
View File

@ -42,7 +42,6 @@ class AlbumGrid extends React.Component{
item={album}
show_source_icon={this.props.show_source_icon}
onClick={e => {hashHistory.push(global.baseURL+'album/'+encodeURIComponent(album.uri))}}
onLoad={() => this.handleLoad(album.uri)}
onContextMenu={e => this.handleContextMenu(e,album)}
/>
)}

8
src/js/components/ArtistGrid.js
View File

@ -17,6 +17,12 @@ class ArtistGrid extends React.Component{
super(props);
}
itemMounted(item){
if (!item.images){
this.props.lastfmActions.getArtist(item.uri, item.name);
}
}
handleContextMenu(e,item){
console.log(item);
e.preventDefault();
@ -47,9 +53,9 @@ class ArtistGrid extends React.Component{
item={artist}
show_source_icon={this.props.show_source_icon}
onClick={e => {hashHistory.push(global.baseURL+'artist/'+encodeURIComponent(artist.uri))}}
onLoad={() => this.handleLoad(artist.uri)}
lastfmActions={this.props.lastfmActions}
onContextMenu={e => this.handleContextMenu(e,artist)}
onMount={() => this.itemMounted(artist)}
/>
)
}

11
src/js/components/GridItem.js
View File

@ -15,12 +15,11 @@ export default class GridItem extends React.Component{
}
componentDidMount(){
if (this.props.item && !this.props.item.images){
switch (this.props.item.type){
case 'artist':
this.props.lastfmActions.getArtist(this.props.item.uri, this.props.item.name);
break;
}
// A mount callback allows us to run checks on render
// We use this for loading artwork, but only when it's displayed
if (this.props.onMount){
this.props.onMount();
}
}

9
src/js/components/Thumbnail.js
View File

@ -59,11 +59,10 @@ class Thumbnail extends React.Component{
}
return images[size];
}
// No images
} else {
return require('../../assets/no-image.svg');
}
return null;
}
zoom(e, image){
@ -85,13 +84,13 @@ class Thumbnail extends React.Component{
}
var zoom_icon = null;
if (this.props.canZoom){
if (this.props.canZoom && image){
zoom_icon = <Link className="zoom" target="_blank" rel="external" href={image}><Icon name="search" /></Link>;
}
return (
<div className={class_name}>
<div className="image loaded" style={{backgroundImage: 'url("'+image+'")'}}></div>
<div className="image loaded" style={{backgroundImage: 'url("'+(image ? image : require('../../assets/no-image.svg'))+'")'}}></div>
{zoom_icon}
</div>
);

36
src/js/services/lastfm/actions.js
View File

@ -214,10 +214,7 @@ export function getTrack(uri){
response.track,
track
);
dispatch({
type: 'TRACK_LOADED',
track: merged_track
});
dispatch(coreActions.trackLoaded(merged_track));
}
}
)
@ -238,18 +235,17 @@ export function getArtist(uri, artist, mbid = false){
.then(
response => {
if (response.artist){
dispatch({
type: 'ARTIST_LOADED',
artist: {
uri: uri,
images: response.artist.image,
mbid: response.artist.mbid,
bio: response.artist.bio,
listeners: parseInt(response.artist.stats.listeners),
play_count: parseInt(response.artist.stats.playcount),
on_tour: response.artist.stats.ontour
}
});
var artist = {
uri: uri,
images: response.artist.image,
mbid: response.artist.mbid,
bio: response.artist.bio,
listeners: parseInt(response.artist.stats.listeners),
play_count: parseInt(response.artist.stats.playcount),
on_tour: response.artist.stats.ontour
};
dispatch(coreActions.artistLoaded(artist));
}
}
)
@ -269,7 +265,7 @@ export function getAlbum(artist, album, mbid = false){
.then(
response => {
if (response.album){
dispatch(coreActions.albumsLoaded([response.album]));
dispatch(coreActions.albumLoaded(response.album));
}
}
);
@ -300,8 +296,8 @@ export function getImages(context, uri){
response => {
if (response.album){
record = Object.assign({}, record, {images: response.album.image});
dispatch(coreActions.tracksLoaded([record]));
dispatch(coreActions.albumsLoaded([response.album]));
dispatch(coreActions.trackLoaded(record));
dispatch(coreActions.albumLoaded(response.album));
}
}
);
@ -324,7 +320,7 @@ export function getImages(context, uri){
response => {
if (response.album){
record = Object.assign({}, record, {images: response.album.image});
dispatch(coreActions.albumsLoaded([record]));
dispatch(coreActions.albumLoaded(record));
}
}
);