working stream (works for some people)

NUXT/pages/search.vue

@@ -10,7 +10,7 @@
     </center>
 
     <v-list-item v-for="(video, index) in videos" :key="index">
-      <v-card class="entry">
+      <v-card class="entry" :to="`/watch?v=${video.id}`">
         <v-card-text>
           <div style="position: relative;">
             <v-img :src="video.thumbnails[video.thumbnails.length - 1].url" />

NUXT/pages/watch.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
-    <video controls :src="vidSrc" width="100%" height="300vh" />
+    <script src="https://cdn.jsdelivr.net/gh/thelevicole/youtube-to-html5-loader@4.0.1/dist/YouTubeToHtml5.js"></script>
+    <video :data-yt2html5="`https://www.youtube.com/watch?v=${id}`" controls width="100%" height="300vh"></video>
+    <p v-html="`https://www.youtube.com/watch?v=${id}`" />
   </div>
 </template>
 
@@ -8,8 +10,16 @@
 export default {
   data() {
     return {
-      vidSrc: "https://api.celeste.photos/squish.mp4"
+      id: ""
     }
+  },
+  fetch() {
+    this.id = this.$route.query.v;
+  },
+  mounted() {
+    new YouTubeToHtml5({
+      withAudio: true
+    });
   }
 }
 </script>

NUXT/plugins/youtube.js

@@ -11,6 +11,38 @@ function logger(func, data, isError=false) {
   })
 }
 
+//---   Youtube Base Parser   ---//
+function youtubeParse(html, callback) {
+  //---   Replace Encoded Characters   ---///
+  html = html.replace(/\\x([0-9A-F]{2})/ig, (...items) => { return String.fromCharCode(parseInt(items[1], 16)); });
+  //---   Properly Format JSON   ---//
+  html = html.replaceAll("\\\\\"", "");
+  //---   Parse JSON   ---//
+  html = JSON.parse(html);
+
+  //---   Get Results   ---// ( Thanks To appit-online On Github ) -> https://github.com/appit-online/youtube-search/blob/master/src/lib/search.ts
+  let results;
+  if (html && html.contents && html.contents.sectionListRenderer && html.contents.sectionListRenderer.contents
+    && html.contents.sectionListRenderer.contents.length > 0
+    && html.contents.sectionListRenderer.contents[0].itemSectionRenderer
+    && html.contents.sectionListRenderer.contents[0].itemSectionRenderer.contents.length > 0) {
+      results = html.contents.sectionListRenderer.contents[0].itemSectionRenderer.contents;
+      logger("search", results);
+      callback(results);
+  } else {
+    try {
+      results = JSON.parse(html.split('{"itemSectionRenderer":{"contents":')[html.split('{"itemSectionRenderer":{"contents":').length - 1].split(',"continuations":[{')[0]);
+      logger("search", results);
+      callback(results);
+    } catch (e) {}
+    try {
+      results = JSON.parse(html.split('{"itemSectionRenderer":')[html.split('{"itemSectionRenderer":').length - 1].split('},{"continuationItemRenderer":{')[0]).contents;
+      logger("search", results);
+      callback(results);
+    } catch(e) {}
+  }
+}
+
 //---   Search Main Function   ---//
 function youtubeSearch(text, callback) {
   Http.request({
@@ -23,34 +55,10 @@ function youtubeSearch(text, callback) {
     let html = res.data;
     //---   Isolate The Script Containing Video Information   ---//
     html = html.split("var ytInitialData = '")[1].split("';</script>")[0];
-    //---   Replace Encoded Characters   ---///
+    
-    html = html.replace(/\\x([0-9A-F]{2})/ig, (...items) => { return String.fromCharCode(parseInt(items[1], 16)); });
+    youtubeParse(html, (data) => {
-    //---   Properly Format JSON   ---//
+      callback(data);
-    html = html.replaceAll("\\\\\"", "");
+    })
-    //---   Parse JSON   ---//
-    html = JSON.parse(html);
-
-    //---   Get Results   ---// ( Thanks To appit-online On Github ) -> https://github.com/appit-online/youtube-search/blob/master/src/lib/search.ts
-    let results;
-    if (html && html.contents && html.contents.sectionListRenderer && html.contents.sectionListRenderer.contents
-      && html.contents.sectionListRenderer.contents.length > 0
-      && html.contents.sectionListRenderer.contents[0].itemSectionRenderer
-      && html.contents.sectionListRenderer.contents[0].itemSectionRenderer.contents.length > 0) {
-        results = html.contents.sectionListRenderer.contents[0].itemSectionRenderer.contents;
-        logger("search", results);
-        callback(results);
-    } else {
-      try {
-        results = JSON.parse(html.split('{"itemSectionRenderer":{"contents":')[html.split('{"itemSectionRenderer":{"contents":').length - 1].split(',"continuations":[{')[0]);
-        logger("search", results);
-        callback(results);
-      } catch (e) {}
-      try {
-        results = JSON.parse(html.split('{"itemSectionRenderer":')[html.split('{"itemSectionRenderer":').length - 1].split('},{"continuationItemRenderer":{')[0]).contents;
-        logger("search", results);
-        callback(results);
-      } catch(e) {}
-    }
 
 
 

android/app/capacitor.build.gradle

@@ -12,6 +12,7 @@ dependencies {
     implementation project(':capacitor-community-http')
     implementation project(':capacitor-app')
     implementation project(':capacitor-browser')
+    implementation project(':capacitor-device')
 
 }
 

android/app/src/main/assets/capacitor.plugins.json

@@ -10,5 +10,9 @@
 	{
 		"pkg": "@capacitor/browser",
 		"classpath": "com.capacitorjs.plugins.browser.BrowserPlugin"
+	},
+	{
+		"pkg": "@capacitor/device",
+		"classpath": "com.capacitorjs.plugins.device.DevicePlugin"
 	}
 ]

android/capacitor.settings.gradle

@@ -10,3 +10,6 @@ project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/
 
 include ':capacitor-browser'
 project(':capacitor-browser').projectDir = new File('../node_modules/@capacitor/browser/android')
+
+include ':capacitor-device'
+project(':capacitor-device').projectDir = new File('../node_modules/@capacitor/device/android')

ios/App/Podfile

@@ -12,6 +12,7 @@ def capacitor_pods
   pod 'CapacitorCommunityHttp', :path => '..\..\node_modules\@capacitor-community\http'
   pod 'CapacitorApp', :path => '..\..\node_modules\@capacitor\app'
   pod 'CapacitorBrowser', :path => '..\..\node_modules\@capacitor\browser'
+  pod 'CapacitorDevice', :path => '..\..\node_modules\@capacitor\device'
 end
 
 target 'App' do