conflicts resolved

NUXT/components/CompactRenderers/compactChannelRenderer.vue

@@ -6,7 +6,9 @@
   >
     <div id="details">
       <a
-        :href="video.navigationEndpoint.browseEndpoint.canonicalBaseUrl"
+        :href="
+          this.$rendererUtils.getNavigationEndpoints(video.navigationEndpoint)
+        "
         class="avatar-link pt-2"
       >
         <v-img

NUXT/components/CompactRenderers/compactVideoRenderer.vue

@@ -31,8 +31,9 @@
     <div id="details">
       <a
         :href="
-          video.shortBylineText.runs[0].navigationEndpoint.browseEndpoint
-            .canonicalBaseUrl
+          this.$rendererUtils.getNavigationEndpoints(
+            video.shortBylineText.runs[0].navigationEndpoint
+          )
         "
         class="avatar-link pt-2"
       >

NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue

@@ -1,26 +1,37 @@
 <template>
-  <div class="description" style="white-space: pre-line">
+  <div class="description">
     <template v-for="(text, index) in render.description.runs">
       <template
         v-if="
           text.navigationEndpoint && text.navigationEndpoint.webviewEndpoint
         "
       >
-        <a @click="openExternal(parseLinks(text))" :key="index" class="link">{{
-          text.text
-        }}</a>
+        <a
+          @click="openExternal($rendererUtils.getNavigationEndpoints(text))"
+          :key="index"
+          class="link"
+          >{{ text.text }}</a
+        >
       </template>
-      <template v-else-if="checkInternal(text)">
-        <a @click="openInternal(parseLinks(text))" :key="index" class="link">{{
-          text.text
-        }}</a>
+      <template v-else-if="$rendererUtils.checkInternal(text)">
+        <a
+          @click="openInternal($rendererUtils.getNavigationEndpoints(text))"
+          :key="index"
+          class="link"
+          >{{ text.text }}</a
+        >
       </template>
       <template v-else> {{ text.text }} </template>
     </template>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.description {
+  white-space: pre-line;
+  margin-bottom: 16px;
+}
+</style>
 
 <script>
 import { Browser } from "@capacitor/browser";
@@ -28,28 +39,6 @@ export default {
   props: ["render"],
 
   methods: {
-    parseLinks(base) {
-      const navEndpoint = base.navigationEndpoint;
-      if (!navEndpoint) return;
-      if (navEndpoint.webviewEndpoint) {
-        return navEndpoint.webviewEndpoint.url;
-      } else if (navEndpoint.browseEndpoint) {
-        return navEndpoint.browseEndpoint.canonicalBaseUrl;
-      } else if (navEndpoint.watchEndpoint) {
-        return `/watch?v=${navEndpoint.watchEndpoint.videoId}`;
-      } else if (navEndpoint.navigationEndpoint) {
-        return; //for now
-      }
-    },
-    checkInternal(base) {
-      const navEndpoint = base.navigationEndpoint;
-      if (!navEndpoint) return false;
-      if (navEndpoint.browseEndpoint || navEndpoint.watchEndpoint) {
-        return true;
-      } else {
-        return false;
-      }
-    },
     async openExternal(url) {
       await Browser.open({ url: url });
     },

NUXT/components/gridRenderers/gridVideoRenderer.vue

@@ -33,8 +33,9 @@
     <div id="details">
       <a
         :href="
-          video.shortBylineText.runs[0].navigationEndpoint.browseEndpoint
-            .canonicalBaseUrl
+          this.$rendererUtils.getNavigationEndpoints(
+            video.shortBylineText.runs[0].navigationEndpoint
+          )
         "
         class="avatar-link pt-2"
       >

NUXT/pages/watch.vue

@@ -183,10 +183,10 @@ export default {
         //---   Content Stuff   ---//
         this.title = result.title;
         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.views = parseInt(result.metadata.viewCount).toLocaleString();
         this.likes = result.metadata.likes.toLocaleString();
         this.uploaded = result.metadata.uploadDate;
-        this.interactions[0].value = result.metadata.likes;
+        this.interactions[0].value = result.metadata.likes.toLocaleString();
         this.loaded = true;
 
         this.recommends = result.renderedData.recommendations;

NUXT/plugins/renderers.js

@@ -1,87 +1,28 @@
-import Innertube from "./innertube";
-import constants from "./constants";
+// General utility functions for the renderers
+class rendererUtils {
+  static getNavigationEndpoints(base) {
+    const navEndpoint = base.navigationEndpoint;
+    if (!navEndpoint) return;
+    if (navEndpoint.webviewEndpoint) {
+      return navEndpoint.webviewEndpoint.url;
+    } else if (navEndpoint.browseEndpoint) {
+      return navEndpoint.browseEndpoint.canonicalBaseUrl;
+    } else if (navEndpoint.watchEndpoint) {
+      return `/watch?v=${navEndpoint.watchEndpoint.videoId}`;
+    } else if (navEndpoint.navigationEndpoint) {
+      return; //for now
+    }
+  }
 
-// Pointer object, give a key and it will return with a method
-function useRender(video, renderer) {
-  switch (renderer) {
-    case "videoWithContextRenderer":
-      return videoWithContextRenderer(video);
-    case "gridVideoRenderer":
-      return gridVideoRenderer(video);
-    case "compactAutoplayRenderer":
-      return compactAutoplayRenderer(video);
-    case "compactVideoRenderer":
-      return compactVideoRenderer(video);
-    default:
-      return undefined;
+  static checkInternal(base) {
+    const navEndpoint = base.navigationEndpoint;
+    if (!navEndpoint) return false;
+    if (navEndpoint.browseEndpoint || navEndpoint.watchEndpoint) {
+      return true;
+    } else {
+      return false;
+    }
   }
 }
 
-function gridVideoRenderer(video) {
-  return {
-    id: video.videoId,
-    title: video.title?.runs[0].text,
-    thumbnail: Innertube.getThumbnail(video.videoId, "max"),
-    channel: video.shortBylineText?.runs[0]
-      ? video.shortBylineText.runs[0].text
-      : video.longBylineText?.runs[0].text,
-    channelId: (video.shortBylineText?.runs[0]
-      ? video.shortBylineText.runs[0]
-      : video.longBylineText?.runs[0]
-    ).navigationEndpoint?.browseEndpoint?.browseId,
-    channelURL: `${constants.YT_URL}/${
-      (video.shortBylineText?.runs[0]
-        ? video.shortBylineText.runs[0]
-        : video.longBylineText?.runs[0]
-      ).navigationEndpoint?.browseEndpoint?.canonicalBaseUrl
-    }`,
-    channelThumbnail: video.channelThumbnail?.thumbnails[0],
-    metadata: {
-      published: video.publishedTimeText?.runs[0].text,
-      views: video.shortViewCountText?.runs[0].text,
-      length: video.lengthText?.runs[0].text,
-      overlayStyle: video.thumbnailOverlays?.map(
-        (overlay) => overlay.thumbnailOverlayTimeStatusRenderer?.style
-      ),
-      overlay: video.thumbnailOverlays?.map(
-        (overlay) =>
-          overlay.thumbnailOverlayTimeStatusRenderer?.text.runs[0].text
-      ),
-    },
-  };
-}
-
-function compactAutoplayRenderer(video) {
-  video = video.contents;
-  let item;
-  if (video) item = video[0];
-  if (item) return useRender(item[Object.keys(item)[0]], Object.keys(item)[0]);
-  else return undefined;
-}
-
-function compactVideoRenderer(video) {
-  return {
-    id: video.videoId,
-    title: video.title?.runs[0].text,
-    thumbnail: Innertube.getThumbnail(video.videoId, "max"),
-    channel: video.shortBylineText?.runs[0].text,
-    channelURL:
-      video.shortBylineText?.runs[0].navigationEndpoint?.browseEndpoint
-        ?.canonicalBaseUrl,
-    channelThumbnail: video.channelThumbnail?.thumbnails[0].url,
-    metadata: {
-      views: video.viewCountText?.runs[0].text,
-      length: video.lengthText?.runs[0].text,
-      publishedTimeText: video.publishedTimeText.runs[0].text,
-      overlayStyle: video.thumbnailOverlays?.map(
-        (overlay) => overlay.thumbnailOverlayTimeStatusRenderer?.style
-      ),
-      overlay: video.thumbnailOverlays?.map(
-        (overlay) =>
-          overlay.thumbnailOverlayTimeStatusRenderer?.text.runs[0].text
-      ),
-    },
-  };
-}
-
-export default useRender;
+export default rendererUtils;

NUXT/plugins/youtube.js

@@ -2,7 +2,7 @@
 import { Http } from "@capacitor-community/http";
 import Innertube from "./innertube";
 import constants from "./constants";
-import useRender from "./renderers";
+import rendererUtils from "./renderers";
 import { Buffer } from "buffer";
 
 //---   Logger Function   ---//
@@ -143,5 +143,6 @@ const innertubeModule = {
 export default ({ app }, inject) => {
   inject("youtube", { ...searchModule, ...innertubeModule });
   inject("logger", logger);
+  inject("rendererUtils", rendererUtils);
 };
 logger(constants.LOGGER_NAMES.init, "Program Started");