refactor: made recommendation functions more stable and working

NUXT/pages/home.vue

@@ -2,24 +2,27 @@
 
 <template>
   <div>
-
-    <center style="padding-top: 3em;" v-if="recommends == null">
-      <v-progress-circular
-        size="50"
-        indeterminate
-        color="primary"
-      />
+    <center style="padding-top: 3em" v-if="recommends == null">
+      <v-progress-circular size="50" indeterminate color="primary" />
     </center>
     <center>
-      <v-list-item v-for="(video, index) in recommends" :key="index">
-        <v-card class="entry" :to="`/watch?v=${video.videoId}`">
+      <v-list-item v-for="(video, index) in recommends[0]" :key="index">
+        <v-card class="entry" :to="`/watch?v=${video.id}`">
           <v-card-text>
-            <div style="position: relative;">
-              <v-img :src="getThumbnail(video.videoId,'min')" />
-              <p v-text="video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer.text.runs[0].text" class="videoRuntimeFloat" style="color: #fff;" />
+            <div style="position: relative">
+              <v-img :src="video.thumbnail" />
+              <p
+                v-text="video.metadata.overlay[0]"
+                class="videoRuntimeFloat"
+                style="color: #fff"
+              />
             </div>
-            <div v-text="video.title.runs[0].text" style="margin-top: 0.5em;" />
-            <div v-text="`${video.shortViewCountText.runs[0].text} • ${video.publishedTimeText ? video.publishedTimeText.runs[0].text : video.shortViewCountText.runs[1].text}`" />
+            <div v-text="video.title" style="margin-top: 0.5em" />
+            <div
+              v-text="
+                `${video.channel} • ${video.metadata.view} • ${video.metadata.published}`
+              "
+            />
           </v-card-text>
         </v-card>
       </v-list-item>
@@ -31,36 +34,20 @@
 export default {
   data() {
     return {
-      recommends: []
-    }
+      recommends: [],
+    };
   },
 
   // The following code is only a demo for debugging purposes, note that each "shelfRenderer" has a "title" value that seems to align to the categories at the top of the vanilla yt app
 
   mounted() {
-    try {
-      this.$youtube.recommend().then(
-        result => {
-          console.log(result)
-          const recommendContent = result.contents.singleColumnBrowseResultsRenderer.tabs[0].tabRenderer.content.sectionListRenderer.contents // I feel like I've committed programming sin
-          recommendContent.forEach(function (contents, index) {
-            contents.shelfRenderer.content.horizontalListRenderer.items.forEach(function (item, index) {
-              const video = item.gridVideoRenderer
-                console.log(video)
-                console.log(video.onTap)
-              this.recommends.push(video)
-            })
-        })}
-      )
-    } catch (error) {
-      this.$logger("Home Page", error, true)
-    }
+    this.$youtube
+      .recommend()
+      .then((result) => {
+        console.log(result);
+        if (result) this.recommends = result;
+      })
+      .catch((error) => this.$logger("Home Page", error, true));
   },
-
-  methods: {
-    getThumbnail(id, resolution) {
-      return this.$youtube.getThumbnail(id, resolution)
-    }
-  }
-}
+};
 </script>

NUXT/plugins/youtube.js

@@ -142,16 +142,59 @@ const recommendationModule = {
     },
 
     async getVid(id) {
+
+        // temporary test
+
+        const html = await Http.get({
+            url: "https://m.youtube.com/watch?v=U-9M-BjFYMc&t=8s&pbj=1",
+            params: {},
+            headers: {
+                accept: '*/*',
+                'user-agent': 'Mozilla/5.0 (Linux; Android 10; WP7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.101 Mobile Safari/537.36',
+                'content-type': 'application/json',
+                'accept-language': 'en-US,en;q=0.9',
+                'x-goog-authuser': 0,
+                'x-goog-visitor-id': 'CgtsaVdQdGhfbVNOMCiC0taRBg%3D%3D',
+                'x-youtube-client-name': 2,
+                'x-youtube-client-version': '2.20220318.00.00',
+                'x-youtube-chrome-connected': 'source=Chrome,mode=0,enable_account_consistency=true,supervised=false,consistency_enabled_by_default=false',
+                'x-origin': 'https://m.youtube.com',
+                origin: 'https://m.youtube.com',
+                referer: 'https://m.youtube.com/watch?v=U-9M-BjFYMc'
+            }
+        }).catch((error) => error);
+        console.log(html.data)
         return InnertubeAPI.getVidInfoAsync(id).data;
     },
 
+    // It just works™
     async recommend() {
-        const response = InnertubeAPI.getRecommendationsAsync();
-        if (!response.success) {
-            logger(constants.LOGGER_NAMES.recommendations, "An error occurred and innertube failed to respond", true)
-            return
-        }
-        return
+        const response = await InnertubeAPI.getRecommendationsAsync();
+        if (!response.success) throw new Error("An error occurred and innertube failed to respond")
+
+        const contents = response.data.contents.singleColumnBrowseResultsRenderer.tabs[0].tabRenderer.content.sectionListRenderer.contents
+        return contents.map((shelves) => {
+            const video = shelves.shelfRenderer?.content?.horizontalListRenderer?.items
+
+            if (video) return video.map((item) => {
+                item = item.gridVideoRenderer
+                if (item) return {
+                    id: item.videoId,
+                    title: item.title?.runs[0].text,
+                    thumbnail: this.getThumbnail(item.videoId),
+                    channel: item.shortBylineText.runs[0] ? item.shortBylineText.runs[0] : item.longBylineText.runs[0],
+                    channelThumbnail: item.channelThumbnail?.thumbnails[0],
+                    metadata: {
+                        published: item.publishedTimeText?.runs[0].text,
+                        views: item.shortViewCountText?.runs[0].text,
+                        length: item.publishedTimeText?.runs[0].text,
+                        overlay: item.thumbnailOverlays?.map((overlay) =>{overlay.thumbnailOverlayTimeStatusRenderer?.text.runs[0].runs}),
+                    },
+                };
+                else return undefined
+            })
+
+        })
     },
 
     getThumbnail: (id, resolution) => Innertube.getThumbnail(id, resolution)