Translate window titles (#1321)

* Update Titles to change based on locale

* Update Title on Forward/Backwards navigation

* Revert "Update Title on Forward/Backwards navigation"

This reverts commit 0a57825e920911275dcabfbb36d44712a452da15.

* Translate Window Titles

-Updated en-US & en_GB localization files to include 'Playlist" and "Profile Settings"
- Updated app to dynamically change titles + translate (App.js sets title instead of router now)
- Channel & Video get title based on Channel Name & Video name (changing those titles are in their respective views)

* Revert "Update Titles to change based on locale"

This reverts commit 9e8081606710c2a63655dc33594c542af7826df8.

* Re-add update title to channel view

* fix playlist title

* Fix 'Edit Profile' title

src/renderer/App.js

@@ -71,6 +71,20 @@ export default Vue.extend({
     profileList: function () {
       return this.$store.getters.getProfileList
     },
+    windowTitle: function () {
+      if (this.$route.meta.title !== 'Channel' && this.$route.meta.title !== 'Watch') {
+        let title =
+        this.$route.meta.path === '/home'
+          ? process.env.PRODUCT_NAME
+          : `${this.$t(this.$route.meta.title)} - ${process.env.PRODUCT_NAME}`
+        if (!title) {
+          title = process.env.PRODUCT_NAME
+        }
+        return title
+      } else {
+        return null
+      }
+    },
     activeProfile: function () {
       return this.$store.getters.getActiveProfile
     },
@@ -84,6 +98,12 @@ export default Vue.extend({
       return this.$store.getters.getDefaultInvidiousInstance
     }
   },
+  watch: {
+    windowTitle: 'setWindowTitle'
+  },
+  created () {
+    this.setWindowTitle()
+  },
   mounted: function () {
     this.grabUserSettings().then(async () => {
       await this.fetchInvidiousInstances()
@@ -383,6 +403,11 @@ export default Vue.extend({
       'setInvidiousInstancesList'
     ]),
 
+    setWindowTitle: function() {
+      if (this.windowTitle !== null) {
+        document.title = this.windowTitle
+      }
+    },
     ...mapActions([
       'showToast',
       'openExternalLink',

src/renderer/router/index.js

@@ -21,7 +21,7 @@ const router = new Router({
     {
       path: '/',
       meta: {
-        title: 'Subscriptions',
+        title: 'Subscriptions.Subscriptions',
         icon: 'fa-home'
       },
       component: Subscriptions
@@ -29,7 +29,7 @@ const router = new Router({
     {
       path: '/subscriptions',
       meta: {
-        title: 'Subscriptions',
+        title: 'Subscriptions.Subscriptions',
         icon: 'fa-home'
       },
       component: Subscriptions
@@ -37,7 +37,7 @@ const router = new Router({
     {
       path: '/settings/profile',
       meta: {
-        title: 'Profile Settings',
+        title: 'Profile.Profile Settings',
         icon: 'fa-home'
       },
       component: ProfileSettings
@@ -46,7 +46,7 @@ const router = new Router({
       path: '/settings/profile/new',
       name: 'newProfile',
       meta: {
-        title: 'New Profile',
+        title: 'Profile.Create New Profile',
         icon: 'fa-home'
       },
       component: ProfileEdit
@@ -55,7 +55,7 @@ const router = new Router({
       path: '/settings/profile/edit/:id',
       name: 'editProfile',
       meta: {
-        title: 'Edit Profile',
+        title: 'Profile.Edit Profile',
         icon: 'fa-home'
       },
       component: ProfileEdit
@@ -79,7 +79,7 @@ const router = new Router({
     {
       path: '/userplaylists',
       meta: {
-        title: 'User Playlists',
+        title: 'User Playlists.Your Playlists',
         icon: 'fa-home'
       },
       component: UserPlaylists
@@ -88,7 +88,7 @@ const router = new Router({
       path: '/history',
       name: 'history',
       meta: {
-        title: 'History',
+        title: 'History.History',
         icon: 'fa-home'
       },
       component: History
@@ -96,7 +96,7 @@ const router = new Router({
     {
       path: '/settings',
       meta: {
-        title: 'Settings',
+        title: 'Settings.Settings',
         icon: 'fa-home'
       },
       component: Settings
@@ -104,7 +104,7 @@ const router = new Router({
     {
       path: '/about',
       meta: {
-        title: 'About',
+        title: 'About.About',
         icon: 'fa-home'
       },
       component: About
@@ -112,7 +112,7 @@ const router = new Router({
     {
       path: '/search/:query',
       meta: {
-        title: 'Search',
+        title: 'Search Filters.Search Results',
         icon: 'fa-home'
       },
       component: Search
@@ -120,7 +120,7 @@ const router = new Router({
     {
       path: '/playlist/:id',
       meta: {
-        title: 'Playlist',
+        title: 'Playlist.Playlist',
         icon: 'fa-home'
       },
       component: Playlist
@@ -155,18 +155,4 @@ const router = new Router({
   }
 })
 
-// dynamically set application title to current view
-router.afterEach(to => {
-  let title =
-    to.path === '/home'
-      ? process.env.PRODUCT_NAME
-      : `${to.meta.title} - ${process.env.PRODUCT_NAME}`
-
-  if (!title) {
-    title = 'Home'
-  }
-
-  document.title = title
-})
-
 export default router

src/renderer/views/Channel/Channel.js

@@ -250,6 +250,7 @@ export default Vue.extend({
       ytch.getChannelInfo(this.id).then((response) => {
         this.id = response.authorId
         this.channelName = response.author
+        document.title = `${this.channelName} - ${process.env.PRODUCT_NAME}`
         if (this.hideChannelSubscriptions || response.subscriberCount === 0) {
           this.subCount = null
         } else {
@@ -344,6 +345,7 @@ export default Vue.extend({
       this.invidiousGetChannelInfo(this.id).then((response) => {
         console.log(response)
         this.channelName = response.author
+        document.title = `${this.channelName} - ${process.env.PRODUCT_NAME}`
         this.id = response.authorId
         if (this.hideChannelSubscriptions) {
           this.subCount = null

static/locales/en-US.yaml

@@ -327,6 +327,7 @@ About:
   Donate: Donate
 
 Profile:
+  Profile Settings: Profile Settings
   Profile Select: Profile Select
   Profile Filter: Profile Filter
   All Channels: All Channels
@@ -525,6 +526,7 @@ Videos:
 #& Playlists
 Playlist:
   #& About
+  Playlist: Playlist
   View Full Playlist: View Full Playlist
   Videos: Videos
   View: View

static/locales/en_GB.yaml

@@ -372,6 +372,7 @@ About:
   Licensed under the AGPLv3: Licensed under the AGPLv3
   Source code: Source code
 Profile:
+  Profile Settings: Profile Settings
   Profile Select: 'Profile Select'
   All Channels: 'All Channels'
   Profile Manager: 'Profile Manager'
@@ -572,6 +573,7 @@ Videos:
 #& Playlists
 Playlist:
   #& About
+  Playlist: Playlist
   View Full Playlist: 'View Full Playlist'
   Videos: 'Videos'
   View: 'View'