2017-06-23 21:00:42 +00:00
|
|
|
<template>
|
|
|
|
<div id="app">
|
|
|
|
<sidebar></sidebar>
|
2017-12-17 18:42:58 +00:00
|
|
|
<router-view :key="$route.fullPath"></router-view>
|
2017-12-24 21:59:49 +00:00
|
|
|
<div class="ui fitted divider"></div>
|
2017-06-28 20:12:37 +00:00
|
|
|
<div id="footer" class="ui vertical footer segment">
|
|
|
|
<div class="ui container">
|
|
|
|
<div class="ui stackable equal height stackable grid">
|
|
|
|
<div class="three wide column">
|
|
|
|
<h4 class="ui header">Links</h4>
|
|
|
|
<div class="ui link list">
|
2018-02-24 14:28:09 +00:00
|
|
|
<router-link class="item" to="/about">
|
|
|
|
About this instance
|
|
|
|
</router-link>
|
2017-06-28 20:12:37 +00:00
|
|
|
<a href="https://funkwhale.audio" class="item" target="_blank">Official website</a>
|
|
|
|
<a href="https://docs.funkwhale.audio" class="item" target="_blank">Documentation</a>
|
|
|
|
<a href="https://code.eliotberriot.com/funkwhale/funkwhale" class="item" target="_blank">Source code</a>
|
|
|
|
<a href="https://code.eliotberriot.com/funkwhale/funkwhale/issues" class="item" target="_blank">Issue tracker</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="ten wide column">
|
|
|
|
<h4 class="ui header">About funkwhale</h4>
|
|
|
|
<p>Funkwhale is a free and open-source project run by volunteers. You can help us improve the platform by reporting bugs, suggesting features and share the project with your friends!</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2018-02-17 20:23:45 +00:00
|
|
|
<raven
|
|
|
|
v-if="$store.state.instance.settings.raven.front_enabled.value"
|
|
|
|
:dsn="$store.state.instance.settings.raven.front_dsn.value">
|
|
|
|
</raven>
|
2017-06-23 21:00:42 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2018-03-01 23:14:40 +00:00
|
|
|
import { WebSocketBridge } from 'django-channels'
|
|
|
|
|
|
|
|
import logger from '@/logging'
|
2017-06-23 21:00:42 +00:00
|
|
|
import Sidebar from '@/components/Sidebar'
|
2018-02-17 20:23:45 +00:00
|
|
|
import Raven from '@/components/Raven'
|
2017-06-23 21:00:42 +00:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'app',
|
2018-02-17 20:23:45 +00:00
|
|
|
components: {
|
|
|
|
Sidebar,
|
|
|
|
Raven
|
|
|
|
},
|
2018-02-17 20:22:52 +00:00
|
|
|
created () {
|
|
|
|
this.$store.dispatch('instance/fetchSettings')
|
2018-03-01 23:14:40 +00:00
|
|
|
this.openWebsocket()
|
|
|
|
let self = this
|
2018-03-01 22:46:32 +00:00
|
|
|
setInterval(() => {
|
|
|
|
// used to redraw ago dates every minute
|
|
|
|
self.$store.commit('ui/computeLastDate')
|
|
|
|
}, 1000 * 60)
|
2018-03-01 23:14:40 +00:00
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
openWebsocket () {
|
2018-03-15 21:34:00 +00:00
|
|
|
if (!this.$store.state.auth.authenticated) {
|
|
|
|
return
|
|
|
|
}
|
2018-03-01 23:14:40 +00:00
|
|
|
let self = this
|
|
|
|
let token = this.$store.state.auth.token
|
|
|
|
// let token = 'test'
|
|
|
|
const bridge = new WebSocketBridge()
|
|
|
|
bridge.connect(
|
|
|
|
`/api/v1/instance/activity?token=${token}`,
|
|
|
|
null,
|
|
|
|
{reconnectInterval: 5000})
|
|
|
|
bridge.listen(function (event) {
|
|
|
|
logger.default.info('Received timeline update', event)
|
|
|
|
self.$store.commit('instance/event', event)
|
|
|
|
})
|
|
|
|
bridge.socket.addEventListener('open', function () {
|
|
|
|
console.log('Connected to WebSocket')
|
|
|
|
})
|
|
|
|
}
|
2018-02-17 20:22:52 +00:00
|
|
|
}
|
2017-06-23 21:00:42 +00:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
// we do the import here instead in main.js
|
|
|
|
// as resolve order is not deterministric in webpack
|
|
|
|
// and we end up with CSS rules not applied,
|
|
|
|
// see https://github.com/webpack/webpack/issues/215
|
|
|
|
@import 'semantic/semantic.css';
|
2018-02-15 21:34:14 +00:00
|
|
|
@import 'style/vendor/media';
|
2017-06-23 21:00:42 +00:00
|
|
|
|
|
|
|
|
2018-02-15 22:11:13 +00:00
|
|
|
html, body {
|
|
|
|
@include media("<desktop") {
|
2018-02-26 18:01:14 +00:00
|
|
|
font-size: 90%;
|
2018-02-15 22:11:13 +00:00
|
|
|
}
|
|
|
|
}
|
2017-06-23 21:00:42 +00:00
|
|
|
#app {
|
|
|
|
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
}
|
2017-06-28 20:12:37 +00:00
|
|
|
.main.pusher, .footer {
|
2018-02-15 21:34:59 +00:00
|
|
|
@include media(">desktop") {
|
|
|
|
margin-left: 350px !important;
|
|
|
|
}
|
2017-06-23 21:00:42 +00:00
|
|
|
transform: none !important;
|
2017-06-28 20:12:37 +00:00
|
|
|
}
|
|
|
|
.main-pusher {
|
2017-06-23 21:00:42 +00:00
|
|
|
padding: 1.5rem 0;
|
|
|
|
}
|
2018-02-15 21:34:14 +00:00
|
|
|
.ui.stripe.segment, #footer {
|
|
|
|
padding: 2em;
|
|
|
|
@include media(">tablet") {
|
|
|
|
padding: 4em;
|
|
|
|
}
|
2017-06-23 21:00:42 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.ui.small.text.container {
|
|
|
|
max-width: 500px !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.button.icon.tiny {
|
|
|
|
padding: 0.5em !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.sidebar {
|
|
|
|
.logo {
|
|
|
|
path {
|
|
|
|
fill: white;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.discrete.link {
|
|
|
|
color: rgba(0, 0, 0, 0.87);
|
|
|
|
}
|
|
|
|
|
|
|
|
.floated.buttons .button ~ .dropdown {
|
|
|
|
border-left: none;
|
|
|
|
}
|
|
|
|
</style>
|