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

Local artist

Browse Source
This commit is contained in:
James Barnsley
2016-11-01 13:19:51 +13:00
parent 569121c71d
commit 5ccd9b48a0
7 changed files with 273 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
let helpers = require('../helpers.js')
import TrackList from '../components/TrackList'
import Thumbnail from '../components/Thumbnail'
@ -21,13 +22,25 @@ class Album extends React.Component{
// on render
componentDidMount(){
this.props.spotifyActions.getAlbum( this.props.params.uri );
this.loadAlbum();
}
// when props changed
componentWillReceiveProps( nextProps ){
if( nextProps.params.uri != this.props.params.uri ){
this.props.spotifyActions.getAlbum( nextProps.params.uri );
this.loadAlbum( nextProps )
}else if( !this.props.mopidy.connected && nextProps.mopidy.connected ){
if( helpers.uriSource( this.props.params.uri ) == 'local' ){
this.loadAlbum( nextProps )
}
}
}
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 );
}
}
@ -42,29 +55,30 @@ class Album extends React.Component{
}
render(){
if( this.props.spotify.album ){
var album = this.props.spotify.album;
return (
<div className="view album-view">
<div className="intro">
<Thumbnail size="large" images={ album.images } />
<ArtistGrid artists={ album.artists } />
<div className="details">
<div>{ album.tracks.total } tracks, { this.totalTime }</div>
<div>Released <Dater type="date" data={ album.release_date } /></div>
</div>
</div>
<div className="main">
<div className="title">
<h1>{ album.name }</h1>
<h3><ArtistSentence artists={ album.artists } /></h3>
</div>
<TrackList tracks={ album.tracks.items } />
var source = helpers.uriSource( this.props.params.uri );
if( source == 'spotify' ) var album = this.props.spotify.album
if( source == 'local' ) var album = this.props.mopidy.album
if( !album ) return null;
return (
<div className="view album-view">
<div className="intro">
<Thumbnail size="large" images={ album.images } />
<ArtistGrid artists={ album.artists } />
<div className="details">
<div>{ album.tracks.total } tracks, { this.totalTime }</div>
<div>Released <Dater type="date" data={ album.release_date } /></div>
</div>
</div>
);
}
return null;
<div className="main">
<div className="title">
<h1>{ album.name }</h1>
<h3><ArtistSentence artists={ album.artists } /></h3>
</div>
<TrackList tracks={ album.tracks.items } />
</div>
</div>
);
}
}

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

@ -2,6 +2,7 @@
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
let helpers = require('../helpers.js')
import TrackList from '../components/TrackList'
import Thumbnail from '../components/Thumbnail'
@ -9,7 +10,6 @@ import Dater from '../components/Dater'
import * as spotifyActions from '../services/spotify/actions'
import * as mopidyActions from '../services/mopidy/actions'
let helpers = require('../helpers.js')
class Playlist extends React.Component{
@ -40,62 +40,29 @@ class Playlist extends React.Component{
}
}
renderSpotifyPlaylist(){
if( this.props.spotify.playlist ){
var playlist = this.props.spotify.playlist;
var context = null;
if( playlist.owner.id == this.props.spotify.me.id ) context = 'editable-playlist'
return (
<div className="view playlist-view">
<div className="intro">
<Thumbnail size="large" images={ playlist.images } />
<div className="details">
<div>{ playlist.tracks.total } tracks</div>
</div>
</div>
<div className="main">
<div className="title">
<h1>{ playlist.name }</h1>
</div>
<TrackList context={context} tracks={ playlist.tracks.items } />
</div>
</div>
);
}
return null;
}
renderMopidyPlaylist(){
if( this.props.mopidy.playlist ){
var playlist = this.props.mopidy.playlist;
return (
<div className="view playlist-view">
<div className="intro">
{ playlist.images ? <Thumbnail size="large" images={ playlist.images } /> : null }
<div className="details">
<div>Last updated { playlist.last_modified }</div>
</div>
</div>
<div className="main">
<div className="title">
<h1>{ playlist.name }</h1>
</div>
<TrackList tracks={ playlist.tracks.items } />
</div>
</div>
);
}
return null;
}
render(){
var source = helpers.uriSource( this.props.params.uri );
if( source == 'spotify' ) return this.renderSpotifyPlaylist();
if( source == 'm3u' ) return this.renderMopidyPlaylist();
return null;
if( source == 'spotify' ) var playlist = this.props.spotify.playlist
if( source == 'm3u' ) var playlist = this.props.mopidy.playlist
if( !playlist ) return null;
return (
<div className="view playlist-view">
<div className="intro">
{ playlist.images ? <Thumbnail size="large" images={ playlist.images } /> : null }
<div className="details">
<div>{ playlist.tracks.total } tracks</div>
<div>Last updated { playlist.last_modified }</div>
</div>
</div>
<div className="main">
<div className="title">
<h1>{ playlist.name }</h1>
</div>
<TrackList tracks={ playlist.tracks.items } />
</div>
</div>
)
}
}