TlTrack borked

src/js/components/Track.js

@@ -178,8 +178,7 @@ export default class Track extends React.Component{
 			)
 			track_columns.push(
 				<span className="col duration" key="duration">
-					{track.duration_ms ? <Dater type="length" data={track.duration_ms} /> : null}
+					{track.duration ? <Dater type="length" data={track.duration} /> : null}
-					{track.length ? <Dater type="length" data={track.length} /> : null}
 				</span>
 			)
 

src/js/helpers.js

@@ -166,24 +166,68 @@ export let getTrackIcon = function(current_track = false, core = false){
 
 
 /**
- * Get a track's icon
+ * Format tracks into our universal format
- * @param track object
+ *
- * @return string
+ * @param tracks = array
+ * @return array
  **/
-export let flattenTracks = function(tracks){
+export let formatTracks = function(tracks){
-    var flattened = []
+
-    for(var i = 0; i < tracks.length; i++){
+	// Handle single recoreds
-        flattened.push(Object.assign(
+	var singular = false;
-            {},
+	if (tracks.constructor !== Array){
-            tracks[i].track,
+		tracks = [tracks];
-            {
+		singular = true;
-                added_by: tracks[i].added_by,
+	}
-                added_at: tracks[i].added_at
+
-            }
+    var formatted = [];
-        ))
+    for (var i = 0; i < tracks.length; i++){
+
+    	// Nested track object (eg in spotify playlist)
+    	if (tracks[i].track){
+    		var track = Object.assign({}, tracks[i].track);
+
+    		// Copy supporting values
+    		if (tracks[i].added_by){
+    			track.added_by = tracks[i].added_by;
+    		}
+    		if (tracks[i].added_at){
+    			track.added_at = tracks[i].added_at;
+    		}
+    		if (tracks[i].tlid){
+    			track.tlid = tracks[i].tlid;
+    		}
+
+    	} else {
+    		var track = Object.assign({}, tracks[i]);
+    	}
+
+    	if (track.duration_ms){
+    		track.duration = track.duration_ms;
+    	} else if (track.length){
+    		track.duration = track.length;
+    	}
+
+        if (track.track_no){
+        	track.track_number = track.track_no;
+        }
+
+        if (track.disc_no){
+        	track.disc_number = track.disc_no;
+        }
+
+        if (track.release_date){
+        	track.date = track.release_date;
+        }
+
+        formatted.push(track);
     }
 
-    return flattened
+    if (singular){
+    	return formatted[0];
+    } else {
+    	return formatted;
+    }
 }
 
 

src/js/services/core/reducer.js

@@ -15,9 +15,9 @@ export default function reducer(core = {}, action){
             if (!action.data ) return core
 
             var tracklist = []
-            for(var i = 0; i < action.data.length; i++){
+            for (var i = 0; i < action.data.length; i++){
 
-                var tltrack = action.data[i]
+                var tltrack = helpers.formatTracks(action.data[i]);
 
                 // load our metadata (if we have any for that tlid)
                 if (core.queue_metadata !== undefined && core.queue_metadata['tlid_'+tltrack.tlid] !== undefined){
@@ -34,9 +34,11 @@ export default function reducer(core = {}, action){
                         tlid: tltrack.tlid,
                         playing: (core.current_track && tltrack.tlid == core.current_track.tlid )
                     })
-                tracklist.push(track )
+                tracklist.push(track)
             }
 
+            tracklist = helpers.formatTracks(tracklist);
+
             return Object.assign({}, core, { current_tracklist: tracklist });
 
         case 'MOPIDY_CURRENTTLTRACK':
@@ -70,18 +72,18 @@ export default function reducer(core = {}, action){
 
             var tracks = Object.assign({}, core.tracks)
             if (tracks[action.key]){
-                var track = Object.assign({}, tracks[action.key], action.track)
+                var track = Object.assign(
+                    {}, 
+                    tracks[action.key], 
+                    helpers.formatTracks(action.track)
+                );
             } else {
-                var track = Object.assign({}, action.track)
+                var track = Object.assign(
+                    {},
+                    helpers.formatTracks(action.track)
+                );
             }
 
-            // Standardise components
-            if (!track.track_number && track.track_no) track.track_number = track.track_no;
-            if (!track.disc_number && track.disc_no) track.disc_number = track.disc_no;
-            if (!track.duration && track.duration_ms) track.duration = track.duration_ms;
-            if (!track.duration && track.length) track.duration = track.length;
-            if (!track.date && track.release_date) track.date = track.release_date;
-
             tracks[action.key] = track
             return Object.assign({}, core, { tracks: tracks });
 
@@ -90,10 +92,14 @@ export default function reducer(core = {}, action){
 
             for (var i = 0; i < action.tracks.length; i++){
                 var track = action.tracks[i]
-                if (typeof(tracks[track.uri]) !== 'undefined'){
+                if (tracks[track.uri] !== undefined){
-                    track = Object.assign({}, tracks[track.uri], track)
+                    track = Object.assign(
+                        {}, 
+                        tracks[track.uri], 
+                        track
+                    );
                 }
-                tracks[track.uri] = track
+                tracks[track.uri] = helpers.formatTracks(track);
             }
 
             return Object.assign({}, core, { tracks: tracks });
@@ -191,7 +197,9 @@ export default function reducer(core = {}, action){
                 var album = Object.assign({}, action.album)
             }
 
+            album.tracks = helpers.formatTracks(album.tracks);
             albums[action.key] = album
+
             return Object.assign({}, core, { albums: albums });
 
         case 'ALBUMS_LOADED':
@@ -202,6 +210,8 @@ export default function reducer(core = {}, action){
                 if (albums[album.uri]){
                     album = Object.assign({}, albums[album.uri], album)
                 }
+
+                album.tracks = helpers.formatTracks(album.tracks);
                 albums[album.uri] = album
             }
 
@@ -344,7 +354,7 @@ export default function reducer(core = {}, action){
                     existing_playlist, 
                     action.playlist,
                     {
-                        tracks: tracks
+                        tracks: helpers.formatTracks(tracks)
                     }
                 )
             } else {
@@ -393,7 +403,7 @@ export default function reducer(core = {}, action){
                         existing_playlist,
                         loaded_playlist,
                         {
-                            tracks: tracks
+                            tracks: helpers.formatTracks(tracks)
                         }
                     )
 
@@ -412,7 +422,7 @@ export default function reducer(core = {}, action){
                 {}, 
                 playlists[action.key],
                 {
-                    tracks: [...playlists[action.key].tracks, ...helpers.flattenTracks(action.data.items)],
+                    tracks: [...playlists[action.key].tracks, ...helpers.formatTracks(action.data.items)],
                     tracks_more: action.data.next,
                     tracks_total: action.data.total
                 }
@@ -437,7 +447,7 @@ export default function reducer(core = {}, action){
 
         case 'PLAYLIST_TRACKS':
             var playlists = Object.assign([], core.playlists)
-            var playlist = Object.assign({}, playlists[action.key], { tracks: action.tracks })
+            var playlist = Object.assign({}, playlists[action.key], { tracks: helpers.formatTracks(action.tracks) })
 
             playlists[action.key] = playlist
             return Object.assign({}, core, { playlists: playlists });
@@ -552,7 +562,7 @@ export default function reducer(core = {}, action){
             } else {
                 var tracks = []
             }
-            if (action.tracks) tracks = [...tracks, ...action.tracks]
+            if (action.tracks) tracks = [...tracks, ...helpers.formatTracks(action.tracks)]
 
             // more tracks
             if (typeof(action.tracks_more) !== 'undefined') var tracks_more = action.tracks_more

src/js/services/spotify/actions.js

@@ -302,6 +302,7 @@ export function getTrack(uri){
                             images: response.album.images
                         }
                     )
+
                     dispatch({
                         type: 'TRACK_LOADED',
                         key: uri,
@@ -395,7 +396,7 @@ export function getFeaturedPlaylists(){
                 },
                 error => {
                     dispatch(coreActions.handleException(
-                        'Could not load featured tracks',
+                        'Could not load featured playlists',
                         error
                     ));
                 }
@@ -1470,7 +1471,7 @@ export function getPlaylist(uri){
                     response,
                     {
                         can_edit: (getState().spotify.me && response.owner.id == getState().spotify.me.id),
-                        tracks: helpers.flattenTracks(response.tracks.items),
+                        tracks: response.tracks.items,
                         tracks_more: response.tracks.next,
                         tracks_total: response.tracks.total,
                         description: description

src/js/views/Track.js

@@ -100,7 +100,16 @@ class Track extends React.Component{
 
 	renderLyricsSelector(){
 		if (!this.props.track.lyrics_results){
-			return null;
+			return (
+				<div className="field lyrics-selector">
+					<div className="input">
+						<input type="text" disabled="disabled" value="Loading..." />
+						<div className="description">
+							Switch to another lyrics seach result
+						</div>
+					</div>
+				</div>
+			);
 		}
 
 		return (
@@ -139,15 +148,7 @@ class Track extends React.Component{
 					</div>
 				</div>
 			);
-		} else if (!this.props.track.lyrics){
+		} else if (this.props.track.lyrics){
-			return (
-				<div className="lyrics">
-					<div className="content">
-						<em className="grey-text">No lyrics available</em>
-					</div>
-				</div>
-			)
-		} else {
 			return (
 				<div className="lyrics">
 					<div className="content" dangerouslySetInnerHTML={{__html: this.props.track.lyrics}}></div>
@@ -156,6 +157,8 @@ class Track extends React.Component{
 					</div>
 				</div>
 			)
+		} else {
+			return null;
 		}
 	}
 

src/scss/global/_forms.scss

@@ -26,6 +26,10 @@ select {
 	&:active {
 		background: rgba(255,255,255,0.2);
 	}
+
+	&:disabled {
+		opacity: 0.5;
+	}
 }
 
 select {