From 57a74d87b6e3461f57dd9b74a9060b5d5923dc0d Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Mon, 3 Oct 2016 21:21:14 +1300 Subject: [PATCH] One-way comms with Mopidy --- src/actions/mopidy.js | 29 ++++++++++++++++------------- src/components/Queue.js | 20 ++++++++++++++++++-- src/components/Track.js | 13 +++++++++++++ src/components/TrackList.js | 31 ++++++++++--------------------- src/reducers/mopidy.js | 15 +++++++++------ src/services/MopidyService.js | 35 ++++++++++++++++++++++++----------- 6 files changed, 90 insertions(+), 53 deletions(-) create mode 100755 src/components/Track.js 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 ( 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 } }