One-way comms with Mopidy

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
+	}
 }

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 (
+				<Track track={this.props.mopidy.trackInFocus.track} />
+			);
+		}
+		return null;
+	}
+
+	renderTrackList(){
 		if( this.props.mopidy && this.props.mopidy.tracks ){
 			return (
 				<TrackList tracks={this.props.mopidy.tracks} />
@@ -26,7 +40,9 @@ class Queue extends React.Component{
 		return (
 			<div>
 				<h3>Now playing</h3>
-				{ this.renderTracks() }
+				{ this.renderTrackInFocus() }
+				<h4>Other tracks</h4>
+				{ this.renderTrackList() }
 			</div>
 		);
 	}

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 <div className="track">#{this.props.track.uri}: {this.props.track.name}</div>
+	}
+}

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 (
 				<ul>
 					{
-						this.flattenTracks().map( track => 
-							<li key={track.uri}>{ track.name }</li>
+						this.props.tracks.map( track => {
+								if( typeof(track.track) !== 'undefined' ){
+									track.track.tlid = track.tlid;
+									track = track.track;
+								}
+								return <Track key={track.uri} track={track} />
+							}
 						)
 					}
 				</ul>

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	
             });

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 <pre>{ JSON.stringify(this.props.mopidy, null, 2) }</pre>;
+		return null
 	}
 }