ytdl implementation, fixed watch.vue

NUXT/pages/watch.vue

@@ -1,7 +1,15 @@
 <template>
   <div>
     <video controls autoplay :src="vidSrc" width="100%" height="300vh" />
-    <p>[DEBUG] Streaming From: {{ vidSrc }}</p>
+    <v-card class="ml-2 mr-2 flat light">
+      <h2>{{ vidTitle }}</h2>
+      <span>{{ vidViews }} views • Published {{ uploaded }}</span>
+      {{ likes }} Likes / {{ ryd.dislikes }} Dislikes
+      <v-divider></v-divider>
+      <h3>{{ author.name }}
+      <v-img width="40px" :src="author.thumbnails[0].url" />
+      </h3>
+    </v-card>
   </div>
 </template>
 
@@ -14,9 +22,14 @@ export default {
   },
   mounted() {
     this.$youtube.getVideo('wykQsTJElD4', (data) => {
-      const formats = data.formats;
-      console.log(data)
-      this.vidSrc = formats[formats.length-1].url;
+      this.vidTitle = data.title;
+      this.vidViews = data.views;
+      this.author = data.author;
+      this.uploaded = data.uploaded;
+      this.vidSrc = data.url;
+      this.visDescription = data.description;
+      this.likes = data.likes;
+      this.ryd = data.ryd;
     })
   }
 }

NUXT/plugins/youtube.js

@@ -122,18 +122,11 @@ const module = {
 
     Http.request({
       method: 'GET',
-      url: 'https://youtube.com/watch',
-      //headers: { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.7113.93 Safari/537.36' },
-      params: { q: id }
+      url: 'https://vuetube-core.sushipython.repl.co/id/'+id
     })
     .then((res) => {
-      //---   Get HTML Only   ---//
-      let html = res.data;
-      logger("getVideo-html", html);
-      //---   Isolate The Script Containing Video Information   ---//
-      html = html.split("var ytInitialPlayerResponse = ")[1].split("';</script>")[0].split(";var meta = document.createElement('meta');")[0];
-      //---   Parse JSON   ---//
-      const videoData = JSON.parse(html).streamingData;
+      const videoData = res.data;
+      logger("videoData", videoData)
       callback(videoData);
   
     })