Update document title to display track info.

changes/changelog.d/359.feature

@@ -0,0 +1 @@
+Change the document title to display current track information. (#359)

front/src/App.vue

@@ -31,7 +31,7 @@
 import Vue from 'vue'
 import axios from 'axios'
 import _ from '@/lodash'
-import {mapState} from 'vuex'
+import {mapState, mapGetters} from 'vuex'
 import { WebSocketBridge } from 'django-channels'
 import GlobalEvents from '@/components/utils/global-events'
 import Sidebar from '@/components/Sidebar'
@@ -193,11 +193,35 @@ export default {
         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: {
     ...mapState({
       messages: state => state.ui.messages
     }),
+    ...mapGetters({
+      currentTrack: 'queue/currentTrack'
+    }),
     suggestedInstances () {
       let instances = this.$store.state.instance.knownInstances.slice(0)
       if (this.$store.state.instance.frontSettings.defaultServerUrl) {
@@ -262,7 +286,19 @@ export default {
           })
         })
       }
-    }
+    },
+    'currentTrack': {
+      immediate: true,
+      handler(newValue) {
+        this.updateDocumentTitle()
+      },
+    },
+    '$store.state.ui.pageTitle': {
+      immediate: true,
+      handler(newValue) {
+        this.updateDocumentTitle()
+      },
+    },
   }
 }
 </script>

front/src/main.js

@@ -58,16 +58,8 @@ Vue.use(VueMasonryPlugin)
 Vue.use(VueLazyload)
 Vue.config.productionTip = false
 Vue.directive('title', function (el, binding) {
-  let parts = []
-  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(' - ')
-  }
-)
+  store.commit('ui/pageTitle', binding.value)
+})
 axios.interceptors.request.use(function (config) {
   // Do something before request is sent
   if (store.state.auth.token) {

front/src/store/ui.js

@@ -19,7 +19,8 @@ export default {
       'import.status_updated': {},
       'mutation.created': {},
       'mutation.updated': {},
-    }
+    },
+    pageTitle: null
   },
   mutations: {
     addWebsocketEventHandler: (state, {eventName, id, handler}) => {
@@ -53,6 +54,9 @@ export default {
       } else {
         state.notifications[type] = Math.max(0, state.notifications[type] + count)
       }
+    },
+    pageTitle: (state, value) => {
+      state.pageTitle = value
     }
   },
   actions: {