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

Artists and albums; Not lazy-loading yet

Browse Source
This commit is contained in:
James Barnsley
2017-01-14 10:03:45 +13:00
parent 74b7bf8675
commit 539748b112
6 changed files with 140 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/services/localstorage/middleware.js
View File

@ -12,7 +12,7 @@ const localstorageMiddleware = (function(){
// append our state to a global variable. This gives us access to debug the store at any point
window._store = store
console.log(action)
//console.log(action)
switch( action.type ){

101
src/js/services/spotify/actions.js
View File

@ -586,9 +586,6 @@ export function getDiscover(){
export function getArtist( uri ){
return (dispatch, getState) => {
// flush out the previous store value
dispatch({ type: 'SPOTIFY_ARTIST_LOADED', data: false });
var artist = {};
// get both the artist and the top tracks
@ -606,18 +603,30 @@ export function getArtist( uri ){
sendRequest( dispatch, getState, 'artists/'+ helpers.getFromUri('artistid', uri) +'/related-artists' )
.then( response => {
Object.assign(artist, { related_artists: response.artists });
for (var i = 0; i < response.artists.length; i++){
dispatch({
type: 'ARTIST_LOADED',
artist: response.artists[i]
});
}
Object.assign(artist, { related_artists: helpers.asURIs(response.artists) });
}),
sendRequest( dispatch, getState, 'artists/'+ helpers.getFromUri('artistid', uri) +'/albums' )
.then( response => {
Object.assign(artist, { albums: response.items, albums_more: response.next });
for (var i = 0; i < response.items.length; i++){
dispatch({
type: 'ALBUM_LOADED',
album: response.items[i]
});
}
Object.assign(artist, { albums: helpers.asURIs(response.items), albums_more: response.next });
})
).then( () => {
dispatch({
type: 'SPOTIFY_ARTIST_LOADED',
data: artist
type: 'ARTIST_LOADED',
artist: artist
});
});
}
@ -626,9 +635,6 @@ export function getArtist( uri ){
export function getArtists( uris ){
return (dispatch, getState) => {
// flush out the previous store value
dispatch({ type: 'SPOTIFY_ARTISTS_LOADED', data: false });
// now get all the artists for this album (full objects)
var ids = '';
for( var i = 0; i < uris.length; i++ ){
@ -638,10 +644,21 @@ export function getArtists( uris ){
sendRequest( dispatch, getState, 'artists/?ids='+ids )
.then( response => {
dispatch({
type: 'SPOTIFY_ARTISTS_LOADED',
data: response
});
for (var i = i; i < response.length; i++){
var artist = response
for (var i = 0; i < artist.albums.length; i++){
dispatch({
type: 'ALBUM_LOADED',
album: artist.albums[i]
});
}
artist.albums = helpers.asURIs(artist.albums)
artist.albums_more = artist.albums.next
dispatch({
type: 'ARTIST_LOADED',
artist: artist
});
}
});
}
}
@ -654,9 +671,25 @@ export function getLibraryArtists(){
sendRequest( dispatch, getState, 'me/following?type=artist&limit=50' )
.then( response => {
for (var i = 0; i < response.length; i++){
var artist = response[i]
for (var i = 0; i < artist.albums.length; i++){
dispatch({
type: 'ALBUM_LOADED',
album: artist.albums[i]
});
}
artist.albums = helpers.asURIs(artist.albums)
artist.albums_more = artist.albums.next
dispatch({
type: 'ARTIST_LOADED',
artist: artist
});
}
dispatch({
type: 'SPOTIFY_LIBRARY_ARTISTS_LOADED',
data: response
type: 'LIBRARY_ARTISTS_LOADED',
uris: helpers.asURIs(response)
});
});
}
@ -714,30 +747,42 @@ export function getUser( uri ){
export function getAlbum( uri ){
return (dispatch, getState) => {
// flush out the previous store value
dispatch({ type: 'SPOTIFY_ALBUM_LOADED', data: false });
// get the album
sendRequest( dispatch, getState, 'albums/'+ helpers.getFromUri('albumid', uri) )
.then( response => {
var album = response
var album = Object.assign(
{},
response,
{
artists: helpers.asURIs(response.artists),
tracks: response.tracks.items,
tracks_more: response.tracks.next,
tracks_total: response.tracks.total
}
)
dispatch({
type: 'ALBUM_LOADED',
album: album
});
// now get all the artists for this album (full objects)
// we do this to get the artist artwork
var artist_ids = [];
for( var i = 0; i < album.artists.length; i++ ){
artist_ids.push( helpers.getFromUri( 'artistid', album.artists[i].uri ) )
for( var i = 0; i < response.artists.length; i++ ){
artist_ids.push( helpers.getFromUri( 'artistid', response.artists[i].uri ) )
}
// get all album artists
// get all album artists as full objects
sendRequest( dispatch, getState, 'artists/?ids='+artist_ids )
.then( response => {
Object.assign(album, { artists: response.artists })
dispatch({
type: 'SPOTIFY_ALBUM_LOADED',
data: album
});
for (var i = 0; i < response.artists.length; i++){
dispatch({
type: 'ARTIST_LOADED',
artist: response.artists[i]
});
}
});
})

4
src/js/services/spotify/reducer.js
View File

@ -60,7 +60,7 @@ export default function reducer(spotify = {}, action){
case 'SPOTIFY_ME_LOADED':
return Object.assign({}, spotify, { me: action.data })
/*
case 'SPOTIFY_ARTISTS_LOADED':
if( !action.data ) return Object.assign({}, spotify)
return Object.assign({}, spotify, {
@ -79,7 +79,7 @@ export default function reducer(spotify = {}, action){
return Object.assign({}, spotify, {
library_artists: [ ...spotify.library_artists, ...action.data.artists.items ],
library_artists_more: action.data.artists.next
})
})*/
case 'SPOTIFY_LIBRARY_ALBUMS_LOADED':
if( !action.data ) return Object.assign({}, spotify)

26
src/js/services/ui/reducer.js
View File

@ -129,6 +129,18 @@ export default function reducer(ui = {}, action){
* Albums
**/
case 'ALBUM_LOADED':
var albums = Object.assign([], ui.albums)
var album = Object.assign({}, action.album)
// if we already have one in our list, fetch it and update it
if (albums[action.album.uri]){
album = Object.assign({}, albums[action.album.uri], action.album)
}
albums[action.album.uri] = album
return Object.assign({}, ui, { albums: albums });
case 'MOPIDY_ALBUM_LOADED':
if( !action.data ) return Object.assign({}, ui, { album: false })
return Object.assign({}, ui, { album: action.data });
@ -166,9 +178,17 @@ export default function reducer(ui = {}, action){
* Artists
**/
case 'MOPIDY_ARTIST_LOADED':
if( !action.data ) return Object.assign({}, ui, { artist: false })
return Object.assign({}, ui, { artist: action.data })
case 'ARTIST_LOADED':
var artists = Object.assign([], ui.artists)
var artist = Object.assign({}, action.artist)
// if we already have one in our list, fetch it and update it
if (artists[action.artist.uri]){
artist = Object.assign({}, artists[action.artist.uri], action.artist)
}
artists[action.artist.uri] = artist
return Object.assign({}, ui, { artists: artists });
case 'LASTFM_ARTIST_LOADED':
if( !action.data.image ) return ui

18
src/js/views/Album.js
View File

@ -68,12 +68,22 @@ class Album extends React.Component{
render(){
if( !this.props.album ) return null
var artists = []
if (this.props.album.artists){
for (var i = 0; i < this.props.album.artists.length; i++){
var uri = this.props.album.artists[i]
if (this.props.artists.hasOwnProperty(uri)){
artists.push(this.props.artists[uri])
}
}
}
return (
<div className="view album-view">
<SidebarToggleButton />
<div className="intro">
<Thumbnail size="large" images={ this.props.album.images } />
<ArtistGrid artists={ this.props.album.artists } />
<ArtistGrid artists={artists} />
<div className="actions">
<button className="large primary" onClick={ e => this.play() }>Play</button>
@ -93,7 +103,7 @@ class Album extends React.Component{
<div className="title">
<h1>{ this.props.album.name }</h1>
<h3><ArtistSentence artists={ this.props.album.artists } /></h3>
<h3><ArtistSentence artists={artists} /></h3>
</div>
<section className="list-wrapper">
@ -116,7 +126,9 @@ class Album extends React.Component{
const mapStateToProps = (state, ownProps) => {
return {
album: state.ui.album,
artists: state.ui.artists,
album: state.ui.albums[ownProps.params.uri],
albums: state.ui.albums,
spotify_authorized: state.spotify.authorized,
mopidy_connected: state.mopidy.connected
};

30
src/js/views/Artist.js
View File

@ -95,12 +95,32 @@ class Artist extends React.Component{
renderBody(){
var related_artists = []
if (this.props.artist.related_artists){
for (var i = 0; i < this.props.artist.related_artists.length; i++){
var uri = this.props.artist.related_artists[i]
if (this.props.artists.hasOwnProperty(uri)){
related_artists.push(this.props.artists[uri])
}
}
}
var albums = []
if (this.props.artist.albums){
for (var i = 0; i < this.props.artist.albums.length; i++){
var uri = this.props.artist.albums[i]
if (this.props.albums.hasOwnProperty(uri)){
albums.push(this.props.albums[uri])
}
}
}
if( this.state.sub_view == 'related_artists' ){
return (
<div className="body related-artists">
<h4 className="left-padding">Related artists</h4>
<section className="grid-wrapper no-top-padding">
{ this.props.artist.related_artists ? <ArtistGrid artists={ this.props.artist.related_artists } /> : null }
<ArtistGrid artists={related_artists} />
</section>
</div>
)
@ -129,14 +149,14 @@ class Artist extends React.Component{
<div className="col w25 related-artists">
<h4>Related artists</h4>
{ this.props.artist.related_artists ? <ArtistList artists={ this.props.artist.related_artists.slice(0,6) } /> : null }
<ArtistList artists={related_artists.slice(0,6)} />
</div>
<div className="cf"></div>
<h4 className="left-padding">Albums</h4>
<section className="grid-wrapper no-top-padding">
{ this.props.artist.albums ? <AlbumGrid albums={ this.props.artist.albums } /> : null }
<AlbumGrid albums={albums} />
<LazyLoadListener loadMore={ () => this.loadMore() }/>
</section>
</div>
@ -203,7 +223,9 @@ class Artist extends React.Component{
const mapStateToProps = (state, ownProps) => {
return {
artist: state.ui.artist,
artists: state.ui.artists,
artist: state.ui.artists[ownProps.params.uri],
albums: state.ui.albums,
spotify_authorized: state.spotify.authorized,
mopidy_connected: state.mopidy.connected
}