Refactor titles with Vue-Meta

package.json

@@ -16,6 +16,7 @@
     "mux.js": "^5.12.2",
     "shaka-player": "^3.2.0",
     "vue": "^2.6.11",
+    "vue-meta": "^2.4.0",
     "vue-router": "^3.2.0",
     "vuetify": "^2.4.0",
     "vuex": "^3.4.0",

src/App.vue

@@ -39,6 +39,12 @@ export default {
   components: {
     SearchMenu
   },
+  metaInfo: {
+    title: 'Homepage',
+    // all titles will be injected into this template
+    titleTemplate: '%s - Piped'
+  },
+
   data: () => ({
     links: [
       {

src/router/index.js

@@ -1,9 +1,11 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+import VueMeta from 'vue-meta'
 
 import TrendingPage from '@/routes/TrendingPage'
 import Preferences from '@/routes/Preferences'
 
+Vue.use(VueMeta)
 Vue.use(VueRouter)
 
 const routes = [

src/routes/Channel.vue

@@ -46,6 +46,10 @@ export default {
       subscribed: false
     }
   },
+  metaInfo () {
+    return { title: this.channel ? this.channel.name : 'Loading' }
+  },
+
   mounted () {
     this.getChannelData()
   },
@@ -58,11 +62,6 @@ export default {
     async getChannelData () {
       this.fetchChannel()
         .then(data => (this.channel = data))
-        .then(() => {
-          if (!this.channel.error) {
-            document.title = this.channel.name + ' - Piped'
-          }
-        })
     },
 
     onRelatedStreamsEndIntersect (entries) {

src/routes/Playlist.vue

@@ -92,6 +92,10 @@ export default {
       playlist: null
     }
   },
+  metaInfo () {
+    return { title: this.playlist ? this.playlist.name : 'Loading' }
+  },
+
   mounted () {
     this.getPlaylistData()
   },
@@ -113,7 +117,6 @@ export default {
     async getPlaylistData () {
       this.fetchPlaylist()
         .then(data => (this.playlist = data))
-        .then(() => (document.title = this.playlist.name + ' - Piped'))
     }
   },
   components: {

src/routes/Preferences.vue

@@ -162,6 +162,10 @@ export default {
       ]
     }
   },
+  metaInfo: {
+    title: 'Preferences'
+  },
+
   mounted () {
     if (Object.keys(this.$route.query).length > 0) this.$router.replace({ query: {} })
 

src/routes/SearchResults.vue

@@ -46,6 +46,12 @@ export default {
       selectedFilter: 'all'
     }
   },
+  metaInfo () {
+    return {
+      title: this.$route.query.search_query
+    }
+  },
+
   mounted () {
     this.updateResults()
   },
@@ -88,7 +94,6 @@ export default {
       return LibPiped.timeFormat(...args)
     },
     async updateResults () {
-      document.title = this.$route.query.search_query + ' - Piped'
       this.results = this.fetchResults().then(json => {
         json.items = json.items.map(this.rationalizeSearchResult)
         this.results = json

src/routes/TrendingPage.vue

@@ -23,10 +23,12 @@ export default {
       videos: []
     }
   },
-  mounted () {
-    // Reimplement using vue-meta
-    document.title = 'Trending - Piped'
 
+  metaInfo: {
+    title: 'Trending'
+  },
+
+  mounted () {
     const region = this.$store.getters.getPreferenceString('region', 'US')
 
     this.fetchTrending(region).then(videos => (this.videos = videos))

src/routes/WatchVideo.vue

@@ -98,7 +98,7 @@ export default {
   data () {
     return {
       video: {
-        title: 'Loading...'
+        title: 'Loading ...'
       },
       sponsors: null,
       selectedAutoLoop: false,
@@ -108,6 +108,12 @@ export default {
       channelId: null
     }
   },
+  metaInfo () {
+    return {
+      title: this.video.title
+    }
+  },
+
   mounted () {
     this.initialize()
   },
@@ -194,7 +200,6 @@ export default {
         })
         .then(() => {
           if (!this.video.error) {
-            document.title = this.video.title + ' - Piped'
             this.channelId = this.video.uploaderUrl.split('/')[2]
             this.fetchSubscribedStatus()
 

yarn.lock

@@ -3162,6 +3162,11 @@ deepmerge@^1.5.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
   integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
 
+deepmerge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
 default-gateway@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
@@ -8951,6 +8956,13 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-meta@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/vue-meta/-/vue-meta-2.4.0.tgz#a419fb4b4135ce965dab32ec641d1989c2ee4845"
+  integrity sha512-XEeZUmlVeODclAjCNpWDnjgw+t3WA6gdzs6ENoIAgwO1J1d5p1tezDhtteLUFwcaQaTtayRrsx7GL6oXp/m2Jw==
+  dependencies:
+    deepmerge "^4.2.2"
+
 vue-router@^3.2.0:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.2.tgz#5f55e3f251970e36c3e8d88a7cd2d67a350ade5c"