diff --git a/src/js/components/Album.js b/src/js/components/Album.js
index b04f67ff..d88e0ae9 100755
--- a/src/js/components/Album.js
+++ b/src/js/components/Album.js
@@ -46,7 +46,6 @@ class Album extends React.Component{
return (
{ this.state.album.name }
- { this.state.album.label }
);
diff --git a/src/js/components/Queue.js b/src/js/components/Queue.js
index e23271c0..1f668418 100755
--- a/src/js/components/Queue.js
+++ b/src/js/components/Queue.js
@@ -21,7 +21,7 @@ class Queue extends React.Component{
renderTrackInFocus(){
if( this.props.mopidy && this.props.mopidy.trackInFocus ){
return (
-
+ { this.props.mopidy.trackInFocus.track.name }
);
}
return null;
diff --git a/src/js/components/Track.js b/src/js/components/Track.js
index 84629839..df92f06c 100755
--- a/src/js/components/Track.js
+++ b/src/js/components/Track.js
@@ -1,5 +1,6 @@
import React, { PropTypes } from 'react'
+import FontAwesome from 'react-fontawesome'
export default class Track extends React.Component{
@@ -7,11 +8,26 @@ export default class Track extends React.Component{
super(props);
}
- handleClick( e ){
- console.log('Track clicked', this.props.track.name)
+ toggleSelected( e ){
+ return this.props.toggleSelected();
+ }
+
+ playTrack( e ){
+ return this.props.playTrack();
}
render(){
- return this.handleClick(e)}>#{this.props.track.uri}: {this.props.track.name}
+
+ var selectedIcon = 'square-o';
+ if( typeof(this.props.track.selected) !== 'undefined' && this.props.track.selected ){
+ selectedIcon = 'check-square-o';
+ }
+
+ return (
+ this.playTrack(e) }>
+ this.toggleSelected(e) } />
+ #{this.props.track.uri}: {this.props.track.name}
+
+ );
}
}
\ No newline at end of file
diff --git a/src/js/components/TrackList.js b/src/js/components/TrackList.js
index cc6b86d9..f36bbcff 100755
--- a/src/js/components/TrackList.js
+++ b/src/js/components/TrackList.js
@@ -6,24 +6,49 @@ export default class TrackList extends React.Component{
constructor(props) {
super(props);
+
+ this.state = {
+ tracks: this.props.tracks
+ }
}
- handleClick( e ){
- console.log('Track clicked', e)
+ toggleSelected( index ){
+ var tracks = this.state.tracks;
+ tracks[index].selected = !tracks[index].selected;
+ this.setState({ tracks: tracks });
+ }
+
+ playTrack( index ){
+ var tracks = this.state.tracks;
+ console.log('playTrack', tracks[index].tlid)
+ }
+
+ componentWillReceiveProps( nextProps ){
+ this.setState({ tracks: nextProps.tracks });
}
render(){
-
- if( this.props.tracks ){
+ let self = this;
+ if( this.state.tracks ){
return (
{
- this.props.tracks.map( track => {
+ this.state.tracks.map(
+ (track, index) => {
+
+ // flatten nested track objects (as in the case of TlTracks)
if( typeof(track.track) !== 'undefined' ){
- track.track.tlid = track.tlid;
- track = track.track;
+ for( var property in track.track ){
+ if( track.track.hasOwnProperty(property) ){
+ track[property] = track.track[property]
+ }
+ }
}
- return