diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue index 9f17fc8fcd3bc46db8417799ef0afff6d1c738b9..e010f151e8af4cfa27049632284ea79555d7f630 100644 --- a/front/src/components/audio/Player.vue +++ b/front/src/components/audio/Player.vue @@ -221,6 +221,7 @@ import { mapState, mapGetters, mapActions } from "vuex" import GlobalEvents from "@/components/utils/global-events" import ColorThief from "@/vendor/color-thief" import { Howl } from "howler" +import $ from 'jquery' import AudioTrack from "@/components/audio/Track" import TrackFavoriteIcon from "@/components/favorites/TrackFavoriteIcon" @@ -310,6 +311,8 @@ export default { this.$refs.currentAudio.setCurrentTime(time) }, updateBackground() { + // delete existing canvas, if any + $('canvas.color-thief').remove() if (!this.currentTrack.album.cover) { this.ambiantColors = this.defaultAmbiantColors return diff --git a/front/src/style/_main.scss b/front/src/style/_main.scss index 0c165c76f1ccfd99a090c02ae3cb0bfd08ad3e94..d6c5ff61cd107d0d6dea5920f15ad1c253e8ee0f 100644 --- a/front/src/style/_main.scss +++ b/front/src/style/_main.scss @@ -263,3 +263,7 @@ button.reset { label .tooltip { margin-left: 1em; } + +canvas.color-thief { + display: none; +} diff --git a/front/src/vendor/color-thief.js b/front/src/vendor/color-thief.js index 0acb7c13ae9e396fca00c5b9cc8040267e156c16..ed0612f847a5f8f7e3d4ec14b46ed649a3c9dba4 100644 --- a/front/src/vendor/color-thief.js +++ b/front/src/vendor/color-thief.js @@ -27,6 +27,7 @@ */ var CanvasImage = function (image) { this.canvas = document.createElement('canvas'); + this.canvas.className = "color-thief hidden"; this.context = this.canvas.getContext('2d'); document.body.appendChild(this.canvas);