feat: video specific recommendations

NUXT/components/recommended.vue

@@ -6,7 +6,7 @@
       <v-skeleton-loader type="card-avatar, article, actions" />
     </center>
 
-    <v-list-item v-for="(video, index) in recommends[0]" :key="index">
+    <v-list-item v-for="(video, index) in recommends" :key="index">
       <v-card class="entry" :to="`/watch?v=${video.id}`">
         <v-card-text>
           <div style="position: relative">

NUXT/pages/home.vue

@@ -21,7 +21,7 @@ export default {
     this.$youtube
       .recommend()
       .then((result) => {
-        if (result) this.recommends = result;
+        if (result) this.recommends = result[0];
       })
       .catch((error) => this.$logger("Home Page", error, true));
   },

NUXT/pages/watch.vue

@@ -26,7 +26,7 @@
       <p>{{ description }}</p>
     </v-card>
 
-    <!-- <recommended /> -->
+    <recommended :recommends="recommends" />
   </div>
 </template>
 
@@ -39,9 +39,8 @@
 </style>
 
 <script>
-import recommended from "../components/recommended.vue";
+// import recommended from "../components/recommended.vue";
 export default {
-  components: { recommended },
   data() {
     return {
       interactions: [
@@ -69,6 +68,7 @@ export default {
       vidSrc: null,
       description: null,
       views: null,
+      recommends: [],
     };
   },
   mounted() {
@@ -84,6 +84,14 @@ export default {
       this.likes = result.metadata.likes.toLocaleString();
       this.uploaded = result.metadata.uploadDate;
       this.interactions[0].value = result.metadata.likes;
+
+      this.recommends = this.$youtube
+        .viewRecommends(result.renderedData.recommendations)
+        .filter((element) => {
+          return element !== undefined;
+        });
+      // .catch((error) => this.$logger("Watch", error, true));
+      console.log("recommendations:", this.recommends);
     });
 
     this.$youtube.getReturnYoutubeDislike(this.$route.query.v, (data) => {

NUXT/plugins/innertube.js

@@ -173,7 +173,7 @@ class Innertube {
                     .slimVideoMetadataSectionRenderer?.contents[1].slimVideoActionBarRenderer?.buttons[0]
                     .slimMetadataToggleButtonRenderer?.button?.toggleButtonRenderer?.defaultText?.accessibility?.accessibilityData?.label?.replace(/\D/g, '')) // Yes. I know.
             },
-            rendered_data: {
+            renderedData: {
                 description: renderedPanels[0].engagementPanelSectionListRenderer?.content.structuredDescriptionContentRenderer?.items[1].expandableVideoDescriptionBodyRenderer?.descriptionBodyText.runs,
                 recommendations: columnUI?.contents[(columnUI.contents).length -1].itemSectionRenderer?.contents
             }

NUXT/plugins/renderers.js

@@ -54,11 +54,10 @@ function videoWithContextRenderer(video) {
 }
 function compactAutoplayRenderer(video) {
     video = video.contents
-    if (video) return video.map((item) => {
-        const itemRenderer = useRender[Object.keys(item)[0]]
-        if (item) return itemRenderer(item[Object.keys(item)[0]])
-        else return undefined
-    })
+    let item;
+    if (video) item = video[0]
+    if (item) return useRender(item[Object.keys(item)[0]], Object.keys(item)[0])
+    else return undefined
 }    
 
 export default useRender

NUXT/plugins/youtube.js

@@ -215,8 +215,12 @@ const innertubeModule = {
     },
 
     // This is the recommendations that exist under videos
-    async viewRecommends(recommendList) {
-
+    viewRecommends(recommendList) {
+        if (recommendList) return recommendList.map((item) => {
+            if (item) {
+                return useRender(item[Object.keys(item)[0]], Object.keys(item)[0])
+            } else {return undefined} 
+        })
     }
 }