Commit f63753f0 authored by Eliot Berriot's avatar Eliot Berriot 💬

Merge branch '600-remove-activity' into 'develop'

Fix #600: Removed "Activity" page, since all the data is available on the "Browse" page

Closes #600

See merge request !459
parents 2739a5fb caf4d608
Removed "Activity" page, since all the data is available on the "Browse" page (#600)
......@@ -71,9 +71,6 @@
class="item">
<i class="list icon"></i><translate>Playlists</translate>
</a>
<router-link
v-if="$store.state.auth.authenticated"
class="item" :to="{path: '/activity'}"><i class="bell icon"></i><translate>Activity</translate></router-link>
<router-link
v-if="$store.state.auth.authenticated"
class="item" :to="{name: 'content.index'}"><i class="upload icon"></i><translate>Add content</translate></router-link>
......
<template>
<div class="event">
<div class="label">
<i class="pink heart icon"></i>
</div>
<div class="content">
<div class="summary">
<translate :translate-params="{user: event.actor.local_id}">%{ user } favorited a track</translate>
<human-date class="date" :date="event.published" />
</div>
<div class="extra text">
<router-link :to="{name: 'library.tracks.detail', params: {id: event.object.local_id }}">
{{ event.object.name }}
</router-link>
<translate :translate-params="{album: event.object.album, artist: event.object.artist}">from %{ album } by %{ artist }</translate>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['event']
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
<template>
<div class="event">
<div class="label">
<i class="orange sound icon"></i>
</div>
<div class="content">
<div class="summary">
<translate :translate-params="{user: event.actor.local_id}">%{ user } listened to a track</translate>
<human-date class="date" :date="event.published" />
</div>
<div class="extra text">
<router-link :to="{name: 'library.tracks.detail', params: {id: event.object.local_id }}">
{{ event.object.name }}
</router-link>
<translate :translate-params="{album: event.object.album, artist: event.object.artist}">from %{ album } by %{ artist }</translate>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['event']
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
......@@ -3,7 +3,6 @@ import Router from 'vue-router'
import PageNotFound from '@/components/PageNotFound'
import About from '@/components/About'
import Home from '@/components/Home'
import InstanceTimeline from '@/views/instance/Timeline'
import Login from '@/components/auth/Login'
import Signup from '@/components/auth/Signup'
import Profile from '@/components/auth/Profile'
......@@ -56,11 +55,6 @@ export default new Router({
name: 'about',
component: About
},
{
path: '/activity',
name: 'activity',
component: InstanceTimeline
},
{
path: '/login',
name: 'login',
......
<template>
<div class="main pusher" v-title="labels.title">
<div class="ui vertical center aligned stripe segment">
<div v-if="isLoading" :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']">
<div class="ui text loader"><translate>Loading timeline...</translate></div>
</div>
<div v-else class="ui text container">
<h1 class="ui header"><translate>Recent activity on this instance</translate></h1>
<div class="ui feed">
<component
class="event"
v-for="(event, index) in events"
:key="event.id + index"
v-if="components[event.type]"
:is="components[event.type]"
:event="event">
</component>
</div>
</div>
</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
import { WebSocketBridge } from 'django-channels'
import axios from 'axios'
import logger from '@/logging'
import Like from '@/components/activity/Like'
import Listen from '@/components/activity/Listen'
export default {
data () {
return {
isLoading: false,
bridge: null,
components: {
'Like': Like,
'Listen': Listen
}
}
},
created () {
this.openWebsocket()
this.fetchEvents()
},
destroyed () {
this.disconnect()
},
computed: {
...mapState({
events: state => state.instance.events
}),
labels () {
return {
title: this.$gettext('Instance Timeline')
}
}
},
methods: {
fetchEvents () {
this.isLoading = true
let self = this
axios.get('/activity/').then((response) => {
self.isLoading = false
self.$store.commit('instance/events', response.data.results)
})
},
disconnect () {
if (!this.bridge) {
return
}
this.bridge.socket.close(1000, 'goodbye', {keepClosed: true})
},
openWebsocket () {
if (!this.$store.state.auth.authenticated) {
return
}
this.disconnect()
let self = this
let token = this.$store.state.auth.token
// let token = 'test'
const bridge = new WebSocketBridge()
this.bridge = bridge
let url = this.$store.getters['instance/absoluteUrl'](`api/v1/instance/activity?token=${token}`)
url = url.replace('http://', 'ws://')
url = url.replace('https://', 'wss://')
bridge.connect(
url,
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')
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment