Skip to content
Snippets Groups Projects
Commit f24d2549 authored by Ben Finney's avatar Ben Finney Committed by Eliot Berriot
Browse files

Update document title to display track info.

parent f281189f
No related branches found
No related tags found
No related merge requests found
Change the document title to display current track information. (#359)
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
import Vue from 'vue' import Vue from 'vue'
import axios from 'axios' import axios from 'axios'
import _ from '@/lodash' import _ from '@/lodash'
import {mapState} from 'vuex' import {mapState, mapGetters} from 'vuex'
import { WebSocketBridge } from 'django-channels' import { WebSocketBridge } from 'django-channels'
import GlobalEvents from '@/components/utils/global-events' import GlobalEvents from '@/components/utils/global-events'
import Sidebar from '@/components/Sidebar' import Sidebar from '@/components/Sidebar'
...@@ -193,11 +193,35 @@ export default { ...@@ -193,11 +193,35 @@ export default {
console.log('Connected to WebSocket') console.log('Connected to WebSocket')
}) })
}, },
getTrackInformationText(track) {
const trackTitle = track.title
const artistName = (
(track.artist) ? track.artist.name : track.album.artist.name)
const text = `♫ ${trackTitle}${artistName} ♫`
return text
},
updateDocumentTitle() {
let parts = []
const currentTrackPart = (
(this.currentTrack) ? this.getTrackInformationText(this.currentTrack)
: null)
if (currentTrackPart) {
parts.push(currentTrackPart)
}
if (this.$store.state.ui.pageTitle) {
parts.push(this.$store.state.ui.pageTitle)
}
parts.push(this.$store.state.instance.settings.instance.name.value || 'Funkwhale')
document.title = parts.join('')
},
}, },
computed: { computed: {
...mapState({ ...mapState({
messages: state => state.ui.messages messages: state => state.ui.messages
}), }),
...mapGetters({
currentTrack: 'queue/currentTrack'
}),
suggestedInstances () { suggestedInstances () {
let instances = this.$store.state.instance.knownInstances.slice(0) let instances = this.$store.state.instance.knownInstances.slice(0)
if (this.$store.state.instance.frontSettings.defaultServerUrl) { if (this.$store.state.instance.frontSettings.defaultServerUrl) {
...@@ -262,7 +286,19 @@ export default { ...@@ -262,7 +286,19 @@ export default {
}) })
}) })
} }
} },
'currentTrack': {
immediate: true,
handler(newValue) {
this.updateDocumentTitle()
},
},
'$store.state.ui.pageTitle': {
immediate: true,
handler(newValue) {
this.updateDocumentTitle()
},
},
} }
} }
</script> </script>
......
...@@ -58,16 +58,8 @@ Vue.use(VueMasonryPlugin) ...@@ -58,16 +58,8 @@ Vue.use(VueMasonryPlugin)
Vue.use(VueLazyload) Vue.use(VueLazyload)
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.directive('title', function (el, binding) { Vue.directive('title', function (el, binding) {
let parts = [] store.commit('ui/pageTitle', binding.value)
let instanceName = store.state.instance.settings.instance.name.value })
if (instanceName.length === 0) {
instanceName = 'Funkwhale'
}
parts.unshift(instanceName)
parts.unshift(binding.value)
document.title = parts.join(' - ')
}
)
axios.interceptors.request.use(function (config) { axios.interceptors.request.use(function (config) {
// Do something before request is sent // Do something before request is sent
if (store.state.auth.token) { if (store.state.auth.token) {
......
...@@ -19,7 +19,8 @@ export default { ...@@ -19,7 +19,8 @@ export default {
'import.status_updated': {}, 'import.status_updated': {},
'mutation.created': {}, 'mutation.created': {},
'mutation.updated': {}, 'mutation.updated': {},
} },
pageTitle: null
}, },
mutations: { mutations: {
addWebsocketEventHandler: (state, {eventName, id, handler}) => { addWebsocketEventHandler: (state, {eventName, id, handler}) => {
...@@ -53,6 +54,9 @@ export default { ...@@ -53,6 +54,9 @@ export default {
} else { } else {
state.notifications[type] = Math.max(0, state.notifications[type] + count) state.notifications[type] = Math.max(0, state.notifications[type] + count)
} }
},
pageTitle: (state, value) => {
state.pageTitle = value
} }
}, },
actions: { actions: {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment