feat: Recommendations API fully online. There is now a home page.

NUXT/pages/home.vue

@@ -1,13 +1,8 @@
 // Buttons and methods for testing and demonstration purposes only. Uncomment them to see how it works. Remove to actually implement a implementation
 
 <template>
-  <center>
-    <img style="margin-top: 5em; max-width: 80%; max-height: 15em;" src="/dev.svg" />
-    <h1 class="grey--text">Page Under Construction</h1>
-    <p class="grey--text">Please read the VueTube FAQ for more information.</p>
-    <!-- <button @click="debugRecommend">Test Button</button>
-    <button @click="debugVideo">Test Button (Video)</button> -->
   <div>
+
     <center style="padding-top: 3em;" v-if="recommends == null">
       <v-progress-circular
         size="50"
@@ -15,21 +10,21 @@
         color="primary"
       />
     </center>
-
-    <v-list-item v-for="(video, index) in recommends" :key="index">
-      <v-card class="entry" :to="`/watch?v=${video.videoId}`">
-        <v-card-text>
-          <div style="position: relative;">
-            <v-img :src="video.thumbnail.thumbnails[0].url" />
-            <p v-text="video.lengthText.runs[0].text" class="videoRuntimeFloat" style="color: #fff;" />
-          </div>
-          <div v-text="video.title.runs[0].text" style="margin-top: 0.5em;" />
-          <div v-text="`${video.viewCountText.runs[0].text} • ${video.publishedTimeText.runs[0].text}`" />
-        </v-card-text>
-      </v-card>
-    </v-list-item>
+    <center>
+      <v-list-item v-for="(video, index) in recommends" :key="index">
+        <v-card class="entry" :to="`/watch?v=${video.videoId}`">
+          <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>
+            <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}`" />
+          </v-card-text>
+        </v-card>
+      </v-list-item>
+    </center>
   </div>
-  </center>
 </template>
 
 <script>
@@ -62,6 +57,12 @@ export default {
     ).catch ((error) => {
       this.$logger("Home Page", error, true)
     })
+  },
+
+  methods: {
+    getThumbnail(id, resolution) {
+      return this.$youtube.getThumbnail(id, resolution)
+    }
   }
 }
 </script>

NUXT/pages/index.vue

@@ -11,10 +11,9 @@
 <script>
 export default {
     layout: "empty",
-    mounted() {
-        this.$youtube.getAPI().then(
-          this.$router.push(`/${localStorage.getItem("startPage") || "home"}`)
-        );
+    async mounted() {
+        await this.$youtube.getAPI()
+        this.$router.push(`/${localStorage.getItem("startPage") || "home"}`)
     }
 }
 </script>

NUXT/plugins/innertube.js

@@ -78,6 +78,17 @@ class Innertube {
         };
     }
 
+    static getThumbnail(id, resolution) {
+        switch (resolution) {
+            case "min":
+                return `https://img.youtube.com/vi/${id}/mqdefault.jpg`
+            case "mid":
+                return `https://img.youtube.com/vi/${id}/hqdefault.jpg`
+            default:
+                return `https://img.youtube.com/vi/${id}/maxresdefault.jpg`
+        }
+    }
+
     async getVidInfoAsync(id) {
         let data = { context: this.context, videoId: id }
 

NUXT/plugins/youtube.js

@@ -135,25 +135,26 @@ let InnertubeAPI;
 const recommendationModule = {
 
     async getAPI() {
-        InnertubeAPI = await Innertube.createAsync((message, isError) => { logger("Innertube", message, isError); })
-        console.log(InnertubeAPI)
+        if (!InnertubeAPI) {
+            InnertubeAPI = await Innertube.createAsync((message, isError) => { logger("Innertube", message, isError); })
+        }
         return InnertubeAPI;
     },
 
     async getVid(id) {
-        console.log(InnertubeAPI)
         return InnertubeAPI.getVidInfoAsync(id).data;
     },
 
     async recommend() {
-        console.log(InnertubeAPI)
         return InnertubeAPI.getRecommendationsAsync();
     },
+
+    getThumbnail: (id, resolution) => Innertube.getThumbnail(id, resolution)
 }
 
 //---   Start   ---//
 export default ({ app }, inject) => {
-    inject('youtube', {...searchModule, ...recommendationModule })
+    inject('youtube', {...searchModule, ...recommendationModule, })
     inject("logger", logger)
 }
 logger("Initialize", "Program Started");

NUXT/static/constants.js

@@ -42,7 +42,11 @@ module.exports = {
             "osName": info.osName,
             "osVersion": info.osVersion,
             "platform": "MOBILE",
-            "originalUrl": info.originalUrl
+            "originalUrl": info.originalUrl,
+            "configInfo": info.configInfo,
+            "remoteHost": info.remoteHost,
+            "visitorData": info.visitorData,
+            // This is, by all accounts, a horrible implementation, but this is currently the only solution besides
         };
         return client
     }