Merge pull request #192 from 404-Program-not-found/main

fixed error with video recommendations not playing, fixed problems with search, added description rendering

NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="description" style="white-space: pre-line">
+    <template v-for="(text, index) in render.description.runs">
+      <template v-if="text.navigationEndpoint">
+        <a :href="parseLinks(text)" :key="index">{{ text.text }}</a>
+      </template>
+      <template v-else> {{ text.text }} </template>
+    </template>
+  </div>
+</template>
+
+<style scoped></style>
+
+<script>
+export default {
+  props: ["render"],
+
+  methods: {
+    parseLinks(base) {
+      const navEndpoint = base.navigationEndpoint;
+      if (!navEndpoint) return;
+      if (navEndpoint.webviewEndpoint) {
+        return base.text;
+      } else if (navEndpoint.browseEndpoint) {
+        return navEndpoint.browseEndpoint.canonicalBaseUrl;
+      } else if (navEndpoint.navigationEndpoint) {
+        return; //for now
+      }
+    },
+  },
+};
+</script>

NUXT/components/gridRenderers/gridVideoRenderer.vue

@@ -137,9 +137,5 @@ export default {
       return bottomText.join(" · ");
     },
   },
-
-  mounted() {
-    console.log("gridVideoRenderer received: ", this.video);
-  },
 };
 </script>

NUXT/layouts/default.vue

@@ -128,6 +128,7 @@ export default {
 
   methods: {
     textChanged(text) {
+      if (text.length <= 0) this.response = []; // No text found, no point in calling API
       this.$youtube.autoComplete(text, (res) => {
         const data = res.replace(/^.*?\(/, "").replace(/\)$/, ""); //Format Response
         this.response = JSON.parse(data)[1];

NUXT/pages/watch.vue

@@ -60,7 +60,7 @@
         <p>Channel Stuff</p>
       </v-card-text>
       <div v-if="showMore" class="scroll-y ml-2 mr-2">
-        {{ description }}
+        <slim-video-description-renderer :render="description">
       </div>
 
       <!-- <v-bottom-sheet
@@ -102,9 +102,10 @@
 import { Share } from "@capacitor/share";
 import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
 import VidLoadRenderer from "~/components/vidLoadRenderer.vue";
+import SlimVideoDescriptionRenderer from '../components/UtilRenderers/slimVideoDescriptionRenderer.vue';
 
 export default {
-  components: { ShelfRenderer, VidLoadRenderer },
+  components: { ShelfRenderer, VidLoadRenderer, SlimVideoDescriptionRenderer },
   data() {
     return {
       interactions: [
@@ -150,7 +151,7 @@ export default {
       handler(newRt, oldRt) {
         if (newRt.query.v != oldRt.query.v) {
           // Exit fullscreen if currently in fullscreen
-          this.$refs.player.webkitExitFullscreen();
+          if (this.$refs.player) this.$refs.player.webkitExitFullscreen();
           // Reset player and run getVideo function again
           this.vidSrc = "";
           this.getVideo();
@@ -181,7 +182,7 @@ export default {
         
         //---   Content Stuff   ---//
         this.title = result.title;
-        this.description = result.metadata.description; // While this works, I do recommend using the rendered description instead in the future as there are some things a pure string wouldn't work with
+        this.description = result.renderedData.description; // While this works, I do recommend using the rendered description instead in the future as there are some things a pure string wouldn't work with
         this.views = result.metadata.viewCount.toLocaleString();
         this.likes = result.metadata.likes.toLocaleString();
         this.uploaded = result.metadata.uploadDate;

NUXT/plugins/constants.js

@@ -19,7 +19,6 @@ const ytApiVal = {
 module.exports = {
   URLS: url,
   YT_API_VALUES: ytApiVal,
-
   LOGGER_NAMES: {
     search: "Search",
     autoComplete: "AutoComplete",

NUXT/plugins/innertube.js

@@ -181,9 +181,11 @@ 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;
@@ -241,7 +243,7 @@ class Innertube {
           .find((contents) => contents.slimVideoMetadataSectionRenderer)
           .slimVideoMetadataSectionRenderer?.contents.find(
             (contents) => contents.slimVideoDescriptionRenderer
-          )?.slimVideoDescriptionRenderer.description.runs,
+          )?.slimVideoDescriptionRenderer,
         recommendations: columnUI?.contents.find(
           (contents) => contents.shelfRenderer
         ).shelfRenderer,

NUXT/plugins/youtube.js

@@ -3,6 +3,7 @@ import { Http } from "@capacitor-community/http";
 import Innertube from "./innertube";
 import constants from "./constants";
 import useRender from "./renderers";
+import { Buffer } from "buffer";
 
 //---   Logger Function   ---//
 function logger(func, data, isError = false) {
@@ -14,19 +15,39 @@ function logger(func, data, isError = false) {
   });
 }
 
+function getEncoding(contentType) {
+  const re = /charset=([^()<>@,;:\"/[\]?.=\s]*)/i;
+  const content = re.exec(contentType);
+  console.log(content);
+  if (!content || content[1].toLowerCase() == "utf-8") {
+    return "utf8";
+  }
+  if (content[1].toLowerCase() == "iso-8859-1") {
+    return "latin1";
+  }
+  if (content[1].toLowerCase() == "utf16le") {
+    return "utf16le";
+  }
+}
+
 const searchModule = {
   logs: new Array(),
-
   //---   Get YouTube's Search Auto Complete   ---//
   autoComplete(text, callback) {
-    Http.request({
-      method: "GET",
-      url: `${constants.URLS.YT_SUGGESTIONS}/search`,
-      params: { client: "youtube", q: text },
+    Http.get({
+      url: `${constants.URLS.YT_SUGGESTIONS}/search?q=${encodeURIComponent(
+        text
+      )}&client=youtube&ds=yt`,
+      responseType: "arraybuffer",
     })
       .then((res) => {
-        logger(constants.LOGGER_NAMES.autoComplete, res);
-        callback(res.data);
+        const contentType = res.headers["Content-Type"];
+        // make a new buffer object from res.data
+        const buffer = Buffer.from(res.data, "base64");
+        // convert res.data from iso-8859-1 to utf-8
+        const data = buffer.toString(getEncoding(contentType));
+        logger(constants.LOGGER_NAMES.autoComplete, data);
+        callback(data);
       })
       .catch((err) => {
         logger(constants.LOGGER_NAMES.autoComplete, err, true);