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

Preliminary lastfm

Browse Source
This commit is contained in:
James Barnsley
2016-11-07 21:21:15 +13:00
parent 757f11a6dd
commit 0a13eeaec1
19 changed files with 680 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/js/bootstrap.js vendored
View File

@ -4,6 +4,7 @@ import { createStore, applyMiddleware, combineReducers } from 'redux'
import ui from './services/ui/reducer'
import pusher from './services/pusher/reducer'
import mopidy from './services/mopidy/reducer'
import lastfm from './services/lastfm/reducer'
import spotify from './services/spotify/reducer'
import thunk from 'redux-thunk'
@ -16,6 +17,7 @@ let reducers = combineReducers({
ui,
pusher,
mopidy,
lastfm,
spotify
});
@ -38,6 +40,11 @@ var initialState = {
current: '0.0.0'
}
},
lastfm: {
album: {},
artist: {},
track: {}
},
spotify: {
connected: false,
country: 'NZ',

7
src/js/components/LazyLoadListener.js
View File

@ -1,5 +1,6 @@
import React, { PropTypes } from 'react'
import FontAwesome from 'react-fontawesome'
export default class LazyLoadListener extends React.Component{
@ -29,10 +30,6 @@ export default class LazyLoadListener extends React.Component{
}
render(){
if( this.loading ){
return <div className='lazy-loader loading'><div className="content">LOADING</div></div>
}else{
return <div className='lazy-loader'></div>
}
return <div className='lazy-loader'></div>
}
}

44
src/js/helpers.js
View File

@ -25,6 +25,24 @@ export let sizedImages = function( images ){
sizes.small = images[i].url;
}
// lastfm-styled images
}else if( typeof(images[i].size) !== 'undefined' ){
switch( images[i].size ){
case 'mega':
case 'extralarge':
sizes.huge = images[i]['#text']
break
case 'large':
sizes.large = images[i]['#text']
break
case 'medium':
sizes.medium = images[i]['#text']
break
case 'small':
sizes.small = images[i]['#text']
break
}
// Mopidy-Images styled images
}else if( typeof(images[i]) == 'string' ){
sizes.small = images[i]
@ -34,7 +52,7 @@ export let sizedImages = function( images ){
if( !sizes.medium ) sizes.medium = sizes.small;
if( !sizes.large ) sizes.large = sizes.medium;
if( !sizes.huge ) sizes.huge = sizes.large;
return sizes;
}
@ -89,22 +107,20 @@ export let sourceIcon = function( uri ){
* @param uri = string
**/
export let getFromUri = function( element, uri ){
var exploded = uri.split(':');
var exploded = uri.split(':');
if( element == 'mbid'){
var index = exploded.indexOf('mbid')
return exploded[index+1]
}
if( exploded[0] == 'spotify' ){
if( element == 'userid' && exploded[1] == 'user' )
return exploded[2];
if( element == 'playlistid' && exploded[3] == 'playlist' )
return exploded[4];
if( element == 'artistid' && exploded[1] == 'artist' )
return exploded[2];
if( element == 'albumid' && exploded[1] == 'album' )
return exploded[2];
if( element == 'trackid' && exploded[1] == 'track' )
return exploded[2];
if( element == 'userid' && exploded[1] == 'user' ) return exploded[2];
if( element == 'playlistid' && exploded[3] == 'playlist' ) return exploded[4];
if( element == 'artistid' && exploded[1] == 'artist' ) return exploded[2];
if( element == 'albumid' && exploded[1] == 'album' ) return exploded[2];
if( element == 'trackid' && exploded[1] == 'track' ) return exploded[2];
return null;
}
return null

100
src/js/services/lastfm/actions.js Executable file
View File

@ -0,0 +1,100 @@
var helpers = require('../../helpers.js')
/**
* Send an ajax request to the Spotify API
*
* @param dispatch obj
* @param getState obj
* @param endpoint params = the url params to send
**/
const sendRequest = ( dispatch, getState, params ) => {
return new Promise( (resolve, reject) => {
var url = '//ws.audioscrobbler.com/2.0/?format=json&api_key=4320a3ef51c9b3d69de552ac083c55e3&'+params
$.ajax({
method: 'GET',
cache: true,
url: url
}).then(
response => resolve(response),
(xhr, status, error) => {
console.error( params+' failed', xhr.responseText)
reject(error)
}
)
})
}
export function getArtist( artist, mbid = false ){
return (dispatch, getState) => {
dispatch({ type: 'LASTFM_ARTIST_LOADED', data: false });
if( mbid ){
var params = 'method=artist.getInfo&mbid='+mbid
}else{
artist = encodeURIComponent( artist );
var params = 'method=artist.getInfo&artist='+artist
}
sendRequest(dispatch, getState, params)
.then(
response => {
if( response.artist ){
dispatch({
type: 'LASTFM_ARTIST_LOADED',
data: response.artist
});
}
}
)
}
}
export function getAlbum( artist, album, mbid = false ){
return (dispatch, getState) => {
dispatch({ type: 'LASTFM_ALBUM_LOADED', data: false });
if( mbid ){
var params = 'method=album.getInfo&mbid='+mbid
}else{
artist = encodeURIComponent( artist )
album = encodeURIComponent( album )
var params = 'method=album.getInfo&album='+album+'&artist='+artist
}
sendRequest(dispatch, getState, params)
.then(
response => {
if( response.album ){
dispatch({
type: 'LASTFM_ALBUM_LOADED',
data: response.album
});
}
}
)
}
}
export function getTrack( artist, track ){
return (dispatch, getState) => {
dispatch({ type: 'LASTFM_TRACK_LOADED', data: false });
artist = encodeURIComponent( artist );
sendRequest(dispatch, getState, 'method=track.getInfo&track='+track+'&artist='+artist)
.then(
response => {
if( response.track ){
dispatch({
type: 'LASTFM_TRACK_LOADED',
data: response.track
});
}
}
)
}
}

20
src/js/services/lastfm/reducer.js Executable file
View File

@ -0,0 +1,20 @@
export default function reducer(lastfm = {}, action){
switch (action.type) {
case 'LASTFM_ARTIST_LOADED':
return Object.assign({}, lastfm, { artist: action.data });
case 'LASTFM_ALBUM_LOADED':
return Object.assign({}, lastfm, { album: action.data });
case 'LASTFM_TRACK_LOADED':
return Object.assign({}, lastfm, { track: action.data });
default:
return lastfm
}
}

34
src/js/services/mopidy/middleware.js
View File

@ -1,6 +1,9 @@
import Mopidy from 'mopidy'
var actions = require('./actions.js')
var helpers = require('../../helpers.js')
var mopidyActions = require('./actions.js')
var lastfmActions = require('../lastfm/actions.js')
const MopidyMiddleware = (function(){
@ -169,7 +172,7 @@ const MopidyMiddleware = (function(){
.then( response => {
// play it
store.dispatch( actions.changeTrack( response[0].tlid ) );
store.dispatch( mopidyActions.changeTrack( response[0].tlid ) );
// TODO: perhaps force update of currentTlTrack before we proceed?
// this will make the UI feel snappier...
@ -177,7 +180,7 @@ const MopidyMiddleware = (function(){
// add the rest of our uris (if any)
action.uris.shift();
if( action.uris.length > 0 ){
store.dispatch( actions.enqueueTracks( action.uris, 1 ) )
store.dispatch( mopidyActions.enqueueTracks( action.uris, 1 ) )
}
})
break;
@ -237,6 +240,7 @@ const MopidyMiddleware = (function(){
.then( response => {
var album = response[0].album;
album.artists = response[0].artists;
if( !album.images ) album.images = []
album.tracks = {
items: response,
total: response.length
@ -247,6 +251,17 @@ const MopidyMiddleware = (function(){
uris.push( album.tracks.items[i].uri );
}
// load artwork from LastFM
if( album.images.length <= 0 ){
var mbid = helpers.getFromUri('mbid',album.uri)
if( mbid ){
store.dispatch( lastfmActions.getAlbum( false, false, mbid ) )
}else{
store.dispatch( lastfmActions.getAlbum( album.artists[0].name, album.name ) )
}
}
instruct( socket, store, 'library.lookup', { uris: uris } )
.then( response => {
@ -279,8 +294,8 @@ const MopidyMiddleware = (function(){
instruct( socket, store, 'library.lookup', action.data )
.then( response => {
var artist = response[0].artists[0];
artist.images = [];
artist.albums = [];
if( !artist.images ) artist.images = [];
if( !artist.albums ) artist.albums = [];
artist.tracks = response.slice(0,10);
for( var i = 0; i < response.length; i++ ){
@ -294,6 +309,15 @@ const MopidyMiddleware = (function(){
artist.albums.push(album)
}
}
// load artwork from LastFM
if( artist.images.length <= 0 ){
if( artist.musicbrainz_id ){
store.dispatch( lastfmActions.getArtist( false, artist.musicbrainz_id ) )
}else{
store.dispatch( lastfmActions.getArtist( artist.name ) )
}
}
store.dispatch({ type: 'MOPIDY_ARTIST_LOADED', data: artist });
})

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

@ -11,9 +11,11 @@ import Parallax from '../components/Parallax'
import ArtistSentence from '../components/ArtistSentence'
import ArtistGrid from '../components/ArtistGrid'
import Dater from '../components/Dater'
import LazyLoadListener from '../components/LazyLoadListener'
import * as spotifyActions from '../services/spotify/actions'
import * as mopidyActions from '../services/mopidy/actions'
import * as lastfmActions from '../services/lastfm/actions'
import * as spotifyActions from '../services/spotify/actions'
class Album extends React.Component{
@ -37,42 +39,72 @@ class Album extends React.Component{
loadAlbum( props = this.props ){
var source = helpers.uriSource( props.params.uri );
if( source == 'spotify' ){
this.props.spotifyActions.getAlbum( props.params.uri );
}else if( source == 'local' && props.mopidy.connected ){
this.props.mopidyActions.getAlbum( props.params.uri );
}
}
render(){
var source = helpers.uriSource( this.props.params.uri );
if( source == 'spotify' ){
var album = this.props.spotify.album
var artists = this.props.spotify.artists
}else if( source == 'local' ){
var album = this.props.mopidy.album
var artists = []
loadMore(){
if( !this.props.spotify.album || !this.props.spotify.album.tracks.next ) return
this.props.spotifyActions.getURL( this.props.spotify.album.tracks.next, 'SPOTIFY_ALBUM_LOADED_MORE' );
}
album(){
var album = {
name: false,
tracks: {
items: []
},
artists: [],
images: []
}
if( !album ) return null;
switch( helpers.uriSource( this.props.params.uri ) ){
case 'spotify':
Object.assign(album, this.props.spotify.album)
album.artists = this.props.spotify.artists
break
case 'local':
Object.assign(album, this.props.mopidy.album)
if( this.props.lastfm.album.image ) album.images = this.props.lastfm.album.image
break
}
return album
}
render(){
var album = this.album()
return (
<div className="view album-view">
<div className="intro">
<Thumbnail size="large" images={ ( album.images ? album.images : [] ) } />
<ArtistGrid artists={ artists } />
<Thumbnail size="large" images={ album.images } />
<ArtistGrid artists={ album.artists } />
<ul className="details">
<li>{ album.tracks.total } tracks, <Dater type="total-time" data={album.tracks.items} /></li>
{ album.release_date ? <li>Released <Dater type="date" data={ album.release_date } /></li> : null }
{ source == 'spotify' ? <li><FontAwesome name={source} /> Spotify playlist</li> : null }
{ source == 'local' ? <li><FontAwesome name='folder' /> Local playlist</li> : null }
<li><FontAwesome name={helpers.sourceIcon( this.props.params.uri )} /> {helpers.uriSource( this.props.params.uri )} playlist</li>
</ul>
</div>
<div className="main">
<div className="title">
<h1>{ album.name }</h1>
<h3><ArtistSentence artists={ album.artists } /></h3>
</div>
<TrackList tracks={ album.tracks.items } />
<section className="list-wrapper">
<TrackList tracks={ album.tracks.items } />
<LazyLoadListener loadMore={ () => this.loadMore() }/>
</section>
</div>
</div>
);
@ -93,6 +125,7 @@ const mapStateToProps = (state, ownProps) => {
const mapDispatchToProps = (dispatch) => {
return {
mopidyActions: bindActionCreators(mopidyActions, dispatch),
lastfmActions: bindActionCreators(lastfmActions, dispatch),
spotifyActions: bindActionCreators(spotifyActions, dispatch)
}
}

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

@ -2,6 +2,7 @@
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import FontAwesome from 'react-fontawesome'
let helpers = require('../helpers.js')
import LazyLoadListener from '../components/LazyLoadListener'
@ -13,6 +14,7 @@ import Parallax from '../components/Parallax'
import ArtistList from '../components/ArtistList'
import * as mopidyActions from '../services/mopidy/actions'
import * as lastfmActions from '../services/lastfm/actions'
import * as spotifyActions from '../services/spotify/actions'
class Artist extends React.Component{
@ -49,7 +51,7 @@ class Artist extends React.Component{
this.props.spotifyActions.getURL( this.props.spotify.artist_albums.next, 'SPOTIFY_ARTIST_ALBUMS_LOADED_MORE' );
}
renderSpotifyAlbum(){
renderSpotifyArtist(){
if( !this.props.spotify.artist ) return null
var artist = this.props.spotify.artist
var albums = this.props.spotify.artist_albums
@ -64,6 +66,7 @@ class Artist extends React.Component{
<ul className="details">
<li>{ artist.followers.total.toLocaleString() } followers</li>
{ artist.popularity ? <li>{ artist.popularity }% popularity</li> : null }
<li><FontAwesome name='spotify' /> Spotify artist</li>
</ul>
</div>
@ -82,15 +85,19 @@ class Artist extends React.Component{
<div className="cf"></div>
<h4 className="left-padding">Albums</h4>
{ albums ? <AlbumGrid className="no-top-padding" albums={ albums.items } /> : null }
<LazyLoadListener loadMore={ () => this.loadMore() }/>
<section className="grid-wrapper no-top-padding">
{ albums ? <AlbumGrid albums={ albums.items } /> : null }
<LazyLoadListener loadMore={ () => this.loadMore() }/>
</section>
</div>
);
}
renderMopidyAlbum(){
renderMopidyArtist(){
if( !this.props.mopidy.artist ) return null
var artist = this.props.mopidy.artist
if( this.props.lastfm.artist.image && this.props.lastfm.artist.name == artist.name ) artist.images = this.props.lastfm.artist.image
return (
<div className="view artist-view">
@ -99,21 +106,27 @@ class Artist extends React.Component{
<div className="intro">
<Thumbnail size="huge" images={ artist.images } />
<h1>{ artist.name }</h1>
<ul className="details">
<li>{ artist.albums.length.toLocaleString() } albums</li>
<li><FontAwesome name='folder' /> Local artist</li>
</ul>
</div>
<h4 className="left-padding">Top tracks</h4>
{ artist.tracks ? <TrackList tracks={ artist.tracks } /> : null }
<h4 className="left-padding">Albums</h4>
{ artist.albums ? <AlbumGrid className="no-top-padding" albums={ artist.albums } /> : null }
<section className="grid-wrapper no-top-padding">
{ artist.albums ? <AlbumGrid albums={ artist.albums } /> : null }
</section>
</div>
);
}
render(){
var source = helpers.uriSource( this.props.params.uri );
if( source == 'spotify' ) return this.renderSpotifyAlbum()
if( source == 'local' ) return this.renderMopidyAlbum()
if( source == 'spotify' ) return this.renderSpotifyArtist()
if( source == 'local' ) return this.renderMopidyArtist()
}
}
@ -131,6 +144,7 @@ const mapStateToProps = (state, ownProps) => {
const mapDispatchToProps = (dispatch) => {
return {
mopidyActions: bindActionCreators(mopidyActions, dispatch),
lastfmActions: bindActionCreators(lastfmActions, dispatch),
spotifyActions: bindActionCreators(spotifyActions, dispatch)
}
}

21
src/js/views/Playlist.js
View File

@ -49,8 +49,13 @@ class Playlist extends React.Component{
render(){
var source = helpers.uriSource( this.props.params.uri );
if( source == 'spotify' ) var playlist = this.props.spotify.playlist
if( source == 'm3u' ) var playlist = this.props.mopidy.playlist
var source_name = source
if( source == 'spotify' ){
var playlist = this.props.spotify.playlist
}else if( source == 'm3u' ){
var playlist = this.props.mopidy.playlist
source_name = 'local'
}
if( !playlist ) return null;
return (
@ -60,17 +65,21 @@ class Playlist extends React.Component{
<ul className="details">
<li>{ playlist.tracks.total } tracks, <Dater type="total-time" data={playlist.tracks.items} /></li>
{ playlist.last_modified ? <li>Updated <Dater type="ago" data={playlist.last_modified} /> ago</li> : null }
{ source == 'spotify' ? <li><FontAwesome name={source} /> Spotify playlist</li> : null }
{ source == 'm3u' ? <li><FontAwesome name='folder' /> Local playlist</li> : null }
<li><FontAwesome name={helpers.sourceIcon( this.props.params.uri )} /> {source_name} playlist</li>
</ul>
</div>
<div className="main">
<div className="title">
<h1>{ playlist.name }</h1>
</div>
<TrackList tracks={ playlist.tracks.items } />
<section className="list-wrapper">
<TrackList tracks={ playlist.tracks.items } />
<LazyLoadListener loadMore={ () => this.loadMore() }/>
</section>
</div>
<LazyLoadListener loadMore={ () => this.loadMore() }/>
</div>
)
}

10
src/js/views/Search.js
View File

@ -77,8 +77,8 @@ class Search extends React.Component{
<div>
<section className="grid-wrapper">
<ArtistGrid artists={ this.compiledResults('artists') } />
<LazyLoadListener loadMore={ () => this.loadMore('artists') }/>
</section>
<LazyLoadListener loadMore={ () => this.loadMore('artists') }/>
</div>
)
break
@ -88,8 +88,8 @@ class Search extends React.Component{
<div>
<section className="grid-wrapper">
<AlbumGrid albums={ this.compiledResults('albums') } />
<LazyLoadListener loadMore={ () => this.loadMore('albums') }/>
</section>
<LazyLoadListener loadMore={ () => this.loadMore('albums') }/>
</div>
)
break
@ -99,8 +99,8 @@ class Search extends React.Component{
<div>
<section className="grid-wrapper">
<PlaylistGrid playlists={ this.compiledResults('playlists') } />
<LazyLoadListener loadMore={ () => this.loadMore('playlists') }/>
</section>
<LazyLoadListener loadMore={ () => this.loadMore('playlists') }/>
</div>
)
break
@ -110,8 +110,8 @@ class Search extends React.Component{
<div>
<section className="list-wrapper">
<TrackList show_source_icon={true} tracks={ this.compiledResults('tracks') } />
<LazyLoadListener loadMore={ () => this.loadMore('tracks') }/>
</section>
<LazyLoadListener loadMore={ () => this.loadMore('tracks') }/>
</div>
)
break
@ -143,9 +143,9 @@ class Search extends React.Component{
<section className="list-wrapper">
<h4 className="left-padding"><Link to={'/search/'+this.props.params.query+'/tracks'}>Tracks</Link></h4>
<TrackList show_source_icon={true} tracks={ this.compiledResults('tracks') } />
<LazyLoadListener loadMore={ () => this.loadMore('tracks') }/>
</section>
<LazyLoadListener loadMore={ () => this.loadMore('tracks') }/>
</div>
)
}