feat: ability to get video details. Stores Innertube object

NUXT/pages/home.vue

@@ -1,18 +1,24 @@
+// 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="debug">Test Button</button>
+    <!-- <button @click="debugRecommend">Test Button</button>
+    <button @click="debugVideo">Test Button (Video)</button> -->
   </center>
 </template>
 
 <script>
 export default {
   methods: {
-    debug () {
-      console.log(this.$youtube.recommend("test", false))
-    }
+    // debugRecommend () {
+    //   console.log(this.$youtube.recommend("test", false))
+    // },
+    // debugVideo () {
+    //   console.log(this.$youtube.getVid("WhWc3b3KhnY"))
+    // }
   } 
 }
 </script>

NUXT/plugins/innertube.js

@@ -6,44 +6,54 @@ import { getBetweenStrings } from './utils';
 import constants from '../static/constants';
 
 class Innertube {
+
+    //--- Initiation ---//
+
     constructor(ErrorCallback) {
-        this.ErrorCallback = ErrorCallback;
-        this.init();
+        this.ErrorCallback = ErrorCallback || undefined;
         this.retry_count = 0
     }
 
-    async init() {
-        const html = await Http.get({ url: constants.URLS.YT_URL, params: { hl: "en" } }).catch((error) => error);
-        if (html instanceof Error) this.ErrorCallback(html.message, true);
-        try {
-            const data = JSON.parse(getBetweenStrings(html.data, 'ytcfg.set(', ');'));
-            if (data.INNERTUBE_CONTEXT) {
-                this.key = data.INNERTUBE_API_KEY;
-                this.context = data.INNERTUBE_CONTEXT;
-                this.context.client.clientName = "ANDROID";
-                this.context.client.clientVersion = "16.25";
-            }
+    checkErrorCallback() {
+        return typeof this.ErrorCallback === "function"
+    }
 
-        } catch (err) {
-            console.log(err)
-            this.ErrorCallback(err, true)
-            this.retry_count >= 10 ? this.init() : this.ErrorCallback("Failed to retrieve Innertube session", true);
-        }
+    init() {
+        Http.get({ url: constants.URLS.YT_URL, params: { hl: "en" } })
+            .then(result => {
+                if (result instanceof Error && this.checkErrorCallback) this.ErrorCallback(result.message, true);
+                try {
+                    const data = JSON.parse(getBetweenStrings(result.data, 'ytcfg.set(', ');'));
+                    if (data.INNERTUBE_CONTEXT) {
+                        this.key = data.INNERTUBE_API_KEY;
+                        this.context = data.INNERTUBE_CONTEXT;
+                        this.context.client.clientName = "ANDROID";
+                        this.context.client.clientVersion = "16.25";
+                    }
+
+                } catch (err) {
+                    console.log(err)
+                    if (this.checkErrorCallback) this.ErrorCallback(err, true)
+                    if (this.retry_count >= 10) { this.init() } else { if (this.checkErrorCallback) this.ErrorCallback("Failed to retrieve Innertube session", true); }
+                }
+            })
+            .catch((error) => error);
     };
 
-    static async create(ErrorCallback) {
+    static create(ErrorCallback) {
         const created = new Innertube(ErrorCallback);
-        await created.init();
+        created.init();
         return created;
     }
 
+    //--- API Calls ---//
+
     async browse(action_type) {
         let data = { context: this.context }
 
         switch (action_type) {
             case 'recommendations':
                 data.browseId = 'FEwhat_to_watch'
-
                 break;
             case 'playlist':
                 data.browseId = args.browse_id
@@ -68,9 +78,27 @@ class Innertube {
         };
     }
 
+    async getVidInfo(id) {
+        let data = { context: this.context, videoId: id }
+
+        const response = await Http.post({
+            url: `${constants.URLS.YT_BASE_API}/player?key=${this.key}`,
+            data: data,
+            headers: { "Content-Type": "application/json" }
+        }).catch((error) => error);
+
+        if (response instanceof Error) return { success: false, status_code: response.response.status, message: response.message };
+
+        return {
+            success: true,
+            status_code: response.status,
+            data: response.data
+        };
+    }
+
+    // Simple Wrappers
     async getRecommendations() {
-        const response = await this.browse("recommendations")
-        return response.data;
+        return await this.browse("recommendations")
     }
 
 

NUXT/plugins/youtube.js

@@ -127,18 +127,24 @@ const searchModule = {
 }
 
 //---   Recommendations   --//
+
+// Immediately create an Innertube object. This will be the object used in all future Inntertube API calls  
+// These are just a way for the backend Javascript to communicate with the front end Vue scripts. Essentially a wrapper inside a wrapper
 const recommendationModule = {
+    recommendAPI: Innertube.create((message, isError) => { logger("Innertube", message, isError); }), // There's definitely a better way to do this, but it's 2 am and I just can't anymore 
+
+    async getVid(id) {
+        console.log(this.recommendAPI)
+        return this.recommendAPI.getVidInfo(id);
+    },
+
     async recommend() {
-        const recommendAPI = await Innertube.create((message, isError) => {
-            logger("recommendation", message, isError)
-        });
-        return await recommendAPI.getRecommendations();
+        return this.recommendAPI.getRecommendations();
     },
 }
 
 //---   Start   ---//
 export default ({ app }, inject) => {
-    inject('youtube', searchModule)
-    inject('youtube', recommendationModule)
+    inject('youtube', {...searchModule, ...recommendationModule })
 }
 logger("Initialize", "Program Started");