Question

I’m trying to create a custom view for a spotify playlist. right now I create a playlist view in my app using the following:

var playlist = models.Playlist.fromURI(myPlaylist);
var playerView = new views.Player();
playerView.track = playlist.get(0);
playerView.context = playlist;
var cover = playlist.get(0).data.album.cover;
$('#grid').append(playerView.node);

The default spotify playlist view has the album compilation for the art, and clicking on the playlist also provides direct access to the playlist. I’d like to change this so that I can set the playlist art to the cover variable above (or other custom image), and restrict the hyperink so that it doesn’t access the playlist but only initiates play/pause.

I tried to edit the node innerHTML directly but then the playlist doesn’t actually begin playing either. Is there an easy way to either edit the default spotify view or is there available sample code for creating a custom view?

Answer 1

If it’s just in the app itself, you can override CSS and HTML of the player. Here is how I did :

First in the CSS :

.sp-image-loaded { opacity: 0; }

In the HTML :

player.node.firstChild.style.backgroundImage = "url(myimage.jpg)";

Hope, it’s working for you.