Merge branch '59-ambiant-colors' into 'develop'

Resolve "Ambiant colors from artist / album images"

Closes #59

See merge request !45

.env.dev

-BACKEND_URL=http://localhost:6001
 API_AUTHENTICATION_REQUIRED=True
 CACHALOT_ENABLED=False
 RAVEN_ENABLED=false

.gitlab-ci.yml

@@ -20,6 +20,7 @@ test_api:
     paths:
       - "$PIP_CACHE_DIR"
   variables:
+    DJANGO_ALLOWED_HOSTS: "localhost"
     DATABASE_URL: "postgresql://postgres@postgres/postgres"
 
   before_script:

CHANGELOG

@@ -5,6 +5,8 @@ Changelog
 0.3.5 (Unreleased)
 ------------------
 
+- Front: ambiant colors in player based on current track cover (#59)
+- Front: simplified front dev setup thanks to webpack proxy (#59)
 - Front: added some unittests for the store (#55)
 - Front: fixed broken login redirection when 401
 - Front: Removed autoplay on page reload

api/config/settings/common.py

@@ -23,6 +23,10 @@ try:
     env.read_env(ROOT_DIR.file('.env'))
 except FileNotFoundError:
     pass
+
+ALLOWED_HOSTS = env.list('DJANGO_ALLOWED_HOSTS')
+
+
 # APP CONFIGURATION
 # ------------------------------------------------------------------------------
 DJANGO_APPS = (

api/config/settings/production.py

@@ -54,7 +54,6 @@ SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
 # ------------------------------------------------------------------------------
 # Hosts/domain names that are valid for this site
 # See https://docs.djangoproject.com/en/1.6/ref/settings/#allowed-hosts
-ALLOWED_HOSTS = env.list('DJANGO_ALLOWED_HOSTS')
 CSRF_TRUSTED_ORIGINS = ALLOWED_HOSTS
 
 # END SITE CONFIGURATION

api/funkwhale_api/music/serializers.py

@@ -31,10 +31,7 @@ class TrackFileSerializer(serializers.ModelSerializer):
         fields = ('id', 'path', 'duration', 'source', 'filename', 'track')
 
     def get_path(self, o):
-        request = self.context.get('request')
         url = o.path
-        if request:
-            url = request.build_absolute_uri(url)
         return url
 
 

api/test.yml

@@ -10,6 +10,7 @@ services:
     volumes:
       - .:/app
     environment:
+      - "DJANGO_ALLOWED_HOSTS=localhost"
       - "DATABASE_URL=postgresql://postgres@postgres/postgres"
   postgres:
     image: postgres

dev.yml

@@ -49,13 +49,11 @@ services:
       - ./api:/app
       - ./data/music:/music
     environment:
-      - "DJANGO_ALLOWED_HOSTS=localhost"
+      - "DJANGO_ALLOWED_HOSTS=localhost,nginx"
       - "DJANGO_SETTINGS_MODULE=config.settings.local"
       - "DJANGO_SECRET_KEY=dev"
       - "DATABASE_URL=postgresql://postgres@postgres/postgres"
       - "CACHE_URL=redis://redis:6379/0"
-    ports:
-      - "12081:12081"
     links:
       - postgres
       - redis

docker/nginx/conf.dev

@@ -40,8 +40,8 @@ http {
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-Forwarded-Proto $scheme;
-            proxy_set_header X-Forwarded-Host   $host:$server_port;
-            proxy_set_header X-Forwarded-Port   $server_port;
+            proxy_set_header X-Forwarded-Host   localhost:8080;
+            proxy_set_header X-Forwarded-Port   8080;
             proxy_redirect off;
             proxy_pass   http://api:12081/;
         }

front/config/index.js

@@ -28,7 +28,20 @@ module.exports = {
     autoOpenBrowser: true,
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
-    proxyTable: {},
+    proxyTable: {
+      '/api': {
+        target: 'http://nginx:6001',
+        changeOrigin: true,
+      },
+      '/media': {
+        target: 'http://nginx:6001',
+        changeOrigin: true,
+      },
+      '/staticfiles': {
+        target: 'http://nginx:6001',
+        changeOrigin: true,
+      }
+    },
     // CSS Sourcemaps off by default because relative paths are "buggy"
     // with this option, according to the CSS-Loader README
     // (https://github.com/webpack/css-loader#sourcemaps)

front/config/prod.env.js

 module.exports = {
   NODE_ENV: '"production"',
-  BACKEND_URL: '"' + (process.env.BACKEND_URL  || '/') + '"'
+  BACKEND_URL: '"/"'
 }

front/src/components/Sidebar.vue

@@ -6,8 +6,7 @@
         <i class="logo bordered inverted orange big icon">
           <logo class="logo"></logo>
         </i>
-      </router-link>
-      <span
+      </router-link><span
         slot="after"
         @click="isCollapsed = !isCollapsed"
         :class="['ui', 'basic', 'big', {'inverted': isCollapsed}, 'orange', 'icon', 'collapse', 'button']">
@@ -88,10 +87,8 @@
       </div>
     </div>
   </div>
-  <div class="ui inverted segment player-wrapper">
   <player></player>
 </div>
-</div>
 </template>
 
 <script>
@@ -151,6 +148,7 @@ export default {
 $sidebar-color: #1B1C1D;
 
 .sidebar {
+	background: $sidebar-color;
   @include media(">tablet") {
     display:flex;
     flex-direction:column;
@@ -212,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;
@@ -224,9 +217,6 @@ $sidebar-color: #1B1C1D;
 
 .ui.search {
   display: block;
-  > a {
-    margin-right: 1.5rem;
-  }
   .collapse.button {
     margin-right: 0.5rem;
     margin-top: 0.5rem;

front/src/components/audio/Player.vue

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

front/src/components/audio/SearchBar.vue

 <template>
   <div class="ui fluid category search">
-    <slot></slot>
-    <div class="ui icon input">
+    <slot></slot><div class="ui icon input">
       <input class="prompt" placeholder="Search for artists, albums, tracks..." type="text">
       <i class="search icon"></i>
     </div>

front/src/config.js

 class Config {
   constructor () {
     this.BACKEND_URL = process.env.BACKEND_URL
-    if (this.BACKEND_URL === '/') {
-      this.BACKEND_URL = window.location.protocol + '//' + window.location.hostname + ':' + window.location.port
-    }
-    if (this.BACKEND_URL.slice(-1) !== '/') {
-      this.BACKEND_URL += '/'
-    }
     this.API_URL = this.BACKEND_URL + 'api/v1/'
   }
 }