Losing my mind here on getting the image of a playlist of a given set of tracks.
I just can't get it to work.
Here's my code.
I included two playlists, one that is made of a given set of tracks and one that actually exists.
What am I'm doing wrong with the first one? Am I even creating the temporary playlist correctly?
require([
'$api/models',
'$views/image#Image',
'$views/list#List'
], function(models, Image, List) {
'use strict';
var image, trackUris, tracks = [], customPlaylist, customPlaylistList;
// list of track uris
trackUris = [
'spotify:track:0jakfggA0WkYpkAXni6pts',
'spotify:track:2g1EMRbn6So6zGTdwNyySf',
'spotify:track:4kNfh9In8hjuuERSZhwTTx',
'spotify:track:1JHUxxd77M4ViaqJZfBdl0',
'spotify:track:6x3db7BbBjDYZH2ZAcvYyC',
'spotify:track:6czyeVTQtHYPnZgXE6op0I',
'spotify:track:51Vyh1xfCD27SneoG7NAhb'
];
// get track objects from uris
for (var i = 0; i < trackUris.length; i++) {
tracks.push(models.Track.fromURI(trackUris[i]));
}
// create temporary playlist
var title = 'tmp_' + Date.now();
var tmp = models.Playlist.createTemporary(title).done(function(playlist){
// get tracks collection and add tracks to it
playlist.load(['tracks']).done(function(){
for (var i = 0; i < tracks.length; i++) {
playlist.tracks.add(tracks[i]);
}
});
customPlaylist = playlist;
}).fail(function() {
console.log("Failed");
});
// create image of playlist
image = Image.forPlaylist(customPlaylist, {width: 200, height: 200, player: true});
document.getElementById('customPlaylistCover').appendChild(image.node);
// create a list view for the playlist
customPlaylistList = List.forPlaylist(customPlaylist);
document.getElementById('customPlaylistList').appendChild(customPlaylistList.node);
customPlaylistList.init();
// get all the above for an existing playlist
var playlist = models.Playlist.fromURI('spotify:user:116690321:playlist:6l3dvYJaGrX5mqkNntbyLx');
image = Image.forPlaylist(playlist, {width: 200, height: 200, player: true});
document.getElementById('playlistCover').appendChild(image.node);
var playlistList = List.forPlaylist(playlist);
document.getElementById('playlistList').appendChild(playlistList.node);
playlistList.init();
});