long-tail.html

<script src="../jquery/dist/jquery.min.js"></script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../core-ajax/core-ajax.html">

<polymer-element name="long-tail" attributes="artist, size">

  <template>
    <div id="loading" hidden?="{{!loading}}">Loading...</div>
    <iframe hidden?="{{loading}}" src="https://embed.spotify.com/?uri=spotify:trackset::{{tracks}}" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>
  </template>

  <script>
  Polymer({
    created: function() {
      this.api_root = 'https://api.spotify.com/v1/';
      this.loading = false;
    },
    ready: function() {
      if(this.artist) {
        this.loading = true;
        var self = this;
        $.ajax(this.api_root + 'artists/' + this.artist + '/albums?album_type=album&limit=50').success(function(data) {
          return self.getTracks(data, self.size);
        })
      }
    },
    getTracks: function(data, size) {
      var size = size || 50;
      this.tracks = [];
      this.albums = [];
      this.alltracks = [];
      var self = this;
      // Get all tracks of all albums (w/ 50-items limit)
      $.each(data.items, function(i, album) { 
        self.albums.push($.ajax(self.api_root + 'albums/' + album.id + '/tracks').success(function(data) {
          var album_tracks = $.map(data.items, function(track) {
            return track.id
          }).join(',');
          self.tracks.push($.ajax(self.api_root + 'tracks/?ids=' + album_tracks).success(function(data) {
            $.each(data.tracks, function(i, track) {
              // Popularity=0 doesn't seem always OK
              if(track.popularity) {
                self.alltracks = self.alltracks.concat(track);
              }
            })
          }));
        }));
      });
      // Sort, limit and display when all ajax calls are done
      $.when.apply($, self.albums).done(function() {
        $.when.apply($, self.tracks).done(function() {
          self.alltracks.sort(function(a, b) {
            return a.popularity - b.popularity
          });
          var max = Math.min(size, self.alltracks.length);
          self.tracks = $.map(self.alltracks.slice(0, max), function(track) {
            return track.id;
          }).join();
          self.loading = false;
        });
      });
    }
  });
  </script>

</polymer-element>