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,

src/scss/components/_icon.scss

@@ -45,4 +45,78 @@
 		@include spin(1s);
 		padding: 0 0.32em !important;
 	}
+
+	&--css {
+		&.icon--playing {
+			display: inline-block;
+			position: relative;
+			margin-left: 8px;
+			width: 16px;
+			height: 1em;
+
+			@keyframes playing_bar {
+				0% {
+					height: 0%;
+				}
+				12.5% {
+					height: 75%;
+				}
+				25% {
+					height: 100%;
+				}
+				37.5% {
+					height: 10%;
+				}
+				50% {
+					height: 40%;
+				}
+				62.5% {
+					height: 50%;
+				}
+				75% {
+					height: 30%;
+				}
+				87.5% {
+					height: 55%;
+				}
+				100% {
+					height: 0%;
+				}
+			}
+
+			span {
+				@include animate();
+				display: block;
+				position: absolute;
+				bottom: 0;
+				width: 4px;
+				height: 100%;
+				background: colour(turquoise);
+				animation-name: playing_bar;
+				animation-iteration-count: infinite;
+
+				&:nth-child(1){
+					left: 0;
+    				animation-duration: 2s;
+				}
+
+				&:nth-child(2){
+					left: 6px;
+    				animation-duration: 4s;
+				}
+
+				&:nth-child(3){
+					left: 12px;
+    				animation-duration: 1s;
+				}
+			}
+
+			&.js--stopped,
+			&.js--paused {
+				span {
+					animation-play-state: paused;
+				}
+			}
+		}
+	}
 }

src/scss/components/_lists.scss

@@ -38,12 +38,22 @@
 			border-top: 1px solid rgba(128,128,128,0.05);
 		}
 
-		:root .notouch:not(.dragging) &:not(.no-click):hover {
-			background: rgba(255,255,255,0.03);
-			cursor: pointer;
+		:root .notouch:not(.dragging) &:not(.no-click) {
+			&:hover {
+				background: rgba(255,255,255,0.03);
+				cursor: pointer;
 
-			.light-theme & {
-				background: rgba(0,0,0,0.03);
+				.light-theme & {
+					background: rgba(0,0,0,0.03);
+				}
+			}
+
+			&:active,
+			&:focus {
+				@include noanimate();
+				-moz-transform: scale(0.997);
+				-webkit-transform: scale(0.997);
+				transform: scale(0.997);
 			}
 		}
 
@@ -88,6 +98,15 @@
 					&__item {
 						&--name {
 							color: colour(turquoise);
+
+							.icon {
+								padding-left: 5px;
+								font-size: 12px;
+
+								@include responsive($bp_medium){
+									display: none;
+								}
+							}
 						}
 					}
 				}
@@ -111,7 +130,7 @@
 		}
 
 		&__column {
-			padding: 22px 0 18px;
+			padding: 24px 0 16px;
 
 			&--name {
 				padding: 14px 0 10px;
@@ -174,11 +193,11 @@
 		}
 	}
 
-	&.track-list {
+	&--tracks {
 		.list__item {
 			cursor: pointer;
 
-			:root .dragging &--hover,
+			:root .dragging &:hover,
 			&.touch-drag-hover {
 				&:before {
 					opacity: 1;
@@ -211,7 +230,7 @@
 		}
 	}
 
-	&.related-artist-list {
+	&--related-artists {
 		padding-bottom: 20px;
 		cursor: pointer;
 		
@@ -244,13 +263,6 @@
 		}
 	}
 
-	&.library-local-view,
-	&.library-local-directory-list {
-		.list__item {
-			cursor: pointer;
-		}
-	}
-
 	@include responsive($bp_medium){
 
 		&__item {

src/scss/components/_parallax.scss

@@ -15,10 +15,10 @@ $parallax: 'parallax';
 
 	&__inner {
 		position: absolute;
-		top: 0;
-		right: 0;
-		left: 0;
-		bottom: 0;
+		top: -1px;
+		right: -1px;
+		left: -1px;
+		bottom: -1px;
 	}
 
 	&__image {