Reduced actions to get/set; Mopidy set needs wrapping object/array
This commit is contained in:
@ -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',
|
||||
|
||||
@ -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>
|
||||
}
|
||||
}
|
||||
@ -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)} />
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
@ -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':
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user