Spotify App API: tab pages, playlist UI refresh

Question

I am building a Spotify App with four tab pages. The content of all tabs are loaded on initial load of the app. Each tab contain one or more playlists that are being populated with data from 3rd party web apis that are resolved into spotify tracks.

The selected tab works fine. the playlist show up a expected. The problem is with tabs that are initially hidden but later selected. Here the playlist looks like this when selected:

not fully rendered playlist

Looking in the Inspector I can see that the content has not yet rendered:

<div class="sp-list sp-light" tabindex="0">
 <div style="height: 100px; ">
 </div>
</div>

When I do a resize of the Spotify desktop app, the playlist is finally rendered:

rendered playlist after resize

To populate the playlist I use the 'standard' spotify models and views:

var playlist = new views.List(tempPlaylist);
//where tempPlaylist is a new models.Playlist();
//that has been populated with tempPlaylist.add(search.tracks[0].uri);

playerPlaylistDiv.append(playlist.node);

I am only seing this issue when using tabs. When displaying all content on one long page all playlists are fully rendered. I wonder if it has to do with timing: that I am hiding content that has not yet fully rendered? Any thoughts much appreciated.

I handle tab changes this way:

/* Handle URI arguments */
models.application.observe(models.EVENT.ARGUMENTSCHANGED, tabs);

/* Handle tab changes */
function tabs() {
  var args = models.application.arguments;
  // Hide all sections
  $('section').hide();

  // Show current section   
  $("#" + args[0]).show();
}

FYI I am using the Spotify preview 0.8.10.3.

Answer 1

I had the same problem (see Spotify List objects created from localStorage data come up blank) and fixed it by doing the hide()/show() of divs before any processing. Previously I was constructing the playlist and then show()ing the div after which led to a blank list.

Answer 2

The solution I've found is this:

I arrowed it down to being an issue with showing/hiding the content since showing the full content without tabs never causes issues. So instead of using .show()/.hide() I now hide and show the content by setting the height of the sections to 100%/0:

// Hide all other sections
$("section#" + args).siblings().height('0');

// Show current section
$("section#" + args).height('100%');

Not sure why this works, but it does (for me at least).

Answer 3

I think I've actually managed to solve this and I think it's bulletproof.

Basically I was trying to solve this by trying to convince the API that it needed to redraw the playlist by hiding things/scrolling things/moving things which worked occasionally but never consistently. It never occurred to me to change the playlist itself. Or at least make the API think the playlist has changed.

You can do so by firing an event on the Playlist object.

var models = sp.require('$api/models');

...

// playlist is your Playlist object. Usually retrieved from models.Playlist.fromURI
playlist.notify(models.EVENT.CHANGE, playlist);

These are just standard Spotify functions and the list updates because it thinks something has changed in the playlist. Hope this helps someone!

Answer 4

I am not sure this is the same thing, but I ran into similar issues trying to create tracklistings from playlist-uris on the fly; also couldn't track it down any closer (the containing DOM was certainly rendered and ready); and it only happened on certain playlists, never e.g. on albums.

I was able to circumentvent this problem by "cloning" playlist - obviously there's a "performance" hit ...

// assuming uri is the playlist's URI
models.Playlist.fromURI( uri, function(originalPlaylist) {
  var tempPlaylist = new model.Playlist(); 
  $.each(originalPlaylist.tracks, function(t) { tempPlaylist.add(t); });
  var tracklist = new views.List(tempPlaylist);
  // etc...
} 

I am not sure what's on here, but maybe that helps you along :)

PS. Also - make sure you have a doctype-declaration in index.html (), the spotify client does some weird things if you don't.