Tracklist highlighting track

src/js/components/TrackList.js

@@ -117,6 +117,14 @@ class TrackList extends React.Component{
 
 									// flatten nested track objects (as in the case of TlTracks)
 									if( typeof(track.track) !== 'undefined' ){
+
+										// see if we're the current tlTrack
+										if( self.props.mopidy.trackInFocus && self.props.mopidy.trackInFocus.tlid == track.tlid ){
+											track.playing = true;
+										}else{
+											track.playing = false;
+										}
+
 										for( var property in track.track ){
 											if( track.track.hasOwnProperty(property) ){
 												track[property] = track.track[property]

src/js/index.js

@@ -6,7 +6,7 @@ import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
-import { Router, Route, Link, hashHistory } from 'react-router'
+import { Router, Route, Link, browserHistory } from 'react-router'
 
 import store from './bootstrap.js'
 
@@ -26,7 +26,7 @@ import LibraryPlaylists from './views/library/LibraryPlaylists'
 
 ReactDOM.render(
 	<Provider store={store}>
-		<Router history={hashHistory}>
+		<Router history={browserHistory}>
 			<Route path="/" component={App}>
 	
 				<Route path="library/artists" component={LibraryArtists} />

src/js/services/mopidy/middleware.js

@@ -19,10 +19,7 @@ const MopidyMiddleware = (function(){
                 instruct( ws, store, 'tracklist.getRandom' );
                 instruct( ws, store, 'tracklist.getRepeat' );
                 instruct( ws, store, 'tracklist.getTlTracks' );
-                instruct( ws, store, 'playback.getCurrentTlTrack' )
-                    .then( currentTlTrack => {
-                        store.dispatch({ type: 'MOPIDY_HIGHLIGHT_CURRENT_TLTRACK', data: currentTlTrack })
-                    });
+                instruct( ws, store, 'playback.getCurrentTlTrack' );
                 break;
 
             case 'state:offline':
@@ -30,20 +27,14 @@ const MopidyMiddleware = (function(){
                 break;
 
             case 'event:tracklistChanged':
-                instruct( ws, store, 'tracklist.getTlTracks' )
-                    .then( currentTlTrack => {
-                        store.dispatch({ type: 'MOPIDY_HIGHLIGHT_CURRENT_TLTRACK', data: currentTlTrack })
-                    });
+                instruct( ws, store, 'tracklist.getTlTracks' );
                 break;
 
             //case 'event:trackPlaybackEnded':
             case 'event:playbackStateChanged':
             case 'event:trackPlaybackStarted':
                 instruct( ws, store, 'playback.getState' );
-                instruct( ws, store, 'playback.getCurrentTlTrack' )
-                    .then( currentTlTrack => {
-                        store.dispatch({ type: 'MOPIDY_HIGHLIGHT_CURRENT_TLTRACK', data: currentTlTrack })
-                    });
+                instruct( ws, store, 'playback.getCurrentTlTrack' );
                 break;
 
             case 'event:volumeChanged':

src/js/views/Queue.js

@@ -34,6 +34,7 @@ class Queue extends React.Component{
 		if( this.props.mopidy && this.props.mopidy.tracks ){
 			return (
 				<TrackList
+					type="tltrack"
 					tracks={this.props.mopidy.tracks} 
 					removeTracks={ tracks => this.removeTracks( tracks ) }
 					playTracks={ null }