From d0e33fbc7baee941667917e2094ad388e94cf31f Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Tue, 30 Jan 2024 01:37:29 +0100
Subject: [PATCH] Local API: List related games in featured channels section
 (#4562)

---
 .../ft-channel-bubble/ft-channel-bubble.css   |  1 +
 src/renderer/views/Channel/Channel.js         | 48 ++++++++++++++-----
 2 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
index 1a4878d64cb3..701c0eb961af 100644
--- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
+++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
@@ -25,6 +25,7 @@
   block-size: 50px;
   border-radius: 100%;
   -webkit-border-radius: 100%;
+  object-fit: cover;
 }
 
 .selected {
diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js
index 39fc91a0ee4d..0fedac2c90f4 100644
--- a/src/renderer/views/Channel/Channel.js
+++ b/src/renderer/views/Channel/Channel.js
@@ -495,6 +495,7 @@ export default defineComponent({
       const expectedId = this.id
 
       try {
+        /** @type {import('youtubei.js').YT.Channel|undefined} */
         let channel
         if (!this.channelInstance) {
           channel = await getLocalChannel(this.id)
@@ -651,19 +652,44 @@ export default defineComponent({
           this.bannerUrl = null
         }
 
-        this.relatedChannels = channel.channels.map(({ author }) => {
-          let thumbnailUrl = author.best_thumbnail.url
+        let relatedChannels = channel.channels.map(({ author }) => ({
+          name: author.name,
+          id: author.id,
+          thumbnailUrl: author.best_thumbnail.url
+        }))
 
-          if (thumbnailUrl.startsWith('//')) {
-            thumbnailUrl = `https:${thumbnailUrl}`
-          }
+        if (channel.memo.has('GameDetails')) {
+          /** @type {import('youtubei.js').YTNodes.GameDetails[]} */
+          const games = channel.memo.get('GameDetails')
 
-          return {
-            name: author.name,
-            id: author.id,
-            thumbnailUrl
-          }
-        })
+          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