Reduced actions to get/set; Mopidy set needs wrapping object/array

This commit is contained in:
James Barnsley
2016-10-06 09:35:42 +13:00
parent cce14b496a
commit eae085d2b5
5 changed files with 91 additions and 19 deletions

View File

@ -24,6 +24,20 @@ export function updateConsume( consume ){
}
}
export function updateRandom( random ){
return {
type: 'RANDOM',
random: random
}
}
export function updateRepeat( repeat ){
return {
type: 'REPEAT',
repeat: repeat
}
}
export function updateTlTracks( tracks ){
return {
type: 'TRACKLIST',

View File

@ -7,7 +7,11 @@ export default class Track extends React.Component{
super(props);
}
handleClick( e ){
console.log('Track clicked', this.props.track.name)
}
render(){
return <div className="track">#{this.props.track.uri}: {this.props.track.name}</div>
return <div className="track" onClick={(e) => this.handleClick(e)}>#{this.props.track.uri}: {this.props.track.name}</div>
}
}

View File

@ -8,6 +8,10 @@ export default class TrackList extends React.Component{
super(props);
}
handleClick( e ){
console.log('Track clicked', e)
}
render(){
if( this.props.tracks ){
@ -19,7 +23,7 @@ export default class TrackList extends React.Component{
track.track.tlid = track.tlid;
track = track.track;
}
return <Track key={track.uri} track={track} />
return <Track key={track.uri} track={track} onClick={(e) => this.handleClick(e)} />
}
)
}

View File

@ -14,7 +14,17 @@ export default function reducer(mopidy = {}, action){
case 'CONSUME':
return Object.assign({}, mopidy, {
consume: action.consume
consume: action.consume
});
case 'RANDOM':
return Object.assign({}, mopidy, {
random: action.random
});
case 'REPEAT':
return Object.assign({}, mopidy, {
repeat: action.repeat
});
case 'TRACKLIST':

View File

@ -34,10 +34,10 @@ class MopidyService extends React.Component{
this.get( 'playback', 'State' );
this.get( 'playback', 'Volume' );
this.get( 'tracklist', 'Consume' );
this.get( 'tracklist', 'Random' );
this.get( 'tracklist', 'Repeat' );
this.get( 'tracklist', 'TlTracks' );
this.get( 'playback', 'CurrentTlTrack' );
//this.getShuffle();
//this.getRandom();
break;
case 'state:offline':
@ -61,8 +61,8 @@ class MopidyService extends React.Component{
case 'event:optionsChanged':
this.get( 'tracklist', 'Consume' );
//this.getShuffle();
//this.getRandom();
this.get( 'tracklist', 'Random' );
this.get( 'tracklist', 'Repeat' );
break;
default:
@ -70,24 +70,52 @@ class MopidyService extends React.Component{
}
}
/**
* Get something from Mopidy
*
* Sends request to Mopidy server, and updates our local storage on return
* @param string model Mopidy model (playback, tracklist, etc)
* @param string property the property to get (TlTracks, Consume, etc)
**/
get( model, property ){
console.log('MopidyServie: getting '+model+'.'+property);
console.log('MopidyServie: '+model+'.get'+property);
let self = this;
this.connection[model]['get'+property]()
.then( function( response ){
self.props.actions['update'+property]( response );
});
.then(
function( response ){
self.props.actions['update'+property]( response );
},
function( error ){
console.error( error );
}
);
}
set( model, property ){
console.log('MopidyServie: setting '+model+'.'+property);
/**
* Set something in Mopidy
*
* Sends request to Mopidy server, and updates our local storage on return
* @param string model Mopidy model (playback, tracklist, etc)
* @param string property the property to get (TlTracks, Consume, etc)
* @param mixed value
**/
set( model, property, value ){
console.log('MopidyServie: '+model+'.set'+property, value);
let self = this;
this.connection[model]['get'+property]()
.then( function( response ){
self.props.actions['update'+property]( response );
});
this.connection[model]['set'+property]( value )
.then(
function( response ){
self.props.actions['update'+property]( response );
},
function( error ){
console.error( error );
}
);
}
render(){
console.log( this.props.mopidy );
var playButton = <a onClick={() => this.connection.playback.play()}><FontAwesome name="play" /> </a>
@ -95,9 +123,19 @@ class MopidyService extends React.Component{
playButton = <a onClick={() => this.connection.playback.pause()}><FontAwesome name="pause" /> </a>
}
var consumeButton = <a onClick={() => this.connection.tracklist.setConsume(true)}>Consume </a>
var consumeButton = <a onClick={() => this.set('tracklist', 'Consume', [true])}>Consume </a>
if( this.props.mopidy.consume ){
consumeButton = <a onClick={() => this.connection.tracklist.setConsume(false)}>Un-Consume </a>
consumeButton = <a onClick={() => this.set('tracklist', 'Consume', [false])}>Un-Consume </a>
}
var randomButton = <a onClick={() => this.set('tracklist', 'Random', [true])}>Random </a>
if( this.props.mopidy.random ){
randomButton = <a onClick={() => this.set('tracklist', 'Random', [false])}>Un-Random </a>
}
var repeatButton = <a onClick={() => this.set('tracklist', 'Repeat', [true])}>Repeat </a>
if( this.props.mopidy.repeat ){
repeatButton = <a onClick={() => this.set('tracklist', 'Repeat', [false])}>Un-Repeat </a>
}
return (
@ -106,6 +144,8 @@ class MopidyService extends React.Component{
<a onClick={() => this.connection.playback.previous()}><FontAwesome name="step-backward" /> </a>
<a onClick={() => this.connection.playback.next()}><FontAwesome name="step-forward" /> </a>
{ consumeButton }
{ randomButton }
{ repeatButton }
{ this.props.mopidy.volume }
</div>
);