feat: added description rendering

NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="description">
+    <div v-for="(text, index) in render.description.runs" :key="index">
+      <component
+        :is="text.navigationEndpoint ? 'a' : 'span'"
+        :href="parseLinks(text.navEndpoint)"
+        target="_blank"
+        >{{ text.text }}
+      </component>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
+
+<script>
+export default {
+  props: ["render"],
+
+  methods: {
+    parseLinks(navEndpoint) {
+      if (!navEndpoint) return;
+      if (navEndpoint.webviewEndpoint.url) {
+        return navEndpoint.webviewEndpoint.url;
+      } 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/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: [
@@ -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,