Fix #59: Use color-thief for setting player colors based on track cover

front/src/components/Sidebar.vue

@@ -87,9 +87,7 @@
       </div>
     </div>
   </div>
-  <div class="ui inverted segment player-wrapper">
   <player></player>
-  </div>
 </div>
 </template>
 
@@ -150,6 +148,7 @@ export default {
 $sidebar-color: #1B1C1D;
 
 .sidebar {
+	background: $sidebar-color;
   @include media(">tablet") {
     display:flex;
     flex-direction:column;
@@ -211,11 +210,6 @@ $sidebar-color: #1B1C1D;
   flex: 1;
 }
 
-.player-wrapper {
-  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
-  background-color: rgb(46, 46, 46) !important;
-}
-
 .logo {
   cursor: pointer;
   display: inline-block;

front/src/components/audio/Player.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="ui inverted segment player-wrapper" :style="style">
     <div class="player">
       <audio-track
         ref="currentAudio"
@@ -13,7 +14,7 @@
       <div v-if="currentTrack" class="track-area ui unstackable items">
         <div class="ui inverted item">
           <div class="ui tiny image">
-          <img v-if="currentTrack.album.cover" :src="Track.getCover(currentTrack)">
+            <img ref="cover" @load="updateBackground" v-if="currentTrack.album.cover" :src="Track.getCover(currentTrack)">
             <img v-else src="../../assets/audio/default-cover.png">
           </div>
           <div class="middle aligned content">
@@ -133,13 +134,14 @@
         @keydown.l.prevent.exact="$store.commit('player/toggleLooping')"
         @keydown.s.prevent.exact="shuffle"
         />
-
+    </div>
   </div>
 </template>
 
 <script>
 import {mapState, mapGetters, mapActions} from 'vuex'
 import GlobalEvents from '@/components/utils/global-events'
+import ColorThief from '@/vendor/color-thief'
 
 import Track from '@/audio/track'
 import AudioTrack from '@/components/audio/Track'
@@ -153,9 +155,12 @@ export default {
     AudioTrack
   },
   data () {
+    let defaultAmbiantColors = [[46, 46, 46], [46, 46, 46], [46, 46, 46], [46, 46, 46]]
     return {
       sliderVolume: this.volume,
-      Track: Track
+      Track: Track,
+      defaultAmbiantColors: defaultAmbiantColors,
+      ambiantColors: defaultAmbiantColors
     }
   },
   mounted () {
@@ -177,6 +182,14 @@ export default {
       let target = this.$refs.progress
       time = e.layerX / target.offsetWidth * this.duration
       this.$refs.currentAudio.setCurrentTime(time)
+    },
+    updateBackground () {
+      if (!this.currentTrack.album.cover) {
+        this.ambiantColors = this.defaultAmbiantColors
+        return
+      }
+      let image = this.$refs.cover
+      this.ambiantColors = ColorThief.prototype.getPalette(image, 4).slice(0, 4)
     }
   },
   computed: {
@@ -195,9 +208,34 @@ export default {
       durationFormatted: 'player/durationFormatted',
       currentTimeFormatted: 'player/currentTimeFormatted',
       progress: 'player/progress'
-    })
+    }),
+    style: function () {
+      let style = {
+        'background': this.ambiantGradiant
+      }
+      return style
+    },
+    ambiantGradiant: function () {
+      let indexConf = [
+        {orientation: 330, percent: 100, opacity: 0.7},
+        {orientation: 240, percent: 90, opacity: 0.7},
+        {orientation: 150, percent: 80, opacity: 0.7},
+        {orientation: 60, percent: 70, opacity: 0.7}
+      ]
+      let gradients = this.ambiantColors.map((e, i) => {
+        let [r, g, b] = e
+        let conf = indexConf[i]
+        return `linear-gradient(${conf.orientation}deg, rgba(${r}, ${g}, ${b}, ${conf.opacity}) 10%, rgba(255, 255, 255, 0) ${conf.percent}%)`
+      }).join(', ')
+      return gradients
+    }
   },
   watch: {
+    currentTrack (newValue) {
+      if (!newValue) {
+        this.ambiantColors = this.defaultAmbiantColors
+      }
+    },
     volume (newValue) {
       this.sliderVolume = newValue
     },