Merge branch 'Frontesque:main' into main

2022-05-04 19:10:30 -04:00 · 2022-05-04 19:10:30 -04:00 · 9cb5dad3c0
parent 9873ba5b72 29ee7dd347
commit 9cb5dad3c0
40 changed files with 1461 additions and 997 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@ -4,6 +4,7 @@ on:
  push:
    branches:
      - main
+      - dev

 env:
  NODE_VERSION: 16
--- a/.github/workflows/nightly-release.yml
+++ b/.github/workflows/nightly-release.yml
@ -1,12 +1,10 @@
-# This is a basic workflow to help you get started with Actions
-
 name: nightly-release

 # Controls when the workflow will run
 on:
-  # Triggers the workflow on push or pull request events but only for the main branch
+  # Triggers the workflow on on a schedule
  schedule:
-    # Runs "at minute 55 past every hour" (see https://crontab.guru)
+    # Runs "at 0:00 UTC every day" (see https://crontab.guru)
    - cron: '0 0 * * *'

  # Allows you to run this workflow manually from the Actions tab
@ -26,6 +24,8 @@ jobs:
    steps:
      - name: Checkout
        uses: actions/checkout@v2
+        with:
+          ref: main
      - name: Set up Node.js ${{ env.NODE_VERSION }}
        uses: actions/setup-node@v2
        with:
--- a/NUXT/components/Comments/authorCommentBadgeRenderer.vue
+++ b/NUXT/components/Comments/authorCommentBadgeRenderer.vue
@ -0,0 +1,41 @@
+<template>
+  <div
+    class="author-comment-badge-renderer"
+    v-if="metadata && iconTypeMap.hasOwnProperty(metadata.icon.iconType)"
+  >
+    <v-tooltip top>
+      <template v-slot:activator="{ on, attrs }">
+        <v-icon v-bind="attrs" v-on="on" class="author-badge" small>{{
+          iconTypeMap[metadata.icon.iconType]
+        }}</v-icon>
+      </template>
+      <span>{{ metadata.iconTooltip }}</span>
+    </v-tooltip>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    metadata: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  data: () => ({
+    iconTypeMap: {
+      CHECK: "mdi-check-circle",
+      CHECK_CIRCLE_THICK: "mdi-check-circle",
+      OFFICIAL_ARTIST_BADGE: "mdi-music-note",
+    },
+  }),
+};
+</script>
+
+<style scoped>
+.author-comment-badge-renderer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+</style>
--- a/NUXT/components/Comments/commentMainRenderer.vue
+++ b/NUXT/components/Comments/commentMainRenderer.vue
@ -1,87 +0,0 @@
-<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
@ -0,0 +1,201 @@
+<template>
+  <div class="comment-thread" v-if="commentRenderer">
+    <a
+      :href="
+        this.$rendererUtils.getNavigationEndpoints(
+          commentRenderer.authorEndpoint
+        )
+      "
+      class="avatar-link"
+    >
+      <v-img
+        class="avatar-thumbnail"
+        :src="
+          commentRenderer.authorThumbnail.thumbnails[
+            commentRenderer.authorThumbnail.thumbnails.length - 1
+          ].url
+        "
+      />
+    </a>
+    <div class="comment-content">
+      <div class="comment-content--header subtitle-2">
+        <div
+          class="author-badge-name mr-1"
+          :class="{ owner: commentRenderer.authorIsChannelOwner }"
+        >
+          <div class="author-name--wrapper">
+            <span class="font-weight-bold author-name" v-emoji>
+              {{ commentRenderer.authorText.simpleText }}
+            </span>
+          </div>
+          <template
+            v-for="(badge, index) in commentRenderer.authorCommentBadge"
+          >
+            <author-comment-badge-renderer
+              :metadata="badge"
+              :key="index"
+              class="ml-1"
+            />
+          </template>
+          <template
+            v-for="(badge, index) in commentRenderer.sponsorCommentBadge"
+          >
+            <sponsor-comment-badge-renderer
+              :metadata="badge"
+              :key="index"
+              class="ml-1"
+            />
+          </template>
+        </div>
+        <span
+          :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+          class="background--text comment-timestamp"
+        >
+          {{ commentRenderer.publishedTimeText.runs[0].text }}
+        </span>
+      </div>
+      <collapsable-text
+        :lines="4"
+        :expandText="
+          commentRenderer.expandButton.buttonRenderer.text.runs[0].text
+        "
+        :collapseText="
+          commentRenderer.collapseButton.buttonRenderer.text.runs[0].text
+        "
+      >
+        <yt-text-formatter :textRuns="commentRenderer.contentText.runs">
+        </yt-text-formatter>
+      </collapsable-text>
+      <div class="toolbar">
+        <v-btn-toggle v-model="voteStatus" group>
+          <div class="toolbar--item mr-1">
+            <v-btn class="toolbar--button like" disabled icon x-small plain>
+              <v-icon small>mdi-thumb-up</v-icon>
+            </v-btn>
+            <span
+              v-if="commentRenderer.voteCount"
+              v-text="commentRenderer.voteCount.simpleText"
+              class="like-count subtitle-2"
+            ></span>
+          </div>
+          <div class="toolbar--item">
+            <v-btn class="toolbar--button dislike" disabled icon x-small plain>
+              <v-icon small>mdi-thumb-down</v-icon>
+            </v-btn>
+          </div>
+        </v-btn-toggle>
+        <div class="toolbar--item">
+          <v-btn class="toolbar--button reply ml-2" disabled icon x-small plain>
+            <v-icon small>mdi-comment</v-icon>
+          </v-btn>
+        </div>
+        <div class="toolbar--item" v-if="commentRenderer.replyCount">
+          <span
+            v-text="commentRenderer.replyCount"
+            class="like-count mr-1 subtitle-2"
+          ></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.entry {
+  width: 100%; /* Prevent Loading Weirdness */
+}
+
+.comment-thread {
+  display: flex;
+  flex-direction: row;
+  flex-basis: auto;
+  width: 100%;
+  padding: 10px 0;
+
+  .avatar-thumbnail {
+    margin-right: 0.5rem;
+    border-radius: 50%;
+    width: 48px;
+    height: 48px;
+  }
+
+  .comment-content {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    flex-basis: auto;
+    flex-grow: 1;
+
+    .comment-content--header {
+      display: flex;
+      align-items: baseline;
+
+      .comment-timestamp {
+        white-space: nowrap;
+      }
+    }
+  }
+}
+
+.toolbar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.author-badge-name {
+  display: flex;
+  flex-direction: row;
+  min-width: 0;
+
+  .author-name--wrapper {
+    min-width: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}
+
+.owner {
+  padding: 0 0.6em;
+  background-color: #888888;
+  color: #fff;
+  border-radius: 1em;
+
+  &::v-deep .author-badge {
+    color: #fff;
+  }
+}
+
+.toolbar--button::v-deep.v-btn--active .v-btn__content {
+  color: var(--v-primary-base);
+}
+</style>
+
+<script>
+import collapsableText from "~/components/UtilRenderers/collapsableText.vue";
+import YtTextFormatter from "~/components/UtilRenderers/YtTextFormatter.vue";
+import AuthorCommentBadgeRenderer from "~/components/Comments/authorCommentBadgeRenderer.vue";
+import SponsorCommentBadgeRenderer from "~/components/Comments/sponsorCommentBadgeRenderer.vue";
+
+export default {
+  components: {
+    collapsableText,
+    YtTextFormatter,
+    AuthorCommentBadgeRenderer,
+    SponsorCommentBadgeRenderer,
+  },
+  props: ["comment"],
+
+  data() {
+    return {
+      commentRenderer: null,
+      voteStatus: null,
+    };
+  },
+
+  mounted() {
+    this.commentRenderer = this.comment?.comment?.commentRenderer;
+  },
+};
+</script>
--- a/NUXT/components/Comments/commentsHeaderRenderer.vue
+++ b/NUXT/components/Comments/commentsHeaderRenderer.vue
@ -0,0 +1,61 @@
+<template>
+  <div class="comment-header" v-if="boxRenderer">
+    <div class="avatar-container">
+      <v-img
+        class="avatar-thumbnail"
+        :src="
+          boxRenderer.authorThumbnail.thumbnails[
+            boxRenderer.authorThumbnail.thumbnails.length - 1
+          ].url
+        "
+      />
+    </div>
+    <div
+      class="placeholder-text background--text"
+      :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+      v-text="
+        boxRenderer.placeholderText.runs[
+          boxRenderer.placeholderText.runs.length - 1
+        ].text
+      "
+    ></div>
+  </div>
+</template>
+
+<style scoped>
+.entry {
+  width: 100%; /* Prevent Loading Weirdness */
+}
+
+.avatar-thumbnail {
+  margin-right: 1rem;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+}
+
+.comment-header {
+  display: flex;
+  flex-direction: row;
+  flex-basis: auto;
+  align-items: center;
+  padding: 10px 0;
+  width: 100%;
+}
+</style>
+
+<script>
+export default {
+  props: ["comment"],
+
+  data() {
+    return {
+      boxRenderer: null,
+    };
+  },
+
+  mounted() {
+    this.boxRenderer = this.comment?.createRenderer?.commentSimpleboxRenderer;
+  },
+};
+</script>
--- a/NUXT/components/Comments/mainCommentRenderer.vue
+++ b/NUXT/components/Comments/mainCommentRenderer.vue
@ -0,0 +1,129 @@
+<template>
+  <dialog-base>
+    <template v-slot:header>
+      <v-toolbar-title>
+        <template v-for="text in commentData.headerText.runs">
+          <template v-if="text.bold">
+            <strong :key="text.text">{{ text.text }}</strong>
+          </template>
+          <template v-else>{{ text.text }}</template>
+        </template>
+      </v-toolbar-title>
+      <v-spacer></v-spacer>
+      <v-btn icon @click="$emit('changeState', false)">
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+    </template>
+
+    <template v-for="(comment, index) in comments">
+      <v-list-item :key="index">
+        <component
+          v-if="getComponents()[Object.keys(comment)[0]]"
+          :is="Object.keys(comment)[0]"
+          :comment="comment[Object.keys(comment)[0]]"
+          @intersect="paginate"
+        ></component>
+      </v-list-item>
+      <v-divider
+        v-if="getComponents()[Object.keys(comment)[0]]"
+        :key="index"
+      ></v-divider>
+    </template>
+    <div class="loading" v-if="loading">
+      <v-sheet
+        color="background"
+        v-for="i in comments.length <= 0 ? 5 : 1"
+        :key="i"
+      >
+        <v-skeleton-loader type="list-item-avatar-three-line" />
+      </v-sheet>
+    </div>
+  </dialog-base>
+</template>
+
+<script>
+import dialogBase from "~/components/dialogBase.vue";
+import commentsHeaderRenderer from "~/components/Comments/commentsHeaderRenderer.vue";
+import commentThreadRenderer from "~/components/Comments/commentThreadRenderer.vue";
+import continuationItemRenderer from "~/components/observer.vue";
+
+export default {
+  props: ["defaultContinuation", "commentData", "showComments"],
+
+  model: {
+    prop: "showComments",
+    event: "changeState",
+  },
+
+  components: {
+    dialogBase,
+    commentsHeaderRenderer,
+    commentThreadRenderer,
+    continuationItemRenderer,
+  },
+
+  data: () => ({
+    loading: true,
+    comments: [],
+    continuation: null,
+  }),
+
+  mounted() {
+    if (!this.continuation) this.continuation = this.defaultContinuation;
+    this.paginate();
+  },
+
+  methods: {
+    getComponents() {
+      return this.$options.components;
+    },
+
+    paginate() {
+      if (this.continuation) {
+        this.loading = true;
+        const watcherIndex = this.comments.findIndex(
+          (comment) => comment.continuationItemRenderer
+        );
+        if (watcherIndex) this.comments.splice(watcherIndex, 1);
+        this.$youtube
+          .getContinuation(this.continuation, "next", "web")
+          .then((result) => {
+            let processed;
+            if (
+              result.data.onResponseReceivedEndpoints.find(
+                (endpoints) => endpoints.reloadContinuationItemsCommand
+              )
+            ) {
+              processed = result.data.onResponseReceivedEndpoints.map(
+                (endpoints) =>
+                  endpoints.reloadContinuationItemsCommand.continuationItems
+              );
+            } else {
+              processed = result.data.onResponseReceivedEndpoints.map(
+                (endpoints) =>
+                  endpoints.appendContinuationItemsAction.continuationItems
+              );
+            }
+            processed = processed.flat(1);
+            this.comments = this.comments.concat(processed);
+            this.continuation = this.findContinuation(processed);
+            console.log("comments", this.comments);
+            if (this.comments) this.loading = false;
+          });
+      }
+    },
+
+    findContinuation(newResponses) {
+      const continuationItemParent = newResponses.find(
+        (item) => item.continuationItemRenderer
+      );
+
+      const newContinuation =
+        continuationItemParent?.continuationItemRenderer.continuationEndpoint
+          .continuationCommand.token;
+
+      return newContinuation;
+    },
+  },
+};
+</script>
--- a/NUXT/components/Comments/sponsorCommentBadgeRenderer.vue
+++ b/NUXT/components/Comments/sponsorCommentBadgeRenderer.vue
@ -0,0 +1,43 @@
+<template>
+  <div
+    class="author-comment-badge-renderer"
+    v-if="metadata && metadata.customBadge"
+  >
+    <v-tooltip top>
+      <template v-slot:activator="{ on, attrs }">
+        <img
+          v-bind="attrs"
+          v-on="on"
+          class="badge"
+          :src="metadata.customBadge.thumbnails[0].url"
+          :alt="metadata.tooltip"
+        />
+      </template>
+      <span>{{ metadata.tooltip }}</span>
+    </v-tooltip>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    metadata: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+};
+</script>
+
+<style scoped>
+.author-comment-badge-renderer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.badge {
+  display: inline-block;
+  width: 1.25em;
+  height: 1.25em;
+  vertical-align: -0.1em;
+}
+</style>
--- a/NUXT/components/CompactRenderers/compactVideoRenderer.vue
+++ b/NUXT/components/CompactRenderers/compactVideoRenderer.vue
@ -1,136 +1,39 @@
 <template>
-  <v-card
-    class="entry gridVideoRenderer background"
-    :to="`/watch?v=${video.videoId}`"
-    flat
+  <base-video-renderer
+    :vidId="video.videoId"
+    :thumbnails="video.thumbnail.thumbnails"
+    :thumbnailOverlayStyle="thumbnailOverlayStyle"
+    :thumbnailOverlayText="thumbnailOverlayText"
+    :channelUrl="
+      this.$rendererUtils.getNavigationEndpoints(video.shortBylineText.runs[0])
+    "
+    :channelIcon="video.channelThumbnail.thumbnails[0].url"
+    :titles="video.title.runs"
+    :bottomText="parseBottom(video)"
  >
-    <div style="position: relative" class="thumbnail-container">
-      <v-img
-        :aspect-ratio="16 / 9"
-        :src="
-          $youtube.getThumbnail(
-            video.videoId,
-            'max',
-            video.thumbnail.thumbnails
-          )
-        "
-      />
-      <div
-        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="
-          this.$rendererUtils.getNavigationEndpoints(
-            video.shortBylineText.runs[0]
-          )
-        "
-        class="avatar-link pt-2"
-      >
-        <v-img
-          class="avatar-thumbnail"
-          :src="video.channelThumbnail.thumbnails[0].url"
-        />
-      </a>
-      <v-card-text class="video-info pt-2" v-emoji>
-        <div
-          v-for="title in video.title.runs"
-          :key="title.text"
-          style="margin-top: 0.5em"
-          class="font-weight-medium vid-title"
-        >
-          {{ title.text }}
-        </div>
-
-        <div
-          class="background--text caption"
-          :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-          v-text="parseBottom(video)"
-        />
-      </v-card-text>
-    </div>
-  </v-card>
+  </base-video-renderer>
 </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>
+import baseVideoRenderer from "~/components/UtilRenderers/baseVideoRenderer.vue";
 export default {
  props: ["video"],

+  components: {
+    baseVideoRenderer,
+  },
+
+  computed: {
+    thumbnailOverlayText() {
+      return this.video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer
+        ?.text.runs[0].text;
+    },
+    thumbnailOverlayStyle() {
+      return this.video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer
+        ?.style;
+    },
+  },
+
  methods: {
    parseBottom(video) {
      const bottomText = [
--- a/NUXT/components/CustomComponents/swipeableBottomSheet.vue
+++ b/NUXT/components/CustomComponents/swipeableBottomSheet.vue
@ -1,3 +0,0 @@
-<template>
-  <div class="swipeableBottomSheet" :open-state="state ? 1 : 0"></div>
-</template>
--- a/NUXT/components/ExtendedComponents/swipeableBottomSheet/_variables.scss
+++ b/NUXT/components/ExtendedComponents/swipeableBottomSheet/_variables.scss
@ -0,0 +1,2 @@
+@import "~vuetify/src/styles/settings/_variables";
+$bottom-sheet-inset-width: 70% !default;
--- a/NUXT/components/ExtendedComponents/swipeableBottomSheet/index.js
+++ b/NUXT/components/ExtendedComponents/swipeableBottomSheet/index.js
@ -0,0 +1,4 @@
+import swipeableBottomSheet from "./swipeableBottomSheet";
+
+export { swipeableBottomSheet };
+export default swipeableBottomSheet;
--- a/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.js
+++ b/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.js
@ -0,0 +1,34 @@
+import "./swipeableBottomSheet.sass";
+
+// Extensions
+import { VDialog } from "vuetify/lib";
+
+/* @vue/component */
+export default VDialog.extend({
+  name: "swipeable-bottom-sheet",
+
+  props: {
+    inset: Boolean,
+    maxWidth: [String, Number],
+    transition: {
+      type: String,
+      default: "bottom-sheet-transition",
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        ...VDialog.options.computed.classes.call(this),
+        "swipeable-bottom-sheet": true,
+        "swipeable-bottom-sheet--inset": this.inset,
+      };
+    },
+    contentClasses() {
+      return {
+        "swipeable-bottom-sheet__content": true,
+        "swipeable-bottom-sheet__content--active": this.isActive,
+      };
+    },
+  },
+});
--- a/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.sass
+++ b/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.sass
@ -0,0 +1,44 @@
+@import './_variables.scss'
+
+// Transition
+.bottom-sheet-transition
+  &-enter
+    transform: translateY(100%)
+
+  &-leave-to
+    transform: translateY(100%)
+
+// Block
+
+.swipeable-bottom-sheet
+
+  &.v-dialog
+    align-self: flex-end
+    border-radius: 0
+    flex: 0 1 auto
+    margin: 0
+    overflow: visible
+
+    &.swipeable-bottom-sheet--inset
+      max-width: $bottom-sheet-inset-width
+
+      @media #{map-get($display-breakpoints, 'xs-only')}
+        max-width: none
+    
+    &.v-dialog:not(.v-dialog--fullscreen)
+      max-height: 100%
+      height: 100%
+  
+.swipeable-bottom-sheet__content
+  align-items: center
+  display: flex
+  justify-content: center
+  pointer-events: none
+  position: absolute
+  transition: .2s map-get($transition, 'fast-in-fast-out'), z-index 1ms
+  width: 100%
+  height: 100%
+  outline: none
+  inset: 0
+
+
--- a/NUXT/components/Player/VTPlayerV1.vue
+++ b/NUXT/components/Player/VTPlayerV1.vue
@ -1,130 +0,0 @@
-<template>
-  <div>
-    <div class="content">
-      <v-btn class="pausePlay" text @click="playing = !playing">
-        <v-icon size="5em" color="white">mdi-{{ playing ? "pause" : "play" }}</v-icon>
-      </v-btn>
-
-      <div class="seekBar">
-        <v-slider
-          dense
-          hide-details
-          min="0"
-          :max="videoEnd"
-          :value="currentTime"
-          @change="scrubTo()"
-        />
-      </div>
-
-      <video
-        ref="player"
-        autoplay
-        :src="vidSrc"
-        width="100%"
-        style="max-height: 50vh"
-        @webkitfullscreenchange="handleFullscreenChange"
-      />
-    </div>
-
-    <div v-for="(source, index) in sources" :key="index">
-      {{ source.qualityLabel }}
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    sources: {
-      type: Array,
-      default: [],
-    },
-  },
-  data() {
-    return {
-      //---   Basic Information   ---//
-      playerVersion: 0.1,
-      vidSrc: null,
-
-      //---   Player State Information   ---//
-      playing: true,
-      currentTime: 0,
-      videoEnd: 0,
-    };
-  },
-
-  watch: {
-    playing() {
-      this.playing ? this.$refs.player.play() : this.$refs.player.pause();
-    },
-  },
-
-  mounted() {
-    const src = this.sources[this.sources.length - 1].url;
-    this.vidSrc = src;
-
-    setInterval(this.updateTiming, 100);
-  },
-
-  methods: {
-    handleFullscreenChange() {
-      if (document.fullscreenElement === this.$refs.player) {
-        this.$vuetube.statusBar.hide();
-        this.$vuetube.navigationBar.hide();
-      } else {
-        this.$vuetube.statusBar.show();
-        this.$vuetube.navigationBar.show();
-      }
-    },
-
-    scrubTo() {
-      const player = this.$refs.player;
-      player.currentTime = 0;
-      console.log(val, this.currentTime, player.currentTime);
-    },
-
-    updateTiming() {
-      const player = this.$refs.player;
-      if (player == undefined) return;
-      this.videoEnd = player.duration;
-      this.currentTime = player.currentTime;
-      console.log(player.currentTime, this.currentTime);
-    },
-  },
-};
-</script>
-
-<style scoped>
-/***   Overlay Information   ***/
-.content {
-  position: relative;
-  width: 500px;
-  margin: 0 auto;
-}
-.content video {
-  width: 100%;
-  display: block;
-}
-.content:before {
-  content: "";
-  position: absolute;
-  background: rgba(0, 0, 0, 0.5);
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-/***   General Overlay Styling   ***/
-.pausePlay {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.seekBar {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-}
-</style>
--- a/NUXT/components/Player/controls.vue
+++ b/NUXT/components/Player/controls.vue
@ -0,0 +1,95 @@
+<template>
+  <div class="controls" @click="toggleControls()">
+    <div class="controlsWrap" ref="controlsWrap">
+
+      <div  class="centerVideoControls">
+        <v-btn @click="togglePlaying()" text style="height: 5em; width: 5em;">
+          <v-icon size="5em" v-text="playing ? 'mdi-pause' : 'mdi-play' " ref="pausePlayIndicator" />
+        </v-btn>
+      </div>
+
+      <div class="bottomVideoControls">
+        {{ watched }} <span style="color: #999;">/ {{ video.duration }}</span>
+      </div>
+
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+  .centerVideoControls {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .bottomVideoControls {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+  }
+
+  .pausePlay {
+    min-height: 5em;
+    min-width: 5em;
+  }
+
+  .controls {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+  }
+
+  .controlsWrap {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+  }
+</style>
+
+<script>
+  export default {
+    props: ["video"],
+
+    data() {
+      return {
+        playing: true,
+        controls: true,
+
+        watched: 0,
+      }
+    },
+
+    mounted() {
+      this.video.ontimeupdate = () => {
+        console.log(this.video.currentTime)
+        this.watched = this.video.currentTime;
+      };
+    },
+
+    methods: {
+      togglePlaying() {
+        if (this.video.paused) {
+          this.video.play()
+          this.playing = true;
+        } else {
+          this.video.pause()
+          this.playing = false;
+        };
+        this.toggleControls(); // Prevent Screen From Closing
+      },
+
+      toggleControls() {
+        const setControls = this.controls ? 'none' : 'block';
+        this.$refs.controlsWrap.style.display = setControls;
+        this.controls = !this.controls;
+      }
+
+    }
+  }
+
+</script>
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@ -1,70 +1,40 @@
 <template>
-  <div>
-    <div @click="toggleControls()" class="content" :style="showControls ? 'background: rgba(0, 0, 0, 0.5);' : '' ">
+  <div style="position: relative;">
+    <video
+      ref="player"
+      autoplay
+      :src="vidSrc"
+      width="100%"
+      style="max-height: 50vh; display: block"
+      @webkitfullscreenchange="handleFullscreenChange"
+    />

-      <div v-show="showControls">
-        <v-btn class="pausePlay" text @click="playing = !playing">
-          <v-icon size="5em" color="white">mdi-{{ playing ? "pause" : "play" }}</v-icon>
-        </v-btn>

-        <scrubber class="scrubber" :duration="duration" :endDuration="endDuration" />
-      </div>
+    <seekbar :video=$refs.player v-if="$refs.player" />
+    <controls v-if="$refs.player" :video="$refs.player" />

-      <video
-        ref="player"
-        :src="vidSrc"
-        width="100%"
-        style="max-height: 50vh"
-        @webkitfullscreenchange="handleFullscreenChange"
-      />
-    </div>
-
-    <div v-for="(source, index) in sources" :key="index">
-      {{ source.qualityLabel }}
-    </div>
+    <!-- <v-slider v-model="value" step="0"></v-slider> -->
  </div>
 </template>

 <script>
-import scrubber from "./scrubber.vue";
+import seekbar from '~/components/Player/seekbar.vue';
+import controls from '~/components/Player/controls.vue';

 export default {
+  props: ["sources"],
  components: {
-    scrubber,
-  },
-  props: {
-    sources: {
-      type: Array,
-      default: [],
-    },
+    seekbar,
+    controls
  },
  data() {
    return {
-      //---   Basic Information   ---//
-      playerVersion: 0.1,
-      vidSrc: null,
-
-      //---   Player State Information   ---//
-      showControls: false,
-      playing: false,
-      duration: 0,
-      endDuration: 0,
+      vidSrc: "",
    };
  },
-
-  watch: {
-    playing() {
-      this.playing ? this.$refs.player.play() : this.$refs.player.pause();
-    },
-  },
-
  mounted() {
-    const src = this.sources[this.sources.length - 1].url;
-    this.vidSrc = src;
-
-    setInterval(this.updateTiming, 100);
+    this.vidSrc = this.sources[this.sources.length-1].url;
  },
-
  methods: {
    handleFullscreenChange() {
      if (document.fullscreenElement === this.$refs.player) {
@ -76,54 +46,9 @@ export default {
      }
    },

-    updateTiming() {
-      const player = this.$refs.player;
-      if (player == undefined) return;
-      this.duration = player.currentTime;
-      this.endDuration = player.duration;
+    getPlayer() {
+      return this.$refs.player;
    },
-
-    toggleControls() {
-      this.showControls = !this.showControls;
-    }
-
  },
 };
 </script>
-
-<style scoped>
-/***   Overlay Information   ***/
-.content {
-  position: relative;
-  width: 500px;
-  margin: 0 auto;
-}
-.content video {
-  width: 100%;
-  display: block;
-}
-.content:before {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-/***   General Overlay Styling   ***/
-.pausePlay {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  height: 5em !important;
-  width: 5em !important;
-}
-.scrubber {
-  position: absolute;
-  bottom: 0;
-}
-
-
-</style>
--- a/NUXT/components/Player/legacy.vue
+++ b/NUXT/components/Player/legacy.vue
@ -9,16 +9,6 @@
      style="max-height: 50vh; display: block"
      @webkitfullscreenchange="handleFullscreenChange"
    />
-    <v-progress-linear
-      active
-      background-color="primary"
-      background-opacity="0.5"
-      :buffer-value="buffered"
-      color="primary"
-      height="3"
-      query
-      :value="percentage"
-    />
    <!-- <v-slider v-model="value" step="0"></v-slider> -->
  </div>
 </template>
@ -26,21 +16,6 @@
 <script>
 export default {
  props: ["vidSrc"],
-  data() {
-    return {
-      percentage: 0,
-      buffered: 0,
-    };
-  },
-  mounted() {
-    let vid = this.$refs.player;
-    vid.ontimeupdate = () => {
-      this.percentage = (vid.currentTime / vid.duration) * 100;
-    };
-    vid.addEventListener("progress", () => {
-      this.buffered = (vid.buffered.end(0) / vid.duration) * 100;
-    });
-  },
  methods: {
    handleFullscreenChange() {
      if (document.fullscreenElement === this.$refs.player) {
--- a/NUXT/components/Player/scrubber.vue
+++ b/NUXT/components/Player/scrubber.vue
@ -1,44 +0,0 @@
-<template>
-  <div class="scrubber">
-    <div id="progress" class="primary" />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    duration: {
-      type: Number,
-      default: 0,
-    },
-    endDuration: {
-      type: Number,
-      default: 0,
-    },
-  },
-  data() {
-    return {
-      percentage: 0,
-    };
-  },
-  mounted() {
-    const vm = this;
-    setInterval(function () {
-      vm.percentage = (vm.duration / vm.endDuration) * 100;
-
-      document.getElementById("progress").style.width = vm.percentage + "%";
-    }, 100);
-  },
-};
-</script>
-
-<style scoped>
-.scrubber {
-  width: 100%;
-  height: 5px;
-  background: rgba(255, 255, 255, 0.5);
-}
-#progress {
-  height: 100%;
-}
-</style>
--- a/NUXT/components/Player/seekbar.vue
+++ b/NUXT/components/Player/seekbar.vue
@ -0,0 +1,42 @@
+<template>
+  <div>
+
+
+    <v-progress-linear
+      active
+      background-color="primary"
+      background-opacity="0.5"
+      :buffer-value="buffered"
+      color="primary"
+      height="3"
+      query
+      :value="percentage"
+    />
+
+
+  </div>
+</template>
+
+
+<script>
+export default {
+  props: ["video"],
+
+  data() {
+    return {
+      percentage: 0,
+      buffered: 0
+    }
+  },
+
+  mounted() {
+    this.video.ontimeupdate = () => {
+      this.percentage = (this.video.currentTime / this.video.duration) * 100;
+    };
+    this.video.addEventListener("progress", () => {
+      this.buffered = (this.video.buffered.end(0) / this.video.duration) * 100;
+    });
+  }
+
+}
+</script>
--- a/NUXT/components/UtilRenderers/YtTextFormatter.vue
+++ b/NUXT/components/UtilRenderers/YtTextFormatter.vue
@ -0,0 +1,59 @@
+<template>
+  <div class="yt-text-formatter">
+    <template v-for="(text, index) in textRuns">
+      <template v-if="$rendererUtils.checkInternal(text)">
+        <a
+          @click="openInternal($rendererUtils.getNavigationEndpoints(text))"
+          :key="index"
+          >{{ text.text }}</a
+        >
+      </template>
+      <template
+        v-else-if="
+          text.navigationEndpoint && text.navigationEndpoint.urlEndpoint
+        "
+      >
+        <a
+          @click="openExternal($rendererUtils.getNavigationEndpoints(text))"
+          :key="index"
+          >{{ text.text }}</a
+        >
+      </template>
+      <template v-else-if="text.emoji && text.emoji.isCustomEmoji">
+        <img
+          :src="
+            text.emoji.image.thumbnails[text.emoji.image.thumbnails.length - 1]
+              .url
+          "
+          :alt="text.text"
+          :key="index"
+          class="emoji"
+          draggable="false"
+        />
+      </template>
+      <template v-else>
+        <span :key="index" v-emoji>{{ text.text }}</span>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script>
+import { Browser } from "@capacitor/browser";
+export default {
+  props: {
+    textRuns: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  methods: {
+    async openExternal(url) {
+      await Browser.open({ url: url });
+    },
+    async openInternal(url) {
+      await this.$router.push(url);
+    },
+  },
+};
+</script>
--- a/NUXT/components/UtilRenderers/baseVideoRenderer.vue
+++ b/NUXT/components/UtilRenderers/baseVideoRenderer.vue
@ -0,0 +1,144 @@
+<template>
+  <v-card class="entry videoRenderer background" :to="`/watch?v=${vidId}`" flat>
+    <div style="position: relative" class="thumbnail-container">
+      <v-img
+        :aspect-ratio="16 / 9"
+        :src="$youtube.getThumbnail(vidId, 'max', thumbnails)"
+      />
+      <div
+        v-if="thumbnailOverlayText && thumbnailOverlayStyle"
+        class="videoRuntimeFloat"
+        :class="'style-' + thumbnailOverlayStyle"
+        style="color: #fff"
+        v-text="thumbnailOverlayText"
+      />
+    </div>
+    <div id="details">
+      <a :href="channelUrl" class="avatar-link pt-2">
+        <v-img class="avatar-thumbnail" :src="channelIcon" />
+      </a>
+      <v-card-text class="video-info pt-2" v-emoji>
+        <span
+          v-for="title in titles"
+          :key="title.text"
+          style="margin-top: 0.5em"
+          class="font-weight-medium vid-title"
+        >
+          {{ title.text }}
+        </span>
+
+        <div
+          class="background--text text--lighten-5 caption"
+          :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+          v-text="bottomText"
+        />
+      </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);
+}
+
+.videoRuntimeFloat.style-UPCOMING {
+  background: rgba(0, 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: {
+    vidId: {
+      type: String,
+      required: true,
+    },
+    thumbnails: {
+      type: Array,
+      required: true,
+    },
+    channelUrl: {
+      type: String,
+      required: true,
+    },
+    channelIcon: {
+      type: String,
+      required: true,
+    },
+    titles: {
+      type: Array,
+      required: true,
+    },
+    bottomText: {
+      type: String,
+      required: true,
+    },
+    thumbnailOverlayText: {
+      type: String,
+    },
+    thumbnailOverlayStyle: {
+      type: String,
+    },
+  },
+};
+</script>
--- a/NUXT/components/UtilRenderers/collapsableText.vue
+++ b/NUXT/components/UtilRenderers/collapsableText.vue
@ -0,0 +1,100 @@
+<template>
+  <div class="collapsable-text">
+    <div
+      class="text-content"
+      ref="textContent"
+      :class="expanded ? 'expanded' : 'collapsed'"
+    >
+      <slot></slot>
+    </div>
+    <a
+      class="toggle-collapse background--text font-weight-bold"
+      @click="expanded = !expanded"
+      :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+      v-if="expandable"
+      v-text="expanded ? collapseText : expandText"
+    ></a>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    lines: {
+      type: Number,
+      default: 4,
+    },
+    text: {
+      type: String,
+      default: "",
+    },
+    expandText: {
+      type: String,
+      default: "Show more",
+    },
+    collapseText: {
+      type: String,
+      default: "Show less",
+    },
+  },
+
+  data() {
+    return {
+      expanded: false,
+      expandable: false,
+    };
+  },
+
+  mounted() {
+    this.checkExpandable();
+  },
+
+  methods: {
+    checkExpandable() {
+      if (
+        this.$refs.textContent &&
+        this.$refs.textContent.offsetHeight <
+          this.$refs.textContent.scrollHeight
+      ) {
+        this.expandable = true;
+      } else {
+        this.expandable = false;
+      }
+    },
+  },
+
+  computed: {
+    cssProps() {
+      return {
+        "--lines": this.lines,
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@mixin truncate($rows) {
+  position: relative;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: $rows;
+  -webkit-box-orient: vertical;
+}
+
+.toggle-collapse {
+  text-decoration: none;
+}
+
+.collapsable-text {
+  display: flex;
+  flex-direction: column;
+  flex-basis: auto;
+  .text-content {
+    white-space: pre-line;
+    &.collapsed {
+      @include truncate(4);
+    }
+  }
+}
+</style>
--- a/NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue
+++ b/NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue
@ -1,26 +1,7 @@
 <template>
  <div class="description" v-if="render.descriptionBodyText">
-    <template v-for="(text, index) in render.descriptionBodyText.runs">
-      <template v-if="$rendererUtils.checkInternal(text)">
-        <a
-          @click="openInternal($rendererUtils.getNavigationEndpoints(text))"
-          :key="index"
-          >{{ text.text }}</a
-        >
-      </template>
-      <template
-        v-else-if="
-          text.navigationEndpoint && text.navigationEndpoint.urlEndpoint
-        "
-      >
-        <a
-          @click="openExternal($rendererUtils.getNavigationEndpoints(text))"
-          :key="index"
-          >{{ text.text }}</a
-        >
-      </template>
-      <template v-else> {{ text.text }} </template>
-    </template>
+    <yt-text-formatter :textRuns="render.descriptionBodyText.runs">
+    </yt-text-formatter>
  </div>
 </template>

@ -31,17 +12,13 @@
 </style>

 <script>
-import { Browser } from "@capacitor/browser";
+import YtTextFormatter from "~/components/UtilRenderers/YtTextFormatter.vue";
+
 export default {
  props: ["render"],

-  methods: {
-    async openExternal(url) {
-      await Browser.open({ url: url });
-    },
-    async openInternal(url) {
-      await this.$router.push(url);
-    },
+  components: {
+    YtTextFormatter,
  },
 };
 </script>
--- a/NUXT/components/dialogBase.vue
+++ b/NUXT/components/dialogBase.vue
@ -0,0 +1,24 @@
+<template>
+  <v-card class="dialog-base">
+    <div class="toolbar-container">
+      <v-toolbar color="background" flat>
+        <slot name="header"></slot>
+      </v-toolbar>
+      <v-divider></v-divider>
+    </div>
+    <div class="dialog-body background">
+      <slot></slot>
+    </div>
+  </v-card>
+</template>
+
+<style lang="sass">
+.dialog-base
+  display: flex
+  flex-direction: column
+  height: 100%
+
+  .dialog-body
+    overflow-y: auto
+    height: 100%
+</style>
--- a/NUXT/components/gridRenderers/gridVideoRenderer.vue
+++ b/NUXT/components/gridRenderers/gridVideoRenderer.vue
@ -1,138 +1,41 @@
 <template>
-  <v-card
-    class="entry gridVideoRenderer background"
-    :to="`/watch?v=${video.videoId}`"
-    flat
+  <base-video-renderer
+    :vidId="video.videoId"
+    :thumbnails="video.thumbnail.thumbnails"
+    :thumbnailOverlayStyle="thumbnailOverlayStyle"
+    :thumbnailOverlayText="thumbnailOverlayText"
+    :channelUrl="
+      $rendererUtils.getNavigationEndpoints(
+        video.shortBylineText.runs[0].navigationEndpoint
+      )
+    "
+    :channelIcon="video.channelThumbnail.thumbnails[0].url"
+    :titles="video.title.runs"
+    :bottomText="parseBottom(video)"
  >
-    <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.thumbnails[0].url"
-        />
-      </a>
-      <v-card-text class="video-info pt-2" v-emoji>
-        <div
-          v-for="title in video.title.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>
+  </base-video-renderer>
 </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>
+import baseVideoRenderer from "~/components/UtilRenderers/baseVideoRenderer.vue";
 export default {
  props: ["video"],

+  components: {
+    baseVideoRenderer,
+  },
+
+  computed: {
+    thumbnailOverlayText() {
+      return this.video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer
+        ?.text.runs[0].text;
+    },
+    thumbnailOverlayStyle() {
+      return this.video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer
+        ?.style;
+    },
+  },
+
  methods: {
    parseBottom(video) {
      const bottomText = [
--- a/NUXT/components/gridRenderers/videoWithContextRenderer.vue
+++ b/NUXT/components/gridRenderers/videoWithContextRenderer.vue
@ -1,141 +1,44 @@
 <template>
-  <v-card
-    class="entry videoWithContextRenderer background"
-    :to="`/watch?v=${video.videoId}`"
-    flat
+  <base-video-renderer
+    :vidId="video.videoId"
+    :thumbnails="video.thumbnail.thumbnails"
+    :thumbnailOverlayStyle="thumbnailOverlayStyle"
+    :thumbnailOverlayText="thumbnailOverlayText"
+    :channelUrl="
+      $rendererUtils.getNavigationEndpoints(
+        video.shortBylineText.runs[0].navigationEndpoint
+      )
+    "
+    :channelIcon="
+      video.channelThumbnail.channelThumbnailWithLinkRenderer.thumbnail
+        .thumbnails[0].url
+    "
+    :titles="video.headline.runs"
+    :bottomText="parseBottom(video)"
  >
-    <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" v-emoji>
-        <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>
+  </base-video-renderer>
 </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>
+import baseVideoRenderer from "~/components/UtilRenderers/baseVideoRenderer.vue";
 export default {
  props: ["video"],

+  components: {
+    baseVideoRenderer,
+  },
+
+  computed: {
+    thumbnailOverlayText() {
+      return this.video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer
+        .text.runs[0].text;
+    },
+    thumbnailOverlayStyle() {
+      return this.video.thumbnailOverlays[0].thumbnailOverlayTimeStatusRenderer
+        .style;
+    },
+  },
+
  methods: {
    parseBottom(video) {
      const bottomText = [
--- a/NUXT/components/observer.vue
+++ b/NUXT/components/observer.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="observer" />
+  <div class="observer" style="height: 1px" />
 </template>

 <script>
@ -9,7 +9,7 @@ export default {
    observer: null,
  }),
  mounted() {
-    const options = this.options || {};
+    const options = this.options || { threshold: 0.0 };
    this.observer = new IntersectionObserver(([entry]) => {
      if (entry && entry.isIntersecting) {
        this.$emit("intersect");
--- a/NUXT/layouts/default.vue
+++ b/NUXT/layouts/default.vue
@ -32,14 +32,14 @@
              v-for="(item, index) in response"
              :key="index"
              class="px-0"
-              v-emoji
            >
              <v-btn
                text
                tile
                dense
-                class="searchButton text-left"
+                class="searchButton text-left text-none"
                @click="youtubeSearch(item)"
+                v-emoji
              >
                <v-icon class="mr-5">mdi-magnify</v-icon>
                {{ item[0] || item.text }}
@ -93,18 +93,21 @@ export default {

  mounted() {
    //---   Back Button Listener   ---//
-    CapacitorApp.addListener("backButton", ({ canGoBack }) => {
-      //---   Back Closes Search   ---//
-      if (this.search) {
-        this.search = false;
+    this.backHandler = CapacitorApp.addListener(
+      "backButton",
+      ({ canGoBack }) => {
+        //---   Back Closes Search   ---//
+        if (this.search) {
+          this.search = false;

-        //---   Back Goes Back   ---//
-      } else if (!canGoBack) {
-        CapacitorApp.exitApp();
-      } else {
-        window.history.back();
+          //---   Back Goes Back   ---//
+        } else if (!canGoBack) {
+          CapacitorApp.exitApp();
+        } else {
+          window.history.back();
+        }
      }
-    });
+    );

    // ---   External URL Handling   --- //
    CapacitorApp.addListener("appUrlOpen", (event) => {
@ -121,6 +124,10 @@ export default {
    document.head.appendChild(plugin);
  },

+  beforeDestroy() {
+    if (this.backHandler) this.backHandler.remove();
+  },
+
  methods: {
    textChanged(text) {
      if (text.length <= 0) {
@ -226,13 +233,13 @@ div {
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
+  margin: 0 2px;
 }
 </style>

 <style scoped>
 .searchButton {
  width: 100%;
-  text-transform: none !important;
  justify-content: left !important;
 }
 </style>
--- a/NUXT/pages/channel/_notice_.vue
+++ b/NUXT/pages/channel/_notice_.vue
@ -0,0 +1,7 @@
+<template>
+    <center>
+        <img src="/channel_notice.svg" style="width: 80%; margin: 2em;" />
+        <h1>Channel Pages are still being worked on</h1><br><br>
+        <v-btn to="/home">Return Home</v-btn>
+    </center>
+</template>
--- a/NUXT/pages/embed/_redirect_.vue
+++ b/NUXT/pages/embed/_redirect_.vue
@ -1,19 +0,0 @@
-<template>
-  <div>
-    Redirecting...
-  </div>
-</template>
-
-<script>
-export default {
-  layout: "empty",
-  mounted() {
-
-    this.$router.push(
-      "/watch?v="
-      + $nuxt.$route.params.redirect_
-    );
-
-  }
-}
-</script>
--- a/NUXT/pages/home.vue
+++ b/NUXT/pages/home.vue
@ -11,8 +11,8 @@
    <div v-for="(section, index) in recommends" :key="index">
      <horizontal-list-renderer :render="section.contents[0]" />
    </div>
-    <vid-load-renderer v-if="!loading" :count="1" />
-    <observer @intersect="paginate" />
+    <vid-load-renderer v-if="loading" :count="1" />
+    <observer @intersect="paginate" v-else-if="recommends.length > 0" />
  </div>
 </template>

@ -40,8 +40,12 @@ export default {

  methods: {
    paginate() {
-      if (this.recommends) {
-        this.loading = true;
+      this.loading = true;
+      const continuationCode = this.recommends[
+        this.recommends.length - 1
+      ].continuations.find((element) => element.nextContinuationData)
+        ?.nextContinuationData.continuation;
+      if (continuationCode) {
        this.$youtube
          .recommendContinuation(
            this.recommends[this.recommends.length - 1].continuations.find(
@ -53,6 +57,8 @@ export default {
            this.loading = false;
            this.recommends.push(result);
          });
+      } else {
+        this.loading = false;
      }
    },
  },
--- a/NUXT/pages/index.vue
+++ b/NUXT/pages/index.vue
@ -58,7 +58,7 @@ export default {
    await this.$youtube.getAPI();
    this.progressMsg = "Launching";

-    this.$router.push(`/${localStorage.getItem("startPage") || "home"}`);
+    this.$router.replace(`/${localStorage.getItem("startPage") || "home"}`); // Prevent user from navigating back to the splash screen
  },
 };
 </script>
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@ -1,73 +1,89 @@
 <template>
-  <div class="background">
-    <v-btn text style="position: fixed; z-index: 69420" to="home">
-      <v-icon>mdi-chevron-down</v-icon>
-    </v-btn>
-    <!--   VueTube Player V1   -->
-    <vuetubePlayer :sources="sources" v-if="useBetaPlayer === 'true'" />
-    <!--   Stock Player   -->
-    <videoPlayer
-      id="player"
-      ref="player"
-      v-touch="{ down: () => $router.push('/home') }"
-      style="position: sticky; top: 0; z-index: 42069"
-      class="background"
-      :vid-src="vidSrc"
-    />
+  <div class="background" id="watch-body">
+    <div id="player-container">
+      <v-btn text style="position: fixed; z-index: 69420" to="home">
+        <v-icon>mdi-chevron-down</v-icon>
+      </v-btn>
+      <!--   VueTube Player V1   -->
+      <vuetubePlayer
+        :sources="sources"
+        v-if="useBetaPlayer === 'true' && sources.length > 0"
+      />

-    <!---->
-    <v-card v-if="loaded" class="background rounded-0" flat>
-      <div
-        v-ripple
-        class="d-flex justify-space-between align-start px-3 pt-3"
-        @click="showMore = !showMore"
-      >
-        <div class="d-flex flex-column">
-          <v-card-title
-            class="pa-0"
-            style="font-size: 0.95rem; line-height: 1.15rem"
-            v-text="video.title"
-            v-emoji
-          />
-          <v-card-text
-            style="font-size: 0.75rem"
-            class="background--text pa-0"
-            :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-          >
-            <template
-              v-for="text in video.metadata.contents.find(
-                (content) => content.slimVideoInformationRenderer
-              ).slimVideoInformationRenderer.collapsedSubtitle.runs"
-              >{{ text.text }}
-            </template>
-          </v-card-text>
-        </div>
-        <v-icon class="ml-4" v-if="showMore">mdi-chevron-up</v-icon>
-        <v-icon class="ml-4" v-else>mdi-chevron-down</v-icon>
-      </div>
-      <div class="d-flex">
-        <v-btn
-          v-for="(item, index) in interactions"
-          :key="index"
-          text
-          fab
-          class="vertical-button ma-1"
-          elevation="0"
-          style="width: 4.2rem !important; height: 4.2rem !important"
-          :disabled="item.disabled"
-          @click="callMethodByName(item.actionName)"
+      <!--   Stock Player   -->
+      <legacyPlayer
+        id="player"
+        ref="player"
+        v-touch="{ down: () => $router.push('/home') }"
+        class="background"
+        :vid-src="vidSrc"
+        v-if="useBetaPlayer !== 'true'"
+      />
+    </div>
+
+    <div
+      v-bind:class="{
+        'overflow-y-auto': !showComments,
+        'overflow-y-hidden': showComments,
+      }"
+      id="content-container"
+    >
+      <v-card v-if="loaded" class="ml-2 mr-2 background rounded-0" flat>
+        <div
+          v-ripple
+          class="d-flex justify-space-between align-start px-3 pt-3"
+          @click="showMore = !showMore"
        >
-          <v-icon v-text="item.icon" />
-          <div
-            class="mt-2"
-            style="font-size: 0.66rem"
-            v-text="item.value || item.name"
-          />
-        </v-btn>
-        <!--   End Scrolling Div For Interactions   --->
-        <!-- <hr /> -->
-      </div>
-      <!-- <v-bottom-sheet
+          <div class="d-flex flex-column">
+            <v-card-title
+              class="pa-0"
+              style="font-size: 0.95rem; line-height: 1.15rem"
+              v-text="video.title"
+              v-emoji
+            />
+            <v-card-text
+              style="font-size: 0.75rem"
+              class="background--text pa-0"
+              :class="
+                $vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'
+              "
+            >
+              <div style="margin-bottom: 1rem">
+                <template
+                  v-for="text in video.metadata.contents.find(
+                    (content) => content.slimVideoInformationRenderer
+                  ).slimVideoInformationRenderer.collapsedSubtitle.runs"
+                  >{{ text.text }}
+                </template>
+              </div>
+            </v-card-text>
+          </div>
+          <v-icon class="ml-4" v-if="showMore">mdi-chevron-up</v-icon>
+          <v-icon class="ml-4" v-else>mdi-chevron-down</v-icon>
+        </div>
+        <div class="d-flex">
+          <v-btn
+            v-for="(item, index) in interactions"
+            :key="index"
+            text
+            fab
+            class="vertical-button ma-1"
+            elevation="0"
+            style="width: 4.2rem !important; height: 4.2rem !important"
+            :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>
+          <!--   End Scrolling Div For Interactions   --->
+          <!-- <hr /> -->
+        </div>
+        <!-- <v-bottom-sheet
          v-model="showMore"
          color="background"
          style="z-index: 9999999"
@ -84,89 +100,106 @@
          </v-sheet>
        </v-bottom-sheet> -->

-      <!-- <v-bottom-sheet v-model="share" color="background" style="z-index: 9999999">
+        <!-- <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 />
+      </v-card>
+      <v-divider />

-    <!--   Channel Bar   -->
-    <div class="channel-container" v-if="loaded">
-      <v-card
-        class="channel-section background px-3 rounded-0"
-        :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" v-emoji>
-            <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"
+      <!--   Channel Bar   -->
+      <div class="channel-container" v-if="loaded">
+        <v-card
+          class="channel-section background px-3 rounded-0"
+          :to="video.channelUrl"
        >
-          subscribe
-        </div>
-      </v-card>
-      <v-divider />
-    </div>
-
-    <!-- Description -->
-    <div v-if="showMore">
-      <div class="scroll-y ma-4">
-        <slim-video-description-renderer
-          :render="video.renderedData.description"
-        />
+          <div id="details">
+            <div class="avatar-link mr-3">
+              <v-img class="avatar-thumbnail" :src="video.channelImg" />
+            </div>
+            <div class="channel-byline" v-emoji>
+              <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-divider />
-    </div>

-    <!-- Comments -->
-    <div
-      v-if="loaded && video.commentData"
-      @click="showComments = !showComments"
-    >
-      <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>
+      <!-- Description -->
+      <div v-if="showMore">
+        <div class="scroll-y ma-4">
+          <slim-video-description-renderer
+            :render="video.renderedData.description"
+          />
+        </div>
+        <v-divider />
+      </div>
+
+      <!-- Comments -->
+      <div
+        v-if="loaded && video.commentData"
+        @click="showComments = !showComments"
+      >
+        <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 v-if="showComments">mdi-unfold-less-horizontal</v-icon>
-        <v-icon v-else>mdi-unfold-more-horizontal</v-icon>
-      </v-card>
-      <v-divider />
-    </div>
+          </v-text>
+          <v-icon v-if="showComments">mdi-unfold-less-horizontal</v-icon>
+          <v-icon v-else>mdi-unfold-more-horizontal</v-icon>
+        </v-card>
+        <v-divider />
+      </div>

-    <v-card v-if="showComments">
-      <v-subheader>Hello World</v-subheader>
-    </v-card>
+      <swipeable-bottom-sheet
+        v-model="showComments"
+        hide-overlay
+        persistent
+        no-click-animation
+        attach="#content-container"
+        v-if="loaded && video.commentData"
+      >
+        <mainCommentRenderer
+          :defaultContinuation="video.commentContinuation"
+          :commentData="video.commentData"
+          v-model="showComments"
+        ></mainCommentRenderer>
+      </swipeable-bottom-sheet>

-    <!-- 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" />
+      <!-- <swipeable-bottom-sheet
+      :v-model="showComments"
+      style="z-index: 9999999"
+    ></swipeable-bottom-sheet> -->
+
+      <!-- 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>

@ -176,8 +209,13 @@ 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";
+import legacyPlayer from "~/components/Player/legacy.vue"
 import vuetubePlayer from "~/components/Player/index.vue";
 import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
+import mainCommentRenderer from "~/components/Comments/mainCommentRenderer.vue";
+import SwipeableBottomSheet from "~/components/ExtendedComponents/swipeableBottomSheet";
+
+import { App as CapacitorApp } from "@capacitor/app";

 export default {
  components: {
@ -185,7 +223,10 @@ export default {
    VidLoadRenderer,
    SlimVideoDescriptionRenderer,
    vuetubePlayer,
+    legacyPlayer,
    ItemSectionRenderer,
+    SwipeableBottomSheet,
+    mainCommentRenderer,
  },
  layout: "empty",
  // transition(to) { // TODO: fix layout switching
@ -215,13 +256,34 @@ export default {
      },
    },
  },
+
  mounted() {
    this.mountedInit();
+
+    this.backHandler = CapacitorApp.addListener(
+      "backButton",
+      ({ canGoBack }) => {
+        //---   Back Closes Search   ---//
+        if (this.showComments) {
+          this.showComments = false;
+
+          //---   Back Goes Back   ---//
+        } else if (!canGoBack) {
+          this.$router.replace(
+            `/${localStorage.getItem("startPage") || "home"}`
+          );
+        } else {
+          window.history.back();
+        }
+      }
+    );
  },

-  destroyed() {
+  beforeDestroy() {
    clearInterval(this.interval);
+    if (this.backHandler) this.backHandler.remove();
  },
+
  methods: {
    getVideo() {
      this.loaded = false;
@ -254,7 +316,7 @@ export default {
        this.cpn = getCpn();
        this.initWatchTime().then(() => {
          this.sendWatchTime();
-          this.interval = setInterval(this.sendWatchTime, 30000);
+          this.interval = setInterval(this.sendWatchTime, 60000);
        });
      });

@ -369,6 +431,19 @@ export default {
 </script>

 <style>
+#watch-body {
+  height: 100%;
+  max-height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+#content-container {
+  height: 100%;
+  position: relative;
+}
+
 .vertical-button span.v-btn__content {
  flex-direction: column;
  justify-content: space-around;
--- a/NUXT/pages/watch_debug.vue
+++ b/NUXT/pages/watch_debug.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="accent">
+  <div>

    <player :sources="sources" v-if="sources.length > 0" />

--- a/NUXT/plugins/constants.js
+++ b/NUXT/plugins/constants.js
@ -13,13 +13,14 @@ const ytApiVal = {
  VERSION: "16.25",
  CLIENTNAME: "ANDROID",
  VERSION_WEB: "2.20220411.09.00",
-  CLIENT_WEB: 2,
+  CLIENT_WEB_M: 2,
+  CLIENT_WEB_D: 1,
 };

 const filesystem = {
  plugins: "vuetube/plugins",
  temp: "vuetube/temp",
-}
+};

 module.exports = {
  URLS: url,
--- a/NUXT/plugins/innertube.js
+++ b/NUXT/plugins/innertube.js
@ -117,7 +117,7 @@ class Innertube {
      continuation: continuation,
    };
    let url;
-    switch (type) {
+    switch (type.toLowerCase()) {
      case "browse":
        url = `${constants.URLS.YT_BASE_API}/browse?key=${this.key}`;
        break;
@ -159,7 +159,7 @@ class Innertube {
        ...{
          context: {
            client: {
-              clientName: constants.YT_API_VALUES.CLIENT_WEB,
+              clientName: constants.YT_API_VALUES.CLIENT_WEB_M,
              clientVersion: constants.YT_API_VALUES.VERSION_WEB,
            },
          },
@ -344,6 +344,19 @@ class Innertube {
          (content) => content.commentsEntryPointHeaderRenderer
        )?.commentsEntryPointHeaderRenderer,
      playbackTracking: responseInfo.playbackTracking,
+      commentContinuation: responseNext.engagementPanels
+        .find(
+          (panel) =>
+            panel.engagementPanelSectionListRenderer.panelIdentifier ==
+            "engagement-panel-comments-section"
+        )
+        ?.engagementPanelSectionListRenderer.content.sectionListRenderer.contents.find(
+          (content) => content.itemSectionRenderer
+        )
+        ?.itemSectionRenderer.contents.find(
+          (content) => content.continuationItemRenderer
+        )?.continuationItemRenderer.continuationEndpoint.continuationCommand
+        .token,
    };

    return vidData;
--- a/NUXT/plugins/youtube.js
+++ b/NUXT/plugins/youtube.js
@ -133,15 +133,11 @@ const innertubeModule = {
  },

  async recommendContinuation(continuation, endpoint) {
-    const response = await InnertubeAPI.getContinuationsAsync(
-      continuation,
-      endpoint
-    );
+    const response = await this.getContinuation(continuation, endpoint);
    const contents =
      response.data.continuationContents.sectionListContinuation.contents;
    const final = contents.map((shelves) => {
      const video = shelves.shelfRenderer?.content?.horizontalListRenderer;
-
      if (video) return video;
    });
    const continuations =
@ -149,6 +145,26 @@ const innertubeModule = {
    return { continuations: continuations, contents: final };
  },

+  async getContinuation(continuation, endpoint, mode = "android") {
+    let contextAdditional = {};
+    if (mode.toLowerCase() == "web") {
+      contextAdditional = {
+        ...contextAdditional,
+        ...{
+          client: {
+            clientName: constants.YT_API_VALUES.CLIENT_WEB_D,
+            clientVersion: constants.YT_API_VALUES.VERSION_WEB,
+          },
+        },
+      };
+    }
+    return await InnertubeAPI.getContinuationsAsync(
+      continuation,
+      endpoint,
+      contextAdditional
+    );
+  },
+
  async search(query) {
    try {
      const response = await InnertubeAPI.getSearchAsync(query);
--- a/NUXT/static/channel_notice.svg
+++ b/NUXT/static/channel_notice.svg
--- a/readme.md
+++ b/readme.md
@ -25,17 +25,21 @@ Pronounced View Tube (<code>/ˈvjuːˌtjuːb/</code>)
  <a href="https://reddit.com/r/vuetube" alt="Reddit"><img src="https://img.shields.io/reddit/subreddit-subscribers/vuetube?label=r%2FVuetube&logo=reddit&logoColor=white"></img></a>
  <a href="https://t.me/VueTube" alt="Telegram"><img src="https://img.shields.io/endpoint?color=neon&style=flat&url=https%3A%2F%2Ftg.sumanjay.workers.dev%2Fvuetube"></img></a>
  <a href="https://discord.gg/7P8KJrdd5W" alt="Discord"><img src="https://img.shields.io/discord/946587366242533377?label=Discord&style=flat&logo=discord&logoColor=white"></img></a>
+  <a href="https://twitter.com/VueTubeApp" alt="Twitter"><img src="https://img.shields.io/twitter/follow/VueTubeApp?label=Follow&style=flat&logo=twitter"></img></a>
+
+## Features

-# Features
 - 🎨 Themes: Light, Dark, OLED, All the colors of the rainbow
 - 🖌️ Customizable UI: You can fully customize the accent color, and other parts of the UI to remove features that you don't use!
 - ⬆️ Auto Update: Be notified when an update is available & downgrade if you dislike it!
- 👁️ Tracking Protection: No telemetry is sent from your device to YouTube
+- 👁️ Tracking Protection: No telemetry is sent from your device by default
+
+## Install

-# Install
 To install please visit www.vuetube.app/install

-# Plans
+## Plans
+
 - 🔍 Advanced Search
 - 🗞️ Locally store watch history
 - 📺 A custom video player
@ -44,24 +48,31 @@ To install please visit www.vuetube.app/install
 - 🖼️ Picture in picture mode
 - and more!

-# Screenshots
+## Screenshots
+
 View on our website: [https://vuetube.app/info/screenshots](https://vuetube.app/info/screenshots)

-## Technologies used
+### Technologies used

 <a href="https://capacitorjs.com/solution/vue"><img src="https://cdn.discordapp.com/attachments/953538236716814356/955694368742834176/Capacitator-Dark.svg" height=40/></a> <a href="https://vuetifyjs.com/"><img src="https://cdn.discordapp.com/attachments/953538236716814356/955694368956760074/Vuetify-Dark.svg" height=40/></a> <a href="https://nuxtjs.org/"><img src="https://github.com/tandpfun/skill-icons/raw/main/icons/NuxtJS-Dark.svg" height=40/></a> <a href="https://vuejs.org/"><img src="https://github.com/tandpfun/skill-icons/raw/main/icons/VueJS-Dark.svg" height=40/></a> <a href="https://javascript.com/"><img src="https://github.com/tandpfun/skill-icons/raw/main/icons/JavaScript.svg" height=40/></a> <a href="https://java.com/"><img src="https://github.com/tandpfun/skill-icons/raw/main/icons/Java-Dark.svg" height=40/></a> <a href="https://gradle.com/"><img src="https://cdn.discordapp.com/attachments/810799100940255260/955691550560636958/Gradle.svg" height=40/></a> <a href="https://developer.apple.com/swift/"><img src="https://github.com/tandpfun/skill-icons/raw/main/icons/Swift.svg" height=40/></a>

-## Why am I doing this?
+### Why am I doing this?
+
 Well this has been thrown around on the Return Youtube Dislike discord server for quite some time, so I figured that I should probably take a crack at it!

-Also, YouTube Vanced just shut down
+### Want to contribute?

-## Want to contribute?
 Please read our website on how to do so: https://vuetube.app/contributing

-# Contributors
+## Contributors
+
 <a href="https://github.com/Frontesque/VueTube/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=Frontesque/VueTube" />
 </a>

 <sub>Made with [contrib.rocks](https://contrib.rocks). </sub>
+
+## Acknowledgements
+
+- Emojis by the [Twemoji team](https://twemoji.twitter.com/), Licensed under [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/)
+- VueTube Logo by [@afnzmn](https://github.com/afnzmn)