diff --git a/src/js/components/Track.js b/src/js/components/Track.js
index b9c298e9..1d238495 100755
--- a/src/js/components/Track.js
+++ b/src/js/components/Track.js
@@ -178,8 +178,7 @@ export default class Track extends React.Component{
)
track_columns.push(
- {track.duration_ms ? : null}
- {track.length ? : null}
+ {track.duration ? : null}
)
diff --git a/src/js/helpers.js b/src/js/helpers.js
index 72aa8448..6e4b0f8d 100755
--- a/src/js/helpers.js
+++ b/src/js/helpers.js
@@ -166,24 +166,68 @@ export let getTrackIcon = function(current_track = false, core = false){
/**
- * Get a track's icon
- * @param track object
- * @return string
+ * Format tracks into our universal format
+ *
+ * @param tracks = array
+ * @return array
**/
-export let flattenTracks = function(tracks){
- var flattened = []
- for(var i = 0; i < tracks.length; i++){
- flattened.push(Object.assign(
- {},
- tracks[i].track,
- {
- added_by: tracks[i].added_by,
- added_at: tracks[i].added_at
- }
- ))
+export let formatTracks = function(tracks){
+
+ // Handle single recoreds
+ var singular = false;
+ if (tracks.constructor !== Array){
+ tracks = [tracks];
+ singular = true;
+ }
+
+ 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;
+ }
}
diff --git a/src/js/services/core/reducer.js b/src/js/services/core/reducer.js
index 6a51fd7f..68e34366 100755
--- a/src/js/services/core/reducer.js
+++ b/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'){
- track = Object.assign({}, tracks[track.uri], track)
+ if (tracks[track.uri] !== undefined){
+ 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
diff --git a/src/js/services/spotify/actions.js b/src/js/services/spotify/actions.js
index d52baadb..6cd12d55 100755
--- a/src/js/services/spotify/actions.js
+++ b/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
diff --git a/src/js/views/Track.js b/src/js/views/Track.js
index 31eb1997..de128724 100755
--- a/src/js/views/Track.js
+++ b/src/js/views/Track.js
@@ -100,7 +100,16 @@ class Track extends React.Component{
renderLyricsSelector(){
if (!this.props.track.lyrics_results){
- return null;
+ return (
+
+
+
+
+ Switch to another lyrics seach result
+
+
+
+ );
}
return (
@@ -139,15 +148,7 @@ class Track extends React.Component{
);
- } else if (!this.props.track.lyrics){
- return (
-
-
- No lyrics available
-
-
- )
- } else {
+ } else if (this.props.track.lyrics){
return (
@@ -156,6 +157,8 @@ class Track extends React.Component{
)
+ } else {
+ return null;
}
}
diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss
index a2aa3edc..26d69c5f 100755
--- a/src/scss/global/_forms.scss
+++ b/src/scss/global/_forms.scss
@@ -26,6 +26,10 @@ select {
&:active {
background: rgba(255,255,255,0.2);
}
+
+ &:disabled {
+ opacity: 0.5;
+ }
}
select {