Adding support for song artwork

This commit is contained in:
Egor 2015-10-14 09:40:10 -07:00
parent 3f3466aa6f
commit e77be11dec
4 changed files with 48 additions and 17 deletions

View file

@ -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']
});
}
}

View file

@ -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}}

View file

@ -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 {

View file

@ -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",