Local API: Add support for home tab on channels

src/renderer/components/ChannelDetails/ChannelDetails.vue

@@ -74,6 +74,22 @@
           role="tablist"
           :aria-label="$t('Channel.Channel Tabs')"
         >
+          <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
+          <div
+            v-if="visibleTabs.includes('home')"
+            id="homeTab"
+            class="tab"
+            :class="{ selectedTab: currentTab === 'home' }"
+            role="tab"
+            :aria-selected="String(currentTab === 'home')"
+            aria-controls="homePanel"
+            :tabindex="(currentTab === 'home' || currentTab === 'search') ? 0 : -1"
+            @click="changeTab('home')"
+            @keydown.left.right="focusTab('home', $event)"
+            @keydown.enter.space.prevent="changeTab('home')"
+          >
+            {{ $t("Channel.Home.Home").toUpperCase() }}
+          </div>
           <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
           <div
             v-if="visibleTabs.includes('videos')"

src/renderer/components/ChannelHome/ChannelHome.css

@@ -0,0 +1,35 @@
+.shelfTitle {
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.shelfTitle::marker {
+  font-size: 20px;
+  color: var(--accent-color);
+}
+
+.shelfUnderline {
+  border-color: var(--primary-color);
+}
+
+.playAllSpan {
+  font-size: 18px;
+  margin-inline-start: 10px;
+}
+
+.playAllLink {
+  font-style: italic;
+  padding-block: 5px;
+  padding-inline: 7px;
+  border-radius: 10px;
+  text-decoration: none;
+}
+
+.playAllLink:hover {
+  background-color: var(--bg-color);
+}
+
+.shelfSubtitle {
+  font-style: italic;
+  color: var(--tertiary-text-color);
+}

src/renderer/components/ChannelHome/ChannelHome.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <div
+      v-for="(shelf, index) in filteredShelves"
+      :key="index"
+    >
+      <details
+        :open="index == 0"
+      >
+        <summary
+          class="shelfTitle"
+        >
+          {{ shelf.title }}
+          <span
+            v-if="shelf.playlistId"
+            class="playAllSpan"
+          >
+            <router-link
+              class="playAllLink"
+              :to="{
+                path: `/playlist/${shelf.playlistId}`
+              }"
+            >
+              <FontAwesomeIcon
+                class="thumbnail"
+                :icon="['fas', 'list']"
+              />
+              {{ $t('Channel.Home.View Playlist') }}
+            </router-link>
+          </span>
+          <hr class="shelfUnderline">
+        </summary>
+        <p
+          v-if="shelf.subtitle"
+          class="shelfSubtitle"
+        >
+          {{ shelf.subtitle }}
+        </p>
+        <FtElementList
+          :data="shelf.content"
+          :use-channels-hidden-preference="false"
+          :display="shelf.isCommunity ? 'list' : null"
+        />
+      </details>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+import { computed } from 'vue'
+import FtElementList from '../FtElementList/FtElementList.vue'
+import store from '../../store/index'
+
+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/components/FtListChannel/FtListChannel.vue

@@ -16,7 +16,7 @@
       >
         <img
           :src="thumbnail"
-          class="channelImage"
+          :class="!isGame ? 'channelImage' : 'gameImage'"
           alt=""
         >
       </router-link>
@@ -116,6 +116,7 @@ let videoCount = null
 /** @type {string?} */
 let handle = null
 let description = ''
+let isGame = null
 
 if (process.env.SUPPORTS_LOCAL_API && props.data.dataSource === 'local') {
   parseLocalData()
@@ -157,6 +158,7 @@ function parseLocalData() {
   }
 
   description = props.data.descriptionShort
+  isGame = props.data.isGame
 }
 
 function parseInvidiousData() {

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

@@ -96,6 +96,9 @@ export default defineComponent({
     hideChannelCommunity: function () {
       return this.$store.getters.getHideChannelCommunity
     },
+    hideChannelHome: function () {
+      return this.$store.getters.getHideChannelHome
+    },
     hideSubscriptionsVideos: function () {
       return this.$store.getters.getHideSubscriptionsVideos
     },
@@ -218,6 +221,7 @@ export default defineComponent({
       'updateHideChannelShorts',
       'updateHideChannelPlaylists',
       'updateHideChannelCommunity',
+      'updateHideChannelHome',
       'updateHideChannelPodcasts',
       'updateHideChannelReleases',
       'updateHideSubscriptionsVideos',

src/renderer/components/distraction-settings/distraction-settings.vue

@@ -81,6 +81,12 @@
     </h4>
     <div class="switchColumnGrid">
       <div class="switchColumn">
+        <ft-toggle-switch
+          :label="$t('Settings.Distraction Free Settings.Hide Channel Home')"
+          :compact="true"
+          :default-value="hideChannelHome"
+          @change="updateHideChannelHome"
+        />
         <ft-toggle-switch
           :label="$t('Settings.Distraction Free Settings.Hide Channel Shorts')"
           :compact="true"