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 (