Timer on full player

mopidy_iris/static/app.css

@@ -4048,14 +4048,14 @@ main header h1 {
 
 .queue-view .player .artwork,
 .queue-view .player .controls,
-.queue-view .player .slider {
+.queue-view .player .progress {
   display: block;
   max-width: 400px;
   margin: 0 auto;
 }
 
 .queue-view .player .controls {
-  padding: 20px 0;
+  padding: 20px 0 10px;
 }
 
 .queue-view .player .controls a {
@@ -4071,6 +4071,10 @@ main header h1 {
   font-weight: 700;
 }
 
+.queue-view .player .slider {
+  margin-top: 0;
+}
+
 .queue-view .player .slider .track {
   background: rgba(0, 0, 0, 0.2);
 }

src/js/components/FullPlayer.js

@@ -8,6 +8,7 @@ import FontAwesome from 'react-fontawesome'
 import ProgressSlider from './ProgressSlider'
 import ArtistSentence from './ArtistSentence'
 import Thumbnail from './Thumbnail'
+import Dater from './Dater'
 
 import * as mopidyActions from '../services/mopidy/actions'
 
@@ -99,9 +100,14 @@ class FullPlayer extends React.Component{
 						{ this.renderRandomButton() }
 						{ this.renderRepeatButton() }
 					</div>
+
 				</div>
 
-				<ProgressSlider />
+				<div className="progress">
+					<ProgressSlider />	
+					<span className="grey-text pull-left">{ this.props.time_position ? <Dater type="length" data={this.props.time_position} /> : '-' }</span>
+					<span className="pull-right">{ this.props.current_track ? <Dater type="length" data={this.props.current_track.length} /> : '-' }</span>
+				</div>
 
 			</div>
 		);
@@ -119,6 +125,7 @@ const mapStateToProps = (state, ownProps) => {
 	return {
 		current_track: state.ui.current_track,
 		play_state: state.mopidy.play_state,
+		time_position: state.mopidy.time_position,
 		consume: state.mopidy.consume,
 		repeat: state.mopidy.repeat,
 		random: state.mopidy.random

src/js/services/mopidy/middleware.js

@@ -37,6 +37,7 @@ const MopidyMiddleware = (function(){
 
             case 'event:playbackStateChanged':
                 instruct( ws, store, 'playback.getState' );
+                instruct( ws, store, 'playback.getTimePosition' );
                 break;
 
             case 'event:seeked':

src/js/services/spotify/actions.js

@@ -300,25 +300,26 @@ export function getAlbum( uri ){
         sendRequest( dispatch, getState, 'albums/'+ helpers.getFromUri('albumid', uri) )
             .then( response => {
 
+                var album = response
+
                 // now get all the artists for this album (full objects)
-                var artist_uris = [];
-                for( var i = 0; i < response.artists.length; i++ ){
-                    artist_uris.push( response.artists[i].uri )
-                }
-                dispatch(getArtists(artist_uris));
-
-                // inject the parent album object into each track for consistent track objects
-                for( var i = 0; i < response.tracks.items.length; i++ ){
-                    response.tracks.items[i].album = {
-                        name: response.name,
-                        uri: response.uri
-                    }
+                // we do this to get the artist artwork
+                var artist_ids = [];
+                for( var i = 0; i < album.artists.length; i++ ){
+                    artist_ids.push( helpers.getFromUri( 'artistid', album.artists[i].uri ) )
                 }
 
-                dispatch({
-                    type: 'SPOTIFY_ALBUM_LOADED',
-                    data: response
-                });
+                sendRequest( dispatch, getState, 'artists/?ids='+artist_ids )
+                    .then( response => {
+                        var artists = response.artists
+
+                        // finally dispatch the loaded action
+                        dispatch({
+                            type: 'SPOTIFY_ALBUM_LOADED',
+                            data: Object.assign({}, album, {artists: artists})
+                        });
+                    });
+
             });
     }
 }

src/scss/views/_queue.scss

@@ -12,14 +12,14 @@
 
 		.artwork,
 		.controls,
-		.slider {
+		.progress {
 			display: block;
 			max-width: 400px;
 			margin: 0 auto;
 		}
 
 		.controls {
-			padding: 20px 0;
+			padding: 20px 0 10px;
 			a {
 				font-size: 18px;
 			}
@@ -35,6 +35,7 @@
 		}
 
 		.slider {
+			margin-top: 0;
 			.track {
 				background: rgba(0,0,0,0.2);
 			}