feat: continuation script

NUXT/components/topNavigation.vue

@@ -77,11 +77,18 @@ export default {
   methods: {
     refreshRecommendations() {
       this.$emit("scroll-to-top");
+      const continuations = this.$store.state.recommendedVideos.continuations;
       this.$store.commit("updateRecommendedVideos", []);
       this.$youtube
-        .recommend()
+        .continuation(
+          continuations[1].reloadContinuationData.continuation,
+          "browse"
+        )
         .then((result) => {
-          if (result) this.$store.commit("updateRecommendedVideos", result[0]);
+          if (result)
+            this.$youtube.recommend(result).then((result) => {
+              if (result) this.$store.commit("updateRecommendedVideos", result);
+            });
         })
         .catch((error) => this.$logger("Home Page (Nav Refresh)", error, true));
     },

NUXT/pages/home.vue

@@ -7,8 +7,8 @@
 
   <div>
     <!--   Video Loading Animation   -->
-    <vid-load-renderer v-if="!recommends" />
-    <horizontal-list-renderer v-else :render="recommends" />
+    <vid-load-renderer v-if="!recommends.contents" />
+    <horizontal-list-renderer v-else :render="recommends.contents[0]" />
   </div>
 </template>
 
@@ -29,14 +29,12 @@ export default {
     },
   },
 
-  // 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() {
     if (!this.recommends.items || !this.recommends.items.length) {
       this.$youtube
         .recommend()
         .then((result) => {
-          if (result) this.recommends = result[0];
+          if (result) this.recommends = result;
         })
         .catch((error) => this.$logger("Home Page", error, true));
     }

NUXT/plugins/innertube.js

@@ -95,6 +95,42 @@ class Innertube {
     };
   }
 
+  async getContinuationsAsync(continuation, type) {
+    let data = { context: this.context, continuation: continuation };
+    let url
+    switch (type) {
+      case "browse":
+        url = `${constants.URLS.YT_BASE_API}/browse?key=${this.key}`;
+        break
+      case "search":
+        url = `${constants.URLS.YT_BASE_API}/search?key=${this.key}`;
+        break
+      case "next":
+        url = `${constants.URLS.YT_BASE_API}/next?key=${this.key}`;
+        break
+      default:
+        throw ("Invalid type")
+    }
+
+    const response = await Http.post({
+      url: url,
+      data: data,
+      headers: { "Content-Type": "application/json" },
+    }).catch((error) => error);
+    if (response instanceof Error) {
+      return {
+        success: false,
+        status_code: response.status,
+        message: response.message,
+      };
+    }
+    return {
+      success: true,
+      status_code: response.status,
+      data: response.data,
+    };
+  }
+
   async getVidAsync(id) {
     let data = { context: this.context, videoId: id };
     const responseNext = await Http.post({
@@ -181,11 +217,9 @@ class Innertube {
       response.data.output?.playabilityStatus?.status == ("ERROR" || undefined)
     )
       throw new Error(
-        `Could not get information for video: ${
-          response.status_code ||
-          response.data.output?.playabilityStatus?.status
-        } - ${
-          response.message || response.data.output?.playabilityStatus?.reason
+        `Could not get information for video: ${response.status_code ||
+        response.data.output?.playabilityStatus?.status
+        } - ${response.message || response.data.output?.playabilityStatus?.reason
         }`
       );
     const responseInfo = response.data.output;

NUXT/plugins/youtube.js

@@ -114,6 +114,8 @@ const innertubeModule = {
   // Front page recommendation
   async recommend() {
     const response = await InnertubeAPI.getRecommendationsAsync();
+
+
     if (!response.success)
       throw new Error("An error occurred and innertube failed to respond");
 
@@ -125,8 +127,28 @@ const innertubeModule = {
 
       if (video) return video;
     });
-    console.log(final);
-    return final;
+    const continuations = response.data.contents.singleColumnBrowseResultsRenderer.tabs[0]
+      .tabRenderer.content.sectionListRenderer.continuations
+    console.log({ continuations: continuations, contents: final });
+    return { continuations: continuations, contents: final };
+  },
+
+  async recommendContinuation(response) {
+    const contents = response.continuationContents.sectionListContinuation.contents;
+    const final = contents.map((shelves) => {
+      const video = shelves.shelfRenderer?.content?.horizontalListRenderer;
+
+      if (video) return video;
+    });
+    const continuations = response.continuationContents.sectionListContinuation.continuations
+    return { continuations: continuations, contents: final };
+  },
+
+  async continuation(continuation, endpoint) {
+    const response = await InnertubeAPI.getContinuationsAsync(continuation, endpoint);
+    console.log(response)
+    if (!response.success) throw new Error("An error occurred and innertube failed to respond");
+    return response
   },
 
   async search(query) {