From ae6895a8fd6e0148d8519aa0c916f04eddabda6c Mon Sep 17 00:00:00 2001
From: Alex <56329333+404-Program-not-found@users.noreply.github.com>
Date: Thu, 14 Apr 2022 16:22:02 +1200
Subject: [PATCH 01/40] feat(WIP): comments

---
 .../CustomComponents/swipeableBottomSheet.vue | 35 ++++++++++++++++++-
 NUXT/layouts/default.vue                      |  3 +-
 NUXT/pages/watch.vue                          | 26 +++++++++-----
 3 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/NUXT/components/CustomComponents/swipeableBottomSheet.vue b/NUXT/components/CustomComponents/swipeableBottomSheet.vue
index 7dbd6d7..b9f552c 100644
--- a/NUXT/components/CustomComponents/swipeableBottomSheet.vue
+++ b/NUXT/components/CustomComponents/swipeableBottomSheet.vue
@@ -1,3 +1,36 @@
 <template>
-  <div class="swipeableBottomSheet" :open-state="state ? 1 : 0"></div>
+  <div class="swipeableBottomSheet">
+    <v-bottom-sheet v-model="sheetMode">
+      <v-sheet class="text-center" height="200px">
+        <v-btn class="mt-6" text color="red" @click="sheetMode = !sheetMode">
+          close
+        </v-btn>
+        <div class="py-3">
+          This is a bottom sheet using the controlled by v-model instead of
+          activator
+        </div>
+      </v-sheet>
+    </v-bottom-sheet>
+  </div>
 </template>
+
+<script>
+export default {
+  props: ["enableBottomSheet"],
+
+  computed: {
+    sheetMode: {
+      get() {
+        return this.enableBottomSheet;
+      },
+      set(val) {
+        this.$emit("input", val);
+      },
+    },
+  },
+};
+</script>
+
+
+<style>
+</style>
\ No newline at end of file
diff --git a/NUXT/layouts/default.vue b/NUXT/layouts/default.vue
index 0295566..e6054c6 100644
--- a/NUXT/layouts/default.vue
+++ b/NUXT/layouts/default.vue
@@ -39,7 +39,7 @@
                 text
                 tile
                 dense
-                class="searchButton text-left"
+                class="searchButton text-left text-none"
                 @click="youtubeSearch(item)"
               >
                 <v-icon class="mr-5">mdi-magnify</v-icon>
@@ -227,7 +227,6 @@ div {
 <style scoped>
 .searchButton {
   width: 100%;
-  text-transform: none !important;
   justify-content: left !important;
 }
 </style>
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 384e8e3..80ce577 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -132,12 +132,13 @@
       </div>
 
       <!-- Comments -->
-      <div
-        class="comment-container"
-        v-if="loaded && video.commentData"
-        @click="showComments = !showComments"
-      >
-        <v-card flat class="background comment-renderer">
+      <div class="comment-container" v-if="loaded && video.commentData">
+        <v-btn
+          class="background comment-renderer text-none"
+          @click="showComments = !showComments"
+          block
+          large
+        >
           <v-text class="comment-count keep-spaces">
             <template v-for="text in video.commentData.headerText.runs">
               <template v-if="text.bold">
@@ -147,11 +148,11 @@
             </template>
           </v-text>
           <v-icon>mdi-unfold-more-horizontal</v-icon>
-        </v-card>
+        </v-btn>
         <v-divider />
       </div>
 
-      <v-dialog
+      <!-- <v-dialog
         v-model="showComments"
         fullscreen
         hide-overlay
@@ -166,7 +167,12 @@
           </v-toolbar>
           <v-subheader>Hello World</v-subheader>
         </v-card>
-      </v-dialog>
+      </v-dialog> -->
+
+      <swipeable-bottom-sheet
+        :v-model="showComments"
+        style="z-index: 9999999"
+      ></swipeable-bottom-sheet>
 
       <!-- Related Videos -->
       <div class="loaders" v-if="!loaded">
@@ -188,6 +194,7 @@ import SlimVideoDescriptionRenderer from "~/components/UtilRenderers/slimVideoDe
 import ItemSectionRenderer from "~/components/SectionRenderers/itemSectionRenderer.vue";
 import vuetubePlayer from "~/components/Player/index.vue";
 import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
+import SwipeableBottomSheet from "../components/CustomComponents/swipeableBottomSheet.vue";
 
 export default {
   components: {
@@ -196,6 +203,7 @@ export default {
     SlimVideoDescriptionRenderer,
     vuetubePlayer,
     ItemSectionRenderer,
+    SwipeableBottomSheet,
   },
 
   data: function () {

From bbef87b5ee679b68dc315c7e2002847afa129de9 Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Mon, 18 Apr 2022 17:58:59 +1200
Subject: [PATCH 02/40] feat: basic custom bottom sheet

---
 .../CustomComponents/swipeableBottomSheet.vue | 36 ----------
 .../swipeableBottomSheet/_variables.scss      |  2 +
 .../swipeableBottomSheet/index.js             |  4 ++
 .../swipeableBottomSheet.js                   | 33 +++++++++
 .../swipeableBottomSheet.sass                 | 38 ++++++++++
 NUXT/pages/watch.vue                          | 71 +++++++++++++------
 NUXT/plugins/constants.js                     |  2 +-
 7 files changed, 127 insertions(+), 59 deletions(-)
 delete mode 100644 NUXT/components/CustomComponents/swipeableBottomSheet.vue
 create mode 100644 NUXT/components/ExtendedComponents/swipeableBottomSheet/_variables.scss
 create mode 100644 NUXT/components/ExtendedComponents/swipeableBottomSheet/index.js
 create mode 100644 NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.js
 create mode 100644 NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.sass

diff --git a/NUXT/components/CustomComponents/swipeableBottomSheet.vue b/NUXT/components/CustomComponents/swipeableBottomSheet.vue
deleted file mode 100644
index b9f552c..0000000
--- a/NUXT/components/CustomComponents/swipeableBottomSheet.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div class="swipeableBottomSheet">
-    <v-bottom-sheet v-model="sheetMode">
-      <v-sheet class="text-center" height="200px">
-        <v-btn class="mt-6" text color="red" @click="sheetMode = !sheetMode">
-          close
-        </v-btn>
-        <div class="py-3">
-          This is a bottom sheet using the controlled by v-model instead of
-          activator
-        </div>
-      </v-sheet>
-    </v-bottom-sheet>
-  </div>
-</template>
-
-<script>
-export default {
-  props: ["enableBottomSheet"],
-
-  computed: {
-    sheetMode: {
-      get() {
-        return this.enableBottomSheet;
-      },
-      set(val) {
-        this.$emit("input", val);
-      },
-    },
-  },
-};
-</script>
-
-
-<style>
-</style>
\ No newline at end of file
diff --git a/NUXT/components/ExtendedComponents/swipeableBottomSheet/_variables.scss b/NUXT/components/ExtendedComponents/swipeableBottomSheet/_variables.scss
new file mode 100644
index 0000000..96c8ce2
--- /dev/null
+++ b/NUXT/components/ExtendedComponents/swipeableBottomSheet/_variables.scss
@@ -0,0 +1,2 @@
+@import "~vuetify/src/styles/settings/_variables";
+$bottom-sheet-inset-width: 70% !default;
diff --git a/NUXT/components/ExtendedComponents/swipeableBottomSheet/index.js b/NUXT/components/ExtendedComponents/swipeableBottomSheet/index.js
new file mode 100644
index 0000000..e82b45a
--- /dev/null
+++ b/NUXT/components/ExtendedComponents/swipeableBottomSheet/index.js
@@ -0,0 +1,4 @@
+import swipeableBottomSheet from "./swipeableBottomSheet";
+
+export { swipeableBottomSheet };
+export default swipeableBottomSheet;
diff --git a/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.js b/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.js
new file mode 100644
index 0000000..1724842
--- /dev/null
+++ b/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.js
@@ -0,0 +1,33 @@
+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,
+      };
+    },
+  },
+});
diff --git a/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.sass b/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.sass
new file mode 100644
index 0000000..e974009
--- /dev/null
+++ b/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.sass
@@ -0,0 +1,38 @@
+@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%
+  
+.swipeable-bottom-sheet__content
+  position: sticky !important
+  bottom: 0
+  top: unset
+  overflow-y: auto
+  height: 100%
+
+
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 80ce577..6f8502f 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="background" id="watch-body">
-    <div class="player-container">
+    <div id="player-container">
       <!--   Stock Player   -->
       <videoPlayer
         :vid-src="vidSrc"
@@ -11,7 +11,13 @@
       <!--   VueTube Player V1   -->
       <vuetubePlayer :sources="sources" v-if="useBetaPlayer === 'true'" />
     </div>
-    <div class="content-container overflow-y-auto">
+    <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" flat>
         <v-card-title
           class="mt-2"
@@ -152,27 +158,47 @@
         <v-divider />
       </div>
 
-      <!-- <v-dialog
-        v-model="showComments"
-        fullscreen
-        hide-overlay
-        transition="dialog-bottom-transition"
-      >
-        <v-card>
-          <v-toolbar dark color="background">
-            <v-btn icon dark @click="showComments = false">
-              <v-icon>mdi-close</v-icon>
-            </v-btn>
-            <v-toolbar-title class="font-weight-bold">Comments</v-toolbar-title>
-          </v-toolbar>
-          <v-subheader>Hello World</v-subheader>
-        </v-card>
-      </v-dialog> -->
-
       <swipeable-bottom-sheet
+        v-model="showComments"
+        hide-overlay
+        persistent
+        no-click-animation
+        attach="#content-container"
+        v-if="loaded && video.commentData"
+      >
+        <v-card height="100%">
+          <div
+            class="toolbar-container"
+            style="position: sticky; inset: -1px; z-index: 2"
+          >
+            <v-toolbar color="background" flat>
+              <v-toolbar-title>
+                <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-toolbar-title>
+              <v-spacer></v-spacer>
+              <v-btn icon dark @click="showComments = !showComments">
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </v-toolbar>
+            <v-divider></v-divider>
+          </div>
+          <div scrollable>
+            <v-sheet color="background" v-for="i in 10" :key="i">
+              <v-skeleton-loader type="list-item-avatar-three-line, actions" />
+            </v-sheet>
+          </div>
+        </v-card>
+      </swipeable-bottom-sheet>
+
+      <!-- <swipeable-bottom-sheet
         :v-model="showComments"
         style="z-index: 9999999"
-      ></swipeable-bottom-sheet>
+      ></swipeable-bottom-sheet> -->
 
       <!-- Related Videos -->
       <div class="loaders" v-if="!loaded">
@@ -194,7 +220,7 @@ import SlimVideoDescriptionRenderer from "~/components/UtilRenderers/slimVideoDe
 import ItemSectionRenderer from "~/components/SectionRenderers/itemSectionRenderer.vue";
 import vuetubePlayer from "~/components/Player/index.vue";
 import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
-import SwipeableBottomSheet from "../components/CustomComponents/swipeableBottomSheet.vue";
+import SwipeableBottomSheet from "~/components/ExtendedComponents/swipeableBottomSheet";
 
 export default {
   components: {
@@ -390,8 +416,9 @@ export default {
   flex-direction: column;
 }
 
-.content-container {
+#content-container {
   height: 100%;
+  position: relative;
 }
 
 .vertical-button span.v-btn__content {
diff --git a/NUXT/plugins/constants.js b/NUXT/plugins/constants.js
index b45a2ac..67c14df 100644
--- a/NUXT/plugins/constants.js
+++ b/NUXT/plugins/constants.js
@@ -19,7 +19,7 @@ const ytApiVal = {
 const filesystem = {
   plugins: "vuetube/plugins",
   temp: "vuetube/temp",
-}
+};
 
 module.exports = {
   URLS: url,

From 291f96118641960a4d1c631e2f32f7e692d55cf6 Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Mon, 18 Apr 2022 18:14:25 +1200
Subject: [PATCH 03/40] docs: added Acknowledgements section to readme

---
 readme.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/readme.md b/readme.md
index 0bfdfde..3da8501 100644
--- a/readme.md
+++ b/readme.md
@@ -27,15 +27,18 @@ Pronounced View Tube (<code>/ˈvjuːˌtjuːb/</code>)
   <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>
 
 # 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
 
 # Install
+
 To install please visit www.vuetube.app/install
 
 # Plans
+
 - 🔍 Advanced Search
 - 🗞️ Locally store watch history
 - 📺 A custom video player
@@ -45,6 +48,7 @@ To install please visit www.vuetube.app/install
 - and more!
 
 # Screenshots
+
 View on our website: [https://vuetube.app/info/screenshots](https://vuetube.app/info/screenshots)
 
 ## Technologies used
@@ -52,16 +56,24 @@ View on our website: [https://vuetube.app/info/screenshots](https://vuetube.app/
 <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?
+
 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?
+
 Please read our website on how to do so: https://vuetube.app/contributing
 
 # 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)

From 3337a08095c095690aa33b9ec2bb820c01914c35 Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Wed, 20 Apr 2022 02:03:46 +1200
Subject: [PATCH 04/40] feat: comments fully functional

---
 .../Comments/commentMainRenderer.vue          | 87 ------------------
 .../Comments/commentThreadRenderer.vue        | 90 +++++++++++++++++++
 .../Comments/commentsHeaderRenderer.vue       | 59 ++++++++++++
 .../Comments/mainCommentRenderer.vue          | 88 ++++++++++++++++++
 .../swipeableBottomSheet.js                   |  1 +
 .../swipeableBottomSheet.sass                 | 14 ++-
 NUXT/components/dialogBase.vue                | 24 +++++
 NUXT/pages/watch.vue                          | 38 +++-----
 NUXT/plugins/innertube.js                     | 15 +++-
 NUXT/plugins/youtube.js                       | 26 ++++--
 10 files changed, 317 insertions(+), 125 deletions(-)
 delete mode 100644 NUXT/components/Comments/commentMainRenderer.vue
 create mode 100644 NUXT/components/Comments/commentsHeaderRenderer.vue
 create mode 100644 NUXT/components/Comments/mainCommentRenderer.vue
 create mode 100644 NUXT/components/dialogBase.vue

diff --git a/NUXT/components/Comments/commentMainRenderer.vue b/NUXT/components/Comments/commentMainRenderer.vue
deleted file mode 100644
index c0b67f3..0000000
--- a/NUXT/components/Comments/commentMainRenderer.vue
+++ /dev/null
@@ -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>
diff --git a/NUXT/components/Comments/commentThreadRenderer.vue b/NUXT/components/Comments/commentThreadRenderer.vue
index e69de29..a9d8d44 100644
--- a/NUXT/components/Comments/commentThreadRenderer.vue
+++ b/NUXT/components/Comments/commentThreadRenderer.vue
@@ -0,0 +1,90 @@
+<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">
+        <span class="font-weight-bold subtitle-2 pr-1">
+          {{ commentRenderer.authorText.runs[0].text }}
+        </span>
+        <span
+          :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+          class="background--text subtitle-2"
+        >
+          {{ commentRenderer.publishedTimeText.runs[0].text }}
+        </span>
+      </div>
+      <p class="comment-text">
+        <template v-for="text in commentRenderer.contentText.runs">{{
+          text.text
+        }}</template>
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.entry {
+  width: 100%; /* Prevent Loading Weirdness */
+}
+
+.avatar-thumbnail {
+  margin-top: 0.5rem;
+  margin-right: 0.5rem;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+}
+
+.comment-thread {
+  display: flex;
+  flex-direction: row;
+  flex-basis: auto;
+  width: 100%;
+}
+
+.comment-content {
+  display: flex;
+  flex-direction: column;
+  flex-basis: auto;
+}
+
+.comment-content--header {
+  display: flex;
+}
+
+.comment-text {
+  white-space: pre-line;
+}
+</style>
+
+<script>
+export default {
+  props: ["comment"],
+
+  data() {
+    return {
+      commentRenderer: null,
+    };
+  },
+
+  mounted() {
+    this.commentRenderer = this.comment?.comment?.commentRenderer;
+  },
+};
+</script>
diff --git a/NUXT/components/Comments/commentsHeaderRenderer.vue b/NUXT/components/Comments/commentsHeaderRenderer.vue
new file mode 100644
index 0000000..9c31d50
--- /dev/null
+++ b/NUXT/components/Comments/commentsHeaderRenderer.vue
@@ -0,0 +1,59 @@
+<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>
+    <v-text-field disabled>
+      {{
+        boxRenderer.placeholderText.runs[
+          boxRenderer.placeholderText.runs.length - 1
+        ].text
+      }}
+    </v-text-field>
+  </div>
+</template>
+
+<style scoped>
+.entry {
+  width: 100%; /* Prevent Loading Weirdness */
+}
+
+.avatar-thumbnail {
+  margin-top: 0.5rem;
+  margin-right: 0.5rem;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+}
+
+.comment-header {
+  display: flex;
+  flex-direction: row;
+  flex-basis: auto;
+  padding: 10px;
+  width: 100%;
+}
+</style>
+
+<script>
+export default {
+  props: ["comment"],
+
+  data() {
+    return {
+      boxRenderer: null,
+    };
+  },
+
+  mounted() {
+    this.boxRenderer = this.comment?.createRenderer?.commentSimpleboxRenderer;
+  },
+};
+</script>
diff --git a/NUXT/components/Comments/mainCommentRenderer.vue b/NUXT/components/Comments/mainCommentRenderer.vue
new file mode 100644
index 0000000..9689c98
--- /dev/null
+++ b/NUXT/components/Comments/mainCommentRenderer.vue
@@ -0,0 +1,88 @@
+<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 dark @click="$emit('changeState', false)">
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+    </template>
+
+    <div class="commentList">
+      <template v-for="commentItems in comments">
+        <v-list-item
+          v-for="(comment, index) in commentItems.reloadContinuationItemsCommand
+            .continuationItems"
+          :key="index"
+        >
+          <component
+            v-if="getComponents()[Object.keys(comment)[0]]"
+            :is="Object.keys(comment)[0]"
+            :comment="comment[Object.keys(comment)[0]]"
+          ></component>
+        </v-list-item>
+      </template>
+    </div>
+    <div class="loading" v-if="loading">
+      <v-sheet color="background" v-for="i in !comments ? 10 : 3" :key="i">
+        <v-skeleton-loader type="list-item-avatar-three-line, actions" />
+      </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";
+
+export default {
+  props: ["continuation", "commentData", "showComments"],
+
+  model: {
+    prop: "showComments",
+    event: "changeState",
+  },
+
+  components: {
+    dialogBase,
+    commentsHeaderRenderer,
+    commentThreadRenderer,
+  },
+
+  data: () => ({
+    loading: true,
+    comments: [],
+  }),
+
+  mounted() {
+    this.paginate();
+  },
+
+  methods: {
+    getComponents() {
+      return this.$options.components;
+    },
+
+    paginate() {
+      this.loading = true;
+      this.$youtube
+        .getContinuation(this.continuation, "next", "web")
+        .then((result) => {
+          this.comments = this.comments.concat(
+            result.data.onResponseReceivedEndpoints
+          );
+          console.log("comments", this.comments);
+          if (this.comments) this.loading = false;
+        });
+    },
+  },
+};
+</script>
diff --git a/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.js b/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.js
index 1724842..a4fc272 100644
--- a/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.js
+++ b/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.js
@@ -27,6 +27,7 @@ export default VDialog.extend({
     contentClasses() {
       return {
         "swipeable-bottom-sheet__content": true,
+        "swipeable-bottom-sheet__content--active": this.isActive,
       };
     },
   },
diff --git a/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.sass b/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.sass
index e974009..24c597d 100644
--- a/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.sass
+++ b/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.sass
@@ -27,12 +27,18 @@
     
     &.v-dialog:not(.v-dialog--fullscreen)
       max-height: 100%
+      height: 100%
   
 .swipeable-bottom-sheet__content
-  position: sticky !important
-  bottom: 0
-  top: unset
-  overflow-y: auto
+  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
 
 
diff --git a/NUXT/components/dialogBase.vue b/NUXT/components/dialogBase.vue
new file mode 100644
index 0000000..de73f25
--- /dev/null
+++ 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>
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 6f8502f..583bf82 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -166,33 +166,11 @@
         attach="#content-container"
         v-if="loaded && video.commentData"
       >
-        <v-card height="100%">
-          <div
-            class="toolbar-container"
-            style="position: sticky; inset: -1px; z-index: 2"
-          >
-            <v-toolbar color="background" flat>
-              <v-toolbar-title>
-                <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-toolbar-title>
-              <v-spacer></v-spacer>
-              <v-btn icon dark @click="showComments = !showComments">
-                <v-icon>mdi-close</v-icon>
-              </v-btn>
-            </v-toolbar>
-            <v-divider></v-divider>
-          </div>
-          <div scrollable>
-            <v-sheet color="background" v-for="i in 10" :key="i">
-              <v-skeleton-loader type="list-item-avatar-three-line, actions" />
-            </v-sheet>
-          </div>
-        </v-card>
+        <mainCommentRenderer
+          :continuation="video.commentContinuation"
+          :commentData="video.commentData"
+          v-model="showComments"
+        ></mainCommentRenderer>
       </swipeable-bottom-sheet>
 
       <!-- <swipeable-bottom-sheet
@@ -220,6 +198,7 @@ import SlimVideoDescriptionRenderer from "~/components/UtilRenderers/slimVideoDe
 import ItemSectionRenderer from "~/components/SectionRenderers/itemSectionRenderer.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";
 
 export default {
@@ -230,6 +209,7 @@ export default {
     vuetubePlayer,
     ItemSectionRenderer,
     SwipeableBottomSheet,
+    mainCommentRenderer,
   },
 
   data: function () {
@@ -254,13 +234,15 @@ export default {
       },
     },
   },
+
   mounted() {
     this.mountedInit();
   },
 
-  destroyed() {
+  beforeDestroy() {
     clearInterval(this.interval);
   },
+
   methods: {
     getVideo() {
       this.loaded = false;
diff --git a/NUXT/plugins/innertube.js b/NUXT/plugins/innertube.js
index b7a0706..f36c06e 100644
--- 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;
@@ -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;
diff --git a/NUXT/plugins/youtube.js b/NUXT/plugins/youtube.js
index 0d16391..fc6e2a3 100644
--- 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,
+            clientVersion: constants.YT_API_VALUES.VERSION_WEB,
+          },
+        },
+      };
+    }
+    return await InnertubeAPI.getContinuationsAsync(
+      continuation,
+      endpoint,
+      contextAdditional
+    );
+  },
+
   async search(query) {
     try {
       const response = await InnertubeAPI.getSearchAsync(query);

From 5bbd37ffbf02cdb0077b3490260387987afefef1 Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Thu, 21 Apr 2022 00:50:00 +1200
Subject: [PATCH 05/40] feat: completed basic comment functions

---
 .../Comments/commentThreadRenderer.vue        | 67 ++++++++-----
 .../Comments/commentsHeaderRenderer.vue       | 16 +--
 .../Comments/mainCommentRenderer.vue          | 77 +++++++++++----
 .../UtilRenderers/collapsableText.vue         | 99 +++++++++++++++++++
 NUXT/layouts/default.vue                      |  1 +
 5 files changed, 207 insertions(+), 53 deletions(-)
 create mode 100644 NUXT/components/UtilRenderers/collapsableText.vue

diff --git a/NUXT/components/Comments/commentThreadRenderer.vue b/NUXT/components/Comments/commentThreadRenderer.vue
index a9d8d44..1bf93f8 100644
--- a/NUXT/components/Comments/commentThreadRenderer.vue
+++ b/NUXT/components/Comments/commentThreadRenderer.vue
@@ -19,62 +19,77 @@
     </a>
     <div class="comment-content">
       <div class="comment-content--header">
-        <span class="font-weight-bold subtitle-2 pr-1">
-          {{ commentRenderer.authorText.runs[0].text }}
-        </span>
+        <h3 class="author-name--wrapper">
+          <span class="font-weight-bold subtitle-2 pr-1 author-name" emoji>
+            {{ commentRenderer.authorText.runs[0].text }}
+          </span>
+        </h3>
         <span
           :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-          class="background--text subtitle-2"
+          class="background--text subtitle-2 comment-timestamp"
         >
           {{ commentRenderer.publishedTimeText.runs[0].text }}
         </span>
       </div>
-      <p class="comment-text">
+      <collapsable-text :lines="4">
         <template v-for="text in commentRenderer.contentText.runs">{{
           text.text
         }}</template>
-      </p>
+      </collapsable-text>
     </div>
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .entry {
   width: 100%; /* Prevent Loading Weirdness */
 }
 
-.avatar-thumbnail {
-  margin-top: 0.5rem;
-  margin-right: 0.5rem;
-  border-radius: 50%;
-  width: 48px;
-  height: 48px;
-}
-
 .comment-thread {
   display: flex;
   flex-direction: row;
   flex-basis: auto;
   width: 100%;
-}
+  padding: 10px 0;
 
-.comment-content {
-  display: flex;
-  flex-direction: column;
-  flex-basis: auto;
-}
+  .avatar-thumbnail {
+    margin-right: 0.5rem;
+    margin-top: 0.5rem;
+    border-radius: 50%;
+    width: 48px;
+    height: 48px;
+  }
 
-.comment-content--header {
-  display: flex;
-}
+  .comment-content {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    flex-basis: auto;
+    flex-grow: 1;
 
-.comment-text {
-  white-space: pre-line;
+    .comment-content--header {
+      display: flex;
+      align-items: baseline;
+
+      .author-name--wrapper {
+        min-width: 0;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+
+      .comment-timestamp {
+        white-space: nowrap;
+      }
+    }
+  }
 }
 </style>
 
 <script>
+import collapsableText from "~/components/UtilRenderers/collapsableText.vue";
 export default {
+  components: { collapsableText },
   props: ["comment"],
 
   data() {
diff --git a/NUXT/components/Comments/commentsHeaderRenderer.vue b/NUXT/components/Comments/commentsHeaderRenderer.vue
index 9c31d50..433f181 100644
--- a/NUXT/components/Comments/commentsHeaderRenderer.vue
+++ b/NUXT/components/Comments/commentsHeaderRenderer.vue
@@ -10,13 +10,15 @@
         "
       />
     </div>
-    <v-text-field disabled>
-      {{
+    <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
-      }}
-    </v-text-field>
+      "
+    ></div>
   </div>
 </template>
 
@@ -26,8 +28,7 @@
 }
 
 .avatar-thumbnail {
-  margin-top: 0.5rem;
-  margin-right: 0.5rem;
+  margin-right: 1rem;
   border-radius: 50%;
   width: 48px;
   height: 48px;
@@ -37,7 +38,8 @@
   display: flex;
   flex-direction: row;
   flex-basis: auto;
-  padding: 10px;
+  align-items: center;
+  padding: 10px 0;
   width: 100%;
 }
 </style>
diff --git a/NUXT/components/Comments/mainCommentRenderer.vue b/NUXT/components/Comments/mainCommentRenderer.vue
index 9689c98..4b0e800 100644
--- a/NUXT/components/Comments/mainCommentRenderer.vue
+++ b/NUXT/components/Comments/mainCommentRenderer.vue
@@ -15,24 +15,27 @@
       </v-btn>
     </template>
 
-    <div class="commentList">
-      <template v-for="commentItems in comments">
-        <v-list-item
-          v-for="(comment, index) in commentItems.reloadContinuationItemsCommand
-            .continuationItems"
-          :key="index"
-        >
-          <component
-            v-if="getComponents()[Object.keys(comment)[0]]"
-            :is="Object.keys(comment)[0]"
-            :comment="comment[Object.keys(comment)[0]]"
-          ></component>
-        </v-list-item>
-      </template>
-    </div>
+    <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 ? 10 : 3" :key="i">
-        <v-skeleton-loader type="list-item-avatar-three-line, actions" />
+      <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>
@@ -42,6 +45,7 @@
 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: ["continuation", "commentData", "showComments"],
@@ -55,6 +59,7 @@ export default {
     dialogBase,
     commentsHeaderRenderer,
     commentThreadRenderer,
+    continuationItemRenderer,
   },
 
   data: () => ({
@@ -73,16 +78,48 @@ export default {
 
     paginate() {
       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) => {
-          this.comments = this.comments.concat(
-            result.data.onResponseReceivedEndpoints
-          );
+          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>
diff --git a/NUXT/components/UtilRenderers/collapsableText.vue b/NUXT/components/UtilRenderers/collapsableText.vue
new file mode 100644
index 0000000..7b2be6c
--- /dev/null
+++ b/NUXT/components/UtilRenderers/collapsableText.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="collapsable-text">
+    <div
+      class="text-content"
+      ref="textContent"
+      :class="expanded ? 'expanded' : 'collapsed'"
+    >
+      <slot></slot>
+    </div>
+    <a
+      class="toggle-collapse"
+      @click="expanded = !expanded"
+      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>
diff --git a/NUXT/layouts/default.vue b/NUXT/layouts/default.vue
index 10c2776..fa2ed08 100644
--- a/NUXT/layouts/default.vue
+++ b/NUXT/layouts/default.vue
@@ -222,6 +222,7 @@ div {
   width: 1em;
   height: 1em;
   vertical-align: -0.1em;
+  margin: 0 2px;
 }
 </style>
 

From c613efb7cbee99d83dd671c3bd2e76fb3b9aad57 Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Thu, 21 Apr 2022 13:58:21 +1200
Subject: [PATCH 06/40] fix: loading forever if user reaches end of comments

---
 .../Comments/mainCommentRenderer.vue          | 64 ++++++++++---------
 1 file changed, 33 insertions(+), 31 deletions(-)

diff --git a/NUXT/components/Comments/mainCommentRenderer.vue b/NUXT/components/Comments/mainCommentRenderer.vue
index 4b0e800..3d1d7ee 100644
--- a/NUXT/components/Comments/mainCommentRenderer.vue
+++ b/NUXT/components/Comments/mainCommentRenderer.vue
@@ -77,36 +77,38 @@ export default {
     },
 
     paginate() {
-      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;
-        });
+      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) {
@@ -115,7 +117,7 @@ export default {
       );
 
       const newContinuation =
-        continuationItemParent.continuationItemRenderer.continuationEndpoint
+        continuationItemParent?.continuationItemRenderer.continuationEndpoint
           .continuationCommand.token;
 
       return newContinuation;

From e32ce215e969ca4ccb3c1105c75ac53180248e07 Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Thu, 21 Apr 2022 14:38:22 +1200
Subject: [PATCH 07/40] feat: comments rendering urls and membership emojis

---
 .../Comments/commentThreadRenderer.vue        |  9 ++--
 .../UtilRenderers/YtTextFormatter.vue         | 48 +++++++++++++++++++
 .../slimVideoDescriptionRenderer.vue          | 29 ++++-------
 3 files changed, 61 insertions(+), 25 deletions(-)
 create mode 100644 NUXT/components/UtilRenderers/YtTextFormatter.vue

diff --git a/NUXT/components/Comments/commentThreadRenderer.vue b/NUXT/components/Comments/commentThreadRenderer.vue
index 1bf93f8..acbd99d 100644
--- a/NUXT/components/Comments/commentThreadRenderer.vue
+++ b/NUXT/components/Comments/commentThreadRenderer.vue
@@ -32,9 +32,8 @@
         </span>
       </div>
       <collapsable-text :lines="4">
-        <template v-for="text in commentRenderer.contentText.runs">{{
-          text.text
-        }}</template>
+        <yt-text-formatter :textRuns="commentRenderer.contentText.runs">
+        </yt-text-formatter>
       </collapsable-text>
     </div>
   </div>
@@ -88,8 +87,10 @@
 
 <script>
 import collapsableText from "~/components/UtilRenderers/collapsableText.vue";
+import YtTextFormatter from "~/components/UtilRenderers/YtTextFormatter.vue";
+
 export default {
-  components: { collapsableText },
+  components: { collapsableText, YtTextFormatter },
   props: ["comment"],
 
   data() {
diff --git a/NUXT/components/UtilRenderers/YtTextFormatter.vue b/NUXT/components/UtilRenderers/YtTextFormatter.vue
new file mode 100644
index 0000000..b7989ff
--- /dev/null
+++ b/NUXT/components/UtilRenderers/YtTextFormatter.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="yt-text-formatter" v-emoji>
+    <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">
+        <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> {{ text.text }} </template>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    textRuns: {
+      type: Array,
+      default: () => [],
+    },
+  },
+};
+</script>
diff --git a/NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue b/NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue
index a6b9bb9..29fa64f 100644
--- 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>
 
@@ -32,9 +13,15 @@
 
 <script>
 import { Browser } from "@capacitor/browser";
+import YtTextFormatter from "~/components/UtilRenderers/YtTextFormatter.vue";
+
 export default {
   props: ["render"],
 
+  components: {
+    YtTextFormatter,
+  },
+
   methods: {
     async openExternal(url) {
       await Browser.open({ url: url });

From 0ed974e5779891093c23ac9df735cc56b10e3bf6 Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Thu, 21 Apr 2022 16:20:46 +1200
Subject: [PATCH 08/40] fix: comment pagination breaks when reopened

---
 NUXT/components/Comments/mainCommentRenderer.vue | 4 +++-
 NUXT/pages/watch.vue                             | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/NUXT/components/Comments/mainCommentRenderer.vue b/NUXT/components/Comments/mainCommentRenderer.vue
index 3d1d7ee..6a00117 100644
--- a/NUXT/components/Comments/mainCommentRenderer.vue
+++ b/NUXT/components/Comments/mainCommentRenderer.vue
@@ -48,7 +48,7 @@ import commentThreadRenderer from "~/components/Comments/commentThreadRenderer.v
 import continuationItemRenderer from "~/components/observer.vue";
 
 export default {
-  props: ["continuation", "commentData", "showComments"],
+  props: ["defaultContinuation", "commentData", "showComments"],
 
   model: {
     prop: "showComments",
@@ -65,9 +65,11 @@ export default {
   data: () => ({
     loading: true,
     comments: [],
+    continuation: null,
   }),
 
   mounted() {
+    if (!this.continuation) this.continuation = this.defaultContinuation;
     this.paginate();
   },
 
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index a289cb9..050fe89 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -172,7 +172,7 @@
       v-if="loaded && video.commentData"
     >
       <mainCommentRenderer
-        :continuation="video.commentContinuation"
+        :defaultContinuation="video.commentContinuation"
         :commentData="video.commentData"
         v-model="showComments"
       ></mainCommentRenderer>

From 2ad58fbed4e95b51e79b5dd34f0c5e4eb75ac248 Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Thu, 21 Apr 2022 17:29:50 +1200
Subject: [PATCH 09/40] refactor!: switched comments to be using the desktop
 web api

---
 NUXT/components/Comments/commentThreadRenderer.vue | 2 +-
 NUXT/plugins/constants.js                          | 3 ++-
 NUXT/plugins/innertube.js                          | 2 +-
 NUXT/plugins/youtube.js                            | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/NUXT/components/Comments/commentThreadRenderer.vue b/NUXT/components/Comments/commentThreadRenderer.vue
index acbd99d..4ee4aaa 100644
--- a/NUXT/components/Comments/commentThreadRenderer.vue
+++ b/NUXT/components/Comments/commentThreadRenderer.vue
@@ -21,7 +21,7 @@
       <div class="comment-content--header">
         <h3 class="author-name--wrapper">
           <span class="font-weight-bold subtitle-2 pr-1 author-name" emoji>
-            {{ commentRenderer.authorText.runs[0].text }}
+            {{ commentRenderer.authorText.simpleText }}
           </span>
         </h3>
         <span
diff --git a/NUXT/plugins/constants.js b/NUXT/plugins/constants.js
index 67c14df..74c188f 100644
--- a/NUXT/plugins/constants.js
+++ b/NUXT/plugins/constants.js
@@ -13,7 +13,8 @@ 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 = {
diff --git a/NUXT/plugins/innertube.js b/NUXT/plugins/innertube.js
index f36c06e..2fa313b 100644
--- a/NUXT/plugins/innertube.js
+++ b/NUXT/plugins/innertube.js
@@ -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,
             },
           },
diff --git a/NUXT/plugins/youtube.js b/NUXT/plugins/youtube.js
index fc6e2a3..0b784e2 100644
--- a/NUXT/plugins/youtube.js
+++ b/NUXT/plugins/youtube.js
@@ -152,7 +152,7 @@ const innertubeModule = {
         ...contextAdditional,
         ...{
           client: {
-            clientName: constants.YT_API_VALUES.CLIENT_WEB,
+            clientName: constants.YT_API_VALUES.CLIENT_WEB_D,
             clientVersion: constants.YT_API_VALUES.VERSION_WEB,
           },
         },

From e31b06a5b795ad2792efd59be5da0b07a58bf985 Mon Sep 17 00:00:00 2001
From: Affan Zaman <47723802+afnzmn@users.noreply.github.com>
Date: Thu, 21 Apr 2022 02:40:10 -0400
Subject: [PATCH 10/40] Readjusted headers weights

Uh I messed it up last time and its been bothering me since
---
 readme.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/readme.md b/readme.md
index 3da8501..1847d0f 100644
--- a/readme.md
+++ b/readme.md
@@ -26,18 +26,18 @@ Pronounced View Tube (<code>/ˈvjuːˌtjuːb/</code>)
   <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>
 
-# 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
 
-# Install
+## Install
 
 To install please visit www.vuetube.app/install
 
-# Plans
+## Plans
 
 - 🔍 Advanced Search
 - 🗞️ Locally store watch history
@@ -47,25 +47,25 @@ 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" />
@@ -73,7 +73,7 @@ Please read our website on how to do so: https://vuetube.app/contributing
 
 <sub>Made with [contrib.rocks](https://contrib.rocks). </sub>
 
-# Acknowledgements
+## 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)

From 886b5f893d4e1e07dbab1c1298ac3bb6b423c78a Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Thu, 21 Apr 2022 21:22:40 +1200
Subject: [PATCH 11/40] feat: membership and verified comment badges

---
 .../Comments/authorCommentBadgeRenderer.vue   | 32 ++++++++++
 .../Comments/commentThreadRenderer.vue        | 62 ++++++++++++++-----
 .../Comments/mainCommentRenderer.vue          |  2 +-
 .../Comments/sponsorCommentBadgeRenderer.vue  | 43 +++++++++++++
 .../UtilRenderers/YtTextFormatter.vue         |  2 +-
 5 files changed, 124 insertions(+), 17 deletions(-)
 create mode 100644 NUXT/components/Comments/authorCommentBadgeRenderer.vue
 create mode 100644 NUXT/components/Comments/sponsorCommentBadgeRenderer.vue

diff --git a/NUXT/components/Comments/authorCommentBadgeRenderer.vue b/NUXT/components/Comments/authorCommentBadgeRenderer.vue
new file mode 100644
index 0000000..58e0549
--- /dev/null
+++ b/NUXT/components/Comments/authorCommentBadgeRenderer.vue
@@ -0,0 +1,32 @@
+<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" 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",
+      OFFICIAL_ARTIST_BADGE: "mdi-music-note",
+    },
+  }),
+};
+</script>
diff --git a/NUXT/components/Comments/commentThreadRenderer.vue b/NUXT/components/Comments/commentThreadRenderer.vue
index 4ee4aaa..0cea757 100644
--- a/NUXT/components/Comments/commentThreadRenderer.vue
+++ b/NUXT/components/Comments/commentThreadRenderer.vue
@@ -18,15 +18,35 @@
       />
     </a>
     <div class="comment-content">
-      <div class="comment-content--header">
-        <h3 class="author-name--wrapper">
-          <span class="font-weight-bold subtitle-2 pr-1 author-name" emoji>
-            {{ commentRenderer.authorText.simpleText }}
-          </span>
-        </h3>
+      <div class="comment-content--header subtitle-2">
+        <div class="author-badge-name pr-1">
+          <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 subtitle-2 comment-timestamp"
+          class="background--text comment-timestamp"
         >
           {{ commentRenderer.publishedTimeText.runs[0].text }}
         </span>
@@ -70,27 +90,39 @@
       display: flex;
       align-items: baseline;
 
-      .author-name--wrapper {
-        min-width: 0;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-      }
-
       .comment-timestamp {
         white-space: nowrap;
       }
     }
   }
 }
+
+.author-badge-name {
+  display: flex;
+  flex-direction: row;
+
+  .author-name--wrapper {
+    min-width: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}
 </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 },
+  components: {
+    collapsableText,
+    YtTextFormatter,
+    AuthorCommentBadgeRenderer,
+    SponsorCommentBadgeRenderer,
+  },
   props: ["comment"],
 
   data() {
diff --git a/NUXT/components/Comments/mainCommentRenderer.vue b/NUXT/components/Comments/mainCommentRenderer.vue
index 6a00117..f4d282d 100644
--- a/NUXT/components/Comments/mainCommentRenderer.vue
+++ b/NUXT/components/Comments/mainCommentRenderer.vue
@@ -10,7 +10,7 @@
         </template>
       </v-toolbar-title>
       <v-spacer></v-spacer>
-      <v-btn icon dark @click="$emit('changeState', false)">
+      <v-btn icon @click="$emit('changeState', false)">
         <v-icon>mdi-close</v-icon>
       </v-btn>
     </template>
diff --git a/NUXT/components/Comments/sponsorCommentBadgeRenderer.vue b/NUXT/components/Comments/sponsorCommentBadgeRenderer.vue
new file mode 100644
index 0000000..7c20d10
--- /dev/null
+++ 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>
diff --git a/NUXT/components/UtilRenderers/YtTextFormatter.vue b/NUXT/components/UtilRenderers/YtTextFormatter.vue
index b7989ff..3b2b988 100644
--- a/NUXT/components/UtilRenderers/YtTextFormatter.vue
+++ b/NUXT/components/UtilRenderers/YtTextFormatter.vue
@@ -19,7 +19,7 @@
           >{{ text.text }}</a
         >
       </template>
-      <template v-else-if="text.emoji">
+      <template v-else-if="text.emoji && text.emoji.isCustomEmoji">
         <img
           :src="
             text.emoji.image.thumbnails[text.emoji.image.thumbnails.length - 1]

From ec7f8a9b85f351e7ca1f3ed33d83e2faf808356d Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Thu, 21 Apr 2022 22:51:49 +1200
Subject: [PATCH 12/40] feat: owner badge in comments

---
 .../Comments/authorCommentBadgeRenderer.vue     | 11 ++++++++++-
 .../Comments/commentThreadRenderer.vue          | 17 ++++++++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/NUXT/components/Comments/authorCommentBadgeRenderer.vue b/NUXT/components/Comments/authorCommentBadgeRenderer.vue
index 58e0549..91c3848 100644
--- a/NUXT/components/Comments/authorCommentBadgeRenderer.vue
+++ b/NUXT/components/Comments/authorCommentBadgeRenderer.vue
@@ -5,7 +5,7 @@
   >
     <v-tooltip top>
       <template v-slot:activator="{ on, attrs }">
-        <v-icon v-bind="attrs" v-on="on" small>{{
+        <v-icon v-bind="attrs" v-on="on" class="author-badge" small>{{
           iconTypeMap[metadata.icon.iconType]
         }}</v-icon>
       </template>
@@ -25,8 +25,17 @@ export 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>
diff --git a/NUXT/components/Comments/commentThreadRenderer.vue b/NUXT/components/Comments/commentThreadRenderer.vue
index 0cea757..7b8c37c 100644
--- a/NUXT/components/Comments/commentThreadRenderer.vue
+++ b/NUXT/components/Comments/commentThreadRenderer.vue
@@ -19,7 +19,10 @@
     </a>
     <div class="comment-content">
       <div class="comment-content--header subtitle-2">
-        <div class="author-badge-name pr-1">
+        <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 }}
@@ -100,6 +103,7 @@
 .author-badge-name {
   display: flex;
   flex-direction: row;
+  min-width: 0;
 
   .author-name--wrapper {
     min-width: 0;
@@ -108,6 +112,17 @@
     overflow: hidden;
   }
 }
+
+.owner {
+  padding: 0 0.6em;
+  background-color: #888888;
+  color: #fff;
+  border-radius: 1em;
+
+  &::v-deep .author-badge {
+    color: #fff;
+  }
+}
 </style>
 
 <script>

From 52d8ffde6c7ced97291611830427308e0030b70f Mon Sep 17 00:00:00 2001
From: Alex <56329333+404-Program-not-found@users.noreply.github.com>
Date: Thu, 21 Apr 2022 22:56:27 +1200
Subject: [PATCH 13/40] added the dev branch to auto builds

---
 .github/workflows/ci.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 6ab7744..14b2b3b 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+      - dev
 
 env:
   NODE_VERSION: 16

From 6610f5048a05c51c9acdb0025b31850a10750ef6 Mon Sep 17 00:00:00 2001
From: Alex <56329333+404-Program-not-found@users.noreply.github.com>
Date: Thu, 21 Apr 2022 23:07:14 +1200
Subject: [PATCH 14/40] Update nightly-release.yml

---
 .github/workflows/nightly-release.yml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/nightly-release.yml b/.github/workflows/nightly-release.yml
index fadf9fa..ae28077 100644
--- 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:

From a075c4167aaa610100a432789f9d13377ec3fb9a Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Fri, 22 Apr 2022 16:38:21 +1200
Subject: [PATCH 15/40] fix: URL loading broke

---
 .../Comments/commentThreadRenderer.vue        | 30 ++++++++++++++++++-
 .../UtilRenderers/YtTextFormatter.vue         | 15 ++++++++--
 .../slimVideoDescriptionRenderer.vue          | 10 -------
 3 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/NUXT/components/Comments/commentThreadRenderer.vue b/NUXT/components/Comments/commentThreadRenderer.vue
index 7b8c37c..08ca44e 100644
--- a/NUXT/components/Comments/commentThreadRenderer.vue
+++ b/NUXT/components/Comments/commentThreadRenderer.vue
@@ -58,6 +58,29 @@
         <yt-text-formatter :textRuns="commentRenderer.contentText.runs">
         </yt-text-formatter>
       </collapsable-text>
+      <div class="toolbar">
+        <div class="toolbar--item">
+          <v-btn class="toolbar--button like" disabled icon x-small>
+            <v-icon small left>mdi-thumb-up</v-icon>
+          </v-btn>
+        </div>
+        <div class="toolbar--item">
+          <span
+            v-text="commentRenderer.voteCount.simpleText"
+            class="like-count mr-1 subtitle-2"
+          ></span>
+        </div>
+        <div class="toolbar--item">
+          <v-btn class="toolbar--button dislike" disabled icon x-small>
+            <v-icon small>mdi-thumb-down</v-icon>
+          </v-btn>
+        </div>
+        <div class="toolbar--item">
+          <v-btn class="toolbar--button reply" disabled icon x-small>
+            <v-icon small>mdi-comment</v-icon>
+          </v-btn>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -76,7 +99,6 @@
 
   .avatar-thumbnail {
     margin-right: 0.5rem;
-    margin-top: 0.5rem;
     border-radius: 50%;
     width: 48px;
     height: 48px;
@@ -100,6 +122,12 @@
   }
 }
 
+.toolbar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 .author-badge-name {
   display: flex;
   flex-direction: row;
diff --git a/NUXT/components/UtilRenderers/YtTextFormatter.vue b/NUXT/components/UtilRenderers/YtTextFormatter.vue
index 3b2b988..29c81d5 100644
--- a/NUXT/components/UtilRenderers/YtTextFormatter.vue
+++ b/NUXT/components/UtilRenderers/YtTextFormatter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="yt-text-formatter" v-emoji>
+  <div class="yt-text-formatter">
     <template v-for="(text, index) in textRuns">
       <template v-if="$rendererUtils.checkInternal(text)">
         <a
@@ -31,12 +31,15 @@
           draggable="false"
         />
       </template>
-      <template v-else> {{ text.text }} </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: {
@@ -44,5 +47,13 @@ export default {
       default: () => [],
     },
   },
+  methods: {
+    async openExternal(url) {
+      await Browser.open({ url: url });
+    },
+    async openInternal(url) {
+      await this.$router.push(url);
+    },
+  },
 };
 </script>
diff --git a/NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue b/NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue
index 29fa64f..32c7bc9 100644
--- a/NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue
+++ b/NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue
@@ -12,7 +12,6 @@
 </style>
 
 <script>
-import { Browser } from "@capacitor/browser";
 import YtTextFormatter from "~/components/UtilRenderers/YtTextFormatter.vue";
 
 export default {
@@ -21,14 +20,5 @@ export default {
   components: {
     YtTextFormatter,
   },
-
-  methods: {
-    async openExternal(url) {
-      await Browser.open({ url: url });
-    },
-    async openInternal(url) {
-      await this.$router.push(url);
-    },
-  },
 };
 </script>

From 6d47e9712138afe7091e9a8887fc6596e51d399a Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Fri, 22 Apr 2022 21:06:31 +1200
Subject: [PATCH 16/40] fix: small stylistic changes on the comments

---
 .../Comments/commentThreadRenderer.vue        | 55 +++++++++++++------
 .../UtilRenderers/collapsableText.vue         |  3 +-
 NUXT/pages/watch.vue                          |  2 +-
 3 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/NUXT/components/Comments/commentThreadRenderer.vue b/NUXT/components/Comments/commentThreadRenderer.vue
index 08ca44e..f82c9f8 100644
--- a/NUXT/components/Comments/commentThreadRenderer.vue
+++ b/NUXT/components/Comments/commentThreadRenderer.vue
@@ -54,32 +54,46 @@
           {{ commentRenderer.publishedTimeText.runs[0].text }}
         </span>
       </div>
-      <collapsable-text :lines="4">
+      <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">
+            <v-btn class="toolbar--button like" disabled icon x-small plain>
+              <v-icon small>mdi-thumb-up</v-icon>
+            </v-btn>
+            <span
+              v-text="commentRenderer.voteCount.simpleText"
+              class="like-count mr-1 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 like" disabled icon x-small>
-            <v-icon small left>mdi-thumb-up</v-icon>
-          </v-btn>
-        </div>
-        <div class="toolbar--item">
-          <span
-            v-text="commentRenderer.voteCount.simpleText"
-            class="like-count mr-1 subtitle-2"
-          ></span>
-        </div>
-        <div class="toolbar--item">
-          <v-btn class="toolbar--button dislike" disabled icon x-small>
-            <v-icon small>mdi-thumb-down</v-icon>
-          </v-btn>
-        </div>
-        <div class="toolbar--item">
-          <v-btn class="toolbar--button reply" disabled icon x-small>
+          <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>
@@ -151,6 +165,10 @@
     color: #fff;
   }
 }
+
+.toolbar--button::v-deep.v-btn--active .v-btn__content {
+  color: var(--v-primary-base);
+}
 </style>
 
 <script>
@@ -171,6 +189,7 @@ export default {
   data() {
     return {
       commentRenderer: null,
+      voteStatus: null,
     };
   },
 
diff --git a/NUXT/components/UtilRenderers/collapsableText.vue b/NUXT/components/UtilRenderers/collapsableText.vue
index 7b2be6c..be7f80d 100644
--- a/NUXT/components/UtilRenderers/collapsableText.vue
+++ b/NUXT/components/UtilRenderers/collapsableText.vue
@@ -8,8 +8,9 @@
       <slot></slot>
     </div>
     <a
-      class="toggle-collapse"
+      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>
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 050fe89..99e4434 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -284,7 +284,7 @@ export default {
         this.cpn = getCpn();
         this.initWatchTime().then(() => {
           this.sendWatchTime();
-          this.interval = setInterval(this.sendWatchTime, 30000);
+          this.interval = setInterval(this.sendWatchTime, 60000);
         });
       });
 

From c54f9fde844756883a1768135b054cbd981d4b6a Mon Sep 17 00:00:00 2001
From: Front <27463495+Frontesque@users.noreply.github.com>
Date: Fri, 22 Apr 2022 23:36:58 -0400
Subject: [PATCH 17/40] fix: :ambulance: Fix compile errors

Alex forgot to close a few divs in `/watch.vue`, been corrected
---
 NUXT/pages/watch.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 050fe89..1fe2785 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -48,6 +48,7 @@
               ).slimVideoInformationRenderer.collapsedSubtitle.runs"
               >{{ text.text }}
             </template>
+          </div>
           </v-card-text>
         </div>
         <v-icon class="ml-4" v-if="showMore">mdi-chevron-up</v-icon>
@@ -192,6 +193,7 @@
     </div>
     <item-section-renderer v-else :render="recommends" />
   </div>
+  </div>
 </template>
 
 <script>

From 0fdce47f81d0d0bc3c5977191dff35d5a60e18c8 Mon Sep 17 00:00:00 2001
From: Front <27463495+Frontesque@users.noreply.github.com>
Date: Fri, 22 Apr 2022 23:51:24 -0400
Subject: [PATCH 18/40] feat: :sparkles: add channel wip notice

#249
---
 NUXT/pages/channel/_notice_.vue | 7 +++++++
 NUXT/static/channel_notice.svg  | 1 +
 2 files changed, 8 insertions(+)
 create mode 100644 NUXT/pages/channel/_notice_.vue
 create mode 100644 NUXT/static/channel_notice.svg

diff --git a/NUXT/pages/channel/_notice_.vue b/NUXT/pages/channel/_notice_.vue
new file mode 100644
index 0000000..691dafc
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/NUXT/static/channel_notice.svg b/NUXT/static/channel_notice.svg
new file mode 100644
index 0000000..3cd8367
--- /dev/null
+++ b/NUXT/static/channel_notice.svg
@@ -0,0 +1 @@
+<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="824.80767" height="438.31651" viewBox="0 0 824.80767 438.31651" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="b4c13b4e-8ef9-4732-a242-1b77a57c7078-111" data-name="Path 141" d="M1007.06582,668.02575h-459.267a5.345,5.345,0,0,1-5.338-5.338v-426.508a5.345,5.345,0,0,1,5.338-5.338h459.267a5.345,5.345,0,0,1,5.338,5.338v426.507a5.344,5.344,0,0,1-5.338,5.338Zm-459.267-435.053a3.207,3.207,0,0,0-3.2,3.2v426.514a3.207,3.207,0,0,0,3.2,3.2h459.267a3.206,3.206,0,0,0,3.2-3.2v-426.507a3.207,3.207,0,0,0-3.2-3.2Z" transform="translate(-187.59617 -230.84175)" fill="#e6e6e6"/><path id="b86923e0-dd17-408d-8c65-7675907766e6-112" data-name="Path 142" d="M764.81082,341.67124a3.624,3.624,0,0,0,0,7.248h198.856a3.624,3.624,0,0,0,0-7.248Z" transform="translate(-187.59617 -230.84175)" fill="#e6e6e6"/><path id="b7c93af7-a9b3-4ec5-8b9c-228075bea008-113" data-name="Path 143" d="M764.81082,363.41725a3.624,3.624,0,0,0,0,7.248h101.52a3.624,3.624,0,0,0,0-7.248Z" transform="translate(-187.59617 -230.84175)" fill="#e6e6e6"/><path id="bf6f3c94-5d99-4a3b-bad8-b2235a5a7f19-114" data-name="Path 142" d="M591.00433,468.67124a3.624,3.624,0,0,0,0,7.248h372.856a3.624,3.624,0,0,0,0-7.248Z" transform="translate(-187.59617 -230.84175)" fill="#e6e6e6"/><path id="b0a6cee6-456b-42c7-b828-32d4ce813421-115" data-name="Path 143" d="M591.00433,490.41725a3.624,3.624,0,0,0,0,7.248h275.52a3.624,3.624,0,0,0,0-7.248Z" transform="translate(-187.59617 -230.84175)" fill="#e6e6e6"/><path id="b1178f6f-c479-4db7-b1bf-97b40cae8cd0-116" data-name="Path 142" d="M591.00433,511.67124a3.624,3.624,0,0,0,0,7.248h372.856a3.624,3.624,0,0,0,0-7.248Z" transform="translate(-187.59617 -230.84175)" fill="#e6e6e6"/><path id="ad9199b6-e18d-416a-bbd3-7817c0554bff-117" data-name="Path 143" d="M591.00433,533.41725a3.624,3.624,0,0,0,0,7.248h275.52a3.624,3.624,0,0,0,0-7.248Z" transform="translate(-187.59617 -230.84175)" fill="#e6e6e6"/><path id="f7d611df-d029-4cc6-9561-be5a6829cf65-118" data-name="Path 154" d="M714.55483,418.02525h-288.268a5.344,5.344,0,0,1-5.338-5.338v-126.507a5.344,5.344,0,0,1,5.338-5.338h288.268a5.344,5.344,0,0,1,5.338,5.338v126.507A5.344,5.344,0,0,1,714.55483,418.02525Z" transform="translate(-187.59617 -230.84175)" fill="#ff6366"/><path id="b2be1aaf-9241-4aa1-a473-dbb8e8dcff3c-119" data-name="Path 154" d="M961.55483,618.02525h-109.268a5.344,5.344,0,0,1-5.338-5.338v-17.507a5.344,5.344,0,0,1,5.338-5.338h109.268a5.344,5.344,0,0,1,5.338,5.338v17.507A5.344,5.344,0,0,1,961.55483,618.02525Z" transform="translate(-187.59617 -230.84175)" fill="#ff6366"/><path d="M314.03171,444.95136C309.32289,441.436,307.9408,434.867,310.945,430.279a9.16549,9.16549,0,0,1,1.00873-1.26115l.301-93.45956,13.89232,2.59364.61035,91.91993c3.165,3.67148,3.80411,9.022,1.24055,12.93683C324.99373,447.59671,318.74087,448.46647,314.03171,444.95136Z" transform="translate(-187.59617 -230.84175)" fill="#ffb8b8"/><polygon points="198.683 423.301 213.005 423.3 219.819 368.058 198.681 368.059 198.683 423.301" fill="#ffb8b8"/><path d="M382.6259,649.46663l28.20547-.00114h.00114a17.9757,17.9757,0,0,1,17.97473,17.97444v.58411l-46.18048.00171Z" transform="translate(-187.59617 -230.84175)" fill="#2f2e41"/><polygon points="65.506 423.301 79.829 423.3 86.642 368.058 65.504 368.059 65.506 423.301" fill="#ffb8b8"/><path d="M249.44924,649.46663l28.20547-.00114h.00114a17.9757,17.9757,0,0,1,17.97473,17.97444v.58411l-46.18048.00171Z" transform="translate(-187.59617 -230.84175)" fill="#2f2e41"/><path d="M385.44327,638.71294l-1.20044-7.20215a5.70921,5.70921,0,0,1-2.96863-2.38281c-1.28906-2.03662-1.49438-4.90283-.61084-8.52051L371,539l-50.45077-52.34419L288.184,564.72027l-12.81225,61.7749v8.92529l-25.58057,3.28467,1.16406-8.4126a4.8993,4.8993,0,0,1-2.32275-2.06982c-1.46973-2.44629-1.44958-6.2378.05957-11.26807l.06543-.21826-.0835-.751C248.61539,615.45855,249,565,264,540l15.02274-75.90229c-.39014-1.06885-2.31616-7.29248,1.21606-17.80909,3.48609-10.37841,13.23572-27.09814,39.88648-47.81152l.09155-.0708.11353-.02393c.29516-.061,29.68933-5.90478,44.89123,13.97461l.10279.13428v.16944c0,1.229-.02649,29.83007-2.28785,36.17626l36.07288,66.32813c.70239.74414,7.00879,8.02686,4.7688,27.17432l5.82739,65.26806c.66675,1.27295,6.69873,13.26074.05054,18.00635L410.948,633.855Z" transform="translate(-187.59617 -230.84175)" fill="#2f2e41"/><path d="M325.09708,364.44146c-6.77319,0-15.77417-2.394-21.28394-13.42871l-.10839-.2168,13.574-28.77393A15.77613,15.77613,0,0,1,346.107,334.82671L334.37149,362.96l-.20434.07569A29.34616,29.34616,0,0,1,325.09708,364.44146Z" transform="translate(-187.59617 -230.84175)" fill="#ff6366"/><path d="M362.69767,421.4898l-42.79212-20.207,5.88208-71.76172,10.72363-13.10645,2.0774-.44482a54.68048,54.68048,0,0,1,28.73022,1.59131l.20362.06787,17.61438,37.57666c.11059.1875,12.81335,22.61474-4.74708,34.439Z" transform="translate(-187.59617 -230.84175)" fill="#ff6366"/><path d="M421.52665,398.62018a10.52407,10.52407,0,0,0-1.47481.75592l-45.0923-20.62658-1.15678-11.99059-18.32409-.61939-.015,21.426a7.99883,7.99883,0,0,0,5.755,7.68329l54.14828,15.825a10.49557,10.49557,0,1,0,6.15973-12.45358Z" transform="translate(-187.59617 -230.84175)" fill="#ffb8b8"/><path d="M366.37125,371.876c-5.13831,0-10.93713-1.77686-16.503-7.34278l-.17163-.17138,3.76086-31.5918a15.77621,15.77621,0,0,1,31.3999,3.01416l-2.22009,30.40137-.16992.13623C382.35843,366.40923,375.38175,371.876,366.37125,371.876Z" transform="translate(-187.59617 -230.84175)" fill="#ff6366"/><circle cx="354.94516" cy="277.65335" r="28.69259" transform="translate(-246.53217 225.0806) rotate(-61.3368)" fill="#ffb8b8"/><path d="M384.14676,262.45073c-1.42383-8.28094-8.07129-15.14563-15.99023-17.9544-7.91944-2.80878-16.84961-1.89533-24.60449,1.33917a40.849,40.849,0,0,0-3.78321,1.819c-2.83447-5.40283-9.78369-8.53638-16.13965-8.19818-7.67871.40857-14.61328,4.47149-21.28222,8.30066s-13.8252,7.639-21.51319,7.46069c-13.89306-.32208-24.229-13.20251-37.58837-17.03039a30.0607,30.0607,0,0,0-33.0835,45.881c5.70019-10.21515,19.08643-13.66535,30.70166-12.27472,11.61475,1.39068,22.43994,6.48193,33.81885,9.19385,11.37939,2.712,24.5581,2.59558,33.37207-5.09522,5-4.36237,7.93554-10.59753,12.28808-15.60565,2.94434-3.38751,7.13575-6.24787,11.41846-6.92114a34.65452,34.65452,0,0,0-9.37842,13.91107c-3.43408,9.75689-1.59814,21.47186,5.52588,28.97119,7.63721,8.0401,19.624,10.1828,30.7124,10.05279l.23194-.23577c-3.395-5.08173-6.07422-12.12818-2.33643-16.96326,3.68994-4.77277,10.96729-4.06958,16.61817-6.18152C381.00516,279.97838,385.5701,270.73174,384.14676,262.45073Z" transform="translate(-187.59617 -230.84175)" fill="#2f2e41"/><path d="M461.59617,669.15825h-273a1,1,0,0,1,0-2h273a1,1,0,1,1,0,2Z" transform="translate(-187.59617 -230.84175)" fill="#ccc"/><path id="e2582065-92bf-48dc-a28d-04f42179e35f-120" data-name="Path 155" d="M557.48607,325.21172c-1.25189.004-2.26477,1.6297-2.26228,3.63117.00248,1.99588,1.0139,3.61288,2.26228,3.61682H664.35559c1.2519-.004,2.26477-1.6297,2.26229-3.63116-.00248-1.99588-1.0139-3.61289-2.26229-3.61683Z" transform="translate(-187.59617 -230.84175)" fill="#fff"/><path id="bb678cb9-7d76-4fbb-a84c-c380d6521528-121" data-name="Path 156" d="M557.48607,346.21172c-1.25189.004-2.26477,1.6297-2.26228,3.63117.00248,1.99588,1.0139,3.61288,2.26228,3.61682H664.35559c1.2519-.004,2.26477-1.6297,2.26229-3.63116-.00248-1.99588-1.0139-3.61289-2.26229-3.61683Z" transform="translate(-187.59617 -230.84175)" fill="#fff"/><path id="a9697f3a-b5f3-4f74-8277-57e15506e4dd-122" data-name="Path 157" d="M557.48607,366.95773c-1.25189.004-2.26477,1.6297-2.26228,3.63116.00248,1.99588,1.0139,3.61289,2.26228,3.61682h45.98612c1.25189-.004,2.26477-1.6297,2.26229-3.63116-.00249-1.99588-1.01391-3.61289-2.26229-3.61682Z" transform="translate(-187.59617 -230.84175)" fill="#fff"/><circle cx="315.62762" cy="118.592" r="29" fill="#fff"/></svg>
\ No newline at end of file

From e332e1a5bb98deaeb03889540cef3d71ca66aec7 Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Sat, 23 Apr 2022 16:10:46 +1200
Subject: [PATCH 19/40] fix: emergency fix for comment rendering error

---
 NUXT/components/Comments/commentThreadRenderer.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/NUXT/components/Comments/commentThreadRenderer.vue b/NUXT/components/Comments/commentThreadRenderer.vue
index f82c9f8..e72af24 100644
--- a/NUXT/components/Comments/commentThreadRenderer.vue
+++ b/NUXT/components/Comments/commentThreadRenderer.vue
@@ -73,6 +73,7 @@
               <v-icon small>mdi-thumb-up</v-icon>
             </v-btn>
             <span
+              v-if="commentRenderer.voteCount"
               v-text="commentRenderer.voteCount.simpleText"
               class="like-count mr-1 subtitle-2"
             ></span>

From 167966d2fec98c045bea5b1a226e68a9e6a09c93 Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Sat, 23 Apr 2022 16:18:59 +1200
Subject: [PATCH 20/40] fix: small CSS change

---
 NUXT/components/Comments/commentThreadRenderer.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/NUXT/components/Comments/commentThreadRenderer.vue b/NUXT/components/Comments/commentThreadRenderer.vue
index e72af24..7381804 100644
--- a/NUXT/components/Comments/commentThreadRenderer.vue
+++ b/NUXT/components/Comments/commentThreadRenderer.vue
@@ -68,14 +68,14 @@
       </collapsable-text>
       <div class="toolbar">
         <v-btn-toggle v-model="voteStatus" group>
-          <div class="toolbar--item">
+          <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 mr-1 subtitle-2"
+              class="like-count subtitle-2"
             ></span>
           </div>
           <div class="toolbar--item">

From fec573347f351af74a9598dff0e2904aaf6dcf67 Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Sat, 23 Apr 2022 17:22:18 +1200
Subject: [PATCH 21/40] refactor!: made a base video renderer

---
 .../CompactRenderers/compactVideoRenderer.vue | 147 +++-------------
 .../UtilRenderers/baseVideoRenderer.vue       | 140 ++++++++++++++++
 .../gridRenderers/gridVideoRenderer.vue       | 151 +++--------------
 .../videoWithContextRenderer.vue              | 157 +++---------------
 4 files changed, 213 insertions(+), 382 deletions(-)
 create mode 100644 NUXT/components/UtilRenderers/baseVideoRenderer.vue

diff --git a/NUXT/components/CompactRenderers/compactVideoRenderer.vue b/NUXT/components/CompactRenderers/compactVideoRenderer.vue
index 00b6f2c..2c9dcc6 100644
--- a/NUXT/components/CompactRenderers/compactVideoRenderer.vue
+++ b/NUXT/components/CompactRenderers/compactVideoRenderer.vue
@@ -1,136 +1,33 @@
 <template>
-  <v-card
-    class="entry gridVideoRenderer background"
-    :to="`/watch?v=${video.videoId}`"
-    flat
+  <base-video-renderer
+    :vidId="video.videoId"
+    :thumbnails="video.thumbnail.thumbnails"
+    :thumbnailOverlayStyle="
+      video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer?.style
+    "
+    :thumbnailOverlayText="
+      video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer?.text
+        .runs[0].text
+    "
+    :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 "~/UtilRenderers/baseVideoRenderer.vue";
 export default {
   props: ["video"],
 
+  components: {
+    baseVideoRenderer,
+  },
+
   methods: {
     parseBottom(video) {
       const bottomText = [
diff --git a/NUXT/components/UtilRenderers/baseVideoRenderer.vue b/NUXT/components/UtilRenderers/baseVideoRenderer.vue
new file mode 100644
index 0000000..68d06e0
--- /dev/null
+++ b/NUXT/components/UtilRenderers/baseVideoRenderer.vue
@@ -0,0 +1,140 @@
+<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);
+}
+
+.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>
diff --git a/NUXT/components/gridRenderers/gridVideoRenderer.vue b/NUXT/components/gridRenderers/gridVideoRenderer.vue
index 68501a2..e3a42d2 100644
--- a/NUXT/components/gridRenderers/gridVideoRenderer.vue
+++ b/NUXT/components/gridRenderers/gridVideoRenderer.vue
@@ -1,138 +1,35 @@
 <template>
-  <v-card
-    class="entry gridVideoRenderer background"
-    :to="`/watch?v=${video.videoId}`"
-    flat
+  <base-video-renderer
+    :vidId="video.videoId"
+    :thumbnails="video.thumbnail.thumbnails"
+    :thumbnailOverlayStyle="
+      video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer?.style
+    "
+    :thumbnailOverlayText="
+      video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer?.text
+        .runs[0].text
+    "
+    :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 "~/UtilRenderers/baseVideoRenderer.vue";
 export default {
   props: ["video"],
 
+  components: {
+    baseVideoRenderer,
+  },
+
   methods: {
     parseBottom(video) {
       const bottomText = [
diff --git a/NUXT/components/gridRenderers/videoWithContextRenderer.vue b/NUXT/components/gridRenderers/videoWithContextRenderer.vue
index 463d5c1..23021af 100644
--- a/NUXT/components/gridRenderers/videoWithContextRenderer.vue
+++ b/NUXT/components/gridRenderers/videoWithContextRenderer.vue
@@ -1,141 +1,38 @@
 <template>
-  <v-card
-    class="entry videoWithContextRenderer background"
-    :to="`/watch?v=${video.videoId}`"
-    flat
+  <base-video-renderer
+    :vidId="video.videoId"
+    :thumbnails="video.thumbnail.thumbnails"
+    :thumbnailOverlayStyle="
+      video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer?.style
+    "
+    :thumbnailOverlayText="
+      video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer?.text
+        .runs[0].text
+    "
+    :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 "~/UtilRenderers/baseVideoRenderer.vue";
 export default {
   props: ["video"],
 
+  components: {
+    baseVideoRenderer,
+  },
+
   methods: {
     parseBottom(video) {
       const bottomText = [

From eff022b075004916593e6ebf71d622896d331fbe Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Sat, 23 Apr 2022 17:23:55 +1200
Subject: [PATCH 22/40] fix: typo in path

---
 NUXT/components/CompactRenderers/compactVideoRenderer.vue  | 2 +-
 NUXT/components/gridRenderers/gridVideoRenderer.vue        | 2 +-
 NUXT/components/gridRenderers/videoWithContextRenderer.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/NUXT/components/CompactRenderers/compactVideoRenderer.vue b/NUXT/components/CompactRenderers/compactVideoRenderer.vue
index 2c9dcc6..d3055b8 100644
--- a/NUXT/components/CompactRenderers/compactVideoRenderer.vue
+++ b/NUXT/components/CompactRenderers/compactVideoRenderer.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import baseVideoRenderer from "~/UtilRenderers/baseVideoRenderer.vue";
+import baseVideoRenderer from "~/components/UtilRenderers/baseVideoRenderer.vue";
 export default {
   props: ["video"],
 
diff --git a/NUXT/components/gridRenderers/gridVideoRenderer.vue b/NUXT/components/gridRenderers/gridVideoRenderer.vue
index e3a42d2..2a94bb4 100644
--- a/NUXT/components/gridRenderers/gridVideoRenderer.vue
+++ b/NUXT/components/gridRenderers/gridVideoRenderer.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import baseVideoRenderer from "~/UtilRenderers/baseVideoRenderer.vue";
+import baseVideoRenderer from "~/components/UtilRenderers/baseVideoRenderer.vue";
 export default {
   props: ["video"],
 
diff --git a/NUXT/components/gridRenderers/videoWithContextRenderer.vue b/NUXT/components/gridRenderers/videoWithContextRenderer.vue
index 23021af..638e238 100644
--- a/NUXT/components/gridRenderers/videoWithContextRenderer.vue
+++ b/NUXT/components/gridRenderers/videoWithContextRenderer.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import baseVideoRenderer from "~/UtilRenderers/baseVideoRenderer.vue";
+import baseVideoRenderer from "~/components/UtilRenderers/baseVideoRenderer.vue";
 export default {
   props: ["video"],
 

From d19d124b385ffdfe40634e80b908ae3760c216f6 Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Sat, 23 Apr 2022 17:53:24 +1200
Subject: [PATCH 23/40] fix: calculated values

---
 .../CompactRenderers/compactVideoRenderer.vue | 20 ++++++++++++-------
 .../gridRenderers/gridVideoRenderer.vue       | 20 ++++++++++++-------
 .../videoWithContextRenderer.vue              | 20 ++++++++++++-------
 3 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/NUXT/components/CompactRenderers/compactVideoRenderer.vue b/NUXT/components/CompactRenderers/compactVideoRenderer.vue
index d3055b8..c95de80 100644
--- a/NUXT/components/CompactRenderers/compactVideoRenderer.vue
+++ b/NUXT/components/CompactRenderers/compactVideoRenderer.vue
@@ -2,13 +2,8 @@
   <base-video-renderer
     :vidId="video.videoId"
     :thumbnails="video.thumbnail.thumbnails"
-    :thumbnailOverlayStyle="
-      video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer?.style
-    "
-    :thumbnailOverlayText="
-      video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer?.text
-        .runs[0].text
-    "
+    :thumbnailOverlayStyle="thumbnailOverlayStyle"
+    :thumbnailOverlayText="thumbnailOverlayText"
     :channelUrl="
       this.$rendererUtils.getNavigationEndpoints(video.shortBylineText.runs[0])
     "
@@ -28,6 +23,17 @@ export default {
     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 = [
diff --git a/NUXT/components/gridRenderers/gridVideoRenderer.vue b/NUXT/components/gridRenderers/gridVideoRenderer.vue
index 2a94bb4..949336e 100644
--- a/NUXT/components/gridRenderers/gridVideoRenderer.vue
+++ b/NUXT/components/gridRenderers/gridVideoRenderer.vue
@@ -2,13 +2,8 @@
   <base-video-renderer
     :vidId="video.videoId"
     :thumbnails="video.thumbnail.thumbnails"
-    :thumbnailOverlayStyle="
-      video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer?.style
-    "
-    :thumbnailOverlayText="
-      video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer?.text
-        .runs[0].text
-    "
+    :thumbnailOverlayStyle="thumbnailOverlayStyle"
+    :thumbnailOverlayText="thumbnailOverlayText"
     :channelUrl="
       $rendererUtils.getNavigationEndpoints(
         video.shortBylineText.runs[0].navigationEndpoint
@@ -30,6 +25,17 @@ export default {
     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 = [
diff --git a/NUXT/components/gridRenderers/videoWithContextRenderer.vue b/NUXT/components/gridRenderers/videoWithContextRenderer.vue
index 638e238..a353d73 100644
--- a/NUXT/components/gridRenderers/videoWithContextRenderer.vue
+++ b/NUXT/components/gridRenderers/videoWithContextRenderer.vue
@@ -2,13 +2,8 @@
   <base-video-renderer
     :vidId="video.videoId"
     :thumbnails="video.thumbnail.thumbnails"
-    :thumbnailOverlayStyle="
-      video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer?.style
-    "
-    :thumbnailOverlayText="
-      video.thumbnailOverlays[0]?.thumbnailOverlayTimeStatusRenderer?.text
-        .runs[0].text
-    "
+    :thumbnailOverlayStyle="thumbnailOverlayStyle"
+    :thumbnailOverlayText="thumbnailOverlayText"
     :channelUrl="
       $rendererUtils.getNavigationEndpoints(
         video.shortBylineText.runs[0].navigationEndpoint
@@ -33,6 +28,17 @@ export default {
     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 = [

From ae32d702fcf2cd9877ea3e778d3f781deb3432b0 Mon Sep 17 00:00:00 2001
From: Front <27463495+Frontesque@users.noreply.github.com>
Date: Sat, 23 Apr 2022 23:05:34 -0400
Subject: [PATCH 24/40] fix: :bug: Fix duplicate beta player

---
 NUXT/components/Player/index.vue | 2 ++
 NUXT/pages/watch.vue             | 1 +
 2 files changed, 3 insertions(+)

diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index b8e6a09..5666e37 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -62,6 +62,8 @@ export default {
     const src = this.sources[this.sources.length - 1].url;
     this.vidSrc = src;
 
+    console.log(this.sources, src);
+
     setInterval(this.updateTiming, 100);
   },
 
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 565d3eb..b37b6e2 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -13,6 +13,7 @@
         v-touch="{ down: () => $router.push('/home') }"
         class="background"
         :vid-src="vidSrc"
+        v-if="useBetaPlayer !== 'true'"
       />
     </div>
 

From 041cc70cf58e24edeaac9c48768ab6b07dc0ca9b Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Sun, 24 Apr 2022 16:01:52 +1200
Subject: [PATCH 25/40] fix: minor graphical issues

---
 .../UtilRenderers/baseVideoRenderer.vue       |   4 +
 NUXT/pages/home.vue                           |   2 +-
 NUXT/pages/index.vue                          |   2 +-
 NUXT/pages/watch.vue                          | 256 +++++++++---------
 4 files changed, 135 insertions(+), 129 deletions(-)

diff --git a/NUXT/components/UtilRenderers/baseVideoRenderer.vue b/NUXT/components/UtilRenderers/baseVideoRenderer.vue
index 68d06e0..956a3b8 100644
--- a/NUXT/components/UtilRenderers/baseVideoRenderer.vue
+++ b/NUXT/components/UtilRenderers/baseVideoRenderer.vue
@@ -57,6 +57,10 @@
   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;
diff --git a/NUXT/pages/home.vue b/NUXT/pages/home.vue
index 76340ad..74a46c7 100644
--- a/NUXT/pages/home.vue
+++ b/NUXT/pages/home.vue
@@ -40,7 +40,7 @@ export default {
 
   methods: {
     paginate() {
-      if (this.recommends) {
+      if (this.recommends && !this.loading) {
         this.loading = true;
         this.$youtube
           .recommendContinuation(
diff --git a/NUXT/pages/index.vue b/NUXT/pages/index.vue
index cbf0ffb..2256726 100644
--- a/NUXT/pages/index.vue
+++ b/NUXT/pages/index.vue
@@ -55,7 +55,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>
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 565d3eb..54a6af2 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -29,54 +29,56 @@
           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'"
-          >
-          <div style="margin-bottom: 1rem">
-            <template
-              v-for="text in video.metadata.contents.find(
-                (content) => content.slimVideoInformationRenderer
-              ).slimVideoInformationRenderer.collapsedSubtitle.runs"
-              >{{ text.text }}
-            </template>
+          <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-card-text>
+          <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>
-        <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
+        <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"
@@ -93,106 +95,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>
 
-    <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"
+      <swipeable-bottom-sheet
         v-model="showComments"
-      ></mainCommentRenderer>
-    </swipeable-bottom-sheet>
+        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>
 
-    <!-- <swipeable-bottom-sheet
+      <!-- <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" />
+      <!-- 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>
   </div>
 </template>
 

From 6da5ca92ef9655083a0d3e553fb39904a8cd7601 Mon Sep 17 00:00:00 2001
From: Front <27463495+Frontesque@users.noreply.github.com>
Date: Sun, 24 Apr 2022 00:07:05 -0400
Subject: [PATCH 26/40] fix: :bug: some player fixes

---
 NUXT/components/Player/index.vue | 14 ++++++++++----
 NUXT/pages/watch.vue             |  6 +++++-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index 5666e37..0d87dd0 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <div @click="toggleControls()" class="content" :style="showControls ? 'background: rgba(0, 0, 0, 0.5);' : '' ">
+    <div @click="toggleControls()" class="content">
 
-      <div v-show="showControls">
+      <div v-show="showControls" class="controls">
         <v-btn class="pausePlay" text @click="playing = !playing">
           <v-icon size="5em" color="white">mdi-{{ playing ? "pause" : "play" }}</v-icon>
         </v-btn>
@@ -54,6 +54,7 @@ export default {
 
   watch: {
     playing() {
+      console.log("Changed Playback State");
       this.playing ? this.$refs.player.play() : this.$refs.player.pause();
     },
   },
@@ -62,9 +63,11 @@ export default {
     const src = this.sources[this.sources.length - 1].url;
     this.vidSrc = src;
 
-    console.log(this.sources, src);
+    console.log("Beta Player Sources Debug:", this.sources, src);
 
-    setInterval(this.updateTiming, 100);
+    setTimeout(function() { this.$refs.player.play(); }, 1000); // Auto Play
+
+    setInterval(this.updateTiming, 100); // Auto Update Scrubber
   },
 
   methods: {
@@ -114,6 +117,9 @@ export default {
 }
 
 /***   General Overlay Styling   ***/
+.controls {
+  z-index: 999;
+}
 .pausePlay {
   position: absolute;
   top: 50%;
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index b37b6e2..7ce8649 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -5,7 +5,11 @@
         <v-icon>mdi-chevron-down</v-icon>
       </v-btn>
       <!--   VueTube Player V1   -->
-      <vuetubePlayer :sources="sources" v-if="useBetaPlayer === 'true'" />
+      <vuetubePlayer
+        :sources="sources"
+        v-if="useBetaPlayer === 'true' && sources.length > 0"
+      />
+
       <!--   Stock Player   -->
       <videoPlayer
         id="player"

From 4f6fdddcada66f7a4f62b406085412884cee5c2c Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Sun, 24 Apr 2022 18:44:32 +1200
Subject: [PATCH 27/40] feat: better back button handling. Removed redundant
 redirect for embed links

---
 NUXT/layouts/default.vue        | 27 +++++++++++++++++----------
 NUXT/pages/embed/_redirect_.vue | 19 -------------------
 NUXT/pages/watch.vue            | 21 +++++++++++++++++++++
 3 files changed, 38 insertions(+), 29 deletions(-)
 delete mode 100644 NUXT/pages/embed/_redirect_.vue

diff --git a/NUXT/layouts/default.vue b/NUXT/layouts/default.vue
index fa2ed08..cc59d66 100644
--- a/NUXT/layouts/default.vue
+++ b/NUXT/layouts/default.vue
@@ -94,18 +94,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) => {
@@ -122,6 +125,10 @@ export default {
     document.head.appendChild(plugin);
   },
 
+  beforeDestroy() {
+    if (this.backHandler) this.backHandler.remove();
+  },
+
   methods: {
     textChanged(text) {
       if (text.length <= 0) {
diff --git a/NUXT/pages/embed/_redirect_.vue b/NUXT/pages/embed/_redirect_.vue
deleted file mode 100644
index 820d9e6..0000000
--- a/NUXT/pages/embed/_redirect_.vue
+++ /dev/null
@@ -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>
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 54a6af2..538c4f9 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -209,6 +209,8 @@ 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: {
     ShelfRenderer,
@@ -250,10 +252,29 @@ 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();
+        }
+      }
+    );
   },
 
   beforeDestroy() {
     clearInterval(this.interval);
+    if (this.backHandler) this.backHandler.remove();
   },
 
   methods: {

From b8e5fc086929c5506f69421e707e629d7af7bd47 Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Sun, 24 Apr 2022 20:05:36 +1200
Subject: [PATCH 28/40] fix: pagination issues on home page

---
 NUXT/components/Comments/mainCommentRenderer.vue |  2 +-
 NUXT/components/observer.vue                     |  4 ++--
 NUXT/pages/home.vue                              | 14 ++++++++++----
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/NUXT/components/Comments/mainCommentRenderer.vue b/NUXT/components/Comments/mainCommentRenderer.vue
index f4d282d..178423c 100644
--- a/NUXT/components/Comments/mainCommentRenderer.vue
+++ b/NUXT/components/Comments/mainCommentRenderer.vue
@@ -21,7 +21,7 @@
           v-if="getComponents()[Object.keys(comment)[0]]"
           :is="Object.keys(comment)[0]"
           :comment="comment[Object.keys(comment)[0]]"
-          @intersect="paginate()"
+          @intersect="paginate"
         ></component>
       </v-list-item>
       <v-divider
diff --git a/NUXT/components/observer.vue b/NUXT/components/observer.vue
index 6d752a0..af2373b 100644
--- 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");
diff --git a/NUXT/pages/home.vue b/NUXT/pages/home.vue
index 74a46c7..06b6cbf 100644
--- 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) {
-        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;
       }
     },
   },

From ec194bd005a3370c3cab2867068e6ef31b9defaf Mon Sep 17 00:00:00 2001
From: Alex <alex.tyshang@gmail.com>
Date: Mon, 25 Apr 2022 13:42:23 +1200
Subject: [PATCH 29/40] fix: search suggestions button broke

---
 NUXT/layouts/default.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/NUXT/layouts/default.vue b/NUXT/layouts/default.vue
index cc59d66..a60ed94 100644
--- a/NUXT/layouts/default.vue
+++ b/NUXT/layouts/default.vue
@@ -33,7 +33,6 @@
               v-for="(item, index) in response"
               :key="index"
               class="px-0"
-              v-emoji
             >
               <v-btn
                 text
@@ -41,6 +40,7 @@
                 dense
                 class="searchButton text-left text-none"
                 @click="youtubeSearch(item)"
+                v-emoji
               >
                 <v-icon class="mr-5">mdi-magnify</v-icon>
                 {{ item[0] || item.text }}

From 3c732c5f76c280cb27f0ccd7cee0a0932f4a2c02 Mon Sep 17 00:00:00 2001
From: Kenny <27463495+Frontesque@users.noreply.github.com>
Date: Thu, 28 Apr 2022 21:44:37 -0400
Subject: [PATCH 30/40] fix: :bug: fix beta player

---
 NUXT/components/Player/VTPlayerV1.vue | 130 -----------------------
 NUXT/components/Player/index.vue      | 142 +++++++-------------------
 NUXT/components/Player/scrubber.vue   |  44 --------
 3 files changed, 35 insertions(+), 281 deletions(-)
 delete mode 100644 NUXT/components/Player/VTPlayerV1.vue
 delete mode 100644 NUXT/components/Player/scrubber.vue

diff --git a/NUXT/components/Player/VTPlayerV1.vue b/NUXT/components/Player/VTPlayerV1.vue
deleted file mode 100644
index f89b5f6..0000000
--- a/NUXT/components/Player/VTPlayerV1.vue
+++ /dev/null
@@ -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>
diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index 0d87dd0..a587c4f 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -1,75 +1,51 @@
 <template>
   <div>
-    <div @click="toggleControls()" class="content">
-
-      <div v-show="showControls" class="controls">
-        <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>
-
-      <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>
+    <video
+      ref="player"
+      controls
+      autoplay
+      :src="vidSrc"
+      width="100%"
+      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> -->
+    {{ vidSrc }}
   </div>
 </template>
 
 <script>
-import scrubber from "./scrubber.vue";
-
 export default {
-  components: {
-    scrubber,
-  },
-  props: {
-    sources: {
-      type: Array,
-      default: [],
-    },
-  },
+  props: ["sources"],
   data() {
     return {
-      //---   Basic Information   ---//
-      playerVersion: 0.1,
-      vidSrc: null,
+      vidSrc: "",
 
-      //---   Player State Information   ---//
-      showControls: false,
-      playing: false,
-      duration: 0,
-      endDuration: 0,
+      percentage: 0,
+      buffered: 0,
     };
   },
-
-  watch: {
-    playing() {
-      console.log("Changed Playback State");
-      this.playing ? this.$refs.player.play() : this.$refs.player.pause();
-    },
-  },
-
   mounted() {
-    const src = this.sources[this.sources.length - 1].url;
-    this.vidSrc = src;
+    this.vidSrc = this.sources[this.sources.length-1].url;
 
-    console.log("Beta Player Sources Debug:", this.sources, src);
-
-    setTimeout(function() { this.$refs.player.play(); }, 1000); // Auto Play
-
-    setInterval(this.updateTiming, 100); // Auto Update Scrubber
+    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) {
@@ -81,57 +57,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   ***/
-.controls {
-  z-index: 999;
-}
-.pausePlay {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  height: 5em !important;
-  width: 5em !important;
-}
-.scrubber {
-  position: absolute;
-  bottom: 0;
-}
-
-
-</style>
diff --git a/NUXT/components/Player/scrubber.vue b/NUXT/components/Player/scrubber.vue
deleted file mode 100644
index 41c95f2..0000000
--- a/NUXT/components/Player/scrubber.vue
+++ /dev/null
@@ -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>

From 36a995781a1d06439f7dee89973d0a9d6993b273 Mon Sep 17 00:00:00 2001
From: Kenny <27463495+Frontesque@users.noreply.github.com>
Date: Fri, 29 Apr 2022 07:49:32 -0400
Subject: [PATCH 31/40] fix: :zap: Beta Player Updates

fix beta player (again), add 'seekbar' module and improve readability
---
 NUXT/components/Player/index.vue   | 27 ++++--------------
 NUXT/components/Player/seekbar.vue | 45 ++++++++++++++++++++++++++++++
 NUXT/pages/watch_debug.vue         |  2 +-
 3 files changed, 52 insertions(+), 22 deletions(-)
 create mode 100644 NUXT/components/Player/seekbar.vue

diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index a587c4f..a5579ff 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -9,42 +9,27 @@
       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"
-    />
+    <seekbar :video=$refs.player v-if="$refs.player" />
     <!-- <v-slider v-model="value" step="0"></v-slider> -->
     {{ vidSrc }}
   </div>
 </template>
 
 <script>
+import seekbar from '~/components/Player/seekbar.vue';
+
 export default {
   props: ["sources"],
+  components: {
+    seekbar
+  },
   data() {
     return {
       vidSrc: "",
-
-      percentage: 0,
-      buffered: 0,
     };
   },
   mounted() {
     this.vidSrc = this.sources[this.sources.length-1].url;
-
-    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() {
diff --git a/NUXT/components/Player/seekbar.vue b/NUXT/components/Player/seekbar.vue
new file mode 100644
index 0000000..fefa7aa
--- /dev/null
+++ b/NUXT/components/Player/seekbar.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+
+
+    <v-progress-linear
+      active
+      background-color="primary"
+      background-opacity="0.5"
+      :buffer-value="buffered"
+      color="primary"
+      height="3"
+      query
+      :value="percentage"
+    />
+
+    {{ percentage }}
+    {{ buffered }}
+
+
+  </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>
diff --git a/NUXT/pages/watch_debug.vue b/NUXT/pages/watch_debug.vue
index 1d66c68..95da87e 100644
--- 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" />
 

From 0cb7a3511a99b117bd4387b953e35536fc29d503 Mon Sep 17 00:00:00 2001
From: Kenny <27463495+Frontesque@users.noreply.github.com>
Date: Fri, 29 Apr 2022 07:52:03 -0400
Subject: [PATCH 32/40] style: :art: Move 'player' to 'legacy player'

---
 .../{videoPlayer.vue => Player/legacy.vue}    | 25 -------------------
 NUXT/pages/watch.vue                          |  4 ++-
 2 files changed, 3 insertions(+), 26 deletions(-)
 rename NUXT/components/{videoPlayer.vue => Player/legacy.vue} (56%)

diff --git a/NUXT/components/videoPlayer.vue b/NUXT/components/Player/legacy.vue
similarity index 56%
rename from NUXT/components/videoPlayer.vue
rename to NUXT/components/Player/legacy.vue
index 39bb193..942e04d 100644
--- a/NUXT/components/videoPlayer.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) {
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 479b730..6cf78d7 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -5,7 +5,7 @@
         <v-icon>mdi-chevron-down</v-icon>
       </v-btn>
       <!--   VueTube Player V1   -->
-      <vuetubePlayer
+      <legacyPlayer
         :sources="sources"
         v-if="useBetaPlayer === 'true' && sources.length > 0"
       />
@@ -209,6 +209,7 @@ 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";
@@ -222,6 +223,7 @@ export default {
     VidLoadRenderer,
     SlimVideoDescriptionRenderer,
     vuetubePlayer,
+    legacyPlayer,
     ItemSectionRenderer,
     SwipeableBottomSheet,
     mainCommentRenderer,

From 2a781b9e6bff77ff00166f289b2d06466681f70e Mon Sep 17 00:00:00 2001
From: Front <27463495+Frontesque@users.noreply.github.com>
Date: Fri, 29 Apr 2022 17:38:56 -0400
Subject: [PATCH 33/40] fix: :bug: fix beta player once and for all

i accidentially switched the beta player and legacy player in `~/pages/watch.vue` so they both broke. now fixed and both work better than ever
---
 NUXT/pages/watch.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 6cf78d7..6b77750 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -5,13 +5,13 @@
         <v-icon>mdi-chevron-down</v-icon>
       </v-btn>
       <!--   VueTube Player V1   -->
-      <legacyPlayer
+      <vuetubePlayer
         :sources="sources"
         v-if="useBetaPlayer === 'true' && sources.length > 0"
       />
 
       <!--   Stock Player   -->
-      <videoPlayer
+      <legacyPlayer
         id="player"
         ref="player"
         v-touch="{ down: () => $router.push('/home') }"

From 08f8a5de8641104d5f5b05e72d7f1df7f8de6346 Mon Sep 17 00:00:00 2001
From: Front <27463495+Frontesque@users.noreply.github.com>
Date: Sun, 1 May 2022 12:42:26 -0400
Subject: [PATCH 34/40] feat: :sparkles: beta player stuff

---
 NUXT/components/Player/controls.vue | 47 +++++++++++++++++++++++++++++
 NUXT/components/Player/index.vue    | 38 ++++++++++++++++++++---
 NUXT/components/Player/seekbar.vue  |  3 --
 3 files changed, 81 insertions(+), 7 deletions(-)
 create mode 100644 NUXT/components/Player/controls.vue

diff --git a/NUXT/components/Player/controls.vue b/NUXT/components/Player/controls.vue
new file mode 100644
index 0000000..5b94438
--- /dev/null
+++ b/NUXT/components/Player/controls.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+
+
+    <v-btn class="centerVideoControls" @click="togglePlaying()">
+      <v-icon v-text="playing ? 'mdi-pause' : 'mdi-play' " ref="pausePlayIndicator" />
+    </v-btn>
+
+
+  </div>
+</template>
+
+<style scoped>
+  .centerVideoControls {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+</style>
+
+<script>
+  export default {
+    props: ["video"],
+
+    data() {
+      return {
+        playing: true,
+      }
+    },
+
+    methods: {
+      togglePlaying() {
+        if (this.video.paused) {
+            this.video.play()
+            this.playing = true;
+        } else {
+            this.video.pause()
+            this.playing = false;
+        }
+
+      }
+    }
+  }
+
+</script>
diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index a5579ff..c76368d 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -1,8 +1,7 @@
 <template>
-  <div>
+  <div style="position: relative;">
     <video
       ref="player"
-      controls
       autoplay
       :src="vidSrc"
       width="100%"
@@ -10,18 +9,49 @@
       @webkitfullscreenchange="handleFullscreenChange"
     />
     <seekbar :video=$refs.player v-if="$refs.player" />
+
+
+
+    <!--   Video Controls   -->
+    <div class="videoControls" v-if="$refs.player">
+      <div class="videoControlsWrap">
+
+
+        <controls :video=$refs.player />
+
+
+      </div>
+    </div>
+    <!--   End Video Controls   -->
+
+
     <!-- <v-slider v-model="value" step="0"></v-slider> -->
-    {{ vidSrc }}
   </div>
 </template>
 
+<style scoped>
+.videoControls {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+}
+.videoControlsWrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+</style>
+
 <script>
 import seekbar from '~/components/Player/seekbar.vue';
+import controls from '~/components/Player/controls.vue';
 
 export default {
   props: ["sources"],
   components: {
-    seekbar
+    seekbar,
+    controls
   },
   data() {
     return {
diff --git a/NUXT/components/Player/seekbar.vue b/NUXT/components/Player/seekbar.vue
index fefa7aa..3e9aced 100644
--- a/NUXT/components/Player/seekbar.vue
+++ b/NUXT/components/Player/seekbar.vue
@@ -13,9 +13,6 @@
       :value="percentage"
     />
 
-    {{ percentage }}
-    {{ buffered }}
-
 
   </div>
 </template>

From 33e4e875cd719db9581c01f5bf51560eb6fee02f Mon Sep 17 00:00:00 2001
From: Kenny <27463495+Frontesque@users.noreply.github.com>
Date: Tue, 3 May 2022 13:25:06 -0400
Subject: [PATCH 35/40] feat: stuff quick

---
 NUXT/components/Player/controls.vue | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/NUXT/components/Player/controls.vue b/NUXT/components/Player/controls.vue
index 5b94438..907f294 100644
--- a/NUXT/components/Player/controls.vue
+++ b/NUXT/components/Player/controls.vue
@@ -2,8 +2,8 @@
   <div>
 
 
-    <v-btn class="centerVideoControls" @click="togglePlaying()">
-      <v-icon v-text="playing ? 'mdi-pause' : 'mdi-play' " ref="pausePlayIndicator" />
+    <v-btn class="centerVideoControls" @click="togglePlaying()" text>
+      <v-icon x-large v-text="playing ? 'mdi-pause' : 'mdi-play' " ref="pausePlayIndicator" />
     </v-btn>
 
 
@@ -17,7 +17,10 @@
     left: 50%;
     transform: translate(-50%, -50%);
   }
-
+  .pausePlay {
+    min-height: 5em;
+    min-width: 5em;
+  }
 </style>
 
 <script>
@@ -33,11 +36,11 @@
     methods: {
       togglePlaying() {
         if (this.video.paused) {
-            this.video.play()
-            this.playing = true;
+          this.video.play()
+          this.playing = true;
         } else {
-            this.video.pause()
-            this.playing = false;
+          this.video.pause()
+          this.playing = false;
         }
 
       }

From 8a650b70fadd93de8d9a0393ae7a537bd1ce835c Mon Sep 17 00:00:00 2001
From: tired6488 <85363080+tired6488@users.noreply.github.com>
Date: Tue, 3 May 2022 21:23:40 -0500
Subject: [PATCH 36/40] Update readme.md

---
 readme.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/readme.md b/readme.md
index 1847d0f..f984389 100644
--- a/readme.md
+++ b/readme.md
@@ -25,13 +25,14 @@ 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
 
 - 🎨 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
 
@@ -59,8 +60,6 @@ View on our website: [https://vuetube.app/info/screenshots](https://vuetube.app/
 
 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?
 
 Please read our website on how to do so: https://vuetube.app/contributing

From 64f5310262f44a39dc785a3fce527f7c31e526ff Mon Sep 17 00:00:00 2001
From: Kenny <27463495+Frontesque@users.noreply.github.com>
Date: Wed, 4 May 2022 08:56:17 -0400
Subject: [PATCH 37/40] refactor: :art: Beta Player Updates

Change how the controls overlay is handled
---
 NUXT/components/Player/controls.vue | 25 ++++++++++++++++++----
 NUXT/components/Player/index.vue    | 32 +++--------------------------
 2 files changed, 24 insertions(+), 33 deletions(-)

diff --git a/NUXT/components/Player/controls.vue b/NUXT/components/Player/controls.vue
index 907f294..2ee7521 100644
--- a/NUXT/components/Player/controls.vue
+++ b/NUXT/components/Player/controls.vue
@@ -1,11 +1,13 @@
 <template>
-  <div>
+  <div class="videoControls">
+    <div class="videoControlsWrap">
 
 
-    <v-btn class="centerVideoControls" @click="togglePlaying()" text>
-      <v-icon x-large v-text="playing ? 'mdi-pause' : 'mdi-play' " ref="pausePlayIndicator" />
-    </v-btn>
+      <v-btn class="centerVideoControls" @click="togglePlaying()" text>
+        <v-icon x-large v-text="playing ? 'mdi-pause' : 'mdi-play' " ref="pausePlayIndicator" />
+      </v-btn>
 
+    </div>
 
   </div>
 </template>
@@ -17,10 +19,25 @@
     left: 50%;
     transform: translate(-50%, -50%);
   }
+
   .pausePlay {
     min-height: 5em;
     min-width: 5em;
   }
+
+  .videoControls {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+  }
+
+  .videoControlsWrap {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+  }
 </style>
 
 <script>
diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index c76368d..00c3755 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -8,41 +8,15 @@
       style="max-height: 50vh; display: block"
       @webkitfullscreenchange="handleFullscreenChange"
     />
+
+
     <seekbar :video=$refs.player v-if="$refs.player" />
-
-
-
-    <!--   Video Controls   -->
-    <div class="videoControls" v-if="$refs.player">
-      <div class="videoControlsWrap">
-
-
-        <controls :video=$refs.player />
-
-
-      </div>
-    </div>
-    <!--   End Video Controls   -->
-
+    <controls v-if="$refs.player" :video="$refs.player" />
 
     <!-- <v-slider v-model="value" step="0"></v-slider> -->
   </div>
 </template>
 
-<style scoped>
-.videoControls {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-}
-.videoControlsWrap {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-</style>
-
 <script>
 import seekbar from '~/components/Player/seekbar.vue';
 import controls from '~/components/Player/controls.vue';

From bce23422e2c82a996e234ecfd5b2cc6a67bce86b Mon Sep 17 00:00:00 2001
From: Kenny <27463495+Frontesque@users.noreply.github.com>
Date: Wed, 4 May 2022 09:08:41 -0400
Subject: [PATCH 38/40] feat: :sparkles: Beta Player Toggle Controls

tap to toggle showing video controls
---
 NUXT/components/Player/controls.vue | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/NUXT/components/Player/controls.vue b/NUXT/components/Player/controls.vue
index 2ee7521..60def7d 100644
--- a/NUXT/components/Player/controls.vue
+++ b/NUXT/components/Player/controls.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="videoControls">
-    <div class="videoControlsWrap">
+  <div class="controls" @click="toggleControls()">
+    <div class="controlsWrap" ref="controlsWrap">
 
 
       <v-btn class="centerVideoControls" @click="togglePlaying()" text>
@@ -25,14 +25,14 @@
     min-width: 5em;
   }
 
-  .videoControls {
+  .controls {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
   }
 
-  .videoControlsWrap {
+  .controlsWrap {
     position: relative;
     width: 100%;
     height: 100%;
@@ -47,6 +47,7 @@
     data() {
       return {
         playing: true,
+        controls: true,
       }
     },
 
@@ -59,8 +60,14 @@
           this.video.pause()
           this.playing = false;
         }
+      },
 
+      toggleControls() {
+        const setControls = this.controls ? 'none' : 'block';
+        this.$refs.controlsWrap.style.display = setControls;
+        this.controls = !this.controls;
       }
+
     }
   }
 

From cd7797b9b79d7e555cb22cb3a0f05ef60e385686 Mon Sep 17 00:00:00 2001
From: Front <27463495+Frontesque@users.noreply.github.com>
Date: Wed, 4 May 2022 16:31:35 -0400
Subject: [PATCH 39/40] style: :zap: Beta Player Stuff

ui improvements, bug fixes, etc
---
 NUXT/components/Player/controls.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/NUXT/components/Player/controls.vue b/NUXT/components/Player/controls.vue
index 60def7d..5851b8c 100644
--- a/NUXT/components/Player/controls.vue
+++ b/NUXT/components/Player/controls.vue
@@ -2,10 +2,11 @@
   <div class="controls" @click="toggleControls()">
     <div class="controlsWrap" ref="controlsWrap">
 
-
-      <v-btn class="centerVideoControls" @click="togglePlaying()" text>
-        <v-icon x-large v-text="playing ? 'mdi-pause' : 'mdi-play' " ref="pausePlayIndicator" />
-      </v-btn>
+      <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>
 
@@ -59,7 +60,8 @@
         } else {
           this.video.pause()
           this.playing = false;
-        }
+        };
+        this.toggleControls(); // Prevent Screen From Closing
       },
 
       toggleControls() {

From 29ee7dd3472219627011d8a74cc1da8ca589c24c Mon Sep 17 00:00:00 2001
From: Front <27463495+Frontesque@users.noreply.github.com>
Date: Wed, 4 May 2022 16:58:07 -0400
Subject: [PATCH 40/40] feat: :sparkles: Beta Player Duration Information

---
 NUXT/components/Player/controls.vue | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/NUXT/components/Player/controls.vue b/NUXT/components/Player/controls.vue
index 5851b8c..c28c7f3 100644
--- a/NUXT/components/Player/controls.vue
+++ b/NUXT/components/Player/controls.vue
@@ -8,6 +8,10 @@
         </v-btn>
       </div>
 
+      <div class="bottomVideoControls">
+        {{ watched }} <span style="color: #999;">/ {{ video.duration }}</span>
+      </div>
+
     </div>
 
   </div>
@@ -21,6 +25,12 @@
     transform: translate(-50%, -50%);
   }
 
+  .bottomVideoControls {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+  }
+
   .pausePlay {
     min-height: 5em;
     min-width: 5em;
@@ -49,9 +59,18 @@
       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) {