Verified Commit bb3ed760 authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Merge branch 'release/0.4'

parents c7d6ad95 a38ca1ed
......@@ -3,9 +3,7 @@ version: '2'
services:
front:
build:
dockerfile: docker/Dockerfile.dev
context: ./front
build: front
env_file: .env.dev
environment:
- "HOST=0.0.0.0"
......@@ -51,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
......
......@@ -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/;
}
......
FROM node:6-alpine
FROM node:9
EXPOSE 8080
RUN mkdir /app
WORKDIR /app
WORKDIR /app/
ADD package.json .
RUN yarn install --only=production
RUN yarn install --only=dev
VOLUME ["/app/node_modules"]
COPY . .
RUN npm install
ADD . .
RUN npm run build
CMD ["npm", "run", "dev"]
......@@ -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)
......
module.exports = {
NODE_ENV: '"production"',
BACKEND_URL: '"' + (process.env.BACKEND_URL || '/') + '"'
BACKEND_URL: '"/"'
}
FROM node:6-alpine
EXPOSE 8080
RUN mkdir /app
WORKDIR /app
ADD package.json .
RUN npm install
VOLUME ["/app/node_modules"]
CMD ["npm", "run", "dev"]
......@@ -9,24 +9,28 @@
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"unit-watch": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},
"dependencies": {
"axios": "^0.17.1",
"dateformat": "^2.0.0",
"js-logger": "^1.3.0",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.4",
"moxios": "^0.4.0",
"raven-js": "^3.22.3",
"semantic-ui-css": "^2.2.10",
"vue": "^2.3.3",
"vue-lazyload": "^1.1.4",
"vue-resource": "^1.3.4",
"vue-router": "^2.3.1",
"vue-upload-component": "^2.7.4",
"vuedraggable": "^2.14.1",
"vuex": "^3.0.1",
"vuex-persistedstate": "^2.4.2"
"vuex-persistedstate": "^2.4.2",
"vuex-router-sync": "^5.0.0"
},
"devDependencies": {
"autoprefixer": "^6.7.2",
......@@ -46,6 +50,7 @@
"cross-env": "^4.0.0",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"es6-promise": "^4.2.2",
"eslint": "^3.19.0",
"eslint-config-standard": "^6.2.1",
"eslint-friendly-formatter": "^2.0.7",
......@@ -67,6 +72,7 @@
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1",
"karma-sinon-stub-promise": "^1.0.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.30",
"karma-webpack": "^2.0.2",
......@@ -85,6 +91,7 @@
"shelljs": "^0.7.6",
"sinon": "^2.1.0",
"sinon-chai": "^2.8.0",
"sinon-stub-promise": "^4.0.0",
"url-loader": "^0.5.8",
"vue-loader": "^12.1.0",
"vue-style-loader": "^3.0.1",
......
......@@ -22,15 +22,26 @@
</div>
</div>
</div>
<raven
v-if="$store.state.instance.settings.raven.front_enabled.value"
:dsn="$store.state.instance.settings.raven.front_dsn.value">
</raven>
</div>
</template>
<script>
import Sidebar from '@/components/Sidebar'
import Raven from '@/components/Raven'
export default {
name: 'app',
components: { Sidebar }
components: {
Sidebar,
Raven
},
created () {
this.$store.dispatch('instance/fetchSettings')
}
}
</script>
......@@ -40,25 +51,33 @@ export default {
// and we end up with CSS rules not applied,
// see https://github.com/webpack/webpack/issues/215
@import 'semantic/semantic.css';
@import 'style/vendor/media';
html, body {
@include media("<desktop") {
font-size: 200%;
}
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.main.pusher, .footer {
margin-left: 350px !important;
@include media(">desktop") {
margin-left: 350px !important;
}
transform: none !important;
}
.main-pusher {
padding: 1.5rem 0;
}
#footer {
padding: 4em;
}
.ui.stripe.segment {
padding: 4em;
.ui.stripe.segment, #footer {
padding: 2em;
@include media(">tablet") {
padding: 4em;
}
}
.ui.small.text.container {
......
<template>
<div class="raven"></div>
</template>
<script>
import Raven from 'raven-js'
import RavenVue from 'raven-js/plugins/vue'
import Vue from 'vue'
import logger from '@/logging'
export default {
props: ['dsn'],
created () {
Raven.uninstall()
this.setUp()
},
destroyed () {
Raven.uninstall()
},
methods: {
setUp () {
Raven.uninstall()
logger.default.info('Installing raven...')
Raven.config(this.dsn).addPlugin(RavenVue, Vue).install()
console.log({}.test.test)
}
},
watch: {
dsn: function () {
this.setUp()
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
.raven {
display: none;
}
</style>
<template>
<div class="ui vertical left visible wide sidebar">
<div :class="['ui', 'vertical', 'left', 'visible', 'wide', {'collapsed': isCollapsed}, 'sidebar',]">
<div class="ui inverted segment header-wrapper">
<search-bar>
<search-bar @search="isCollapsed = false">
<router-link :title="'Funkwhale'" :to="{name: 'index'}">
<i class="logo bordered inverted orange big icon">
<logo class="logo"></logo>
</i>
</router-link>
</router-link><span
slot="after"
@click="isCollapsed = !isCollapsed"
:class="['ui', 'basic', 'big', {'inverted': isCollapsed}, 'orange', 'icon', 'collapse', 'button']">
<i class="sidebar icon"></i></span>
</search-bar>
</div>
......@@ -49,7 +52,7 @@
</div>
</div>
<div class="ui bottom attached tab" data-tab="queue">
<table class="ui compact inverted very basic fixed single line table">
<table class="ui compact inverted very basic fixed single line unstackable table">
<draggable v-model="queue.tracks" element="tbody" @update="reorder">
<tr @click="$store.dispatch('queue/currentIndex', index)" v-for="(track, index) in queue.tracks" :key="index" :class="[{'active': index === queue.currentIndex}]">
<td class="right aligned">{{ index + 1}}</td>
......@@ -84,9 +87,7 @@
</div>
</div>
</div>
<div class="ui inverted segment player-wrapper">
<player></player>
</div>
<player></player>
</div>
</template>
......@@ -111,7 +112,8 @@ export default {
},
data () {
return {
backend: backend
backend: backend,
isCollapsed: true
}
},
mounted () {
......@@ -119,7 +121,8 @@ export default {
},
computed: {
...mapState({
queue: state => state.queue
queue: state => state.queue,
url: state => state.route.path
})
},
methods: {
......@@ -129,19 +132,42 @@ export default {
reorder: function (oldValue, newValue) {
this.$store.commit('queue/reorder', {oldValue, newValue})
}
},
watch: {
url: function () {
this.isCollapsed = true
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '../style/vendor/media';
$sidebar-color: #1B1C1D;
.sidebar {
display:flex;
flex-direction:column;
justify-content: space-between;
background: $sidebar-color;
@include media(">tablet") {
display:flex;
flex-direction:column;
justify-content: space-between;
}
@include media(">desktop") {
.collapse.button {
display: none;
}
}
@include media("<desktop") {
position: static !important;
width: 100% !important;
&.collapsed {
.menu-area, .player-wrapper, .tabs {
display: none;
}
}
}
> div {
margin: 0;
......@@ -160,7 +186,12 @@ $sidebar-color: #1B1C1D;
}
.tabs {
overflow-y: auto;
height: 0px;
@include media(">tablet") {
height: 0px;
}
@include media("<desktop") {
max-height: 400px;
}
}
.tab[data-tab="queue"] {
tr {
......@@ -174,26 +205,22 @@ $sidebar-color: #1B1C1D;
.ui.inverted.segment.header-wrapper {
padding: 0;
padding-bottom: 1rem;
}
.tabs {
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;
}
.ui.search {
display: inline-block;
> a {
margin-right: 1.5rem;
display: block;
.collapse.button {
margin-right: 0.5rem;
margin-top: 0.5rem;
float: right;
}
}
</style>
<template>
<div class="player">
<audio-track
ref="currentAudio"
v-if="currentTrack"
:key="(currentIndex, currentTrack.id)"
:is-current="true"
:start-time="$store.state.player.currentTime"
:autoplay="$store.state.player.playing"
:track="currentTrack">
</audio-track>
<div class="ui inverted segment player-wrapper" :style="style">
<div class="player">
<audio-track
ref="currentAudio"
v-if="currentTrack"
:key="(currentIndex, currentTrack.id)"
:is-current="true"
:start-time="$store.state.player.currentTime"
:autoplay="$store.state.player.playing"
:track="currentTrack">
</audio-track>
<div v-if="currentTrack" class="track-area ui items">
<div class="ui inverted item">
<div class="ui tiny image">
<img v-if="currentTrack.album.cover" :src="Track.getCover(currentTrack)">
<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 v-if="currentTrack" class="track-area ui unstackable items">
<div class="ui inverted item">
<div class="ui tiny image">
<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="description">
<track-favorite-icon :track="currentTrack"></track-favorite-icon>
<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 class="description">
<track-favorite-icon :track="currentTrack"></track-favorite-icon>
</div>
</div>
</div>
</div>
</div>
<div class="progress-area" v-if="currentTrack">
<div class="ui grid">
<div class="left floated four wide column">
<p class="timer start" @click="updateProgress(0)">{{currentTimeFormatted}}</p>
</div>
<div class="progress-area" v-if="currentTrack">
<div class="ui grid">
<div class="left floated four wide column">
<p class="timer start" @click="updateProgress(0)">{{currentTimeFormatted}}</p>
</div>
<div class="right floated four wide column">
<p class="timer total">{{durationFormatted}}</p>
<div class="right floated four wide column">
<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 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
@click="previous"
title="Previous track"
class="two wide column control"
:disabled="!hasPrevious">
<i :class="['ui', {'disabled': !hasPrevious}, 'step', 'backward', 'big', 'icon']" ></i>
</div>
<div
v-if="!playing"
@click="togglePlay"
title="Play track"
class="two wide column control">
<i :class="['ui', 'play', {'disabled': !currentTrack}, 'big', 'icon']"></i>
</div>
<div
v-else
@click="togglePlay"
title="Pause track"
class="two wide column control">
<i :class="['ui', 'pause', {'disabled': !currentTrack}, 'big', 'icon']"></i>
</div>
<div
@click="next"
title="Next track"
class="two wide column control"
:disabled="!hasNext">
<i :class="['ui', {'disabled': !hasNext}, 'step', 'forward', 'big', 'icon']" ></i>
</div>
<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="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>
<input type="range" step="0.05" min="0" max="1" v-model="sliderVolume" />
</div>
<div class="two wide column control looping">
<i
title="Looping disabled. Click to switch to single-track looping."
v-if="looping === 0"
@click="$store.commit('player/looping', 1)"
:disabled="!currentTrack"
:class="['ui', {'disabled': !currentTrack}, 'step', 'repeat', 'secondary', 'icon']"></i>
<i
title="Looping on a single track. Click to switch to whole queue looping."
v-if="looping === 1"
@click="$store.commit('player/looping', 2)"
:disabled="!currentTrack"
class="repeat secondary icon">
<span class="ui circular tiny orange label">1</span>
</i>
<i
title="Looping on whole queue. Click to disable looping."
v-if="looping === 2"
@click="$store.commit('player/looping', 0)"
:disabled="!currentTrack"
class="repeat orange secondary icon">
</i>
</div>
<div
@click="shuffle()"
:disabled="queue.tracks.length === 0"
title="Shuffle your queue"
class="two wide column control">
<i :class="['ui', 'random', 'secondary', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
</div>
<div class="one wide column"></div>
<div
@click="clean()"
:disabled="queue.tracks.length === 0"
title="Clear your queue"
class="two wide column control">
<i :class="['ui', 'trash', 'secondary', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
<div class="two wide column controls ui grid">
<div
@click="previous"
title="Previous track"
class="two wide column control"
:disabled="!hasPrevious">
<i :class="['ui', {'disabled': !hasPrevious}, 'step', 'backward', 'big', 'icon']" ></i>
</div>
<div
v-if="!playing"
@click="togglePlay"
title="Play track"
class="two wide column control">
<i :class="['ui', 'play', {'disabled': !currentTrack}, 'big', 'icon']"></i>
</div>
<div
v-else
@click="togglePlay"
title="Pause track"
class="two wide column control">
<i :class="['ui', 'pause', {'disabled': !currentTrack}, 'big', 'icon']"></i>
</div>
<div
@click="next"
title="Next track"
class="two wide column control"
:disabled="!hasNext">
<i :class="['ui', {'disabled': !hasNext}, 'step', 'forward', 'big', 'icon']" ></i>
</div>
<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="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>
<input type="range" step="0.05" min="0" max="1" v-model="sliderVolume" />
</div>
<div class="two wide column control looping">
<i