From e77be11dec86a2540ab12ce94a73a3b7287acb0b Mon Sep 17 00:00:00 2001
From: Egor <hoboman313@gmail.com>
Date: Wed, 14 Oct 2015 09:40:10 -0700
Subject: [PATCH] Adding support for song artwork

---
 app/pods/components/music-tab/component.js | 27 ++++++++++++++++---
 app/pods/components/music-tab/template.hbs | 30 +++++++++++++---------
 app/styles/app.scss                        |  6 +++++
 config/environment.js                      |  2 +-
 4 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/app/pods/components/music-tab/component.js b/app/pods/components/music-tab/component.js
index c1a55be..253996d 100644
--- a/app/pods/components/music-tab/component.js
+++ b/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");
-          playQueue.pushObject({filename: this.name.replace(/\.[^/.]+$/, ""), url: URL.createObjectURL(this), artist: tags.artist, title: tags.title });
+          var tags = ID3.getAllTags("local"),
+            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']
             });
           }
         }
diff --git a/app/pods/components/music-tab/template.hbs b/app/pods/components/music-tab/template.hbs
index 6816cab..9b1f6d5 100644
--- a/app/pods/components/music-tab/template.hbs
+++ b/app/pods/components/music-tab/template.hbs
@@ -69,21 +69,27 @@
           {{/if}}
 
           {{#each playQueue as |item index|}}
-            <div
-              class="playlistItem cursorPointer {{if (eq index playQueuePointer) "active"}} {{if dragging "hidden"}}" {{action "goToSong" index true bubbles=false}}>
-              {{#if item.title}}
-                <p>{{item.title}}</p>
-              <div class="songArtist">
-                {{#if item.artistUrl}}
-                    <a href="#" {{action "gotoURL" item.artistUrl bubbles=false}}>{{item.artist}}</a>
+            <div class="playlistItem cursorPointer {{if (eq index playQueuePointer) "active"}} {{if dragging "hidden"}}" {{action "goToSong" index true bubbles=false}}>
+              {{#if item.picture}}
+                <img class="albumArt" src={{item.picture}}>
+              {{/if}}
+
+              <div class="songInfo">
+                {{#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}}
-              {{/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 data-toggle="tooltip" data-placement="bottom auto" data-title="Remove" class="audioRemoveButton cursorPointer bootstrapTooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon icon="close"}}
               </div>
             </div>
           {{/each}}
diff --git a/app/styles/app.scss b/app/styles/app.scss
index acf9cc9..67ded87 100644
--- a/app/styles/app.scss
+++ b/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 {
diff --git a/config/environment.js b/config/environment.js
index 633c7cc..b8bd98d 100644
--- a/config/environment.js
+++ b/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",