Playing animation

src/js/components/Icon.js

@@ -32,6 +32,12 @@ export default class Icon extends React.Component{
 			case 'fontawesome':	
 				return <FontAwesome className={className} type="fontawesome" name={this.props.name} onClick={e => this.handleClick(e)} />;
 
+			case 'css':
+				switch (this.props.name){
+					case 'playing':
+						return <i className={className + " icon--playing"}><span></span><span></span><span></span></i>
+				}
+
 			default:
 				return <i className={className} onClick={e => this.handleClick(e)}>{this.props.name}</i>;
 		}

src/js/components/List.js

@@ -27,6 +27,7 @@ class List extends React.Component{
 		if (e.target.tagName.toLowerCase() !== 'a'){
 			e.preventDefault();
 			hashHistory.push((this.props.link_prefix ? this.props.link_prefix : '') + encodeURIComponent(uri));
+			helpers.scrollTo();
 		}
 	}
 
@@ -36,6 +37,7 @@ class List extends React.Component{
 		if (e.target.tagName.toLowerCase() !== 'a'){
 			e.preventDefault();
 			hashHistory.push((this.props.link_prefix ? this.props.link_prefix : '') + encodeURIComponent(uri));
+			helpers.scrollTo();
 		}
 	}
 

src/js/components/Track.js

@@ -310,13 +310,13 @@ export default class Track extends React.Component{
 							<div className="list__item__column__item--name">
 								{track.name ? track.name : <span className="mid_grey-text">{track.uri}</span>}
 								{track.explicit ? <span className="flag dark">EXPLICIT</span> : null}
-								{track.playing ? <Icon name="equalizer"></Icon> : null}
+								{track.playing ? <Icon className={"js--"+this.props.play_state} name="playing" type="css"></Icon> : null}
 							</div>
 							<ul className="list__item__column__item--details">
 								{track_details}
 							</ul>
 						</div>
-						{track_middle_column ? track_middle_column : null}
+						{track_middle_column ? <div className="list__item__column list__item__column--middle">{track_middle_column}</div> : null}
 				</div>
 			</ErrorBoundary>
 		);

src/js/components/TrackList.js

@@ -410,6 +410,7 @@ class TrackList extends React.Component{
 									context={this.props.context} 
 									can_sort={this.props.context == 'queue' || this.props.context == 'editable-playlist'} 
 									selected={this.props.selected_tracks.includes(track_key)} 
+									play_state={this.props.play_state} 
 									dragger={this.props.dragger} 
 									handleClick={(e) => this.handleClick(e, track_key)}
 									handleDoubleClick={e => this.handleDoubleClick(e, track_key)}
@@ -429,15 +430,9 @@ class TrackList extends React.Component{
 	}
 }
 
-
-/**
- * Export our component
- *
- * We also integrate our global store, using connect()
- **/
-
 const mapStateToProps = (state, ownProps) => {
 	return {
+		play_state: state.mopidy.play_state,
 		slim_mode: state.ui.slim_mode,
 		selected_tracks: state.ui.selected_tracks,
 		dragger: state.ui.dragger,