From 33c76b033c96bd5b6b36ea750b0f32820c4c5080 Mon Sep 17 00:00:00 2001 From: root Date: Sat, 31 Jul 2021 03:39:30 +0530 Subject: [PATCH] Refactor titles with Vue-Meta --- package.json | 1 + src/App.vue | 6 ++++++ src/router/index.js | 2 ++ src/routes/Channel.vue | 9 ++++----- src/routes/Playlist.vue | 5 ++++- src/routes/Preferences.vue | 4 ++++ src/routes/SearchResults.vue | 7 ++++++- src/routes/TrendingPage.vue | 8 +++++--- src/routes/WatchVideo.vue | 9 +++++++-- yarn.lock | 12 ++++++++++++ 10 files changed, 51 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 475e3f9..8386dce 100644 --- a/package.json +++ b/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", diff --git a/src/App.vue b/src/App.vue index fea2a9d..4685d76 100644 --- a/src/App.vue +++ b/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: [ { diff --git a/src/router/index.js b/src/router/index.js index 1052b13..f164772 100644 --- a/src/router/index.js +++ b/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 = [ diff --git a/src/routes/Channel.vue b/src/routes/Channel.vue index aa7d1df..ea8848a 100644 --- a/src/routes/Channel.vue +++ b/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) { diff --git a/src/routes/Playlist.vue b/src/routes/Playlist.vue index 459bc97..fbbd720 100644 --- a/src/routes/Playlist.vue +++ b/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: { diff --git a/src/routes/Preferences.vue b/src/routes/Preferences.vue index a16c7c0..47f3a3a 100644 --- a/src/routes/Preferences.vue +++ b/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: {} }) diff --git a/src/routes/SearchResults.vue b/src/routes/SearchResults.vue index 9ccef64..882d904 100644 --- a/src/routes/SearchResults.vue +++ b/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 diff --git a/src/routes/TrendingPage.vue b/src/routes/TrendingPage.vue index 276c425..d628579 100644 --- a/src/routes/TrendingPage.vue +++ b/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)) diff --git a/src/routes/WatchVideo.vue b/src/routes/WatchVideo.vue index 2b6720e..9669496 100644 --- a/src/routes/WatchVideo.vue +++ b/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() diff --git a/yarn.lock b/yarn.lock index 9dc36df..796da3f 100644 --- a/yarn.lock +++ b/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"