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

Starting to build UI; everything spotify goes via getToken

Browse Source
This commit is contained in:
James Barnsley
2016-10-23 23:48:06 +13:00
parent 9f2490fd17
commit a89d87a960
49 changed files with 5762 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,6 +4,8 @@ import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import TrackList from '../components/TrackList'
import Header from '../components/Header'
import * as spotifyActions from '../services/spotify/actions'
import * as mopidyActions from '../services/mopidy/actions'
@ -29,7 +31,10 @@ class Album extends React.Component{
if( this.props.spotify.album ){
return (
<div>
<h3>{ this.props.spotify.album.name }</h3>
<Header
icon="cd"
title={ this.props.spotify.album.name }
/>
<TrackList tracks={this.props.spotify.album.tracks.items} />
</div>
);

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

@ -5,7 +5,7 @@ import { createStore, bindActionCreators } from 'redux'
import { Link } from 'react-router'
import { connect } from 'react-redux'
import Player from '../components/Player'
import Sidebar from '../components/Sidebar'
import * as mopidyActions from '../services/mopidy/actions'
import * as spotifyActions from '../services/spotify/actions'
@ -25,19 +25,12 @@ class App extends React.Component{
}
render(){
return (
<div>
<ul role="nav">
<li><Link to="/queue">Now playing</Link></li>
<li><Link to="/library/artists">Library: My artists</Link></li>
<li><Link to="/library/albums">Library: My albums</Link></li>
<li><Link to="/library/tracks">Library: My tracks</Link></li>
<li><Link to="/library/playlists">Library: My playlists</Link></li>
<li><Link to="/settings">Settings</Link></li>
</ul>
{this.props.children}
<Player />
<Sidebar />
<main>
{this.props.children}
</main>
</div>
);
}

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

@ -30,7 +30,10 @@ class Artist extends React.Component{
if( this.props.spotify.artist ){
return (
<div>
<h3>{ this.props.spotify.artist.name }</h3>
<Header
icon="mic"
title={ this.props.spotify.artist.name }
/>
<p>{ this.props.spotify.artist.followers.total.toLocaleString() } followers</p>
{ this.props.spotify.artist.tracks ? <TrackList tracks={ this.props.spotify.artist.tracks } /> : null }
{ this.props.spotify.artist_albums ? <AlbumGrid items={ this.props.spotify.artist_albums } /> : null }

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

@ -4,6 +4,8 @@ import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import TrackList from '../components/TrackList'
import Header from '../components/Header'
import * as spotifyActions from '../services/spotify/actions'
import * as mopidyActions from '../services/mopidy/actions'
@ -29,7 +31,10 @@ class Playlist extends React.Component{
if( this.props.spotify.playlist ){
return (
<div>
<h3>{ this.props.spotify.playlist.name }</h3>
<Header
icon="playlist"
title={ this.props.spotify.playlist.name }
/>
<TrackList tracks={this.props.spotify.playlist.tracks.items} />
</div>
);

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

@ -9,6 +9,8 @@ import Track from '../components/Track'
import Player from '../components/Player'
import ArtistList from '../components/ArtistList'
import AlbumLink from '../components/AlbumLink'
import Header from '../components/Header'
import * as actions from '../services/mopidy/actions'
class Queue extends React.Component{
@ -60,9 +62,11 @@ class Queue extends React.Component{
render(){
return (
<div>
<h3>Now playing</h3>
<Header
icon="play"
title="Now playing"
/>
{ this.renderTrackInFocus() }
<Player />
<h4>Other tracks</h4>
{ this.renderTrackList() }
</div>

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

@ -6,6 +6,7 @@ import { bindActionCreators } from 'redux'
import FontAwesome from 'react-fontawesome'
import SpotifyAuthenticationFrame from '../components/SpotifyAuthenticationFrame'
import ConfirmationButton from '../components/ConfirmationButton'
import Header from '../components/Header'
import * as mopidyActions from '../services/mopidy/actions'
import * as spotifyActions from '../services/spotify/actions'
@ -40,7 +41,10 @@ class Settings extends React.Component{
render(){
return (
<div>
<h3>Settings</h3>
<Header
icon="cog"
title="Settings"
/>
<h4>Mopidy</h4>
<form onSubmit={() => this.setMopidyConfig()}>

6
src/js/views/library/LibraryAlbums.js
View File

@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import AlbumGrid from '../../components/AlbumGrid'
import Header from '../../components/Header'
import * as mopidyActions from '../../services/mopidy/actions'
import * as spotifyActions from '../../services/spotify/actions'
@ -24,7 +25,10 @@ class LibraryAlbums extends React.Component{
if( this.props.spotify.libraryAlbums ){
return (
<div>
<h3>My albums</h3>
<Header
icon="cd"
title="My albums"
/>
<AlbumGrid items={this.props.spotify.libraryAlbums} />
</div>
);

7
src/js/views/library/LibraryArtists.js
View File

@ -4,6 +4,8 @@ import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import Header from '../../components/Header'
import * as mopidyActions from '../../services/mopidy/actions'
import * as spotifyActions from '../../services/spotify/actions'
@ -22,7 +24,10 @@ class LibraryArtists extends React.Component{
if( this.props.spotify.libraryArtists ){
return (
<div>
<h3>My artists</h3>
<Header
icon="mic"
title="My artists"
/>
<ul>
{
this.props.spotify.libraryArtists.artists.items.map( (artist, index) => {

6
src/js/views/library/LibraryPlaylists.js
View File

@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import PlaylistListItem from '../../components/PlaylistListItem'
import Header from '../../components/Header'
import * as mopidyActions from '../../services/mopidy/actions'
import * as spotifyActions from '../../services/spotify/actions'
@ -67,7 +68,10 @@ class LibraryPlaylists extends React.Component{
render(){
return (
<div>
<h3>My playlists</h3>
<Header
icon="playlist"
title="My playlists"
/>
{ this.renderPlaylists() }
</div>
)

3
src/js/views/library/LibraryTracks.js
View File

@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import TrackList from '../../components/TrackList'
import Header from '../../components/Header'
import * as mopidyActions from '../../services/mopidy/actions'
import * as spotifyActions from '../../services/spotify/actions'
@ -24,7 +25,7 @@ class LibraryTracks extends React.Component{
if( this.props.spotify.libraryTracks ){
return (
<div>
<h3>My tracks</h3>
<Header icon="music" title="My tracks" />
<TrackList tracks={this.props.spotify.libraryTracks.items} />
</div>
);