Make landing page configurable (#4200)

* Implement customizable landing pages * Implement curated list for default landing page dropdown options * Update top nav link to redirect back to selected landing page * Update top nav title to be 'Go to {page}' for improved clarity * Remove landing page from selection and/or restore selection to default if is no longer valid
FreeTubeApp · Nov 20, 2023 · 58fe474 · 58fe474
1 parent e7310bd
commit 58fe474
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 44 deletions.
diff --git a/src/renderer/App.js b/src/renderer/App.js
@@ -108,6 +108,10 @@ export default defineComponent({
       return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
     },
 
+    landingPage: function() {
+      return '/' + this.$store.getters.getLandingPage
+    },
+
     externalLinkOpeningPromptNames: function () {
       return [
         this.$t('Yes'),
@@ -133,7 +137,7 @@ export default defineComponent({
     $route () {
       // react to route changes...
       // Hide top nav filter panel on page change
-      this.$refs.topNav.hideFilters()
+      this.$refs.topNav?.hideFilters()
     }
   },
   created () {
@@ -175,7 +179,13 @@ export default defineComponent({
       })
 
       this.$router.afterEach((to, from) => {
-        this.$refs.topNav.navigateHistory()
+        this.$refs.topNav?.navigateHistory()
+      })
+
+      this.$router.onReady(() => {
+        if (this.$router.currentRoute.path !== this.landingPage && this.landingPage !== '/subscriptions') {
+          this.$router.push({ path: this.landingPage })
+        }
       })
     })
   },

diff --git a/src/renderer/components/general-settings/general-settings.js b/src/renderer/components/general-settings/general-settings.js
@@ -27,20 +27,6 @@ export default defineComponent({
         'invidious',
         'local'
       ],
-      defaultPageNames: [
-        'Subscriptions',
-        'Trending',
-        'Most Popular',
-        'Playlists',
-        'History'
-      ],
-      defaultPageValues: [
-        'subscriptions',
-        'trending',
-        'mostPopular',
-        'playlists',
-        'history'
-      ],
       viewTypeValues: [
         'grid',
         'list'
@@ -57,6 +43,15 @@ export default defineComponent({
         '',
         'openLinkAfterPrompt',
         'doNothing'
+      ],
+      includedDefaultPageNames: [
+        'subscriptions',
+        'subscribedChannels',
+        'trending',
+        'popular',
+        'userPlaylists',
+        'history',
+        'settings'
       ]
     }
   },
@@ -79,10 +74,38 @@ export default defineComponent({
     checkForBlogPosts: function () {
       return this.$store.getters.getCheckForBlogPosts
     },
+    hidePlaylists: function () {
+      return this.$store.getters.getHidePlaylists
+    },
+    hidePopularVideos: function () {
+      return this.$store.getters.getHidePopularVideos
+    },
+    hideTrendingVideos: function () {
+      return this.$store.getters.getHideTrendingVideos
+    },
+    defaultPages: function () {
+      let includedPageNames = this.includedDefaultPageNames
+      if (this.hideTrendingVideos) includedPageNames = includedPageNames.filter((pageName) => pageName !== 'trending')
+      if (this.hidePlaylists) includedPageNames = includedPageNames.filter((pageName) => pageName !== 'userPlaylists')
+      if (!(!this.hidePopularVideos && (this.backendFallback || this.backendPreference === 'invidious'))) includedPageNames = includedPageNames.filter((pageName) => pageName !== 'popular')
+      return this.$router.getRoutes().filter((route) => includedPageNames.includes(route.name))
+    },
+    defaultPageNames: function () {
+      return this.defaultPages.map((route) => this.$t(route.meta.title))
+    },
+    defaultPageValues: function () {
+      // avoid Vue parsing issues by excluding '/' from path values
+      return this.defaultPages.map((route) => route.path.substring(1))
+    },
     backendPreference: function () {
       return this.$store.getters.getBackendPreference
     },
     landingPage: function () {
+      const landingPage = this.$store.getters.getLandingPage
+      // invalidate landing page selection & restore to default value if no longer valid
+      if (!this.defaultPageValues.includes(landingPage)) {
+        this.updateLandingPage('subscriptions')
+      }
       return this.$store.getters.getLandingPage
     },
     region: function () {

diff --git a/src/renderer/components/general-settings/general-settings.vue b/src/renderer/components/general-settings/general-settings.vue
@@ -43,7 +43,6 @@
         @change="handlePreferredApiBackend"
       />
       <ft-select
-        v-if="false"
         :placeholder="$t('Settings.General Settings.Default Landing Page')"
         :value="landingPage"
         :select-names="defaultPageNames"

diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
@@ -40,6 +40,20 @@ export default defineComponent({
       return this.$store.getters.getHideHeaderLogo
     },
 
+    landingPage: function () {
+      return this.$store.getters.getLandingPage
+    },
+
+    headerLogoTitle: function () {
+      return this.$t('Go to page',
+        {
+          page: this.$t(this.$router.getRoutes()
+            .find((route) => route.path === '/' + this.landingPage)
+            .meta.title
+          )
+        })
+    },
+
     enableSearchSuggestions: function () {
       return this.$store.getters.getEnableSearchSuggestions
     },

diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
@@ -59,10 +59,10 @@
         dir="ltr"
         role="link"
         tabindex="0"
-        :title="$t('Subscriptions.Subscriptions')"
-        @click="navigate('subscriptions')"
-        @keydown.space.prevent="navigate('subscriptions')"
-        @keydown.enter.prevent="navigate('subscriptions')"
+        :title="headerLogoTitle"
+        @click="navigate(landingPage)"
+        @keydown.space.prevent="navigate(landingPage)"
+        @keydown.enter.prevent="navigate(landingPage)"
       >
         <div
           class="logoIcon"

diff --git a/src/renderer/router/index.js b/src/renderer/router/index.js
@@ -22,64 +22,47 @@ const router = new Router({
   routes: [
     {
       path: '/',
+      name: 'default',
       meta: {
         title: 'Subscriptions.Subscriptions'
       },
       component: Subscriptions
     },
     {
       path: '/subscriptions',
+      name: 'subscriptions',
       meta: {
         title: 'Subscriptions.Subscriptions'
       },
       component: Subscriptions
     },
     {
       path: '/subscribedchannels',
+      name: 'subscribedChannels',
       meta: {
         title: 'Channels.Title'
       },
       component: SubscribedChannels
     },
-    {
-      path: '/settings/profile',
-      meta: {
-        title: 'Profile.Profile Settings'
-      },
-      component: ProfileSettings
-    },
-    {
-      path: '/settings/profile/new',
-      name: 'newProfile',
-      meta: {
-        title: 'Profile.Create New Profile'
-      },
-      component: ProfileEdit
-    },
-    {
-      path: '/settings/profile/edit/:id',
-      name: 'editProfile',
-      meta: {
-        title: 'Profile.Edit Profile'
-      },
-      component: ProfileEdit
-    },
     {
       path: '/trending',
+      name: 'trending',
       meta: {
         title: 'Trending.Trending'
       },
       component: Trending
     },
     {
       path: '/popular',
+      name: 'popular',
       meta: {
         title: 'Most Popular'
       },
       component: Popular
     },
     {
       path: '/userplaylists',
+      name: 'userPlaylists',
       meta: {
         title: 'User Playlists.Your Playlists'
       },
@@ -95,18 +78,44 @@ const router = new Router({
     },
     {
       path: '/settings',
+      name: 'settings',
       meta: {
         title: 'Settings.Settings'
       },
       component: Settings
     },
     {
       path: '/about',
+      name: 'about',
       meta: {
         title: 'About.About'
       },
       component: About
     },
+    {
+      path: '/settings/profile',
+      name: 'profileSettings',
+      meta: {
+        title: 'Profile.Profile Settings'
+      },
+      component: ProfileSettings
+    },
+    {
+      path: '/settings/profile/new',
+      name: 'newProfile',
+      meta: {
+        title: 'Profile.Create New Profile'
+      },
+      component: ProfileEdit
+    },
+    {
+      path: '/settings/profile/edit/:id',
+      name: 'editProfile',
+      meta: {
+        title: 'Profile.Edit Profile'
+      },
+      component: ProfileEdit
+    },
     {
       path: '/search/:query',
       meta: {

diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
@@ -31,6 +31,7 @@ Close: Close
 Back: Back
 Forward: Forward
 Open New Window: Open New Window
+Go to page: Go to {page}
 
 Version {versionNumber} is now available!  Click for more details: Version {versionNumber} is now available!  Click
   for more details