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

Playlist and album views

Browse Source
This commit is contained in:
James Barnsley
2016-10-31 16:49:42 +13:00
parent 869d73231b
commit bab6c66852
20 changed files with 581 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,8 @@ import TrackList from '../components/TrackList'
import Thumbnail from '../components/Thumbnail'
import Parallax from '../components/Parallax'
import ArtistSentence from '../components/ArtistSentence'
import ArtistGrid from '../components/ArtistGrid'
import Dater from '../components/Dater'
import * as spotifyActions from '../services/spotify/actions'
import * as mopidyActions from '../services/mopidy/actions'
@ -29,17 +31,35 @@ class Album extends React.Component{
}
}
totalTime(){
if( !this.props.spotify.album ) return null
var tracks = this.props.spotify.tracks.items;
var duration = 0;
for( var i = 0; i < tracks.length; i++ ){
duration += tracks[i].duration_ms;
}
return duration;
}
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={ this.props.spotify.album.images } />
<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">
<h1>{ this.props.spotify.album.name }</h1>
<h3><ArtistSentence artists={ this.props.spotify.album.artists } /></h3>
<TrackList tracks={this.props.spotify.album.tracks.items} />
<div className="title">
<h1>{ album.name }</h1>
<h3><ArtistSentence artists={ album.artists } /></h3>
</div>
<TrackList tracks={ album.tracks.items } />
</div>
</div>
);

3
src/js/views/App.js
View File

@ -77,9 +77,6 @@ class App extends React.Component{
<main>
{this.props.children}
</main>
<footer>
Iris by James Barnsley &nbsp;|&nbsp; v{ this.props.pusher.version.current }
</footer>
{ this.props.ui.context_menu.test }
<ContextMenu state={this.props.ui.context_menu} />
</div>

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

@ -43,20 +43,20 @@ class Artist extends React.Component{
</div>
<div className="col w70">
<h3 className="left-padding">Top tracks</h3>
<h4 className="left-padding">Top tracks</h4>
{ this.props.spotify.artist.tracks ? <TrackList tracks={ this.props.spotify.artist.tracks } /> : null }
</div>
<div className="col w5"></div>
<div className="col w25">
<h3>Related artists</h3>
<h4>Related artists</h4>
{ this.props.spotify.artist.related_artists ? <ArtistList artists={ this.props.spotify.artist.related_artists.slice(0,6) } /> : null }
</div>
<div className="cf"></div>
<h3 className="left-padding">Albums</h3>
<h4 className="left-padding">Albums</h4>
{ this.props.spotify.artist_albums ? <AlbumGrid className="no-top-padding" albums={ this.props.spotify.artist_albums.items } /> : null }
</div>
);

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

@ -4,7 +4,8 @@ import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import TrackList from '../components/TrackList'
import Header from '../components/Header'
import Thumbnail from '../components/Thumbnail'
import Dater from '../components/Dater'
import * as spotifyActions from '../services/spotify/actions'
import * as mopidyActions from '../services/mopidy/actions'
@ -30,13 +31,24 @@ class Playlist extends React.Component{
render(){
if( this.props.spotify.playlist ){
var playlist = this.props.spotify.playlist;
var context = null;
if( this.props.spotify.playlist.owner.id == this.props.spotify.me.id ) context = 'editable-playlist'
if( playlist.owner.id == this.props.spotify.me.id ) context = 'editable-playlist'
return (
<div className="view playlist-view">
<Header icon="playlist" title={ this.props.spotify.playlist.name } />
<TrackList context={context} tracks={this.props.spotify.playlist.tracks.items} />
<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>
);
}

8
src/js/views/Settings.js
View File

@ -65,7 +65,7 @@ class Settings extends React.Component{
<section>
<h3 className="underline">Mopidy</h3>
<h4 className="underline">Mopidy</h4>
<form onSubmit={(e) => this.setMopidyConfig(e)}>
<label>
<div className="label">Host</div>
@ -88,7 +88,7 @@ class Settings extends React.Component{
<button type="submit" className="secondary">Apply</button>
</form>
<h3 className="underline">Pusher</h3>
<h4 className="underline">Pusher</h4>
<form>
<label>
<div className="label">Username</div>
@ -112,7 +112,7 @@ class Settings extends React.Component{
</label>
</form>
<h3 className="underline">Spotify</h3>
<h4 className="underline">Spotify</h4>
<form onSubmit={(e) => this.setSpotifyConfig(e)}>
<label>
<div className="label">Country</div>
@ -138,7 +138,7 @@ class Settings extends React.Component{
<SpotifyAuthenticationFrame />
<h3 className="underline">Advanced</h3>
<h4 className="underline">Advanced</h4>
<label>
<div className="label">Version</div>
<div className="input">