播放器主题色根据专辑封面图片提取

src/views/api/aplayer/vue-aplayer.vue

@@ -15,10 +15,11 @@
         :pic="currentMusic.pic"
         :playing="isPlaying"
         :enable-drag="isFloatMode"
-        :theme="currentTheme"
+        :theme="currentMusic.theme || theme"
         @toggleplay="toggle"
         @dragbegin="onDragBegin"
         @dragging="onDragAround"
+        @adaptingTheme="setSelfAdaptingTheme"
       />
       <div class="aplayer-info" v-show="!mini">
         <div class="aplayer-music">
@@ -67,12 +68,6 @@
   import Lyrics from './components/aplayer-lrc.vue'
   import { warn } from './utils'
 
-  /**
-   * memorize self-adapting theme for cover image urls
-   * @type {Object.<url, rgb()>}
-   */
-  const picThemeCache = {}
-
   // mutex playing instance
   let activeMutex = null
 
@@ -226,7 +221,7 @@
         // handle Promise returned from audio.play()
         // @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play
         audioPlayPromise: Promise.resolve(),
-
+        rejectPlayPromise: Promise.reject(),
 
         // @since 1.2.0 float mode
 
@@ -655,28 +650,9 @@
           this.audio.src = this.currentMusic.src || this.currentMusic.url
         }
       },
-
-      setSelfAdaptingTheme () {
-        // auto theme according to current music cover image
-        if ((this.currentMusic.theme || this.theme) === 'pic') {
-          const pic = this.currentMusic.pic
-          // use cache
-          if (picThemeCache[pic]) {
-            this.selfAdaptingTheme = picThemeCache[pic]
-          } else {
-            try {
-              new ColorThief().getColorAsync(pic, ([r, g, b]) => {
-                picThemeCache[pic] = `rgb(${r}, ${g}, ${b})`
-                this.selfAdaptingTheme = `rgb(${r}, ${g}, ${b})`
-              })
-            } catch (e) {
-              warn('color-thief is required to support self-adapting theme')
-            }
-          }
-        } else {
-          this.selfAdaptingTheme = null
-        }
-      },
+      setSelfAdaptingTheme (color) {
+        this.selfAdaptingTheme = `rgb(${color.r},${color.g},${color.b})`
+      }
     },
     watch: {
       music (music) {
@@ -685,9 +661,6 @@
 
       currentMusic: {
         handler (music) {
-          // async
-          this.setSelfAdaptingTheme()
-
           const src = music.src || music.url
           // HLS support
           if (/\.m3u8(?=(#|\?|$))/.test(src)) {
@@ -753,7 +726,6 @@
     },
     mounted () {
       this.initAudio()
-      this.setSelfAdaptingTheme()
       if (this.autoplay) this.play()
     },
     beforeDestroy () {