From 25fbeab72f19bd7c2cd1f9ab827f51e85b3a2d4c Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Mon, 4 Apr 2022 23:33:16 +1200
Subject: [PATCH 01/12] refactor: changed to web endpoint because youtube is
 breaking the android JSON API

---
 .../Comments/commentMainRenderer.vue          |  87 ++++++++++
 .../Comments/commentThreadRenderer.vue        |   0
 .../CompactRenderers/compactVideoRenderer.vue |   2 +-
 .../SectionRenderers/itemSectionRenderer.vue  |   2 +
 .../slimVideoDescriptionRenderer.vue          |  19 +--
 .../videoWithContextRenderer.vue              | 151 ++++++++++++++++++
 NUXT/pages/watch.vue                          | 128 ++++++++++++---
 NUXT/plugins/constants.js                     |   2 +-
 NUXT/plugins/innertube.js                     |  86 ++++++----
 NUXT/plugins/renderers.js                     |  23 ++-
 NUXT/plugins/utils.js                         |   6 +
 11 files changed, 431 insertions(+), 75 deletions(-)
 create mode 100644 NUXT/components/Comments/commentMainRenderer.vue
 create mode 100644 NUXT/components/Comments/commentThreadRenderer.vue
 create mode 100644 NUXT/components/gridRenderers/videoWithContextRenderer.vue

diff --git a/NUXT/components/Comments/commentMainRenderer.vue b/NUXT/components/Comments/commentMainRenderer.vue
new file mode 100644
index 0000000..c0b67f3
--- /dev/null
+++ b/NUXT/components/Comments/commentMainRenderer.vue
@@ -0,0 +1,87 @@
+<template>
+  <div id="comment">
+    <a
+      :href="this.$rendererUtils.getNavigationEndpoints(comment.authorEndpoint)"
+      class="avatar-link pt-2"
+    >
+      <v-img
+        class="avatar-thumbnail"
+        :src="
+          comment.authorThumbnail.thumbnails[
+            comment.authorThumbnail.thumbnails.length - 1
+          ].url
+        "
+      />
+    </a>
+    <v-card-text class="comment-info pt-2">
+      <div
+        v-for="title in comment.title.runs"
+        :key="title.text"
+        style="margin-top: 0.5em"
+        class="vid-title"
+      >
+        {{ title.text }}
+      </div>
+
+      <div
+        class="caption background--text"
+        :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+        v-text="parseBottom(comment)"
+      />
+    </v-card-text>
+  </div>
+</template>
+
+<style scoped>
+.entry {
+  width: 100%; /* Prevent Loading Weirdness */
+}
+
+.vid-title {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.avatar-thumbnail {
+  margin-top: 0.5rem;
+  margin-left: 0.5rem;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+}
+
+#details {
+  display: flex;
+  flex-direction: row;
+  flex-basis: auto;
+  padding: 10px;
+}
+
+@media screen and (orientation: landscape) {
+  .entry {
+    margin-bottom: 8px;
+  }
+  #details {
+    flex-direction: column-reverse;
+  }
+}
+</style>
+
+<script>
+export default {
+  props: ["comment"],
+
+  methods: {
+    parseBottom(comment) {
+      const bottomText = [
+        comment.subscriberCountText?.runs[0].text,
+        comment.videoCountText?.runs.map((run) => run.text).join(" "),
+      ];
+      return bottomText.join(" · ");
+    },
+  },
+};
+</script>
diff --git a/NUXT/components/Comments/commentThreadRenderer.vue b/NUXT/components/Comments/commentThreadRenderer.vue
new file mode 100644
index 0000000..e69de29
diff --git a/NUXT/components/CompactRenderers/compactVideoRenderer.vue b/NUXT/components/CompactRenderers/compactVideoRenderer.vue
index 89cf445..05cead0 100644
--- a/NUXT/components/CompactRenderers/compactVideoRenderer.vue
+++ b/NUXT/components/CompactRenderers/compactVideoRenderer.vue
@@ -32,7 +32,7 @@
       <a
         :href="
           this.$rendererUtils.getNavigationEndpoints(
-            video.shortBylineText.runs[0].navigationEndpoint
+            video.shortBylineText.runs[0]
           )
         "
         class="avatar-link pt-2"
diff --git a/NUXT/components/SectionRenderers/itemSectionRenderer.vue b/NUXT/components/SectionRenderers/itemSectionRenderer.vue
index f786cdc..61c7789 100644
--- a/NUXT/components/SectionRenderers/itemSectionRenderer.vue
+++ b/NUXT/components/SectionRenderers/itemSectionRenderer.vue
@@ -38,12 +38,14 @@
 import compactVideoRenderer from "~/components/CompactRenderers/compactVideoRenderer.vue";
 import compactChannelRenderer from "~/components/CompactRenderers/compactChannelRenderer.vue";
 import gridVideoRenderer from "~/components/gridRenderers/gridVideoRenderer.vue";
+import videoWithContextRenderer from "~/components/gridRenderers/videoWithContextRenderer.vue";
 
 export default {
   components: {
     gridVideoRenderer,
     compactVideoRenderer,
     compactChannelRenderer,
+    videoWithContextRenderer,
   },
   props: ["render"],
 
diff --git a/NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue b/NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue
index 47e2417..e6d5308 100644
--- a/NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue
+++ b/NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="description">
-    <template v-for="(text, index) in render.description.runs">
-      <template
-        v-if="
-          text.navigationEndpoint && text.navigationEndpoint.webviewEndpoint
-        "
-      >
+    <template v-for="(text, index) in render.descriptionBodyText.runs">
+      <template v-if="$rendererUtils.checkInternal(text)">
         <a
-          @click="openExternal($rendererUtils.getNavigationEndpoints(text))"
+          @click="openInternal($rendererUtils.getNavigationEndpoints(text))"
           :key="index"
           >{{ text.text }}</a
         >
       </template>
-      <template v-else-if="$rendererUtils.checkInternal(text)">
+      <template
+        v-else-if="
+          text.navigationEndpoint && text.navigationEndpoint.urlEndpoint
+        "
+      >
         <a
-          @click="openInternal($rendererUtils.getNavigationEndpoints(text))"
+          @click="openExternal($rendererUtils.getNavigationEndpoints(text))"
           :key="index"
           >{{ text.text }}</a
         >
@@ -28,6 +28,7 @@
 .description {
   white-space: pre-line;
   margin-bottom: 16px;
+  margin-top: 16px;
 }
 </style>
 
diff --git a/NUXT/components/gridRenderers/videoWithContextRenderer.vue b/NUXT/components/gridRenderers/videoWithContextRenderer.vue
new file mode 100644
index 0000000..4dd2637
--- /dev/null
+++ b/NUXT/components/gridRenderers/videoWithContextRenderer.vue
@@ -0,0 +1,151 @@
+<template>
+  <v-card
+    class="entry videoWithContextRenderer background"
+    :to="`/watch?v=${video.videoId}`"
+    flat
+  >
+    <div style="position: relative" class="thumbnail-container">
+      <v-img
+        v-if="video.thumbnail"
+        :aspect-ratio="16 / 9"
+        :src="
+          $youtube.getThumbnail(
+            video.videoId,
+            'max',
+            video.thumbnail.thumbnails
+          )
+        "
+      />
+      <div
+        v-if="video.thumbnailOverlays"
+        class="videoRuntimeFloat"
+        :class="
+          'style-' +
+          video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer.style
+        "
+        style="color: #fff"
+        v-text="
+          video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer.text
+            .runs[0].text
+        "
+      />
+    </div>
+    <div id="details">
+      <a
+        :href="
+          $rendererUtils.getNavigationEndpoints(
+            video.shortBylineText.runs[0].navigationEndpoint
+          )
+        "
+        class="avatar-link pt-2"
+      >
+        <v-img
+          class="avatar-thumbnail"
+          :src="
+            video.channelThumbnail.channelThumbnailWithLinkRenderer.thumbnail
+              .thumbnails[0].url
+          "
+        />
+      </a>
+      <v-card-text class="video-info pt-2">
+        <div
+          v-for="title in video.headline.runs"
+          :key="title.text"
+          style="margin-top: 0.5em"
+          class="font-weight-medium vid-title"
+        >
+          {{ title.text }}
+        </div>
+
+        <div
+          class="background--text text--lighten-5 caption"
+          :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+          v-text="parseBottom(video)"
+        />
+      </v-card-text>
+    </div>
+  </v-card>
+</template>
+
+<style scoped>
+.entry {
+  width: 100%; /* Prevent Loading Weirdness */
+}
+.videoRuntimeFloat {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  border-radius: 5px;
+  padding: 0px 4px 0px 4px;
+}
+
+.videoRuntimeFloat.style-DEFAULT {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.videoRuntimeFloat.style-LIVE {
+  background: rgba(255, 0, 0, 0.5);
+}
+
+.vid-title {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.avatar-thumbnail {
+  margin-top: 0.5rem;
+  margin-left: 0.5rem;
+  border-radius: 50%;
+  width: 35px;
+  height: 35px;
+}
+
+#details {
+  display: flex;
+  flex-direction: row;
+  flex-basis: auto;
+}
+
+@media screen and (orientation: landscape) {
+  .entry {
+    margin-bottom: 8px;
+  }
+  .thumbnail-container {
+    width: 50vh;
+    float: left;
+  }
+  #details {
+    flex-direction: column-reverse;
+  }
+  .avatar-thumbnail {
+    margin-top: 0;
+    margin-left: 16px;
+  }
+  .video-info {
+    padding-top: 0 !important;
+    padding-bottom: 0;
+    margin-top: 0;
+  }
+}
+</style>
+
+<script>
+export default {
+  props: ["video"],
+
+  methods: {
+    parseBottom(video) {
+      const bottomText = [
+        video.shortBylineText?.runs[0].text,
+        video.shortViewCountText?.runs[0].text,
+      ];
+      if (video.publishedTimeText?.runs[0].text)
+        bottomText.push(video.publishedTimeText?.runs[0].text);
+      return bottomText.join(" · ");
+    },
+  },
+};
+</script>
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index a863dc6..7d94a50 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -19,11 +19,16 @@
           font-size: 0.95rem;
           line-height: 1rem;
         "
-        v-text="title"
+        v-text="video.title"
       />
       <v-card-text>
         <div style="margin-bottom: 1rem">
-          {{ views }} views • {{ uploaded }}
+          <template
+            v-for="text in video.metadata.contents.find(
+              (content) => content.slimVideoInformationRenderer
+            ).slimVideoInformationRenderer.collapsedSubtitle.runs"
+            >{{ text.text }}</template
+          >
         </div>
 
         <!--   Scrolling Div For Interactions   --->
@@ -58,12 +63,7 @@
         </div>
         <!--   End Scrolling Div For Interactions   --->
         <!-- <hr /> -->
-        <p>Channel Stuff</p>
       </v-card-text>
-      <div v-if="showMore" class="scroll-y ml-2 mr-2">
-        <slim-video-description-renderer :render="description" />
-      </div>
-
       <!-- <v-bottom-sheet
         v-model="showMore"
         color="background"
@@ -75,32 +75,88 @@
           ><br />
 
           <div class="scroll-y">
-            {{ description }}
+            {{ response.renderedData.description }}
           </div>
         </v-sheet>
       </v-bottom-sheet> -->
       <!-- <v-bottom-sheet v-model="share" color="background" style="z-index: 9999999">
         <v-sheet style="padding: 1em">
           <div class="scroll-y">
-            {{ description }}
+            {{ response.renderedData.description }}
           </div>
         </v-sheet>
       </v-bottom-sheet> -->
     </v-card>
-    <vid-load-renderer v-if="!recommends" />
-    <shelf-renderer v-else :render="recommends" />
+    <v-divider />
+
+    <!--   Channel Bar   -->
+    <v-card
+      class="channel-section background"
+      v-if="loaded"
+      :to="video.channelUrl"
+    >
+      <div id="details">
+        <div class="avatar-link mr-3">
+          <v-img class="avatar-thumbnail" :src="video.channelImg" />
+        </div>
+        <div class="channel-byline">
+          <div class="channel-name" v-text="video.channelName" />
+          <div
+            class="caption background--text"
+            :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+            v-text="video.channelSubs"
+          />
+        </div>
+      </div>
+      <div
+        class="channel-buttons"
+        style="color: rgb(204, 0, 0); text-transform: uppercase"
+      >
+        subscribe
+      </div>
+    </v-card>
+    <v-divider />
+
+    <!-- Comments -->
+    <!-- <v-card flat class="background comment-button" v-if="loaded">
+      <v-text
+        >{{ video.commentData.title }} •
+        {{ video.commentData.commentsCount }}</v-text
+      >
+    </v-card>
+    <v-divider /> -->
+
+    <!-- Description -->
+    <div v-if="showMore" class="scroll-y ml-4 mr-4">
+      <slim-video-description-renderer
+        :render="video.renderedData.description"
+      />
+    </div>
+
+    <!-- Related Videos -->
+    <div class="loaders" v-if="!loaded">
+      <v-skeleton-loader
+        type="list-item-two-line, actions, divider, list-item-avatar, divider, list-item-three-line"
+      />
+      <vid-load-renderer :count="5" />
+    </div>
+    <item-section-renderer v-else :render="recommends" />
   </div>
 </template>
 
 <script>
 import { Share } from "@capacitor/share";
-import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
 import VidLoadRenderer from "~/components/vidLoadRenderer.vue";
 import { getCpn } from "~/plugins/utils";
 import SlimVideoDescriptionRenderer from "~/components/UtilRenderers/slimVideoDescriptionRenderer.vue";
+import ItemSectionRenderer from "~/components/SectionRenderers/itemSectionRenderer.vue";
 
 export default {
-  components: { ShelfRenderer, VidLoadRenderer, SlimVideoDescriptionRenderer },
+  components: {
+    VidLoadRenderer,
+    SlimVideoDescriptionRenderer,
+    ItemSectionRenderer,
+  },
   data() {
     return {
       interactions: [
@@ -129,15 +185,12 @@ export default {
       ],
       showMore: false,
       // share: false,
-      title: null,
-      uploaded: null,
       vidSrc: null,
       sources: [],
-      description: null,
-      views: null,
       recommends: null,
       loaded: false,
       interval: null,
+      video: null,
     };
   },
   watch: {
@@ -167,10 +220,10 @@ export default {
   },
   methods: {
     getVideo() {
-      this.likes = 100;
       this.loaded = false;
 
       this.$youtube.getVid(this.$route.query.v).then((result) => {
+        this.video = result;
         console.log("Video info data", result);
         console.log(result.availableResolutions);
 
@@ -184,14 +237,9 @@ export default {
           ].url; // Takes the highest available resolution with both video and Audio. Note this will be lower than the actual highest resolution
 
         //---   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 = parseInt(result.metadata.viewCount).toLocaleString();
         this.likes = result.metadata.likes.toLocaleString();
-        this.uploaded = result.metadata.uploadDate;
         this.interactions[0].value = result.metadata.likes.toLocaleString();
         this.loaded = true;
-
         this.recommends = result.renderedData.recommendations;
         // .catch((error) => this.$logger("Watch", error, true));
         console.log("recommendations:", this.recommends);
@@ -220,8 +268,8 @@ export default {
     async share() {
       // this.share = !this.share;
       await Share.share({
-        title: this.title,
-        text: this.title,
+        title: this.video.title,
+        text: this.video.title,
         url: "https://youtu.be/" + this.$route.query.v,
         dialogTitle: "Share video",
       });
@@ -271,4 +319,34 @@ export default {
   flex-direction: column;
   justify-content: space-around;
 }
+
+.channel-section,
+.comment-button {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+}
+
+.channel-section #details {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.channel-section .channel-byline {
+  min-width: 0;
+}
+
+.channel-section .avatar-thumbnail {
+  border-radius: 50%;
+  width: 35px;
+  height: 35px;
+}
+
+.channel-section .channel-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>
diff --git a/NUXT/plugins/constants.js b/NUXT/plugins/constants.js
index 97425c4..17fead7 100644
--- a/NUXT/plugins/constants.js
+++ b/NUXT/plugins/constants.js
@@ -12,7 +12,7 @@ const url = {
 const ytApiVal = {
   VERSION: "16.25",
   CLIENTNAME: "ANDROID",
-  VERSION_WEB: "2.20220318.00.00",
+  VERSION_WEB: "2.20220331.06.00",
   CLIENT_WEB: 2,
 };
 
diff --git a/NUXT/plugins/innertube.js b/NUXT/plugins/innertube.js
index 46a65d6..fcdac94 100644
--- a/NUXT/plugins/innertube.js
+++ b/NUXT/plugins/innertube.js
@@ -3,6 +3,7 @@
 
 import { Http } from "@capacitor-community/http";
 import { getBetweenStrings } from "./utils";
+import rendererUtils from "./renderers";
 import constants from "./constants";
 
 class Innertube {
@@ -95,8 +96,11 @@ class Innertube {
     };
   }
 
-  async getContinuationsAsync(continuation, type) {
-    let data = { context: this.context, continuation: continuation };
+  async getContinuationsAsync(continuation, type, contextAdditional = {}) {
+    let data = {
+      context: { ...this.context, ...contextAdditional },
+      continuation: continuation,
+    };
     let url;
     switch (type) {
       case "browse":
@@ -135,7 +139,17 @@ class Innertube {
     let data = { context: this.context, videoId: id };
     const responseNext = await Http.post({
       url: `${constants.URLS.YT_BASE_API}/next?key=${this.key}`,
-      data: data,
+      data: {
+        ...data,
+        ...{
+          context: {
+            client: {
+              clientName: constants.YT_API_VALUES.CLIENT_WEB,
+              clientVersion: constants.YT_API_VALUES.VERSION_WEB,
+            },
+          },
+        },
+      },
       headers: constants.INNERTUBE_HEADER(this.context.client),
     }).catch((error) => error);
 
@@ -251,59 +265,67 @@ class Innertube {
     const resolutions = responseInfo.streamingData;
     const columnUI =
       responseNext.contents.singleColumnWatchNextResults.results.results;
+    const vidMetadata = columnUI.contents.find(
+      (content) => content.slimVideoMetadataSectionRenderer
+    ).slimVideoMetadataSectionRenderer;
+
+    const recommendations = columnUI?.contents.find(
+      (contents) => contents?.itemSectionRenderer?.targetId == "watch-next-feed"
+    ).itemSectionRenderer;
+
+    const ownerData = vidMetadata.contents.find(
+      (content) => content.slimOwnerRenderer
+    )?.slimOwnerRenderer;
 
     const vidData = {
       id: details.videoId,
       title: details.title,
       isLive: details.isLiveContent,
       channelName: details.author,
-      channelUrl:
-        columnUI?.contents[0].slimVideoMetadataSectionRenderer?.contents.find(
-          (contents) => contents.elementRenderer
-        )?.newElement?.type?.componentType?.model?.channelBarModel
-          ?.videoChannelBarData?.onTap?.innertubeCommand?.browseEndpoint
-          ?.canonicalBaseUrl,
-      channelImg:
-        columnUI?.contents[0].slimVideoMetadataSectionRenderer?.contents.find(
-          (contents) => contents.elementRenderer
-        )?.newElement?.type?.componentType?.model?.channelBarModel
-          ?.videoChannelBarData?.avatar?.image?.sources[0].url,
+      channelSubs: ownerData?.collapsedSubtitle?.runs[0]?.text,
+      channelUrl: rendererUtils.getNavigationEndpoints(ownerData),
+      channelImg: ownerData?.thumbnail?.thumbnails[0].url,
       availableResolutions: resolutions?.formats,
       availableResolutionsAdaptive: resolutions?.adaptiveFormats,
       metadata: {
+        contents: vidMetadata.contents,
         description: details.shortDescription,
         thumbnails: details.thumbnails?.thumbnails,
-        uploadDate:
-          columnUI?.contents[0].slimVideoMetadataSectionRenderer?.contents.find(
-            (contents) => contents.slimVideoDescriptionRenderer
-          )?.slimVideoDescriptionRenderer.publishDate.runs[0].text,
         isPrivate: details.isPrivate,
         viewCount: details.viewCount,
         lengthSeconds: details.lengthSeconds,
         likes: parseInt(
-          columnUI?.contents[0].slimVideoMetadataSectionRenderer?.contents
-            .find((contents) => contents.slimVideoScrollableActionBarRenderer)
-            ?.slimVideoScrollableActionBarRenderer.buttons.find(
-              (button) => button.slimMetadataToggleButtonRenderer.isLike == true
+          vidMetadata.contents
+            .find((content) => content.slimVideoActionBarRenderer)
+            .slimVideoActionBarRenderer.buttons.find(
+              (button) => button.slimMetadataToggleButtonRenderer.isLike
             )
-            ?.slimMetadataToggleButtonRenderer?.button.toggleButtonRenderer?.defaultText?.accessibility?.accessibilityData?.label?.replace(
+            .slimMetadataToggleButtonRenderer.button.toggleButtonRenderer.defaultText.accessibility.accessibilityData.label.replace(
               /\D/g,
               ""
             )
         ), // Yes. I know.
       },
       renderedData: {
-        description: columnUI?.contents
-          .find((contents) => contents.slimVideoMetadataSectionRenderer)
-          .slimVideoMetadataSectionRenderer?.contents.find(
-            (contents) => contents.slimVideoDescriptionRenderer
-          )?.slimVideoDescriptionRenderer,
-        recommendations: columnUI?.contents.find(
-          (contents) => contents.shelfRenderer
-        ).shelfRenderer,
+        description: responseNext.engagementPanels
+          .find(
+            (panel) =>
+              panel.engagementPanelSectionListRenderer.panelIdentifier ==
+              "video-description-ep-identifier"
+          )
+          .engagementPanelSectionListRenderer.content.structuredDescriptionContentRenderer.items.find(
+            (item) => item.expandableVideoDescriptionBodyRenderer
+          ).expandableVideoDescriptionBodyRenderer,
+        recommendations: recommendations,
         recommendationsContinuation:
-          columnUI?.continuations[0].reloadContinuationData?.continuation,
+          recommendations.contents[recommendations.contents.length - 1]
+            .continuationItemRenderer?.continuationEndpoint.continuationCommand
+            .token,
       },
+      // commentData:
+      //   responseNext?.frameworkUpdates?.entityBatchUpdate?.mutations?.find(
+      //     (mutations) => mutations.payload?.commentHeaderEntityPayload
+      //   ).payload.commentHeaderEntityPayload,
       playbackTracking: responseInfo.playbackTracking,
     };
 
diff --git a/NUXT/plugins/renderers.js b/NUXT/plugins/renderers.js
index aa4d9f3..0ab08c2 100644
--- a/NUXT/plugins/renderers.js
+++ b/NUXT/plugins/renderers.js
@@ -3,24 +3,33 @@ class rendererUtils {
   static getNavigationEndpoints(base) {
     const navEndpoint = base.navigationEndpoint;
     if (!navEndpoint) return;
-    if (navEndpoint.webviewEndpoint) {
-      return navEndpoint.webviewEndpoint.url;
+    if (navEndpoint.urlEndpoint) {
+      const params = new Proxy(
+        new URLSearchParams(navEndpoint.urlEndpoint.url),
+        {
+          get: (searchParams, prop) => searchParams.get(prop),
+        }
+      );
+      if (params.q) return decodeURI(params.q);
+      else return new URL(navEndpoint.urlEndpoint.url).pathname;
     } 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
+    } else if (navEndpoint.searchEndpoint) {
+      return `/search?q=${encodeURI(navEndpoint.searchEndpoint.query)}`;
     }
   }
 
   static checkInternal(base) {
-    const navEndpoint = base.navigationEndpoint;
-    if (!navEndpoint) return false;
-    if (navEndpoint.browseEndpoint || navEndpoint.watchEndpoint) {
-      return true;
-    } else {
+    const tmp = document.createElement("a");
+    tmp.href = this.getNavigationEndpoints(base);
+    if (tmp.host !== window.location.host || !base.navigationEndpoint) {
       return false;
+    } else {
+      return true;
     }
   }
 }
diff --git a/NUXT/plugins/utils.js b/NUXT/plugins/utils.js
index b918d2e..69b0e4f 100644
--- a/NUXT/plugins/utils.js
+++ b/NUXT/plugins/utils.js
@@ -37,9 +37,15 @@ function getCpn() {
   return result;
 }
 
+function getMutationByKey(key, mutations) {
+  if (!key || !mutations) return undefined;
+  return mutations.find((mutation) => mutation.entityKey === key).payload;
+}
+
 module.exports = {
   getBetweenStrings,
   hexToRgb,
   rgbToHex,
   getCpn,
+  getMutationByKey,
 };

From 89e06164af4dafa61f82eada7432ac984de5b490 Mon Sep 17 00:00:00 2001
From: Alex <56329333+404-Program-not-found@users.noreply.github.com>
Date: Tue, 5 Apr 2022 21:04:17 +1200
Subject: [PATCH 02/12] merge

---
 NUXT/plugins/utils.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/NUXT/plugins/utils.js b/NUXT/plugins/utils.js
index b350ae2..f057a47 100644
--- a/NUXT/plugins/utils.js
+++ b/NUXT/plugins/utils.js
@@ -41,6 +41,7 @@ function getMutationByKey(key, mutations) {
   if (!key || !mutations) return undefined;
   return mutations.find((mutation) => mutation.entityKey === key).payload;
 }
+
 function linkParser(url) {
 
   var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;

From e7453f862e5d88feb0c6c6ab43a33e06b434a4b7 Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Thu, 7 Apr 2022 19:32:24 +1200
Subject: [PATCH 03/12] feat: tweetmoji and comments (neither works yet)

---
 NUXT/layouts/default.vue  | 6 ++++++
 NUXT/plugins/innertube.js | 9 +++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/NUXT/layouts/default.vue b/NUXT/layouts/default.vue
index 981f90b..c8b5f03 100644
--- a/NUXT/layouts/default.vue
+++ b/NUXT/layouts/default.vue
@@ -115,6 +115,12 @@ export default {
         this.$router.push(slug.pathname + slug.search);
       }
     });
+
+    // ---   Import Twemoji   ---///
+    const plugin = document.createElement("script");
+    plugin.setAttribute("src", "//twemoji.maxcdn.com/v/latest/twemoji.min.js");
+    plugin.setAttribute("crossorigin", "anonymous");
+    document.head.appendChild(plugin);
   },
 
   methods: {
diff --git a/NUXT/plugins/innertube.js b/NUXT/plugins/innertube.js
index fcdac94..80bb757 100644
--- a/NUXT/plugins/innertube.js
+++ b/NUXT/plugins/innertube.js
@@ -322,10 +322,11 @@ class Innertube {
             .continuationItemRenderer?.continuationEndpoint.continuationCommand
             .token,
       },
-      // commentData:
-      //   responseNext?.frameworkUpdates?.entityBatchUpdate?.mutations?.find(
-      //     (mutations) => mutations.payload?.commentHeaderEntityPayload
-      //   ).payload.commentHeaderEntityPayload,
+      engagementPanels: responseNext.engagementPanels,
+      commentData: columnUI.contents.find(
+        (content) =>
+          content.itemSectionRenderer?.contents.commentsEntryPointHeaderRenderer
+      )?.itemSectionRenderer.contents.commentsEntryPointHeaderRenderer,
       playbackTracking: responseInfo.playbackTracking,
     };
 

From 4d039e3ed05de6e52ac8e04e3e5a63365fb56264 Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Sat, 9 Apr 2022 14:28:08 +1200
Subject: [PATCH 04/12] feat: better error logs on connecting

---
 NUXT/pages/mods/plugins.vue | 58 +++++++++++++++++++++++++++++++++++++
 NUXT/pages/watch.vue        |  1 +
 NUXT/plugins/innertube.js   |  5 +++-
 3 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 NUXT/pages/mods/plugins.vue

diff --git a/NUXT/pages/mods/plugins.vue b/NUXT/pages/mods/plugins.vue
new file mode 100644
index 0000000..f4ed81f
--- /dev/null
+++ b/NUXT/pages/mods/plugins.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <!-- sorry for the mess, I will make a dumb (styles only) standardized card component later - Nik -->
+    <div
+      v-for="(plugin, index) in plugins"
+      :key="index"
+      flat
+      class="card d-flex mb-4 background"
+      :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
+      :style="{
+        borderRadius: `${$store.state.tweaks.roundTweak / 2}rem`,
+        margin: $store.state.tweaks.roundTweak > 0 ? '0 1rem' : '0',
+        padding:
+          $store.state.tweaks.roundTweak > 0
+            ? '.75rem 0rem .75rem 1rem'
+            : '.75rem .75rem .75rem 1.5rem',
+      }"
+    >
+      <div>
+        <v-card-title class="pa-0">
+          {{ plugin.manifest.name }}
+          {{ plugin.manifest.version }}
+        </v-card-title>
+        <v-card-text
+          class="pa-0 mb-3 background--text"
+          :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+        >
+          by {{ plugin.manifest.author }}
+          {{ plugin.manifest.license ? `(${plugin.manifest.license})` : "" }}
+        </v-card-text>
+        <v-card-text class="pa-0">
+          {{ plugin.manifest.description }}
+        </v-card-text>
+      </div>
+      <v-switch
+        disabled
+        style="pointer-events: none"
+        class="my-0"
+        persistent-hint
+        inset
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      plugins: new Array(),
+      installedVersion: process.env.appVersion,
+    };
+  },
+  async mounted() {
+    this.plugins = await this.$tppl.list;
+  },
+};
+</script>
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 5f99db2..c613066 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -152,6 +152,7 @@ import { getCpn } from "~/plugins/utils";
 import SlimVideoDescriptionRenderer from "~/components/UtilRenderers/slimVideoDescriptionRenderer.vue";
 import ItemSectionRenderer from "~/components/SectionRenderers/itemSectionRenderer.vue";
 import vuetubePlayer from "~/components/Player/index.vue";
+import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
 
 export default {
   components: {
diff --git a/NUXT/plugins/innertube.js b/NUXT/plugins/innertube.js
index 80bb757..ef27b2d 100644
--- a/NUXT/plugins/innertube.js
+++ b/NUXT/plugins/innertube.js
@@ -40,7 +40,10 @@ class Innertube {
         }
       } catch (err) {
         console.log(err);
-        if (this.checkErrorCallback) this.ErrorCallback(err, true);
+        if (this.checkErrorCallback) {
+          this.ErrorCallback(html.data, true);
+          this.ErrorCallback(err, true);
+        }
         if (this.retry_count >= 10) {
           this.initAsync();
         } else {

From 2ff9cb997e7a0eb90592a887f8fc094742c9ee85 Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Sat, 9 Apr 2022 15:06:35 +1200
Subject: [PATCH 05/12] feat: added toasts

---
 NUXT/plugins/innertube.js                     | 20 +++++++++++++++----
 NUXT/plugins/utils.js                         |  3 +++
 NUXT/plugins/youtube.js                       | 12 ++++++++---
 android/app/capacitor.build.gradle            |  1 +
 .../src/main/assets/capacitor.plugins.json    |  4 ++++
 android/capacitor.settings.gradle             |  3 +++
 ios/App/Podfile                               | 19 +++++++++---------
 package.json                                  |  1 +
 8 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/NUXT/plugins/innertube.js b/NUXT/plugins/innertube.js
index ef27b2d..89742d3 100644
--- a/NUXT/plugins/innertube.js
+++ b/NUXT/plugins/innertube.js
@@ -2,7 +2,7 @@
 // https://www.youtube.com/youtubei/v1
 
 import { Http } from "@capacitor-community/http";
-import { getBetweenStrings } from "./utils";
+import { getBetweenStrings, delay } from "./utils";
 import rendererUtils from "./renderers";
 import constants from "./constants";
 
@@ -44,11 +44,23 @@ class Innertube {
           this.ErrorCallback(html.data, true);
           this.ErrorCallback(err, true);
         }
-        if (this.retry_count >= 10) {
-          this.initAsync();
+        if (this.retry_count < 10) {
+          this.retry_count += 1;
+          if (this.checkErrorCallback)
+            this.ErrorCallback(
+              `retry count: ${this.retry_count}`,
+              false,
+              `An error occurred while trying to init the innertube API. Retrial number: ${this.retry_count}/10`
+            );
+          await delay(5000);
+          await this.initAsync();
         } else {
           if (this.checkErrorCallback)
-            this.ErrorCallback("Failed to retrieve Innertube session", true);
+            this.ErrorCallback(
+              "Failed to retrieve Innertube session",
+              true,
+              "An error occurred while retrieving the innertube session. Check the Logs for more information."
+            );
         }
       }
     } catch (error) {
diff --git a/NUXT/plugins/utils.js b/NUXT/plugins/utils.js
index 026c138..1613a4d 100644
--- a/NUXT/plugins/utils.js
+++ b/NUXT/plugins/utils.js
@@ -49,6 +49,8 @@ function linkParser(url) {
   return match && match[7].length == 11 ? match[7] : false;
 }
 
+const delay = (ms) => new Promise((res) => setTimeout(res, ms));
+
 module.exports = {
   getBetweenStrings,
   hexToRgb,
@@ -56,4 +58,5 @@ module.exports = {
   getCpn,
   getMutationByKey,
   linkParser,
+  delay,
 };
diff --git a/NUXT/plugins/youtube.js b/NUXT/plugins/youtube.js
index 53fa021..0d16391 100644
--- a/NUXT/plugins/youtube.js
+++ b/NUXT/plugins/youtube.js
@@ -5,6 +5,7 @@ import constants from "./constants";
 import rendererUtils from "./renderers";
 import { Buffer } from "buffer";
 import iconv from "iconv-lite";
+import { Toast } from "@capacitor/toast";
 
 //---   Logger Function   ---//
 function logger(func, data, isError = false) {
@@ -74,9 +75,14 @@ let InnertubeAPI;
 const innertubeModule = {
   async getAPI() {
     if (!InnertubeAPI) {
-      InnertubeAPI = await Innertube.createAsync((message, isError) => {
-        logger(constants.LOGGER_NAMES.innertube, message, isError);
-      });
+      InnertubeAPI = await Innertube.createAsync(
+        (message, isError, shortMessage) => {
+          logger(constants.LOGGER_NAMES.innertube, message, isError);
+          if (shortMessage) {
+            Toast.show({ text: shortMessage });
+          }
+        }
+      );
     }
     return InnertubeAPI;
   },
diff --git a/android/app/capacitor.build.gradle b/android/app/capacitor.build.gradle
index 40f4113..57d16ef 100644
--- a/android/app/capacitor.build.gradle
+++ b/android/app/capacitor.build.gradle
@@ -17,6 +17,7 @@ dependencies {
     implementation project(':capacitor-share')
     implementation project(':capacitor-splash-screen')
     implementation project(':capacitor-status-bar')
+    implementation project(':capacitor-toast')
     implementation project(':hugotomazi-capacitor-navigation-bar')
 
 }
diff --git a/android/app/src/main/assets/capacitor.plugins.json b/android/app/src/main/assets/capacitor.plugins.json
index 2f6bcbe..f4166c0 100644
--- a/android/app/src/main/assets/capacitor.plugins.json
+++ b/android/app/src/main/assets/capacitor.plugins.json
@@ -31,6 +31,10 @@
 		"pkg": "@capacitor/status-bar",
 		"classpath": "com.capacitorjs.plugins.statusbar.StatusBarPlugin"
 	},
+	{
+		"pkg": "@capacitor/toast",
+		"classpath": "com.capacitorjs.plugins.toast.ToastPlugin"
+	},
 	{
 		"pkg": "@hugotomazi/capacitor-navigation-bar",
 		"classpath": "br.com.tombus.capacitor.plugin.navigationbar.NavigationBarPlugin"
diff --git a/android/capacitor.settings.gradle b/android/capacitor.settings.gradle
index 093d158..83b507b 100644
--- a/android/capacitor.settings.gradle
+++ b/android/capacitor.settings.gradle
@@ -26,5 +26,8 @@ project(':capacitor-splash-screen').projectDir = new File('../node_modules/@capa
 include ':capacitor-status-bar'
 project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')
 
+include ':capacitor-toast'
+project(':capacitor-toast').projectDir = new File('../node_modules/@capacitor/toast/android')
+
 include ':hugotomazi-capacitor-navigation-bar'
 project(':hugotomazi-capacitor-navigation-bar').projectDir = new File('../node_modules/@hugotomazi/capacitor-navigation-bar/android')
diff --git a/ios/App/Podfile b/ios/App/Podfile
index c5f1516..60892de 100644
--- a/ios/App/Podfile
+++ b/ios/App/Podfile
@@ -9,15 +9,16 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
-  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'
-  pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
-  pod 'CapacitorShare', :path => '../../node_modules/@capacitor/share'
-  pod 'CapacitorSplashScreen', :path => '../../node_modules/@capacitor/splash-screen'
-  pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
-  pod 'HugotomaziCapacitorNavigationBar', :path => '../../node_modules/@hugotomazi/capacitor-navigation-bar'
+  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'
+  pod 'CapacitorHaptics', :path => '..\..\node_modules\@capacitor\haptics'
+  pod 'CapacitorShare', :path => '..\..\node_modules\@capacitor\share'
+  pod 'CapacitorSplashScreen', :path => '..\..\node_modules\@capacitor\splash-screen'
+  pod 'CapacitorStatusBar', :path => '..\..\node_modules\@capacitor\status-bar'
+  pod 'CapacitorToast', :path => '..\..\node_modules\@capacitor\toast'
+  pod 'HugotomaziCapacitorNavigationBar', :path => '..\..\node_modules\@hugotomazi\capacitor-navigation-bar'
 end
 
 target 'App' do
diff --git a/package.json b/package.json
index eb63cc0..450bd04 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "@capacitor/share": "^1.1.2",
     "@capacitor/splash-screen": "^1.2.2",
     "@capacitor/status-bar": "^1.0.8",
+    "@capacitor/toast": "^1.0.8",
     "@hugotomazi/capacitor-navigation-bar": "^1.1.1",
     "iconv-lite": "^0.6.3"
   }

From 3f18325ca3f44f59710bf7c1bd69550da3aaba56 Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Sat, 9 Apr 2022 18:20:51 +1200
Subject: [PATCH 06/12] feat: comment bar

---
 NUXT/pages/watch.vue      | 37 ++++++++++++++++++++++++++-----------
 NUXT/plugins/innertube.js | 13 ++++++-------
 2 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index c613066..5e3e9d7 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -118,22 +118,32 @@
     </v-card>
     <v-divider />
 
-    <!-- Comments -->
-    <!-- <v-card flat class="background comment-button" v-if="loaded">
-      <v-text
-        >{{ video.commentData.title }} •
-        {{ video.commentData.commentsCount }}</v-text
-      >
-    </v-card>
-    <v-divider /> -->
-
     <!-- Description -->
     <div v-if="showMore" class="scroll-y ml-4 mr-4">
       <slim-video-description-renderer
         :render="video.renderedData.description"
       />
+      <v-divider />
     </div>
 
+    <!-- Comments -->
+    <v-card
+      flat
+      class="background comment-renderer"
+      v-if="loaded && video.commentData"
+    >
+      <v-text class="comment-count keep-spaces">
+        <template v-for="text in video.commentData.headerText.runs">
+          <template v-if="text.bold">
+            <strong :key="text.text">{{ text.text }}</strong>
+          </template>
+          <template v-else>{{ text.text }}</template>
+        </template>
+      </v-text>
+      <v-icon>mdi-unfold-more-horizontal</v-icon>
+    </v-card>
+    <v-divider />
+
     <!-- Related Videos -->
     <div class="loaders" v-if="!loaded">
       <v-skeleton-loader
@@ -330,13 +340,14 @@ export default {
 }
 
 .channel-section,
-.comment-button {
+.comment-renderer {
   display: flex;
   align-items: center;
   padding: 12px;
 }
 
-.channel-section #details {
+.channel-section #details,
+.comment-renderer .comment-count {
   flex-grow: 1;
   display: flex;
   align-items: center;
@@ -358,4 +369,8 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.keep-spaces {
+  white-space: pre-wrap;
+}
 </style>
diff --git a/NUXT/plugins/innertube.js b/NUXT/plugins/innertube.js
index 89742d3..b7a0706 100644
--- a/NUXT/plugins/innertube.js
+++ b/NUXT/plugins/innertube.js
@@ -285,7 +285,7 @@ class Innertube {
     ).slimVideoMetadataSectionRenderer;
 
     const recommendations = columnUI?.contents.find(
-      (contents) => contents?.itemSectionRenderer?.targetId == "watch-next-feed"
+      (content) => content?.itemSectionRenderer?.targetId == "watch-next-feed"
     ).itemSectionRenderer;
 
     const ownerData = vidMetadata.contents.find(
@@ -338,15 +338,14 @@ class Innertube {
             .token,
       },
       engagementPanels: responseNext.engagementPanels,
-      commentData: columnUI.contents.find(
-        (content) =>
-          content.itemSectionRenderer?.contents.commentsEntryPointHeaderRenderer
-      )?.itemSectionRenderer.contents.commentsEntryPointHeaderRenderer,
+      commentData: columnUI.contents
+        .find((content) => content.itemSectionRenderer?.contents)
+        ?.itemSectionRenderer.contents.find(
+          (content) => content.commentsEntryPointHeaderRenderer
+        )?.commentsEntryPointHeaderRenderer,
       playbackTracking: responseInfo.playbackTracking,
     };
 
-    console.log(vidData);
-
     return vidData;
   }
 

From 2eafe89a8525ffbc7a92c46f20bdf432caf46792 Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Sun, 10 Apr 2022 21:19:37 +1200
Subject: [PATCH 07/12] refactor: better scrolling on the watch page

---
 NUXT/pages/watch.vue | 300 +++++++++++++++++++++++--------------------
 1 file changed, 160 insertions(+), 140 deletions(-)

diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 5e3e9d7..155f994 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -1,157 +1,165 @@
 <template>
-  <div class="background">
-    <!--   Stock Player   -->
-    <videoPlayer
+  <div class="background" id="watch-body">
+    <div
+      class="player-container"
       style="position: sticky; top: 0; z-index: 696969"
-      :vid-src="vidSrc"
-      ref="player"
-      v-if="useBetaPlayer !== 'true'"
-    />
-
-    <!--   VueTube Player V1   -->
-    <vuetubePlayer :sources="sources" v-if="useBetaPlayer === 'true'" />
-
-    <v-card v-if="loaded" class="ml-2 mr-2 background" flat>
-      <v-card-title
-        class="mt-2"
-        style="
-          padding-top: 0;
-          padding-bottom: 0;
-          font-size: 0.95rem;
-          line-height: 1rem;
-        "
-        v-text="video.title"
+    >
+      <!--   Stock Player   -->
+      <videoPlayer
+        :vid-src="vidSrc"
+        ref="player"
+        v-if="useBetaPlayer !== 'true'"
       />
-      <v-card-text>
-        <div style="margin-bottom: 1rem">
-          <template
-            v-for="text in video.metadata.contents.find(
-              (content) => content.slimVideoInformationRenderer
-            ).slimVideoInformationRenderer.collapsedSubtitle.runs"
-            >{{ text.text }}</template
-          >
-        </div>
 
-        <!--   Scrolling Div For Interactions   --->
-        <div style="display: flex; margin-bottom: 1em">
-          <v-list-item
-            v-for="(item, index) in interactions"
-            :key="index"
-            style="padding: 0; flex: 0 0 20%"
-          >
-            <v-btn
-              text
-              class="vertical-button"
-              style="padding: 0; margin: 0"
-              elevation="0"
-              :disabled="item.disabled"
-              @click="callMethodByName(item.actionName)"
+      <!--   VueTube Player V1   -->
+      <vuetubePlayer :sources="sources" v-if="useBetaPlayer === 'true'" />
+    </div>
+    <div class="content-container">
+      <v-card v-if="loaded" class="ml-2 mr-2 background" flat>
+        <v-card-title
+          class="mt-2"
+          style="
+            padding-top: 0;
+            padding-bottom: 0;
+            font-size: 0.95rem;
+            line-height: 1rem;
+          "
+          v-text="video.title"
+        />
+        <v-card-text>
+          <div style="margin-bottom: 1rem">
+            <template
+              v-for="text in video.metadata.contents.find(
+                (content) => content.slimVideoInformationRenderer
+              ).slimVideoInformationRenderer.collapsedSubtitle.runs"
+              >{{ text.text }}</template
             >
-              <v-icon v-text="item.icon" />
-              <div
-                class="mt-2"
-                style="font-size: 0.66rem"
-                v-text="item.value || item.name"
-              />
+          </div>
+
+          <!--   Scrolling Div For Interactions   --->
+          <div style="display: flex; margin-bottom: 1em">
+            <v-list-item
+              v-for="(item, index) in interactions"
+              :key="index"
+              style="padding: 0; flex: 0 0 20%"
+            >
+              <v-btn
+                text
+                class="vertical-button"
+                style="padding: 0; margin: 0"
+                elevation="0"
+                :disabled="item.disabled"
+                @click="callMethodByName(item.actionName)"
+              >
+                <v-icon v-text="item.icon" />
+                <div
+                  class="mt-2"
+                  style="font-size: 0.66rem"
+                  v-text="item.value || item.name"
+                />
+              </v-btn>
+            </v-list-item>
+
+            <v-spacer />
+            <v-btn text @click="showMore = !showMore">
+              <v-icon v-if="showMore">mdi-chevron-up</v-icon>
+              <v-icon v-else>mdi-chevron-down</v-icon>
             </v-btn>
-          </v-list-item>
-
-          <v-spacer />
-          <v-btn text @click="showMore = !showMore">
-            <v-icon v-if="showMore">mdi-chevron-up</v-icon>
-            <v-icon v-else>mdi-chevron-down</v-icon>
-          </v-btn>
-        </div>
-        <!--   End Scrolling Div For Interactions   --->
-        <!-- <hr /> -->
-      </v-card-text>
-      <!-- <v-bottom-sheet
-        v-model="showMore"
-        color="background"
-        style="z-index: 9999999"
-      >
-        <v-sheet style="padding: 1em">
-          <v-btn block @click="showMore = !showMore"
-            ><v-icon>mdi-chevron-down</v-icon></v-btn
-          ><br />
-
-          <div class="scroll-y">
-            {{ response.renderedData.description }}
           </div>
-        </v-sheet>
-      </v-bottom-sheet> -->
-      <!-- <v-bottom-sheet v-model="share" color="background" style="z-index: 9999999">
-        <v-sheet style="padding: 1em">
-          <div class="scroll-y">
-            {{ response.renderedData.description }}
-          </div>
-        </v-sheet>
-      </v-bottom-sheet> -->
-    </v-card>
-    <v-divider />
-
-    <!--   Channel Bar   -->
-    <v-card
-      class="channel-section background"
-      v-if="loaded"
-      :to="video.channelUrl"
+          <!--   End Scrolling Div For Interactions   --->
+          <!-- <hr /> -->
+        </v-card-text>
+        <!-- <v-bottom-sheet
+      v-model="showMore"
+      color="background"
+      style="z-index: 9999999"
     >
-      <div id="details">
-        <div class="avatar-link mr-3">
-          <v-img class="avatar-thumbnail" :src="video.channelImg" />
-        </div>
-        <div class="channel-byline">
-          <div class="channel-name" v-text="video.channelName" />
-          <div
-            class="caption background--text"
-            :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-            v-text="video.channelSubs"
-          />
-        </div>
-      </div>
-      <div
-        class="channel-buttons"
-        style="color: rgb(204, 0, 0); text-transform: uppercase"
-      >
-        subscribe
-      </div>
-    </v-card>
-    <v-divider />
+      <v-sheet style="padding: 12px">
+        <v-btn block @click="showMore = !showMore"
+          ><v-icon>mdi-chevron-down</v-icon></v-btn
+        ><br />
 
-    <!-- Description -->
-    <div v-if="showMore" class="scroll-y ml-4 mr-4">
-      <slim-video-description-renderer
-        :render="video.renderedData.description"
-      />
+        <slim-video-description-renderer
+          class="scroll-y"
+          :render="video.renderedData.description"
+        />
+      </v-sheet>
+    </v-bottom-sheet> -->
+        <!-- <v-bottom-sheet v-model="share" color="background" style="z-index: 9999999">
+      <v-sheet style="padding: 1em">
+        <div class="scroll-y">
+          {{ response.renderedData.description }}
+        </div>
+      </v-sheet>
+    </v-bottom-sheet> -->
+      </v-card>
       <v-divider />
-    </div>
 
-    <!-- Comments -->
-    <v-card
-      flat
-      class="background comment-renderer"
-      v-if="loaded && video.commentData"
-    >
-      <v-text class="comment-count keep-spaces">
-        <template v-for="text in video.commentData.headerText.runs">
-          <template v-if="text.bold">
-            <strong :key="text.text">{{ text.text }}</strong>
+      <!--   Channel Bar   -->
+      <v-card
+        class="channel-section background"
+        v-if="loaded"
+        :to="video.channelUrl"
+      >
+        <div id="details">
+          <div class="avatar-link mr-3">
+            <v-img class="avatar-thumbnail" :src="video.channelImg" />
+          </div>
+          <div class="channel-byline">
+            <div class="channel-name" v-text="video.channelName" />
+            <div
+              class="caption background--text"
+              :class="
+                $vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'
+              "
+              v-text="video.channelSubs"
+            />
+          </div>
+        </div>
+        <div
+          class="channel-buttons"
+          style="color: rgb(204, 0, 0); text-transform: uppercase"
+        >
+          subscribe
+        </div>
+      </v-card>
+      <v-divider />
+
+      <!-- Description -->
+      <div v-if="showMore" class="scroll-y ml-4 mr-4">
+        <slim-video-description-renderer
+          :render="video.renderedData.description"
+        />
+        <v-divider />
+      </div>
+
+      <!-- Comments -->
+      <v-card
+        flat
+        class="background comment-renderer"
+        v-if="loaded && video.commentData"
+      >
+        <v-text class="comment-count keep-spaces">
+          <template v-for="text in video.commentData.headerText.runs">
+            <template v-if="text.bold">
+              <strong :key="text.text">{{ text.text }}</strong>
+            </template>
+            <template v-else>{{ text.text }}</template>
           </template>
-          <template v-else>{{ text.text }}</template>
-        </template>
-      </v-text>
-      <v-icon>mdi-unfold-more-horizontal</v-icon>
-    </v-card>
-    <v-divider />
+        </v-text>
+        <v-icon>mdi-unfold-more-horizontal</v-icon>
+      </v-card>
+      <v-divider />
 
-    <!-- Related Videos -->
-    <div class="loaders" v-if="!loaded">
-      <v-skeleton-loader
-        type="list-item-two-line, actions, divider, list-item-avatar, divider, list-item-three-line"
-      />
-      <vid-load-renderer :count="5" />
+      <!-- Related Videos -->
+      <div class="loaders" v-if="!loaded">
+        <v-skeleton-loader
+          type="list-item-two-line, actions, divider, list-item-avatar, divider, list-item-three-line"
+        />
+        <vid-load-renderer :count="5" />
+      </div>
+      <item-section-renderer v-else :render="recommends" />
     </div>
-    <item-section-renderer v-else :render="recommends" />
   </div>
 </template>
 
@@ -334,6 +342,18 @@ export default {
 </script>
 
 <style>
+#watch-body {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.content-container {
+  overflow-y: auto;
+  height: 100%;
+}
+
 .vertical-button span.v-btn__content {
   flex-direction: column;
   justify-content: space-around;

From b270a8128185f10f0ab619d84d33f2cd7d345f91 Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Sun, 10 Apr 2022 21:52:45 +1200
Subject: [PATCH 08/12] fix: handle edge case where there are no description

---
 .../slimVideoDescriptionRenderer.vue          |  4 +-
 NUXT/pages/watch.vue                          | 88 +++++++++----------
 2 files changed, 44 insertions(+), 48 deletions(-)

diff --git a/NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue b/NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue
index e6d5308..a6b9bb9 100644
--- a/NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue
+++ b/NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="description">
+  <div class="description" v-if="render.descriptionBodyText">
     <template v-for="(text, index) in render.descriptionBodyText.runs">
       <template v-if="$rendererUtils.checkInternal(text)">
         <a
@@ -27,8 +27,6 @@
 <style scoped>
 .description {
   white-space: pre-line;
-  margin-bottom: 16px;
-  margin-top: 16px;
 }
 </style>
 
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 155f994..0522a2c 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -96,60 +96,58 @@
       <v-divider />
 
       <!--   Channel Bar   -->
-      <v-card
-        class="channel-section background"
-        v-if="loaded"
-        :to="video.channelUrl"
-      >
-        <div id="details">
-          <div class="avatar-link mr-3">
-            <v-img class="avatar-thumbnail" :src="video.channelImg" />
+      <div class="channel-container" v-if="loaded">
+        <v-card class="channel-section background" :to="video.channelUrl">
+          <div id="details">
+            <div class="avatar-link mr-3">
+              <v-img class="avatar-thumbnail" :src="video.channelImg" />
+            </div>
+            <div class="channel-byline">
+              <div class="channel-name" v-text="video.channelName" />
+              <div
+                class="caption background--text"
+                :class="
+                  $vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'
+                "
+                v-text="video.channelSubs"
+              />
+            </div>
           </div>
-          <div class="channel-byline">
-            <div class="channel-name" v-text="video.channelName" />
-            <div
-              class="caption background--text"
-              :class="
-                $vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'
-              "
-              v-text="video.channelSubs"
-            />
+          <div
+            class="channel-buttons"
+            style="color: rgb(204, 0, 0); text-transform: uppercase"
+          >
+            subscribe
           </div>
-        </div>
-        <div
-          class="channel-buttons"
-          style="color: rgb(204, 0, 0); text-transform: uppercase"
-        >
-          subscribe
-        </div>
-      </v-card>
-      <v-divider />
+        </v-card>
+        <v-divider />
+      </div>
 
       <!-- Description -->
-      <div v-if="showMore" class="scroll-y ml-4 mr-4">
-        <slim-video-description-renderer
-          :render="video.renderedData.description"
-        />
+      <div class="description-container" v-if="showMore">
+        <div class="scroll-y ma-4">
+          <slim-video-description-renderer
+            :render="video.renderedData.description"
+          />
+        </div>
         <v-divider />
       </div>
 
       <!-- Comments -->
-      <v-card
-        flat
-        class="background comment-renderer"
-        v-if="loaded && video.commentData"
-      >
-        <v-text class="comment-count keep-spaces">
-          <template v-for="text in video.commentData.headerText.runs">
-            <template v-if="text.bold">
-              <strong :key="text.text">{{ text.text }}</strong>
+      <div class="comment-container" v-if="loaded && video.commentData">
+        <v-card flat class="background comment-renderer">
+          <v-text class="comment-count keep-spaces">
+            <template v-for="text in video.commentData.headerText.runs">
+              <template v-if="text.bold">
+                <strong :key="text.text">{{ text.text }}</strong>
+              </template>
+              <template v-else>{{ text.text }}</template>
             </template>
-            <template v-else>{{ text.text }}</template>
-          </template>
-        </v-text>
-        <v-icon>mdi-unfold-more-horizontal</v-icon>
-      </v-card>
-      <v-divider />
+          </v-text>
+          <v-icon>mdi-unfold-more-horizontal</v-icon>
+        </v-card>
+        <v-divider />
+      </div>
 
       <!-- Related Videos -->
       <div class="loaders" v-if="!loaded">

From e85f2f9b3217c798df63ecb57c43787c9be2d24d Mon Sep 17 00:00:00 2001
From: Alex <56329333+404-Program-not-found@users.noreply.github.com>
Date: Mon, 11 Apr 2022 13:00:42 +1200
Subject: [PATCH 09/12] Merge branch 'main' of
 https://github.com/Frontesque/VueTube

---
 .github/workflows/ci.yml                      |   4 +-
 NUXT/components/topNavigation.vue             |  11 ++--
 NUXT/layouts/default.vue                      |  24 +++++++--
 NUXT/nuxt.config.js                           |   1 +
 NUXT/pages/mods/updates.vue                   |  47 +++++++++++-------
 NUXT/pages/settings.vue                       |   4 ++
 NUXT/plugins/tempPlugins/demoPlugin.js        |  30 +++++++++++
 NUXT/plugins/thirdPartyPluginLoader.js        |  12 +++--
 NUXT/plugins/utils.js                         |  14 ++++--
 android/app/capacitor.build.gradle            |   1 +
 android/app/release/output-metadata.json      |   6 ++-
 android/app/src/main/AndroidManifest.xml      |   4 +-
 .../src/main/assets/capacitor.plugins.json    |   4 ++
 android/build.gradle                          |   4 +-
 android/capacitor.settings.gradle             |   3 ++
 .../gradle/wrapper/gradle-wrapper.properties  |   2 +-
 ios/App/Podfile                               |   1 +
 package.json                                  |   1 +
 resources/splash.png                          | Bin 134011 -> 3294 bytes
 19 files changed, 131 insertions(+), 42 deletions(-)
 create mode 100644 NUXT/plugins/tempPlugins/demoPlugin.js

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 1c0a688..6ab7744 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -50,10 +50,10 @@ jobs:
           node-version: ${{ env.NODE_VERSION }}
       - name: Install dependencies
         run: npm i
-      - name: Set up JDK 1.8
+      - name: Set up JDK 11
         uses: actions/setup-java@v1
         with:
-          java-version: 1.8
+          java-version: 11
       - name: Copy web assets to native platform
         run: npx cap copy android
       - name: Update native platform
diff --git a/NUXT/components/topNavigation.vue b/NUXT/components/topNavigation.vue
index 72329d0..565823c 100644
--- a/NUXT/components/topNavigation.vue
+++ b/NUXT/components/topNavigation.vue
@@ -39,16 +39,18 @@
       class="ml-3 mr-1 my-auto fill-height"
       style="border-radius: 0.25rem !important"
       @click="refreshRecommendations"
-      ><v-icon>mdi-refresh</v-icon></v-btn
     >
+      <v-icon>mdi-refresh</v-icon>
+    </v-btn>
     <v-btn
       icon
       tile
       class="ml-3 my-auto fill-height"
       style="border-radius: 0.25rem !important"
       @click="$emit('search-btn', text)"
-      ><v-icon>mdi-magnify</v-icon></v-btn
     >
+      <v-icon>mdi-magnify</v-icon>
+    </v-btn>
     <v-btn
       v-show="!search"
       icon
@@ -56,8 +58,9 @@
       class="ml-4 mr-2 my-auto fill-height"
       style="border-radius: 0.25rem !important"
       to="/settings"
-      ><v-icon>mdi-cog-outline</v-icon></v-btn
     >
+      <v-icon>mdi-cog-outline</v-icon>
+    </v-btn>
   </v-card>
 </template>
 
@@ -80,6 +83,7 @@ export default {
   methods: {
     refreshRecommendations() {
       this.$emit("scroll-to-top");
+
       const continuations =
         this.$store.state.recommendedVideos[
           this.$store.state.recommendedVideos.length - 1
@@ -108,6 +112,7 @@ export default {
   position: fixed;
   width: 100%;
 }
+
 .topNavSearch {
   margin-bottom: -10em;
   margin-left: 2em;
diff --git a/NUXT/layouts/default.vue b/NUXT/layouts/default.vue
index fb7680c..b550aee 100644
--- a/NUXT/layouts/default.vue
+++ b/NUXT/layouts/default.vue
@@ -42,7 +42,7 @@
                 @click="youtubeSearch(item)"
               >
                 <v-icon class="mr-5">mdi-magnify</v-icon>
-                {{ item[0] }}
+                {{ item[0] || item.text }}
               </v-btn>
             </v-list-item>
           </div>
@@ -59,7 +59,9 @@
 <script>
 import { App as CapacitorApp } from "@capacitor/app";
 import { mapState } from "vuex";
-import constants from "../plugins/constants";
+import constants from "~/plugins/constants";
+import { linkParser } from "~/plugins/utils"
+
 export default {
   data: () => ({
     search: false,
@@ -123,6 +125,19 @@ export default {
   methods: {
     textChanged(text) {
       if (text.length <= 0) this.response = []; // No text found, no point in calling API
+
+      //---   User Pastes Link, Direct Them To Video   ---//
+      const isLink = linkParser(text);
+      if (isLink) {
+        this.response = [{
+          text: `Watch video from ID: ${isLink}`,
+          id: isLink
+        }];
+        return;
+      }
+      //---   End User Pastes Link, Direct Them To Video   ---//
+
+      //---   Auto Suggest   ---//
       this.$youtube.autoComplete(text, (res) => {
         const data = res.replace(/^.*?\(/, "").replace(/\)$/, ""); //Format Response
         this.response = JSON.parse(data)[1];
@@ -130,7 +145,10 @@ export default {
     },
 
     youtubeSearch(item) {
-      this.$router.push(`/search?q=${item[0]}`);
+      const link = item.id
+        ? `/watch?v=${item.id}`
+        : `/search?q=${item[0]}`
+      this.$router.push(link);
       this.search = false;
     },
 
diff --git a/NUXT/nuxt.config.js b/NUXT/nuxt.config.js
index 8588091..8f1026e 100644
--- a/NUXT/nuxt.config.js
+++ b/NUXT/nuxt.config.js
@@ -16,6 +16,7 @@ export default {
     { src: "~/plugins/youtube", mode: "client" },
     { src: "~/plugins/vuetube", mode: "client" },
     { src: "~/plugins/ryd", mode: "client" },
+    { src: "~/plugins/thirdPartyPluginLoader", mode: "client" },
   ],
   generate: {
     dir: "../dist",
diff --git a/NUXT/pages/mods/updates.vue b/NUXT/pages/mods/updates.vue
index a74c8c0..df62e52 100644
--- a/NUXT/pages/mods/updates.vue
+++ b/NUXT/pages/mods/updates.vue
@@ -19,12 +19,7 @@
             v-if="index == 0"
             class="tags"
             color="orange"
-            style="
-              border-radius: 0.5rem;
-              border: 2px var(--v-oragnge-base);
-              margin-top: -1.5rem;
-              margin-right: -0.5rem;
-            "
+            style="border-radius: 0.5rem; border: 2px var(--v-orange-base)"
           >
             Latest
           </v-chip>
@@ -32,15 +27,10 @@
             v-if="item.sha == installedVersion"
             class="tags"
             color="green"
-            style="
-              border-radius: 0.5rem;
-              border: 2px var(--v-green-base);
-              margin-top: -1.5rem;
-              margin-right: -0.5rem;
-            "
-          >
-            >Installed</v-chip
+            style="border-radius: 0.5rem; border: 2px var(--v-green-base)"
           >
+            Installed
+          </v-chip>
         </v-card-title>
 
         <div style="margin-left: 1em">
@@ -70,17 +60,21 @@
 .card {
   width: 100%;
 }
+
 .subtitle {
   margin: 0.4em;
   font-size: 0.75em;
   transform: translateY(5%);
 }
+
 .date {
   transform: translateY(-40%);
 }
+
 .btn-icon {
   margin-right: 0.25em;
 }
+
 .tags {
   margin-left: 0.5em;
 }
@@ -95,18 +89,33 @@ export default {
       return this.$store.state.tweaks.roundTweak;
     },
   },
-
   data() {
     return {
       commits: new Array(),
       installedVersion: process.env.appVersion,
     };
   },
+  async mounted() {
+    const commits = await this.$vuetube.commits;
+    if (commits[0].sha) {
+      //If Commit Valid
+      this.commits = commits;
+    } else {
+      console.log(commits);
+    }
+  },
+  methods: {
+    async openExternal(item) {
+      await Browser.open({
+        url: item.html_url,
+      });
+    },
 
-  install(item) {
-    this.$vuetube.getRuns(item, (data) => {
-      console.log(data);
-    });
+    install(item) {
+      this.$vuetube.getRuns(item, (data) => {
+        console.log(data);
+      });
+    },
   },
 };
 </script>
diff --git a/NUXT/pages/settings.vue b/NUXT/pages/settings.vue
index 15a3fe0..7bea3fc 100644
--- a/NUXT/pages/settings.vue
+++ b/NUXT/pages/settings.vue
@@ -50,6 +50,7 @@ export default {
           to: "/mods/tweaks",
         },
         { name: "Startup Options", icon: "mdi-restart", to: "/mods/startup" },
+<<<<<<< HEAD
         {
           name: "Plugins",
           icon: "mdi-puzzle",
@@ -57,6 +58,9 @@ export default {
           to: "/mods/plugins",
           disabled: true,
         },
+=======
+        { name: "Plugins", icon: "mdi-puzzle", to: "", to: "/mods/plugins" },
+>>>>>>> 94e0108 (Merge branch 'main' of https://github.com/Frontesque/VueTube)
         {
           name: "Updates",
           icon: "mdi-cloud-download-outline",
diff --git a/NUXT/plugins/tempPlugins/demoPlugin.js b/NUXT/plugins/tempPlugins/demoPlugin.js
new file mode 100644
index 0000000..94f5d66
--- /dev/null
+++ b/NUXT/plugins/tempPlugins/demoPlugin.js
@@ -0,0 +1,30 @@
+module.exports = {
+  manifest: {
+    name: "Test plugin", // Required
+    vuetube: "*",
+    version: "1.0", // Required
+    author: "Frontesque", // Required
+    description: "A plugin to test how vuetube handles plugins // Add 'Hello, World!' to the home page.", // Required
+    homepage: "https://github.com/Frontesque/VueTube-Example-Plugin",
+    license: "GPL-3.0" // Required
+  },
+
+  /************************* 
+   * Execute code on ALL VueTube pages
+   ************************/
+  global: function() {
+
+  },
+
+  /************************* 
+   * Execute code on SPECIFIC VueTube pages
+   * 
+   * You can view what page you intend to inject code into by looking at `~/NUXT/pages/` in the main VueTube repo
+   ************************/
+  pages: {
+    home: function() { // Execute code on JUST the home page
+
+    }
+  }
+
+}
diff --git a/NUXT/plugins/thirdPartyPluginLoader.js b/NUXT/plugins/thirdPartyPluginLoader.js
index 06174f7..648efee 100644
--- a/NUXT/plugins/thirdPartyPluginLoader.js
+++ b/NUXT/plugins/thirdPartyPluginLoader.js
@@ -14,22 +14,24 @@ const ensureStructure = new Promise(async (resolve, reject) => {
 
   //---   Ensure Plugins Folder   ---//
   try {
-    await Filesystem.mkdir({ directory: APP_DIRECTORY, recursive: true,
+    await Filesystem.mkdir({
+      directory: APP_DIRECTORY, recursive: true,
       path: fs.plugins,
     });
   } catch (e) { /* Exists */ }
 
   //---   Ensure Temp Folder   ---//
   try {
-    await Filesystem.mkdir({ directory: APP_DIRECTORY, recursive: true,
+    await Filesystem.mkdir({
+      directory: APP_DIRECTORY, recursive: true,
       path: fs.temp,
     });
   } catch (e) { /* Exists */ }
 
-  perms 
+  perms
     ? resolve(true)
     : reject(false)
-    
+
 })
 
 
@@ -41,7 +43,7 @@ const module = {
     let plugins = new Array();
 
     if (await !ensureStructure) reject("Invalid Structure");
-    
+
     // Temp Plugin List
     plugins = Filesystem.readdir({
       directory: APP_DIRECTORY,
diff --git a/NUXT/plugins/utils.js b/NUXT/plugins/utils.js
index 1613a4d..03651d6 100644
--- a/NUXT/plugins/utils.js
+++ b/NUXT/plugins/utils.js
@@ -17,10 +17,10 @@ function hexToRgb(hex) {
   var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
   return result
     ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16),
-      }
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16),
+    }
     : null;
 }
 
@@ -41,6 +41,12 @@ function getMutationByKey(key, mutations) {
   if (!key || !mutations) return undefined;
   return mutations.find((mutation) => mutation.entityKey === key).payload;
 }
+function linkParser(url) {
+
+  var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+  var match = url.match(regExp);
+  return (match && match[7].length == 11) ? match[7] : false;
+}
 
 function linkParser(url) {
   var regExp =
diff --git a/android/app/capacitor.build.gradle b/android/app/capacitor.build.gradle
index 57d16ef..7d5d749 100644
--- a/android/app/capacitor.build.gradle
+++ b/android/app/capacitor.build.gradle
@@ -13,6 +13,7 @@ dependencies {
     implementation project(':capacitor-app')
     implementation project(':capacitor-browser')
     implementation project(':capacitor-device')
+    implementation project(':capacitor-filesystem')
     implementation project(':capacitor-haptics')
     implementation project(':capacitor-share')
     implementation project(':capacitor-splash-screen')
diff --git a/android/app/release/output-metadata.json b/android/app/release/output-metadata.json
index 5ecac21..d20d3f0 100644
--- a/android/app/release/output-metadata.json
+++ b/android/app/release/output-metadata.json
@@ -1,5 +1,5 @@
 {
-  "version": 2,
+  "version": 3,
   "artifactType": {
     "type": "APK",
     "kind": "Directory"
@@ -10,9 +10,11 @@
     {
       "type": "SINGLE",
       "filters": [],
+      "attributes": [],
       "versionCode": 1,
       "versionName": "1.0",
       "outputFile": "app-release.apk"
     }
-  ]
+  ],
+  "elementType": "File"
 }
\ No newline at end of file
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index c9f98f1..3bb7bca 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -53,6 +53,8 @@
     </application>
 
     <!-- Permissions -->
-
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+    
 </manifest>
diff --git a/android/app/src/main/assets/capacitor.plugins.json b/android/app/src/main/assets/capacitor.plugins.json
index f4166c0..b9031b2 100644
--- a/android/app/src/main/assets/capacitor.plugins.json
+++ b/android/app/src/main/assets/capacitor.plugins.json
@@ -15,6 +15,10 @@
 		"pkg": "@capacitor/device",
 		"classpath": "com.capacitorjs.plugins.device.DevicePlugin"
 	},
+	{
+		"pkg": "@capacitor/filesystem",
+		"classpath": "com.capacitorjs.plugins.filesystem.FilesystemPlugin"
+	},
 	{
 		"pkg": "@capacitor/haptics",
 		"classpath": "com.capacitorjs.plugins.haptics.HapticsPlugin"
diff --git a/android/build.gradle b/android/build.gradle
index ad085c3..7d6ed44 100644
--- a/android/build.gradle
+++ b/android/build.gradle
@@ -7,8 +7,8 @@ buildscript {
         jcenter()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:4.2.1'
-        classpath 'com.google.gms:google-services:4.3.5'
+        classpath 'com.android.tools.build:gradle:7.1.2'
+        classpath 'com.google.gms:google-services:4.3.10'
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
diff --git a/android/capacitor.settings.gradle b/android/capacitor.settings.gradle
index 83b507b..ef61b14 100644
--- a/android/capacitor.settings.gradle
+++ b/android/capacitor.settings.gradle
@@ -14,6 +14,9 @@ project(':capacitor-browser').projectDir = new File('../node_modules/@capacitor/
 include ':capacitor-device'
 project(':capacitor-device').projectDir = new File('../node_modules/@capacitor/device/android')
 
+include ':capacitor-filesystem'
+project(':capacitor-filesystem').projectDir = new File('../node_modules/@capacitor/filesystem/android')
+
 include ':capacitor-haptics'
 project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/haptics/android')
 
diff --git a/android/gradle/wrapper/gradle-wrapper.properties b/android/gradle/wrapper/gradle-wrapper.properties
index 3c4101c..a0f7639 100644
--- a/android/gradle/wrapper/gradle-wrapper.properties
+++ b/android/gradle/wrapper/gradle-wrapper.properties
@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.0-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.2-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
diff --git a/ios/App/Podfile b/ios/App/Podfile
index 60892de..d3fc14a 100644
--- a/ios/App/Podfile
+++ b/ios/App/Podfile
@@ -13,6 +13,7 @@ def capacitor_pods
   pod 'CapacitorApp', :path => '..\..\node_modules\@capacitor\app'
   pod 'CapacitorBrowser', :path => '..\..\node_modules\@capacitor\browser'
   pod 'CapacitorDevice', :path => '..\..\node_modules\@capacitor\device'
+  pod 'CapacitorFilesystem', :path => '..\..\node_modules\@capacitor\filesystem'
   pod 'CapacitorHaptics', :path => '..\..\node_modules\@capacitor\haptics'
   pod 'CapacitorShare', :path => '..\..\node_modules\@capacitor\share'
   pod 'CapacitorSplashScreen', :path => '..\..\node_modules\@capacitor\splash-screen'
diff --git a/package.json b/package.json
index 450bd04..8150544 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@capacitor/cli": "^3.4.0",
     "@capacitor/core": "^3.4.0",
     "@capacitor/device": "^1.1.2",
+    "@capacitor/filesystem": "^1.1.0",
     "@capacitor/haptics": "^1.1.4",
     "@capacitor/share": "^1.1.2",
     "@capacitor/splash-screen": "^1.2.2",
diff --git a/resources/splash.png b/resources/splash.png
index d815d82ef8906f3bb12dac23bb6b77df6677db69..0c90ccab6556d63fc856869108032fb430f24cbc 100644
GIT binary patch
literal 3294
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

literal 134011
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
OHaT&6{PWS-OaB1Xl6yD+


From e3568abdace859c00e1e8e0e30928140b02fa0c2 Mon Sep 17 00:00:00 2001
From: Alex <56329333+404-Program-not-found@users.noreply.github.com>
Date: Mon, 11 Apr 2022 13:19:01 +1200
Subject: [PATCH 10/12] merge settings.vue

---
 NUXT/pages/settings.vue | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/NUXT/pages/settings.vue b/NUXT/pages/settings.vue
index 7bea3fc..9d5e8a5 100644
--- a/NUXT/pages/settings.vue
+++ b/NUXT/pages/settings.vue
@@ -50,17 +50,7 @@ export default {
           to: "/mods/tweaks",
         },
         { name: "Startup Options", icon: "mdi-restart", to: "/mods/startup" },
-<<<<<<< HEAD
-        {
-          name: "Plugins",
-          icon: "mdi-puzzle",
-          to: "",
-          to: "/mods/plugins",
-          disabled: true,
-        },
-=======
         { name: "Plugins", icon: "mdi-puzzle", to: "", to: "/mods/plugins" },
->>>>>>> 94e0108 (Merge branch 'main' of https://github.com/Frontesque/VueTube)
         {
           name: "Updates",
           icon: "mdi-cloud-download-outline",

From f0f2ae91350b7bd0a8b4a6dfe7f04c16527cfe78 Mon Sep 17 00:00:00 2001
From: Alex <56329333+404-Program-not-found@users.noreply.github.com>
Date: Mon, 11 Apr 2022 17:06:40 +1200
Subject: [PATCH 11/12] merge fix

---
 NUXT/layouts/default.vue | 21 ++++++++++++---------
 NUXT/plugins/utils.js    | 14 +++-----------
 2 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/NUXT/layouts/default.vue b/NUXT/layouts/default.vue
index b550aee..6696179 100644
--- a/NUXT/layouts/default.vue
+++ b/NUXT/layouts/default.vue
@@ -60,7 +60,7 @@
 import { App as CapacitorApp } from "@capacitor/app";
 import { mapState } from "vuex";
 import constants from "~/plugins/constants";
-import { linkParser } from "~/plugins/utils"
+import { linkParser } from "~/plugins/utils";
 
 export default {
   data: () => ({
@@ -124,15 +124,20 @@ export default {
 
   methods: {
     textChanged(text) {
-      if (text.length <= 0) this.response = []; // No text found, no point in calling API
+      if (text.length <= 0) {
+        this.response = [];
+        return;
+      } // No text found, no point in calling API
 
       //---   User Pastes Link, Direct Them To Video   ---//
       const isLink = linkParser(text);
       if (isLink) {
-        this.response = [{
-          text: `Watch video from ID: ${isLink}`,
-          id: isLink
-        }];
+        this.response = [
+          {
+            text: `Watch video from ID: ${isLink}`,
+            id: isLink,
+          },
+        ];
         return;
       }
       //---   End User Pastes Link, Direct Them To Video   ---//
@@ -145,9 +150,7 @@ export default {
     },
 
     youtubeSearch(item) {
-      const link = item.id
-        ? `/watch?v=${item.id}`
-        : `/search?q=${item[0]}`
+      const link = item.id ? `/watch?v=${item.id}` : `/search?q=${item[0]}`;
       this.$router.push(link);
       this.search = false;
     },
diff --git a/NUXT/plugins/utils.js b/NUXT/plugins/utils.js
index 03651d6..bec8eb7 100644
--- a/NUXT/plugins/utils.js
+++ b/NUXT/plugins/utils.js
@@ -42,19 +42,11 @@ function getMutationByKey(key, mutations) {
   return mutations.find((mutation) => mutation.entityKey === key).payload;
 }
 function linkParser(url) {
-
-  var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
-  var match = url.match(regExp);
+  console.log("linkParpar", url)
+  const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+  const match = url.match(regExp);
   return (match && match[7].length == 11) ? match[7] : false;
 }
-
-function linkParser(url) {
-  var regExp =
-    /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
-  var match = url.match(regExp);
-  return match && match[7].length == 11 ? match[7] : false;
-}
-
 const delay = (ms) => new Promise((res) => setTimeout(res, ms));
 
 module.exports = {

From a2a25382683addee1ca1088a83d89a8f83ba612c Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Tue, 12 Apr 2022 00:08:04 +1200
Subject: [PATCH 12/12] chore: change how android handles links

---
 android/app/src/main/AndroidManifest.xml | 29 ++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index 3bb7bca..2bc26f5 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -26,17 +26,38 @@
             </intent-filter>
             <intent-filter>
                 <action android:name="android.intent.action.VIEW" />
+
                 <category android:name="android.intent.category.DEFAULT" />
                 <category android:name="android.intent.category.BROWSABLE" />
 
                 <data android:scheme="http" />
                 <data android:scheme="https" />
-                
-                <data android:host="youtu.be" />
-                <data android:host="m.youtube.com" />
                 <data android:host="youtube.com" />
+                <data android:host="m.youtube.com" />
                 <data android:host="www.youtube.com" />
-                <data android:pathPattern="/.*" />
+                <!-- video prefix -->
+                <data android:pathPrefix="/v/" />
+                <data android:pathPrefix="/embed/" />
+                <data android:pathPrefix="/watch" />
+                <data android:pathPrefix="/attribution_link" />
+                <data android:pathPrefix="/shorts/" />
+                <!-- channel prefix -->
+                <data android:pathPrefix="/channel/" />
+                <data android:pathPrefix="/user/" />
+                <data android:pathPrefix="/c/" />
+                <!-- playlist prefix -->
+                <data android:pathPrefix="/playlist" />
+            </intent-filter>
+            <intent-filter>
+                <action android:name="android.intent.action.VIEW" />
+
+                <category android:name="android.intent.category.DEFAULT" />
+                <category android:name="android.intent.category.BROWSABLE" />
+
+                <data android:scheme="http" />
+                <data android:scheme="https" />
+                <data android:host="youtu.be" />
+                <data android:pathPrefix="/" />
             </intent-filter>
 
         </activity>