Add support for shelf subtitle

FreeTubeApp · Oct 30, 2024 · 3a0a006 · 3a0a006
1 parent a504d72
commit 3a0a006
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 5 deletions.
diff --git a/src/renderer/components/ChannelHome/ChannelHome.css b/src/renderer/components/ChannelHome/ChannelHome.css
@@ -26,3 +26,8 @@
 .playAllLink:hover {
   background-color: var(--bg-color);
 }
+
+.shelfSubtitle {
+  font-style: italic;
+  color: var(--tertiary-text-color);
+}
diff --git a/src/renderer/components/ChannelHome/ChannelHome.vue b/src/renderer/components/ChannelHome/ChannelHome.vue
@@ -30,6 +30,12 @@
           </span>
           <hr class="shelfUnderline">
         </summary>
+        <p
+          v-if="shelf.subtitle"
+          class="shelfSubtitle"
+        >
+          {{ shelf.subtitle }}
+        </p>
         <FtElementList
           :data="shelf.content"
           :use-channels-hidden-preference="false"

diff --git a/src/renderer/components/FtListChannel/FtListChannel.vue b/src/renderer/components/FtListChannel/FtListChannel.vue
@@ -16,7 +16,7 @@
       >
         <img
           :src="thumbnail"
-          class="channelImage"
+          :class="!isGame ? 'channelImage' : 'gameImage'"
           alt=""
         >
       </router-link>
@@ -110,6 +110,7 @@ let subscriberCount = null
 let videoCount = null
 let handle = null
 let description = ''
+let isGame = null
 
 if (process.env.SUPPORTS_LOCAL_API && props.data.dataSource === 'local') {
   parseLocalData()
@@ -151,6 +152,7 @@ function parseLocalData() {
   }
 
   description = props.data.descriptionShort
+  isGame = props.data.isGame
 }
 
 function parseInvidiousData() {

diff --git a/src/renderer/helpers/api/local.js b/src/renderer/helpers/api/local.js
@@ -901,7 +901,8 @@ export function parseChannelHomeTab(homeTab) {
         shelves.push({
           title: shelf.title.text,
           content: shelf.content.items.map(parseListItem).filter(_ => _),
-          playlistId: shelf.play_all_button?.endpoint.payload.playlistId
+          playlistId: shelf.play_all_button?.endpoint.payload.playlistId,
+          subtitle: shelf.subtitle?.text
         })
       } else if (itemSection.contents.at(0).type === 'ReelShelf') {
         /** @type {import('youtubei.js').YTNodes.ReelShelf} */
@@ -915,13 +916,13 @@ export function parseChannelHomeTab(homeTab) {
         const shelf = itemSection.contents.at(0)
         shelves.push({
           title: shelf.header.title.text,
-          content: shelf.cards.map(parseListItem).filter(_ => _)
+          content: shelf.cards.map(parseListItem).filter(_ => _),
+          subtitle: shelf.header.subtitle.text
         })
       }
     } else if (section.type === 'RichSection') {
       /** @type {import('youtubei.js').YTNodes.RichShelf} */
       const shelf = section.content
-
       shelves.push({
         title: shelf.title.text,
         content: shelf.contents.map(e => parseListItem(e.content))
@@ -1178,7 +1179,8 @@ function parseListItem(item) {
         dataSource: 'local',
         thumbnail: game.box_art.at(0).url.replace(/^\/\//, 'https://'),
         name: game.title.text,
-        id: game.endpoint.payload.browseId
+        id: game.endpoint.payload.browseId,
+        isGame: true
       }
     }
     case 'GridChannel': {

diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
@@ -205,6 +205,10 @@ $watched-transition-duration: 0.5s;
         border-radius: 50%;
         block-size: 130px;
       }
+
+      .gameImage {
+        block-size: 130px;
+      }
     }
   }