Spotify api 1.0.0 get image of playlist of given set of tracks

Question

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();

        });

Answer 1

You're not doing anything wrong here. Currently, a placeholder image is shown instead of a mosaic for temporary playlists.

Debugging the code (it helps if it isn't minified) will show you that a placeholder image (gray background with a note) is set as the node's image but stays hidden until a time limit has passed (less than half a second). During this time, the image property from the playlist is being loaded. If the image is loaded successfully, the placeholder is replaced or not shown at all if the time limit hasn't passed. The code below attempts to load the image property from a temporary playlist, which fails, thus showing the placeholder instead.

require(['$api/models', '$views/image#Image'], function(models, Image) {
    models.Playlist.createTemporary("Temporary Playlist").done(function(playlist) {
        playlist.load("tracks").done(function(playlist) {

            // Adding some random tracks to the temporary playlist
            playlist.tracks.add(models.Track.fromURI("spotify:track:2YtDzuAcSVk2j4UFXON5iG"));
            playlist.tracks.add(models.Track.fromURI("spotify:track:6xzCQrXrn0uOOKBQZK1zsF"));
            playlist.tracks.add(models.Track.fromURI("spotify:track:0m1sOrAltrx0oQlqKVUf75"));
            playlist.tracks.add(models.Track.fromURI("spotify:track:40RFNnTV6CAounCsx56TZ2"));

            // Checking if the playlist image can be loaded.
            // This code holds no purpose other than showing that 
            // loading an image from a temporary playlist fails
            playlist.load("image").done(function(playlistWithImage) {
                console.log("Loaded image.");
            }).fail(function(playlistWithImage) {
                console.log("Failed to load image.");
            })

            // Appending the playable node to the body tag
            var image = Image.forPlaylist(playlist, {width: 100, height: 100, player : true });
            document.body.appendChild(image.node);
        });
    });
});

I don't know if this is something that is considered in need of fixing, but it's the way it is.