Fiddling with thunk; More library endpoints

src/js/components/AlbumGridItem.js

@@ -10,10 +10,15 @@ export default class AlbumGridItem extends React.Component{
 	}
 
 	render(){
-		var link = '/album/' + this.props.item.uri;
+		var item = this.props.item;
+		if( typeof(item.album) !== 'undefined' ){
+			item.album.added_at = item.added_at;
+			item = item.album;
+		}
+		var link = '/album/' + item.uri;
 		return (
 			<Link to={link} className="grid-item album-grid-item">
-				<Thumbnail size="medium" images={this.props.item.images} />
+				{ item.images ? <Thumbnail size="medium" images={item.images} /> : item.name }
 			</Link>
 		);
 	}

src/js/components/Player.js

@@ -13,11 +13,22 @@ class Player extends React.Component{
 		super(props);
 	}
 
+	renderTrackInFocus(){
+		if( this.props.mopidy && this.props.mopidy.trackInFocus ){
+			return (
+				<div>
+					<div>{ this.props.mopidy.trackInFocus.track.name }</div>
+				</div>
+			);
+		}
+		return null;
+	}
+
 	renderControls(){
 
-		var playButton = <a onClick={() => this.props.actions.instruct('playback.play')}><FontAwesome name="play" /> </a>
+		var playButton = <a onClick={() => this.props.actions.play()}><FontAwesome name="play" /> </a>
 		if( this.props.mopidy.state == 'playing' ){
-			playButton = <a onClick={() => this.props.actions.instruct('playback.pause')}><FontAwesome name="pause" /> </a>
+			playButton = <a onClick={() => this.props.actions.pause()}><FontAwesome name="pause" /> </a>
 		}
 
 		var consumeButton = <a onClick={() => this.props.actions.instruct('tracklist.setConsume', [true])}>Consume </a>
@@ -37,11 +48,12 @@ class Player extends React.Component{
 
 		return (
 			<div>
+				{ this.renderTrackInFocus() }
 				{ playButton }
-				<a onClick={() => this.props.actions.instruct('playback.previous')}>
+				<a onClick={() => this.props.actions.previous()}>
 					<FontAwesome name="step-backward" />
 				</a>&nbsp;
-				<a onClick={() => this.props.actions.instruct('playback.next')}>
+				<a onClick={() => this.props.actions.next()}>
 					<FontAwesome name="step-forward" />
 				</a>&nbsp;
 				{ consumeButton }

src/js/components/TrackList.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import * as actions from '../services/mopidy/actions'
+import * as mopidyActions from '../services/mopidy/actions'
 
 import Track from './Track'
 
@@ -17,6 +17,10 @@ class TrackList extends React.Component{
 		}
 	}
 
+	componentWillReceiveProps( nextProps ){
+		this.setState({ tracks: nextProps.tracks });
+	}
+
 	handleClick( e, index ){
 		var tracks = this.state.tracks;
 
@@ -49,6 +53,11 @@ class TrackList extends React.Component{
 		this.setState({ tracks: tracks, lastSelectedTrack: index });
 	}
 
+	handleDoubleClick( e, index ){
+		var tracks = this.state.tracks;
+		this.playTrack( tracks[index] )
+	}
+
 	selectedTracks(){
 		function isSelected( track ){
 			return ( typeof(track.selected) !== 'undefined' && track.selected );
@@ -56,21 +65,38 @@ class TrackList extends React.Component{
 		return this.state.tracks.filter(isSelected)
 	}
 
-	handleDoubleClick( e, index ){
-		var tracks = this.state.tracks;
-		this.props.playTrack( tracks[index] )
+	playTracks(){
+
+		var tracks = this.selectedTracks();
+
+		if( typeof(this.props.playTracks) !== 'undefined' ){
+			return this.props.playTracks( tracks );
+		}
+
+		var uris = [];
+		for( var i = 0; i < tracks.length; i++ ){
+			uris.push( tracks[i].uri )
+		}
+		return this.props.mopidyActions.playTracks( uris )
 	}
 
-	playTracks(){
-		this.props.playTracks( this.selectedTracks() )
+	playTrack( track ){
+
+		if( typeof(this.props.playTrack) !== 'undefined' ){
+			return this.props.playTrack( this.selectedTracks() );
+		}
+
+		var uris = [track.uri];
+		this.props.mopidyActions.playTracks( uris )
 	}
 
 	removeTracks(){
-		this.props.removeTracks( this.selectedTracks() )
-	}
 
-	componentWillReceiveProps( nextProps ){
-		this.setState({ tracks: nextProps.tracks });
+		var tracks = this.selectedTracks();
+		
+		if( typeof(this.props.removeTracks) !== 'undefined' ){
+			return this.props.removeTracks( tracks );
+		}
 	}
 
 	render(){
@@ -122,7 +148,7 @@ const mapStateToProps = (state, ownProps) => {
 
 const mapDispatchToProps = (dispatch) => {
 	return {
-		actions: bindActionCreators(actions, dispatch)
+		mopidyActions: bindActionCreators(mopidyActions, dispatch)
 	}
 }