Is it possible to add more elements (or otherwise alter) to the entries in a standardized “list” view in a spotify app?

Question

So I'm using the "standardized track listing" in this stackoverflow question, and which the guidelines instruct developers to use.

I can easily remove fields from each entry in the track listing with css (just display:none, etc), and likewise alter the general appearance. However, I would like to add another field to each entry.

As an example, see the "Top Lists" feature in your spotify client (for me this is the second item under APPS). These lists look mostly like normal playlists (and of course, operate as such too), but each element has a number next to it, and the format is a little bit different.

Would it be possible to do this in my own application, without totally reinventing the wheel?

I can do something like: $(".sp-list a").each(function(){$(this).append("foo")}) but that will only affect the currently visible tracks(ish). If part of the playlist scrolls out of view, those tracks are not affected. Also, if Spotify decides to redraw any part of the list, which does happen (for example if I scroll the affected items out of view and play a track), I lose the change. So this is not especially viable/clean.

Thoughts?

Answer 1

As I were on a meeting with Spotify earlier today I asked them about this question. There is no option to add elements to the list.node at this moment but they said they will look into the "problem".

Until then you will have to add your elements outside the list.node, either you could put it on top (together with position: absolute;) or you could put it before or after (with float) if your element should be the first or last column.

Answer 2

By now, it is (kind of) possible; not very nicely but still. So just for reference:

Deleting fields: Editing Time Field in a Spotify App Playlist

Adding HTML:

//monkey-patch the views.Tracks class
var myTrackView = function (track) {
  views.Track.apply(this, arguments);
  this.node.appendChild($('<span>hi</span>')[0]);
}
myTrackView.prototype = views.Track.prototype;

//now tell the list to use this new class
var list = new views.List(playlist, function (track) {return new myTrackView(track)})
$('#playlist-placeholder').html(list.node)

You see the hi now appear on each row, and behave like any other part of the playlist.

Now, to save the extra information I want to show, I just add it to the track.data object, so that I can get to it from myTrackView.