Skip to content
Snippets Groups Projects
Commit ddc717e0 authored by Eliot Berriot's avatar Eliot Berriot
Browse files

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

Resolve "Ambiant colors from artist / album images"

Closes #59

See merge request funkwhale/funkwhale!45
parents c0724d3c b50e55d3
No related branches found
No related tags found
No related merge requests found
BACKEND_URL=http://localhost:6001
API_AUTHENTICATION_REQUIRED=True API_AUTHENTICATION_REQUIRED=True
CACHALOT_ENABLED=False CACHALOT_ENABLED=False
RAVEN_ENABLED=false RAVEN_ENABLED=false
......
...@@ -20,6 +20,7 @@ test_api: ...@@ -20,6 +20,7 @@ test_api:
paths: paths:
- "$PIP_CACHE_DIR" - "$PIP_CACHE_DIR"
variables: variables:
DJANGO_ALLOWED_HOSTS: "localhost"
DATABASE_URL: "postgresql://postgres@postgres/postgres" DATABASE_URL: "postgresql://postgres@postgres/postgres"
before_script: before_script:
......
...@@ -5,6 +5,8 @@ Changelog ...@@ -5,6 +5,8 @@ Changelog
0.3.5 (Unreleased) 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: added some unittests for the store (#55)
- Front: fixed broken login redirection when 401 - Front: fixed broken login redirection when 401
- Front: Removed autoplay on page reload - Front: Removed autoplay on page reload
......
...@@ -23,6 +23,10 @@ try: ...@@ -23,6 +23,10 @@ try:
env.read_env(ROOT_DIR.file('.env')) env.read_env(ROOT_DIR.file('.env'))
except FileNotFoundError: except FileNotFoundError:
pass pass
ALLOWED_HOSTS = env.list('DJANGO_ALLOWED_HOSTS')
# APP CONFIGURATION # APP CONFIGURATION
# ------------------------------------------------------------------------------ # ------------------------------------------------------------------------------
DJANGO_APPS = ( DJANGO_APPS = (
......
...@@ -54,7 +54,6 @@ SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https') ...@@ -54,7 +54,6 @@ SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
# ------------------------------------------------------------------------------ # ------------------------------------------------------------------------------
# Hosts/domain names that are valid for this site # Hosts/domain names that are valid for this site
# See https://docs.djangoproject.com/en/1.6/ref/settings/#allowed-hosts # See https://docs.djangoproject.com/en/1.6/ref/settings/#allowed-hosts
ALLOWED_HOSTS = env.list('DJANGO_ALLOWED_HOSTS')
CSRF_TRUSTED_ORIGINS = ALLOWED_HOSTS CSRF_TRUSTED_ORIGINS = ALLOWED_HOSTS
# END SITE CONFIGURATION # END SITE CONFIGURATION
......
...@@ -31,10 +31,7 @@ class TrackFileSerializer(serializers.ModelSerializer): ...@@ -31,10 +31,7 @@ class TrackFileSerializer(serializers.ModelSerializer):
fields = ('id', 'path', 'duration', 'source', 'filename', 'track') fields = ('id', 'path', 'duration', 'source', 'filename', 'track')
def get_path(self, o): def get_path(self, o):
request = self.context.get('request')
url = o.path url = o.path
if request:
url = request.build_absolute_uri(url)
return url return url
......
...@@ -10,6 +10,7 @@ services: ...@@ -10,6 +10,7 @@ services:
volumes: volumes:
- .:/app - .:/app
environment: environment:
- "DJANGO_ALLOWED_HOSTS=localhost"
- "DATABASE_URL=postgresql://postgres@postgres/postgres" - "DATABASE_URL=postgresql://postgres@postgres/postgres"
postgres: postgres:
image: postgres image: postgres
...@@ -49,13 +49,11 @@ services: ...@@ -49,13 +49,11 @@ services:
- ./api:/app - ./api:/app
- ./data/music:/music - ./data/music:/music
environment: environment:
- "DJANGO_ALLOWED_HOSTS=localhost" - "DJANGO_ALLOWED_HOSTS=localhost,nginx"
- "DJANGO_SETTINGS_MODULE=config.settings.local" - "DJANGO_SETTINGS_MODULE=config.settings.local"
- "DJANGO_SECRET_KEY=dev" - "DJANGO_SECRET_KEY=dev"
- "DATABASE_URL=postgresql://postgres@postgres/postgres" - "DATABASE_URL=postgresql://postgres@postgres/postgres"
- "CACHE_URL=redis://redis:6379/0" - "CACHE_URL=redis://redis:6379/0"
ports:
- "12081:12081"
links: links:
- postgres - postgres
- redis - redis
......
...@@ -40,8 +40,8 @@ http { ...@@ -40,8 +40,8 @@ http {
proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $host:$server_port; proxy_set_header X-Forwarded-Host localhost:8080;
proxy_set_header X-Forwarded-Port $server_port; proxy_set_header X-Forwarded-Port 8080;
proxy_redirect off; proxy_redirect off;
proxy_pass http://api:12081/; proxy_pass http://api:12081/;
} }
......
...@@ -28,7 +28,20 @@ module.exports = { ...@@ -28,7 +28,20 @@ module.exports = {
autoOpenBrowser: true, autoOpenBrowser: true,
assetsSubDirectory: 'static', assetsSubDirectory: 'static',
assetsPublicPath: '/', 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" // CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README // with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps) // (https://github.com/webpack/css-loader#sourcemaps)
......
module.exports = { module.exports = {
NODE_ENV: '"production"', NODE_ENV: '"production"',
BACKEND_URL: '"' + (process.env.BACKEND_URL || '/') + '"' BACKEND_URL: '"/"'
} }
...@@ -6,8 +6,7 @@ ...@@ -6,8 +6,7 @@
<i class="logo bordered inverted orange big icon"> <i class="logo bordered inverted orange big icon">
<logo class="logo"></logo> <logo class="logo"></logo>
</i> </i>
</router-link> </router-link><span
<span
slot="after" slot="after"
@click="isCollapsed = !isCollapsed" @click="isCollapsed = !isCollapsed"
:class="['ui', 'basic', 'big', {'inverted': isCollapsed}, 'orange', 'icon', 'collapse', 'button']"> :class="['ui', 'basic', 'big', {'inverted': isCollapsed}, 'orange', 'icon', 'collapse', 'button']">
...@@ -88,9 +87,7 @@ ...@@ -88,9 +87,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="ui inverted segment player-wrapper"> <player></player>
<player></player>
</div>
</div> </div>
</template> </template>
...@@ -151,6 +148,7 @@ export default { ...@@ -151,6 +148,7 @@ export default {
$sidebar-color: #1B1C1D; $sidebar-color: #1B1C1D;
.sidebar { .sidebar {
background: $sidebar-color;
@include media(">tablet") { @include media(">tablet") {
display:flex; display:flex;
flex-direction:column; flex-direction:column;
...@@ -212,11 +210,6 @@ $sidebar-color: #1B1C1D; ...@@ -212,11 +210,6 @@ $sidebar-color: #1B1C1D;
flex: 1; flex: 1;
} }
.player-wrapper {
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
background-color: rgb(46, 46, 46) !important;
}
.logo { .logo {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
...@@ -224,9 +217,6 @@ $sidebar-color: #1B1C1D; ...@@ -224,9 +217,6 @@ $sidebar-color: #1B1C1D;
.ui.search { .ui.search {
display: block; display: block;
> a {
margin-right: 1.5rem;
}
.collapse.button { .collapse.button {
margin-right: 0.5rem; margin-right: 0.5rem;
margin-top: 0.5rem; margin-top: 0.5rem;
......
<template> <template>
<div class="player"> <div class="ui inverted segment player-wrapper" :style="style">
<audio-track <div class="player">
ref="currentAudio" <audio-track
v-if="currentTrack" ref="currentAudio"
:key="(currentIndex, currentTrack.id)" v-if="currentTrack"
:is-current="true" :key="(currentIndex, currentTrack.id)"
:start-time="$store.state.player.currentTime" :is-current="true"
:autoplay="$store.state.player.playing" :start-time="$store.state.player.currentTime"
:track="currentTrack"> :autoplay="$store.state.player.playing"
</audio-track> :track="currentTrack">
</audio-track>
<div v-if="currentTrack" class="track-area ui unstackable items"> <div v-if="currentTrack" class="track-area ui unstackable items">
<div class="ui inverted item"> <div class="ui inverted item">
<div class="ui tiny image"> <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"> <img v-else src="../../assets/audio/default-cover.png">
</div>
<div class="middle aligned content">
<router-link class="small header discrete link track" :to="{name: 'library.tracks.detail', params: {id: currentTrack.id }}">
{{ currentTrack.title }}
</router-link>
<div class="meta">
<router-link class="artist" :to="{name: 'library.artists.detail', params: {id: currentTrack.artist.id }}">
{{ currentTrack.artist.name }}
</router-link> /
<router-link class="album" :to="{name: 'library.albums.detail', params: {id: currentTrack.album.id }}">
{{ currentTrack.album.title }}
</router-link>
</div> </div>
<div class="description"> <div class="middle aligned content">
<track-favorite-icon :track="currentTrack"></track-favorite-icon> <router-link class="small header discrete link track" :to="{name: 'library.tracks.detail', params: {id: currentTrack.id }}">
{{ currentTrack.title }}
</router-link>
<div class="meta">
<router-link class="artist" :to="{name: 'library.artists.detail', params: {id: currentTrack.artist.id }}">
{{ currentTrack.artist.name }}
</router-link> /
<router-link class="album" :to="{name: 'library.albums.detail', params: {id: currentTrack.album.id }}">
{{ currentTrack.album.title }}
</router-link>
</div>
<div class="description">
<track-favorite-icon :track="currentTrack"></track-favorite-icon>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="progress-area" v-if="currentTrack">
<div class="progress-area" v-if="currentTrack"> <div class="ui grid">
<div class="ui grid"> <div class="left floated four wide column">
<div class="left floated four wide column"> <p class="timer start" @click="updateProgress(0)">{{currentTimeFormatted}}</p>
<p class="timer start" @click="updateProgress(0)">{{currentTimeFormatted}}</p> </div>
</div>
<div class="right floated four wide column"> <div class="right floated four wide column">
<p class="timer total">{{durationFormatted}}</p> <p class="timer total">{{durationFormatted}}</p>
</div>
</div>
<div ref="progress" class="ui small orange inverted progress" @click="touchProgress">
<div class="bar" :data-percent="progress" :style="{ 'width': progress + '%' }"></div>
</div> </div>
</div> </div>
<div ref="progress" class="ui small orange inverted progress" @click="touchProgress">
<div class="bar" :data-percent="progress" :style="{ 'width': progress + '%' }"></div>
</div>
</div>
<div class="two wide column controls ui grid"> <div class="two wide column controls ui grid">
<div <div
@click="previous" @click="previous"
title="Previous track" title="Previous track"
class="two wide column control" class="two wide column control"
:disabled="!hasPrevious"> :disabled="!hasPrevious">
<i :class="['ui', {'disabled': !hasPrevious}, 'step', 'backward', 'big', 'icon']" ></i> <i :class="['ui', {'disabled': !hasPrevious}, 'step', 'backward', 'big', 'icon']" ></i>
</div> </div>
<div <div
v-if="!playing" v-if="!playing"
@click="togglePlay" @click="togglePlay"
title="Play track" title="Play track"
class="two wide column control"> class="two wide column control">
<i :class="['ui', 'play', {'disabled': !currentTrack}, 'big', 'icon']"></i> <i :class="['ui', 'play', {'disabled': !currentTrack}, 'big', 'icon']"></i>
</div> </div>
<div <div
v-else v-else
@click="togglePlay" @click="togglePlay"
title="Pause track" title="Pause track"
class="two wide column control"> class="two wide column control">
<i :class="['ui', 'pause', {'disabled': !currentTrack}, 'big', 'icon']"></i> <i :class="['ui', 'pause', {'disabled': !currentTrack}, 'big', 'icon']"></i>
</div> </div>
<div <div
@click="next" @click="next"
title="Next track" title="Next track"
class="two wide column control" class="two wide column control"
:disabled="!hasNext"> :disabled="!hasNext">
<i :class="['ui', {'disabled': !hasNext}, 'step', 'forward', 'big', 'icon']" ></i> <i :class="['ui', {'disabled': !hasNext}, 'step', 'forward', 'big', 'icon']" ></i>
</div> </div>
<div class="two wide column control volume-control"> <div class="two wide column control volume-control">
<i title="Unmute" @click="$store.commit('player/volume', 1)" v-if="volume === 0" class="volume off secondary icon"></i> <i title="Unmute" @click="$store.commit('player/volume', 1)" v-if="volume === 0" class="volume off secondary icon"></i>
<i title="Mute" @click="$store.commit('player/volume', 0)" v-else-if="volume < 0.5" class="volume down secondary icon"></i> <i title="Mute" @click="$store.commit('player/volume', 0)" v-else-if="volume < 0.5" class="volume down secondary icon"></i>
<i title="Mute" @click="$store.commit('player/volume', 0)" v-else class="volume up secondary icon"></i> <i title="Mute" @click="$store.commit('player/volume', 0)" v-else class="volume up secondary icon"></i>
<input type="range" step="0.05" min="0" max="1" v-model="sliderVolume" /> <input type="range" step="0.05" min="0" max="1" v-model="sliderVolume" />
</div> </div>
<div class="two wide column control looping"> <div class="two wide column control looping">
<i <i
title="Looping disabled. Click to switch to single-track looping." title="Looping disabled. Click to switch to single-track looping."
v-if="looping === 0" v-if="looping === 0"
@click="$store.commit('player/looping', 1)" @click="$store.commit('player/looping', 1)"
:disabled="!currentTrack" :disabled="!currentTrack"
:class="['ui', {'disabled': !currentTrack}, 'step', 'repeat', 'secondary', 'icon']"></i> :class="['ui', {'disabled': !currentTrack}, 'step', 'repeat', 'secondary', 'icon']"></i>
<i <i
title="Looping on a single track. Click to switch to whole queue looping." title="Looping on a single track. Click to switch to whole queue looping."
v-if="looping === 1" v-if="looping === 1"
@click="$store.commit('player/looping', 2)" @click="$store.commit('player/looping', 2)"
:disabled="!currentTrack" :disabled="!currentTrack"
class="repeat secondary icon"> class="repeat secondary icon">
<span class="ui circular tiny orange label">1</span> <span class="ui circular tiny orange label">1</span>
</i> </i>
<i <i
title="Looping on whole queue. Click to disable looping." title="Looping on whole queue. Click to disable looping."
v-if="looping === 2" v-if="looping === 2"
@click="$store.commit('player/looping', 0)" @click="$store.commit('player/looping', 0)"
:disabled="!currentTrack" :disabled="!currentTrack"
class="repeat orange secondary icon"> class="repeat orange secondary icon">
</i> </i>
</div> </div>
<div <div
@click="shuffle()" @click="shuffle()"
:disabled="queue.tracks.length === 0" :disabled="queue.tracks.length === 0"
title="Shuffle your queue" title="Shuffle your queue"
class="two wide column control"> class="two wide column control">
<i :class="['ui', 'random', 'secondary', {'disabled': queue.tracks.length === 0}, 'icon']" ></i> <i :class="['ui', 'random', 'secondary', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
</div> </div>
<div class="one wide column"></div> <div class="one wide column"></div>
<div <div
@click="clean()" @click="clean()"
:disabled="queue.tracks.length === 0" :disabled="queue.tracks.length === 0"
title="Clear your queue" title="Clear your queue"
class="two wide column control"> class="two wide column control">
<i :class="['ui', 'trash', 'secondary', {'disabled': queue.tracks.length === 0}, 'icon']" ></i> <i :class="['ui', 'trash', 'secondary', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
</div>
</div> </div>
<GlobalEvents
@keydown.space.prevent.exact="togglePlay"
@keydown.ctrl.left.prevent.exact="previous"
@keydown.ctrl.right.prevent.exact="next"
@keydown.ctrl.down.prevent.exact="$store.commit('player/incrementVolume', -0.1)"
@keydown.ctrl.up.prevent.exact="$store.commit('player/incrementVolume', 0.1)"
@keydown.f.prevent.exact="$store.dispatch('favorites/toggle', currentTrack.id)"
@keydown.l.prevent.exact="$store.commit('player/toggleLooping')"
@keydown.s.prevent.exact="shuffle"
/>
</div> </div>
<GlobalEvents
@keydown.space.prevent.exact="togglePlay"
@keydown.ctrl.left.prevent.exact="previous"
@keydown.ctrl.right.prevent.exact="next"
@keydown.ctrl.down.prevent.exact="$store.commit('player/incrementVolume', -0.1)"
@keydown.ctrl.up.prevent.exact="$store.commit('player/incrementVolume', 0.1)"
@keydown.f.prevent.exact="$store.dispatch('favorites/toggle', currentTrack.id)"
@keydown.l.prevent.exact="$store.commit('player/toggleLooping')"
@keydown.s.prevent.exact="shuffle"
/>
</div> </div>
</template> </template>
<script> <script>
import {mapState, mapGetters, mapActions} from 'vuex' import {mapState, mapGetters, mapActions} from 'vuex'
import GlobalEvents from '@/components/utils/global-events' import GlobalEvents from '@/components/utils/global-events'
import ColorThief from '@/vendor/color-thief'
import Track from '@/audio/track' import Track from '@/audio/track'
import AudioTrack from '@/components/audio/Track' import AudioTrack from '@/components/audio/Track'
...@@ -153,9 +155,12 @@ export default { ...@@ -153,9 +155,12 @@ export default {
AudioTrack AudioTrack
}, },
data () { data () {
let defaultAmbiantColors = [[46, 46, 46], [46, 46, 46], [46, 46, 46], [46, 46, 46]]
return { return {
sliderVolume: this.volume, sliderVolume: this.volume,
Track: Track Track: Track,
defaultAmbiantColors: defaultAmbiantColors,
ambiantColors: defaultAmbiantColors
} }
}, },
mounted () { mounted () {
...@@ -177,6 +182,14 @@ export default { ...@@ -177,6 +182,14 @@ export default {
let target = this.$refs.progress let target = this.$refs.progress
time = e.layerX / target.offsetWidth * this.duration time = e.layerX / target.offsetWidth * this.duration
this.$refs.currentAudio.setCurrentTime(time) 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: { computed: {
...@@ -195,9 +208,34 @@ export default { ...@@ -195,9 +208,34 @@ export default {
durationFormatted: 'player/durationFormatted', durationFormatted: 'player/durationFormatted',
currentTimeFormatted: 'player/currentTimeFormatted', currentTimeFormatted: 'player/currentTimeFormatted',
progress: 'player/progress' 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: { watch: {
currentTrack (newValue) {
if (!newValue) {
this.ambiantColors = this.defaultAmbiantColors
}
},
volume (newValue) { volume (newValue) {
this.sliderVolume = newValue this.sliderVolume = newValue
}, },
......
<template> <template>
<div class="ui fluid category search"> <div class="ui fluid category search">
<slot></slot> <slot></slot><div class="ui icon input">
<div class="ui icon input">
<input class="prompt" placeholder="Search for artists, albums, tracks..." type="text"> <input class="prompt" placeholder="Search for artists, albums, tracks..." type="text">
<i class="search icon"></i> <i class="search icon"></i>
</div> </div>
......
class Config { class Config {
constructor () { constructor () {
this.BACKEND_URL = process.env.BACKEND_URL 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/' this.API_URL = this.BACKEND_URL + 'api/v1/'
} }
} }
......
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment