diff --git a/src/actions/mopidy.js b/src/actions/mopidy.js
index 269377b7..b0814aaf 100755
--- a/src/actions/mopidy.js
+++ b/src/actions/mopidy.js
@@ -3,27 +3,30 @@
* Actions and Action Creators
**/
-export const STATUS_CHANGED = 'STATUS_CHANGED'
-export const UPDATE_TRACKLIST = 'UPDATE_TRACKLIST'
-export const VOLUME_CHANGED = 'VOLUME_CHANGED'
-
export function updateStatus( online ){
return {
- type: STATUS_CHANGED,
+ type: 'STATUS',
online: online
}
}
-export function volumeChanged( volume ){
- return {
- type: VOLUME_CHANGED,
- volume: volume
- }
-}
-
export function updateTracklist( tracks ){
return {
- type: UPDATE_TRACKLIST,
+ type: 'TRACKLIST',
tracks: tracks
}
+}
+
+export function updateTrackInFocus( tltrack ){
+ return {
+ type: 'TRACKINFOCUS',
+ trackInFocus: tltrack
+ }
+}
+
+export function updateVolume( volume ){
+ return {
+ type: 'VOLUME',
+ volume: volume
+ }
}
\ No newline at end of file
diff --git a/src/components/Queue.js b/src/components/Queue.js
index d5fa4618..e23271c0 100755
--- a/src/components/Queue.js
+++ b/src/components/Queue.js
@@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux'
import Services from '../services/Services'
import TrackList from '../components/TrackList'
+import Track from '../components/Track'
import * as actions from '../actions/mopidy'
class Queue extends React.Component{
@@ -13,7 +14,20 @@ class Queue extends React.Component{
super(props);
}
- renderTracks(){
+ componentDidMount(){
+ console.log('mounted');
+ }
+
+ renderTrackInFocus(){
+ if( this.props.mopidy && this.props.mopidy.trackInFocus ){
+ return (
+
+ );
+ }
+ return null;
+ }
+
+ renderTrackList(){
if( this.props.mopidy && this.props.mopidy.tracks ){
return (
@@ -26,7 +40,9 @@ class Queue extends React.Component{
return (
Now playing
- { this.renderTracks() }
+ { this.renderTrackInFocus() }
+ Other tracks
+ { this.renderTrackList() }
);
}
diff --git a/src/components/Track.js b/src/components/Track.js
new file mode 100755
index 00000000..7dc3940f
--- /dev/null
+++ b/src/components/Track.js
@@ -0,0 +1,13 @@
+
+import React, { PropTypes } from 'react'
+
+export default class Track extends React.Component{
+
+ constructor(props) {
+ super(props);
+ }
+
+ render(){
+ return #{this.props.track.uri}: {this.props.track.name}
+ }
+}
\ No newline at end of file
diff --git a/src/components/TrackList.js b/src/components/TrackList.js
index 8546e0d2..983ec0eb 100755
--- a/src/components/TrackList.js
+++ b/src/components/TrackList.js
@@ -1,37 +1,26 @@
import React, { PropTypes } from 'react'
+import Track from './Track'
-export default class Tracklist extends React.Component{
+export default class TrackList extends React.Component{
constructor(props) {
super(props);
}
- flattenTracks(){
- var tracks = [];
- if( this.props.tracks ){
- var originalTracks = this.props.tracks;
-
- for( var i = 0; i < originalTracks.length; i++ ){
- var track = originalTracks[i];
- if( typeof(track.track) !== 'undefined' ){
- track.track.tlid = track.tlid;
- track = track.track;
- }
- tracks.push( track );
- }
- }
- return tracks;
- }
-
render(){
- if( this.flattenTracks ){
+ if( this.props.tracks ){
return (
{
- this.flattenTracks().map( track =>
- - { track.name }
+ this.props.tracks.map( track => {
+ if( typeof(track.track) !== 'undefined' ){
+ track.track.tlid = track.tlid;
+ track = track.track;
+ }
+ return
+ }
)
}
diff --git a/src/reducers/mopidy.js b/src/reducers/mopidy.js
index e7bb155d..17ebbb47 100755
--- a/src/reducers/mopidy.js
+++ b/src/reducers/mopidy.js
@@ -1,21 +1,24 @@
-import * as actions from '../actions/mopidy'
-
export default function reducer(mopidy = {}, action){
- console.log(action);
switch (action.type) {
- case actions.STATUS_CHANGED:
+ case 'STATUS':
return Object.assign({}, mopidy, {
online: action.online
});
- case actions.UPDATE_TRACKLIST:
+ case 'TRACKLIST':
return Object.assign({}, mopidy, {
tracks: action.tracks
});
- case actions.VOLUME_CHANGED:
+ case 'TRACKINFOCUS':
+ console.log( action );
+ return Object.assign({}, mopidy, {
+ trackInFocus: action.trackInFocus
+ });
+
+ case 'VOLUME':
return Object.assign({}, mopidy, {
volume: action.volume
});
diff --git a/src/services/MopidyService.js b/src/services/MopidyService.js
index 80b6e37b..7ff8d907 100755
--- a/src/services/MopidyService.js
+++ b/src/services/MopidyService.js
@@ -29,17 +29,22 @@ class MopidyService extends React.Component{
switch( type ){
case 'state:online':
- this.updateStatus(true);
+ this.props.actions.updateStatus( true );
this.getTracklist();
+ this.getTrackInFocus();
this.getVolume();
break;
+ case 'state:offline':
+ this.props.actions.updateStatus( false );
+ break;
+
case 'event:tracklistChanged':
this.getTracklist();
break;
case 'event:volumeChanged':
- this.props.actions.volumeChanged(data.volume);
+ this.props.actions.updateVolume( data.volume );
break;
default:
@@ -47,28 +52,36 @@ class MopidyService extends React.Component{
}
}
- updateStatus( online = false ){
- this.props.actions.updateStatus( online );
- }
-
getVolume(){
let self = this;
this.connection.playback.getVolume()
- .then( function(volume){
- self.props.actions.volumeChanged(volume);
+ .then( function( volume ){
+ self.props.actions.updateVolume( volume );
});
}
+ setVolume( volume ){
+ this.props.actions.updateVolume( volume );
+ }
+
getTracklist(){
let self = this;
this.connection.tracklist.getTlTracks()
- .then( function(tracks){
- self.props.actions.updateTracklist(tracks);
+ .then( function( tracks ){
+ self.props.actions.updateTracklist( tracks );
+ });
+ }
+
+ getTrackInFocus(){
+ let self = this;
+ this.connection.playback.getCurrentTlTrack()
+ .then( function( tltrack ){
+ self.props.actions.updateTrackInFocus( tltrack );
});
}
render(){
- return { JSON.stringify(this.props.mopidy, null, 2) };
+ return null
}
}