Adding support for song artwork

app/pods/components/music-tab/component.js

@@ -27,7 +27,14 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
               this.get('notify').alert({html: this.get('scUserNotSupportedHtml')});
             } else if(result.kind === 'track') {
               if(result.streamable === true){
-                this.get('playQueue').pushObject({url: result.stream_url + '?client_id=' + this.get('SC_CLIENT_ID'), fileName: result.title + ' - ' + result.user.username, artist: result.user.username, artistUrl: result.user.permalink_url, title: result.title, artworkUrl: result.artwork_url, fromSoundCloud: true });
+                var picture = null;
+
+                if(result.artwork_url){
+                  picture = result.artwork_url;
+                }
+
+                this.get('playQueue').pushObject({url: result.stream_url + '?client_id=' + this.get('SC_CLIENT_ID'), fileName: result.title + ' - ' + result.user.username, artist: result.user.username, artistUrl: result.user.permalink_url, title: result.title, artworkUrl: result.artwork_url, picture: picture });
+
                 // make sure to init the first song
                 if(this.get('playQueue').length > 0 && this.get('playQueuePointer') === -1){
                   this.send('goToSong', 0, true);
@@ -314,8 +321,19 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
       var self = this,
         playQueue = this.get('playQueue'),
         updatePlayQueue = function(){
-          var tags = ID3.getAllTags("local");
+          var tags = ID3.getAllTags("local"),
-          playQueue.pushObject({filename: this.name.replace(/\.[^/.]+$/, ""), url: URL.createObjectURL(this), artist: tags.artist, title: tags.title });
+            picture = null;
+
+          if(tags.picture){
+            var base64String = "";
+            for (var i = 0; i < tags.picture.data.length; i++) {
+              base64String += String.fromCharCode(tags.picture.data[i]);
+            }
+
+            picture = "data:" + tags.picture.format + ";base64," + window.btoa(base64String);
+          }
+
+          playQueue.pushObject({filename: this.name.replace(/\.[^/.]+$/, ""), url: URL.createObjectURL(this), artist: tags.artist, title: tags.title, picture: picture });
 
           ID3.clearAll();
 
@@ -331,7 +349,8 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
 
           if(file.type.startsWith('audio')) {
             ID3.loadTags("local", updatePlayQueue.bind(file),{
-              dataReader: new FileAPIReader(file)
+              dataReader: new FileAPIReader(file),
+              tags: ['title', 'artist', 'album', 'track', 'picture']
             });
           }
         }

app/pods/components/music-tab/template.hbs

@@ -69,21 +69,27 @@
           {{/if}}
 
           {{#each playQueue as |item index|}}
-            <div
+            <div class="playlistItem cursorPointer {{if (eq index playQueuePointer) "active"}} {{if dragging "hidden"}}" {{action "goToSong" index true bubbles=false}}>
-              class="playlistItem cursorPointer {{if (eq index playQueuePointer) "active"}} {{if dragging "hidden"}}" {{action "goToSong" index true bubbles=false}}>
+              {{#if item.picture}}
-              {{#if item.title}}
+                <img class="albumArt" src={{item.picture}}>
-                <p>{{item.title}}</p>
+              {{/if}}
-              <div class="songArtist">
+
-                {{#if item.artistUrl}}
+              <div class="songInfo">
-                    <a href="#" {{action "gotoURL" item.artistUrl bubbles=false}}>{{item.artist}}</a>
+                {{#if item.title}}
+                  <p>{{item.title}}</p>
+                  <div class="songArtist">
+                  {{#if item.artistUrl}}
+                      <a href="#" {{action "gotoURL" item.artistUrl bubbles=false}}>{{item.artist}}</a>
+                  {{else}}
+                      {{item.artist}}
+                  {{/if}}
+                </div>
                 {{else}}
-                    {{item.artist}}
+                  {{item.filename}}
                 {{/if}}
               </div>
-              {{else}}
+
-                {{item.filename}}
+              <div data-toggle="tooltip" data-placement="bottom auto" data-title="Remove" class="audioRemoveButton cursorPointer bootstrapTooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon icon="close"}}
-              {{/if}}
-              <div data-toggle="tooltip" data-placement="bottom auto" data-title="Remove from playlist" container="body" class="audioRemoveButton cursorPointer bootstrapTooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon icon="close"}}
               </div>
             </div>
           {{/each}}

app/styles/app.scss

@@ -652,6 +652,12 @@ md-switch.md-default-theme.md-checked .md-thumb {
   p {
     margin: 0;
   }
+  .albumArt {
+    height: 60px;
+  }
+  .songInfo {
+    display: inline-block;
+  }
 }
 
 .playlistItem.active {

config/environment.js

@@ -24,7 +24,7 @@ module.exports = function(environment) {
       'script-src': "'self' connect.soundcloud.com",
       'font-src': "'self' fonts.gstatic.com",
       'connect-src': "'self' *",
-      'img-src': "'self' data:",
+      'img-src': "'self' *.sndcdn.com  data:",
       'media-src': "'self' api.soundcloud.com *.sndcdn.com blob:",
       'style-src': "'self' 'unsafe-inline' fonts.googleapis.com",
       'object-src': "'self' connect.soundcloud.com",