Filter home data for setting featured channels

src/renderer/components/ChannelHome/ChannelHome.vue

@@ -1,10 +1,12 @@
 <template>
   <div>
     <div
-      v-for="(shelf, index) in shelves"
+      v-for="(shelf, index) in filteredShelves"
       :key="index"
     >
-      <details>
+      <details
+        :open="index == 0"
+      >
         <summary
           class="shelfTitle"
         >
@@ -16,8 +18,7 @@
             <router-link
               class="playAllLink"
               :to="{
-                path: `/playlist/${shelf.playlistId}`,
-                query: searchSettings
+                path: `/playlist/${shelf.playlistId}`
               }"
             >
               <FontAwesomeIcon
@@ -40,14 +41,31 @@
 </template>
 
 <script setup>
+
+import { computed } from 'vue'
 import FtElementList from '../../components/FtElementList/FtElementList.vue'
+import store from '../../store/index'
 
-defineProps({
+const props = defineProps({
   shelves: {
     type: Array,
     default: () => []
   }
 })
+
+/** @type {import('vue').ComputedRef<bool>} */
+const hideFeaturedChannels = computed(() => {
+  return store.getters.getHideFeaturedChannels
+})
+
+const filteredShelves = computed(() => {
+  let shelves = props.shelves
+  if (hideFeaturedChannels.value) {
+    shelves = shelves.filter(shelf => shelf.content[0].type !== 'channel')
+  }
+
+  return shelves.filter(shelf => shelf.content.length > 0)
+})
 </script>
 
 <style scoped src="./ChannelHome.css" />

src/renderer/helpers/api/local.js

@@ -1176,7 +1176,7 @@ function parseListItem(item) {
       return {
         type: 'channel',
         dataSource: 'local',
-        thumbnail: game.box_art.at(0).url,
+        thumbnail: game.box_art.at(0).url.replace(/^\/\//, 'https://'),
         name: game.title.text,
         id: game.endpoint.payload.browseId
       }

src/renderer/views/Channel/Channel.js

@@ -594,45 +594,6 @@ export default defineComponent({
 
         this.updateSubscriptionDetails({ channelThumbnailUrl, channelName, channelId })
 
-        let relatedChannels = channel.channels.map(({ author }) => ({
-          name: author.name,
-          id: author.id,
-          thumbnailUrl: author.best_thumbnail.url
-        }))
-
-        if (channel.memo.has('GameDetails')) {
-          /** @type {import('youtubei.js').YTNodes.GameDetails[]} */
-          const games = channel.memo.get('GameDetails')
-
-          relatedChannels.push(...games.map(game => ({
-            id: game.endpoint.payload.browseId,
-            name: game.title.text,
-            thumbnailUrl: game.box_art[0].url
-          })))
-        }
-
-        if (relatedChannels.length > 0) {
-          /** @type {Set<string>} */
-          const knownChannelIds = new Set()
-
-          relatedChannels = relatedChannels.filter(channel => {
-            if (!knownChannelIds.has(channel.id)) {
-              knownChannelIds.add(channel.id)
-              return true
-            }
-
-            return false
-          })
-
-          relatedChannels.forEach(channel => {
-            if (channel.thumbnailUrl.startsWith('//')) {
-              channel.thumbnailUrl = `https:${channel.thumbnailUrl}`
-            }
-          })
-        }
-
-        this.relatedChannels = relatedChannels
-
         this.channelInstance = channel
 
         if (channel.has_about) {
@@ -647,8 +608,11 @@ export default defineComponent({
         const tabs = ['about']
 
         // we'll count it as home page if it's not video. This will help us support some special channels
-        if (!this.hideChannelHome && (channel.has_home === 'home' || channel.tabs[0] !== 'Videos')) {
-          tabs.unshift('home')
+        if ((channel.has_home === 'home' || channel.tabs[0] !== 'Videos')) {
+          if (!this.hideChannelHome) {
+            tabs.push('home')
+          }
+          // we still parse the home page so we can set related channels
           this.getChannelHomeLocal()
         }
 
@@ -765,7 +729,7 @@ export default defineComponent({
       }
     },
 
-    getChannelHomeLocal: async function () {
+    getChannelHomeLocal: function () {
       this.isElementListLoading = true
       const expectedId = this.id
 
@@ -780,7 +744,30 @@ export default defineComponent({
           return
         }
 
-        this.homeData = parseChannelHomeTab(homeTab)
+        const homeData = parseChannelHomeTab(homeTab)
+        if (!this.hideChannelHome) {
+          this.homeData = homeData
+        }
+
+        // parse related channels from home page data
+        const relatedChannels = []
+        /** @type {Set<string>} */
+        const knownChannelIds = new Set()
+
+        for (const shelf of homeData) {
+          for (const item of shelf.content) {
+            if (item.type === 'channel' && !knownChannelIds.has(item.id)) {
+              knownChannelIds.add(item)
+              relatedChannels.push({
+                name: item.name,
+                id: item.id,
+                thumbnailUrl: item.thumbnail
+              })
+            }
+          }
+        }
+        this.relatedChannels = relatedChannels
+
         this.isElementListLoading = false
       } catch (err) {
         console.error(err)