From c4bd494677a7915bcc5a6b170ece481c09d23dc1 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Wed, 18 May 2022 19:36:27 -0400
Subject: [PATCH] channel channels

---
 .../compactChannelRenderer.vue                |  3 +--
 NUXT/pages/channel/channels.vue               | 20 ++++++++++++++++++-
 NUXT/store/channel/index.js                   | 16 ++++++++++++++-
 3 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/NUXT/components/CompactRenderers/compactChannelRenderer.vue b/NUXT/components/CompactRenderers/compactChannelRenderer.vue
index 15abe95..19c9d23 100644
--- a/NUXT/components/CompactRenderers/compactChannelRenderer.vue
+++ b/NUXT/components/CompactRenderers/compactChannelRenderer.vue
@@ -36,8 +36,7 @@
         <div
           v-for="title in video.title.runs"
           :key="title.text"
-          style="margin-top: 0.5em"
-          class="vid-title"
+          class="vid-title mt-1"
         >
           {{ title.text }}
         </div>
diff --git a/NUXT/pages/channel/channels.vue b/NUXT/pages/channel/channels.vue
index 7b8b46c..c2c9e7c 100644
--- a/NUXT/pages/channel/channels.vue
+++ b/NUXT/pages/channel/channels.vue
@@ -1,3 +1,21 @@
 <template>
-  <div></div>
+  <div class="pt-4">
+    <v-list-item
+      v-for="(channel, index) in $store.state.channel.featuredChannels"
+      :key="index"
+      class="pa-0 min-height-0"
+    >
+      <compact-channel-renderer
+        :video="channel.gridChannelRenderer"
+      ></compact-channel-renderer>
+    </v-list-item>
+  </div>
 </template>
+
+<script>
+import compactChannelRenderer from "../../components/CompactRenderers/compactChannelRenderer.vue";
+
+export default {
+  components: { compactChannelRenderer },
+};
+</script>
diff --git a/NUXT/store/channel/index.js b/NUXT/store/channel/index.js
index 568c402..642f640 100644
--- a/NUXT/store/channel/index.js
+++ b/NUXT/store/channel/index.js
@@ -10,6 +10,7 @@ const getDefaultState = () => {
     descriptionPreview: null,
     subscribers: null,
     videosCount: null,
+    featuredChannels: null,
   };
 };
 export const state = () => {
@@ -25,7 +26,7 @@ export const actions = {
     this.$youtube
       .getChannel(channelRequest)
       .then((channel) => {
-        console.log(channel);
+        // console.log(channel);
         state.loading = false;
         state.banner =
           channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelBanner?.image.sources[0].url;
@@ -43,6 +44,19 @@ export const actions = {
           channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.metadata.subscriberCountText;
         state.videosCount =
           channel.header.channelMobileHeaderRenderer.channelHeader.elementRenderer.newElement.type.componentType.model.channelHeaderModel.channelProfile.metadata.videosCountText;
+        const featuredSection =
+          channel.contents.singleColumnBrowseResultsRenderer.tabs[0].tabRenderer.content.sectionListRenderer.contents.find(
+            (i) => {
+              return !!i?.shelfRenderer?.content?.horizontalListRenderer
+                ?.items[0].gridChannelRenderer;
+            }
+          );
+        console.log("CHANNEL INDEX");
+        console.log(featuredSection);
+        state.featuredChannels =
+          featuredSection.shelfRenderer.content.horizontalListRenderer.items;
+        console.log("ITEMS ITEMS");
+        console.log(state.featuredChannels);
       })
       .catch((err) => {
         state.loading = false;