Replace broken trending with a local API only equivalent

src/main/index.js

@@ -2391,7 +2391,7 @@ function runApp() {
             },
             type: 'normal'
           },
-          !hideTrendingVideos && {
+          (!hideTrendingVideos && (backendFallback || backendPreference === 'local')) && {
             label: 'Trending',
             click: (_menuItem, browserWindow, _event) => {
               navigateTo('/trending', browserWindow)

src/renderer/App.js

@@ -628,7 +628,6 @@ export default defineComponent({
           transformed = true
           break
         case 'subscriptions':
-        case 'trending':
         case 'history':
           transformedURL.pathname = `/feed/${pathParts[1]}`
           transformed = true

src/renderer/components/DistractionSettings/DistractionSettings.vue

@@ -96,8 +96,10 @@
     <div class="switchColumnGrid">
       <div class="switchColumn">
         <FtToggleSwitch
+          v-if="SUPPORTS_LOCAL_API"
           :label="t('Settings.Distraction Free Settings.Hide Trending Videos')"
           :compact="true"
+          :disabled="disableHideTrendingVideos"
           :default-value="hideTrendingVideos"
           @change="updateHideTrendingVideos"
         />
@@ -298,6 +300,8 @@ import { checkYoutubeChannelId, findChannelTagInfo } from '../../helpers/channel
 
 const { t } = useI18n()
 
+const SUPPORTS_LOCAL_API = process.env.SUPPORTS_LOCAL_API
+
 const channelHiderDisabled = ref(false)
 
 /** @type {import('vue').ComputedRef<'local' | 'invidious'>} */
@@ -368,6 +372,7 @@ function handleHideRecommendedVideos(value) {
 /** @type {import('vue').ComputedRef<boolean>} */
 const hideTrendingVideos = computed(() => store.getters.getHideTrendingVideos)
 
+const disableHideTrendingVideos = computed(() => backendPreference.value !== 'local' && !backendFallback.value)
 /**
  * @param {boolean} value
  */

src/renderer/components/SideNav/SideNav.vue

@@ -55,7 +55,7 @@
         </p>
       </router-link>
       <router-link
-        v-if="!hideTrendingVideos"
+        v-if="SUPPORTS_LOCAL_API && !hideTrendingVideos && (backendFallback || backendPreference === 'local')"
         class="navOption mobileHidden"
         role="button"
         to="/trending"
@@ -256,6 +256,8 @@ import { KeyboardShortcuts } from '../../../constants'
 
 const { locale, t } = useI18n()
 
+const SUPPORTS_LOCAL_API = process.env.SUPPORTS_LOCAL_API
+
 /** @type {import('vue').ComputedRef<boolean>} */
 const isOpen = computed(() => {
   return store.getters.getIsSideNavOpen

src/renderer/components/SideNavMoreOptions/SideNavMoreOptions.vue

@@ -56,7 +56,7 @@
         </p>
       </router-link>
       <router-link
-        v-if="!hideTrendingVideos"
+        v-if=" SUPPORTS_LOCAL_API && trendingVisible"
         class="navOption"
         :title="$t('Trending.Trending')"
         :aria-label="hideLabelsSideBar ? $t('Trending.Trending') : null"
@@ -202,13 +202,16 @@ import { useRouter } from 'vue-router'
 
 import store from '../../store/index'
 
+const SUPPORTS_LOCAL_API = process.env.SUPPORTS_LOCAL_API
+
 const openMoreOptions = ref(false)
 
 const menuRef = ref(null)
 
 /** @type {import('vue').ComputedRef<boolean>} */
-const hideTrendingVideos = computed(() => {
-  return store.getters.getHideTrendingVideos
+const trendingVisible = computed(() => {
+  return !store.getters.getHideTrendingVideos &&
+    (store.getters.getBackendFallback || store.getters.getBackendPreference === 'local')
 })
 
 /** @type {import('vue').ComputedRef<boolean>} */

src/renderer/components/general-settings/general-settings.js

@@ -92,7 +92,9 @@ export default defineComponent({
     },
     defaultPages: function () {
       let includedPageNames = this.includedDefaultPageNames
-      if (this.hideTrendingVideos) includedPageNames = includedPageNames.filter((pageName) => pageName !== 'trending')
+      if (!process.env.SUPPORTS_LOCAL_API || this.hideTrendingVideos || !this.backendFallback || this.backendPreference !== 'local') {
+        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))

src/renderer/helpers/api/invidious.js

@@ -529,43 +529,6 @@ export async function getInvidiousPopularFeed() {
   return items
 }
 
-/**
- * @param {'default' | 'music' | 'gaming' | 'movies'} tab
- * @param {string} region
- * @returns {Promise<InvidiousVideoType[] | null>}
- */
-export async function getInvidiousTrending(tab, region) {
-  const params = {
-    resource: 'trending',
-    id: '',
-    params: {
-      region
-    }
-  }
-
-  if (tab !== 'default') {
-    params.params.type = tab.charAt(0).toUpperCase() + tab.substring(1)
-  }
-
-  const response = await invidiousAPICall(params)
-
-  if (!response) {
-    return null
-  }
-
-  const items = response.filter((item) => {
-    return item.type === 'video' || item.type === 'channel' || item.type === 'playlist'
-  })
-
-  items.forEach((item) => {
-    if (item.type === 'video') {
-      setPublishedTimestamp(item)
-    }
-  })
-
-  return items
-}
-
 /**
  * @param {string} query
  * @param {number} page

src/renderer/helpers/api/local.js

@@ -1,4 +1,4 @@
-import { ClientType, Innertube, Misc, Parser, Platform, UniversalCache, Utils, YT, YTNodes } from 'youtubei.js'
+import { ClientType, Innertube, Misc, Mixins, Parser, Platform, UniversalCache, Utils, YT, YTNodes } from 'youtubei.js'
 import Autolinker from 'autolinker'
 import { SEARCH_CHAR_LIMIT } from '../../../constants'
 
@@ -361,42 +361,43 @@ export async function untilEndOfLocalPlayList(playlist, callback, options = { ru
 
 /**
  * @param {string} location
- * @param {'default'|'music'|'gaming'|'movies'} tab
- * @param {import('youtubei.js').Mixins.TabbedFeed<import('youtubei.js').IBrowseResponse> | null} instance
+ * @param {'gaming' | 'sports' | 'podcasts'} tab
  */
-export async function getLocalTrending(location, tab, instance) {
-  if (instance === null) {
-    const innertube = await createInnertube({ location })
-    instance = await innertube.getTrending()
-  }
-
-  // youtubei.js's tab names are localised, so we need to use the index to get tab name that youtubei.js expects
-  const tabIndex = ['default', 'music', 'gaming', 'movies'].indexOf(tab)
-  const resultsInstance = await instance.getTabByName(instance.tabs[tabIndex])
+export async function getLocalTrending(location, tab) {
+  const innertube = await createInnertube({ location })
 
-  let results
+  let args
 
-  // the default tab can have duplicate videos so we need to deduplicate them
-  if (tab === 'default') {
-    const alreadySeenIds = []
-    results = []
-
-    resultsInstance.videos.forEach(video => {
-      if (video.type === 'Video' && !alreadySeenIds.includes(video.video_id)) {
-        alreadySeenIds.push(video.video_id)
-        results.push(parseLocalListVideo(video))
+  switch (tab) {
+    case 'gaming':
+      // https://www.youtube.com/gaming/trending
+      args = {
+        browseId: 'UCOpNcN46UbXVtpKMrmU4Abg',
+        params: 'Egh0cmVuZGluZ7gBAJIDAPIGBAoCMgA'
       }
-    })
-  } else {
-    results = resultsInstance.videos
-      .filter((video) => video.type === 'Video')
-      .map(parseLocalListVideo)
+      break
+    case 'sports':
+      // https://www.youtube.com/channel/UCEgdi0XIXXZ-qJOFPf4JSKw/sportstab?ss=CMMG
+      args = {
+        browseId: 'UCEgdi0XIXXZ-qJOFPf4JSKw',
+        params: 'EglzcG9ydHN0YWK4AQCSAwDyBgQKAjIA'
+      }
+      break
+    case 'podcasts':
+      // https://www.youtube.com/podcasts/popularepisodes
+      args = {
+        browseId: 'FEpodcasts_destination',
+        params: 'qgcCCAM%3D'
+      }
+      break
+    default:
+      throw new Error('Unknown trending tab')
   }
 
-  return {
-    results,
-    instance: resultsInstance
-  }
+  const response = await innertube.actions.execute('/browse', args)
+  const feed = new Mixins.Feed(innertube.actions, response)
+
+  return feed.videos.map(video => parseLocalListVideo(video))
 }
 
 /**

src/renderer/main.js

@@ -79,13 +79,13 @@ import {
   faLock,
   faMessage,
   faMoneyCheckDollar,
-  faMusic,
   faNetworkWired,
   faNewspaper,
   faPalette,
   faPhotoFilm,
   faPlay,
   faPlus,
+  faPodcast,
   faQuestionCircle,
   faRandom,
   faRetweet,
@@ -111,6 +111,7 @@ import {
   faTimesCircle,
   faTowerBroadcast,
   faTrash,
+  faTrophy,
   faUserCheck,
   faUserLock,
   faUsers,
@@ -203,13 +204,13 @@ library.add(
   faLock,
   faMessage,
   faMoneyCheckDollar,
-  faMusic,
   faNetworkWired,
   faNewspaper,
   faPalette,
   faPhotoFilm,
   faPlay,
   faPlus,
+  faPodcast,
   faQuestionCircle,
   faRandom,
   faRetweet,
@@ -235,6 +236,7 @@ library.add(
   faTimesCircle,
   faTowerBroadcast,
   faTrash,
+  faTrophy,
   faUserCheck,
   faUserLock,
   faUsers,

src/renderer/router/index.js

@@ -42,14 +42,16 @@ const router = createRouter({
       },
       component: SubscribedChannels
     },
-    {
-      path: '/trending',
-      name: 'trending',
-      meta: {
-        title: 'Trending'
-      },
-      component: Trending
-    },
+    ...(process.env.SUPPORTS_LOCAL_API
+      ? [{
+          path: '/trending',
+          name: 'trending',
+          meta: {
+            title: 'Trending'
+          },
+          component: Trending
+        }]
+      : []),
     {
       path: '/popular',
       name: 'popular',

src/renderer/store/modules/utils.js

@@ -17,10 +17,9 @@ const state = {
   sessionSearchHistory: [],
   popularCache: null,
   trendingCache: {
-    default: null,
-    music: null,
     gaming: null,
-    movies: null
+    sports: null,
+    podcasts: null
   },
   cachedPlaylist: null,
   deArrowCache: {},
@@ -49,10 +48,9 @@ const state = {
   externalPlayerCmdArguments: {},
   lastPopularRefreshTimestamp: '',
   lastTrendingRefreshTimestamp: {
-    default: '',
-    music: '',
     gaming: '',
-    movies: ''
+    sports: '',
+    podcasts: ''
   },
   subscriptionFirstAutoFetchRunData: {
     videos: false,
@@ -656,9 +654,10 @@ const actions = {
 
         if (feedType === 'playlists' || feedType === 'you' || feedType === 'library') {
           return { urlType: 'userplaylists' }
-        } else {
+        } else if (process.env.SUPPORTS_LOCAL_API || feedType !== 'trending') {
           return { urlType: feedType }
         }
+        // Can fall through if a trending URL is detected in a build without the local API
       }
 
       default: {
@@ -911,7 +910,7 @@ const mutations = {
 
   /**
    * @param {typeof state} state
-   * @param {{page: 'default' | 'music' | 'gaming' | 'movies', timestamp: Date}} param1
+   * @param {{page: 'gaming' | 'sports' | 'podcasts', timestamp: Date}} param1
    */
   setLastTrendingRefreshTimestamp (state, { page, timestamp }) {
     state.lastTrendingRefreshTimestamp[page] = timestamp
@@ -923,7 +922,7 @@ const mutations = {
 
   /**
    * @param {typeof state} state
-   * @param {'default' | 'music' | 'gaming' | 'movies'} page
+   * @param {'gaming' | 'sports' | 'podcasts'} page
    */
   clearTrendingCache(state, page) {
     state.trendingCache[page] = null

src/renderer/views/Trending/Trending.css

@@ -7,7 +7,7 @@
 .trendingInfoTabs {
   inline-size: 100%;
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
   margin-block: -3px 10px;
   color: var(--tertiary-text-color);
 }