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

Display Channel info, Comments, fixed bug with descriptions.
2022-04-11 08:24:10 -04:00 · 2022-04-11 08:24:10 -04:00 · ca8151f21d
parent d46c6e535a a2a2538268
commit ca8151f21d
23 changed files with 731 additions and 262 deletions
--- a/NUXT/components/Comments/commentMainRenderer.vue
+++ 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>
--- a/NUXT/components/Comments/commentThreadRenderer.vue
+++ b/NUXT/components/Comments/commentThreadRenderer.vue
--- 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"
--- 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"],

--- 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
-        "
-      >
+  <div class="description" v-if="render.descriptionBodyText">
+    <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
        >
@ -27,7 +27,6 @@
 <style scoped>
 .description {
  white-space: pre-line;
-  margin-bottom: 16px;
 }
 </style>

--- a/NUXT/components/gridRenderers/videoWithContextRenderer.vue
+++ 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>
--- 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: () => ({
@ -114,19 +114,30 @@ 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: {
    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   ---//
@ -139,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;
    },
--- a/NUXT/pages/index.vue
+++ b/NUXT/pages/index.vue
@ -25,15 +25,20 @@ export default {
    const theming = new Promise((resolve) =>
      // Set timeout is required for $vuetify.theme... dont ask me why -Front
      setTimeout(() => {
-        this.$vuetify.theme.dark = JSON.parse(localStorage.getItem("darkTheme")) === true;
+        this.$vuetify.theme.dark =
+          JSON.parse(localStorage.getItem("darkTheme")) === true;
        if (localStorage.getItem("primaryDark") != null)
-          this.$vuetify.theme.themes.dark.primary = localStorage.getItem("primaryDark");
+          this.$vuetify.theme.themes.dark.primary =
+            localStorage.getItem("primaryDark");
        if (localStorage.getItem("primaryLight") != null)
-          this.$vuetify.theme.themes.light.primary = localStorage.getItem("primaryLight");
+          this.$vuetify.theme.themes.light.primary =
+            localStorage.getItem("primaryLight");
        if (localStorage.getItem("backgroundDark") != null)
-          this.$vuetify.theme.themes.dark.background = localStorage.getItem("backgroundDark");
+          this.$vuetify.theme.themes.dark.background =
+            localStorage.getItem("backgroundDark");
        if (localStorage.getItem("backgroundLight") != null)
-          this.$vuetify.theme.themes.light.background = localStorage.getItem("backgroundLight");
+          this.$vuetify.theme.themes.light.background =
+            localStorage.getItem("backgroundLight");
        this.$vuetube.navigationBar.setTheme(
          this.$vuetify.theme.currentTheme.background,
          !this.$vuetify.theme.dark
--- a/NUXT/pages/mods/updates.vue
+++ b/NUXT/pages/mods/updates.vue
@ -1,29 +1,44 @@
 <template>
  <div class="py-2">
    <v-list-item v-for="(item, index) in commits" :key="index" class="my-1">
-      <v-card flat class="card my-2 background" :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'" :style="{borderRadius: `${roundTweak / 2}rem`}">
+      <v-card
+        flat
+        class="card my-2 background"
+        :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
+        :style="{ borderRadius: `${roundTweak / 2}rem` }"
+      >
        <v-card-title style="padding: 0 0.25em 0 0.75em">
          {{ item.author ? item.author.login : item.commit.author.name }}
-          <span class="subtitle background--text" :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-            v-text="`• ${item.sha.substring(0, 7)}`" />
+          <span
+            class="subtitle background--text"
+            :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+            v-text="`• ${item.sha.substring(0, 7)}`"
+          />
          <v-spacer />
-          <v-chip v-if="index == 0" class="tags" color="orange" style="
-              border-radius: 0.5rem;
-              border: 2px var(--v-orange-base);
-            ">
+          <v-chip
+            v-if="index == 0"
+            class="tags"
+            color="orange"
+            style="border-radius: 0.5rem; border: 2px var(--v-orange-base)"
+          >
            Latest
          </v-chip>
-          <v-chip v-if="item.sha == installedVersion" class="tags" color="green" style="
-              border-radius: 0.5rem;
-              border: 2px var(--v-green-base);
-            ">
+          <v-chip
+            v-if="item.sha == installedVersion"
+            class="tags"
+            color="green"
+            style="border-radius: 0.5rem; border: 2px var(--v-green-base)"
+          >
            Installed
          </v-chip>
        </v-card-title>

        <div style="margin-left: 1em">
-          <div class="date background--text" :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-            v-text="new Date(item.commit.committer.date).toLocaleString()" />
+          <div
+            class="date background--text"
+            :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+            v-text="new Date(item.commit.committer.date).toLocaleString()"
+          />
          {{ item.commit.message }}
        </div>

@ -42,69 +57,65 @@
 </template>

 <style scoped>
-  .card {
-    width: 100%;
-  }
+.card {
+  width: 100%;
+}

-  .subtitle {
-    margin: 0.4em;
-    font-size: 0.75em;
-    transform: translateY(5%);
-  }
+.subtitle {
+  margin: 0.4em;
+  font-size: 0.75em;
+  transform: translateY(5%);
+}

-  .date {
-    transform: translateY(-40%);
-  }
+.date {
+  transform: translateY(-40%);
+}

-  .btn-icon {
-    margin-right: 0.25em;
-  }
-
-  .tags {
-    margin-left: 0.5em;
-  }
+.btn-icon {
+  margin-right: 0.25em;
+}

+.tags {
+  margin-left: 0.5em;
+}
 </style>

 <script>
-  import { Browser } from "@capacitor/browser";
+import { Browser } from "@capacitor/browser";

-  export default {
-
-     computed: {
-        roundTweak() {
-          return this.$store.state.tweaks.roundTweak;
-        }
-      },
-
-    data() {
-      return {
-        commits: new Array(),
-        installedVersion: process.env.appVersion,
-      };
+export default {
+  computed: {
+    roundTweak() {
+      return this.$store.state.tweaks.roundTweak;
    },
-    async mounted() {
-      const commits = await this.$vuetube.commits;
-      if (commits[0].sha) {
-        //If Commit Valid
-        this.commits = commits;
-      } else {
-        console.log(commits);
-      }
+  },
+  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,
+      });
    },
-    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>
--- a/NUXT/pages/settings.vue
+++ b/NUXT/pages/settings.vue
@ -14,7 +14,6 @@

    <!--   Dev Mode Open   -->
    <v-btn text class="entry" @click="dev()" />
-
  </div>
 </template>

@ -51,7 +50,7 @@ export default {
          to: "/mods/tweaks",
        },
        { name: "Startup Options", icon: "mdi-restart", to: "/mods/startup" },
-        { name: "Plugins", icon: "mdi-puzzle", to: "", to: "/mods/plugins", disabled: true },
+        { name: "Plugins", icon: "mdi-puzzle", to: "", to: "/mods/plugins" },
        {
          name: "Updates",
          icon: "mdi-cloud-download-outline",
@ -68,7 +67,7 @@ export default {
      if (this.devClicks >= 6) {
        this.$router.push("/mods/developer");
      }
-    }
-  }
+    },
+  },
 };
 </script>
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@ -1,108 +1,183 @@
 <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="title"
+    >
+      <!--   Stock Player   -->
+      <videoPlayer
+        :vid-src="vidSrc"
+        ref="player"
+        v-if="useBetaPlayer !== 'true'"
      />
-      <v-card-text>
-        <div style="margin-bottom: 1rem">
-          {{ views }} views • {{ uploaded }}
-        </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"
-              />
-            </v-btn>
-          </v-list-item>
+          </div>

-          <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>
+          <!--   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>
+          </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: 12px">
+        <v-btn block @click="showMore = !showMore"
+          ><v-icon>mdi-chevron-down</v-icon></v-btn
+        ><br />
+
+        <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>
-        <!--   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" />
+      </v-sheet>
+    </v-bottom-sheet> -->
+      </v-card>
+      <v-divider />
+
+      <!--   Channel Bar   -->
+      <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-buttons"
+            style="color: rgb(204, 0, 0); text-transform: uppercase"
+          >
+            subscribe
+          </div>
+        </v-card>
+        <v-divider />
      </div>

-      <!-- <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 />
+      <!-- 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>

-          <div class="scroll-y">
-            {{ 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 }}
-          </div>
-        </v-sheet>
-      </v-bottom-sheet> -->
-    </v-card>
-    <vid-load-renderer v-if="!recommends" />
-    <shelf-renderer v-else :render="recommends" />
+      <!-- Comments -->
+      <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>
+          </v-text>
+          <v-icon>mdi-unfold-more-horizontal</v-icon>
+        </v-card>
+        <v-divider />
+      </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>
  </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 vuetubePlayer from "~/components/Player/index.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: { ShelfRenderer, VidLoadRenderer, SlimVideoDescriptionRenderer, vuetubePlayer },
+  components: {
+    ShelfRenderer,
+    VidLoadRenderer,
+    SlimVideoDescriptionRenderer,
+    vuetubePlayer,
+    ItemSectionRenderer,
+  },
  data() {
    return {
      interactions: [
@ -131,16 +206,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,
      useBetaPlayer: false,
    };
  },
@ -166,7 +237,7 @@ export default {
    this.startTime = Math.floor(Date.now() / 1000);
    this.getVideo();

-    this.useBetaPlayer = localStorage.getItem('debug.BetaPlayer');
+    this.useBetaPlayer = localStorage.getItem("debug.BetaPlayer");
  },

  destroyed() {
@ -174,10 +245,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);

@ -191,14 +262,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);
@ -227,8 +293,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",
      });
@ -274,8 +340,55 @@ 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;
 }
+
+.channel-section,
+.comment-renderer {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+}
+
+.channel-section #details,
+.comment-renderer .comment-count {
+  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;
+}
+
+.keep-spaces {
+  white-space: pre-wrap;
+}
 </style>
--- 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,
 };

--- a/NUXT/plugins/innertube.js
+++ b/NUXT/plugins/innertube.js
@ -2,7 +2,8 @@
 // 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";

 class Innertube {
@ -39,12 +40,27 @@ class Innertube {
        }
      } catch (err) {
        console.log(err);
-        if (this.checkErrorCallback) this.ErrorCallback(err, true);
-        if (this.retry_count >= 10) {
-          this.initAsync();
+        if (this.checkErrorCallback) {
+          this.ErrorCallback(html.data, true);
+          this.ErrorCallback(err, true);
+        }
+        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) {
@ -95,8 +111,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 +154,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,64 +280,72 @@ 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(
+      (content) => content?.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,
      },
+      engagementPanels: responseNext.engagementPanels,
+      commentData: columnUI.contents
+        .find((content) => content.itemSectionRenderer?.contents)
+        ?.itemSectionRenderer.contents.find(
+          (content) => content.commentsEntryPointHeaderRenderer
+        )?.commentsEntryPointHeaderRenderer,
      playbackTracking: responseInfo.playbackTracking,
    };

-    console.log(vidData);
-
    return vidData;
  }

--- 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;
    }
  }
 }
--- 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,
--- 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;
 }

@ -37,16 +37,24 @@ function getCpn() {
  return result;
 }

-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 getMutationByKey(key, mutations) {
+  if (!key || !mutations) return undefined;
+  return mutations.find((mutation) => mutation.entityKey === key).payload;
 }
+function linkParser(url) {
+  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;
+}
+const delay = (ms) => new Promise((res) => setTimeout(res, ms));

 module.exports = {
  getBetweenStrings,
  hexToRgb,
  rgbToHex,
  getCpn,
+  getMutationByKey,
  linkParser,
+  delay,
 };
--- 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;
  },
--- a/android/app/capacitor.build.gradle
+++ b/android/app/capacitor.build.gradle
@ -18,6 +18,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')

 }
--- 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>
--- a/android/app/src/main/assets/capacitor.plugins.json
+++ b/android/app/src/main/assets/capacitor.plugins.json
@ -35,6 +35,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"
--- a/android/capacitor.settings.gradle
+++ b/android/capacitor.settings.gradle
@ -29,5 +29,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')
--- a/ios/App/Podfile
+++ b/ios/App/Podfile
@ -18,6 +18,7 @@ def capacitor_pods
  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

--- a/package.json
+++ b/package.json
@ -12,6 +12,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"
  }