diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue index 8faaf670c00a736637be8f9a7b767d6deef6ce82..f074c14e0efe2bb467490a30e45dc01bf39301c7 100644 --- a/front/src/components/audio/Player.vue +++ b/front/src/components/audio/Player.vue @@ -356,7 +356,11 @@ export default { return } let image = this.$refs.cover - this.ambiantColors = ColorThief.prototype.getPalette(image, 4).slice(0, 4) + try { + this.ambiantColors = ColorThief.prototype.getPalette(image, 4).slice(0, 4) + } catch (e) { + console.log('Cannot generate player background from cover image, likely a cross-origin tainted canvas issue') + } }, handleError({ sound, error }) { this.$store.commit("player/isLoadingAudio", false) diff --git a/front/src/components/audio/album/Card.vue b/front/src/components/audio/album/Card.vue index db6e8de6bba8e8ece4f4d761ae1466e9be113435..1012cc578fefb876caa7cbf9049387f90d32e208 100644 --- a/front/src/components/audio/album/Card.vue +++ b/front/src/components/audio/album/Card.vue @@ -20,7 +20,7 @@ <tbody> <tr v-for="track in tracks"> <td class="play-cell"> - <play-button :class="['basic', {orange: isPlaying && track.id === currentTrack.id}, 'icon']" :discrete="true" :track="track"></play-button> + <play-button :class="['basic', {orange: currentTrack && isPlaying && track.id === currentTrack.id}, 'icon']" :discrete="true" :track="track"></play-button> </td> <td class="content-cell" colspan="5"> <track-favorite-icon :track="track"></track-favorite-icon> diff --git a/front/src/components/audio/track/Row.vue b/front/src/components/audio/track/Row.vue index 90d0579603472b18f760c6902fa68309148f756c..624467f211855c73722f12eccf03cc8e4b684492 100644 --- a/front/src/components/audio/track/Row.vue +++ b/front/src/components/audio/track/Row.vue @@ -1,7 +1,7 @@ <template> <tr> <td> - <play-button :class="['basic', {orange: isPlaying && track.id === currentTrack.id}, 'icon']" :discrete="true" :is-playable="playable" :track="track"></play-button> + <play-button :class="['basic', {orange: currentTrack && isPlaying && track.id === currentTrack.id}, 'icon']" :discrete="true" :is-playable="playable" :track="track"></play-button> </td> <td> <img class="ui mini image" v-if="track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.small_square_crop)">