From b7fc257ea09123a473ff7a5b00d529bd835bdf8c Mon Sep 17 00:00:00 2001
From: Ethan <ethan@etekweb.net>
Date: Mon, 28 Mar 2022 21:30:20 -0500
Subject: [PATCH 1/8] fixed description not appearing

---
 .../slimVideoDescriptionRenderer.vue          | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue b/NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue
index c60029f..a93e708 100644
--- a/NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue
+++ b/NUXT/components/UtilRenderers/slimVideoDescriptionRenderer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="description" style="white-space: pre-line">
+  <div class="description">
     <template v-for="(text, index) in render.description.runs">
       <template
         v-if="
@@ -7,19 +7,15 @@
         "
       >
         <a
-          @click="
-            openExternal(this.$rendererUtils.getNavigationEndpoints(text))
-          "
+          @click="openExternal($rendererUtils.getNavigationEndpoints(text))"
           :key="index"
           class="link"
           >{{ text.text }}</a
         >
       </template>
-      <template v-else-if="this.$rendererUtils.checkInternal(text)">
+      <template v-else-if="$rendererUtils.checkInternal(text)">
         <a
-          @click="
-            openInternal(this.$rendererUtils.getNavigationEndpoints(text))
-          "
+          @click="openInternal($rendererUtils.getNavigationEndpoints(text))"
           :key="index"
           class="link"
           >{{ text.text }}</a
@@ -30,7 +26,12 @@
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.description {
+  white-space: pre-line;
+  margin-bottom: 16px;
+}
+</style>
 
 <script>
 import { Browser } from "@capacitor/browser";

From 3b71af756e97a045841b43bf289a0f5dd2a04b1c Mon Sep 17 00:00:00 2001
From: Ethan <ethan@etekweb.net>
Date: Mon, 28 Mar 2022 21:47:30 -0500
Subject: [PATCH 2/8] fixed comma separation on view/like counters

---
 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 f87658b..7263c2c 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -183,10 +183,10 @@ export default {
         //---   Content Stuff   ---//
         this.title = result.title;
         this.description = result.renderedData.description; // While this works, I do recommend using the rendered description instead in the future as there are some things a pure string wouldn't work with
-        this.views = result.metadata.viewCount.toLocaleString();
+        this.views = parseInt(result.metadata.viewCount).toLocaleString();
         this.likes = result.metadata.likes.toLocaleString();
         this.uploaded = result.metadata.uploadDate;
-        this.interactions[0].value = result.metadata.likes;
+        this.interactions[0].value = result.metadata.likes.toLocaleString();
         this.loaded = true;
 
         this.recommends = result.renderedData.recommendations;

From 7082cde26a995e894a0683705d49245b8366d1f9 Mon Sep 17 00:00:00 2001
From: Kenny <27463495+Frontesque@users.noreply.github.com>
Date: Wed, 30 Mar 2022 07:38:15 -0400
Subject: [PATCH 3/8] fix: :ambulance: Fix alex's mess ups

we love him anyway <3
---
 NUXT/pages/watch.vue | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 7263c2c..2704cfd 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -2,7 +2,7 @@
   <div class="accent">
 
     <!--   Stock Player   -->
-    <videoPlayer :vidSrc="vidSrc" /> 
+    <videoPlayer :vid-src="vidSrc" />
 
     <!--   VueTube Player V1   -->
     <!-- <VTPlayerV1 :sources="sources" v-if="sources.length > 0" />-->
@@ -60,7 +60,7 @@
         <p>Channel Stuff</p>
       </v-card-text>
       <div v-if="showMore" class="scroll-y ml-2 mr-2">
-        <slim-video-description-renderer :render="description">
+        <slim-video-description-renderer :render="description" />
       </div>
 
       <!-- <v-bottom-sheet
@@ -91,18 +91,11 @@
   </div>
 </template>
 
-<style>
-.vertical-button span.v-btn__content {
-  flex-direction: column;
-  justify-content: space-around;
-}
-</style>
-
 <script>
 import { Share } from "@capacitor/share";
 import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
 import VidLoadRenderer from "~/components/vidLoadRenderer.vue";
-import SlimVideoDescriptionRenderer from '../components/UtilRenderers/slimVideoDescriptionRenderer.vue';
+import SlimVideoDescriptionRenderer from '~/components/UtilRenderers/slimVideoDescriptionRenderer.vue';
 
 export default {
   components: { ShelfRenderer, VidLoadRenderer, SlimVideoDescriptionRenderer },
@@ -179,7 +172,7 @@ export default {
           result.availableResolutions[
             result.availableResolutions.length - 1
           ].url; // Takes the highest available resolution with both video and Audio. Note this will be lower than the actual highest resolution
-        
+
         //---   Content Stuff   ---//
         this.title = result.title;
         this.description = result.renderedData.description; // While this works, I do recommend using the rendered description instead in the future as there are some things a pure string wouldn't work with
@@ -217,3 +210,10 @@ export default {
   },
 };
 </script>
+
+<style>
+.vertical-button span.v-btn__content {
+  flex-direction: column;
+  justify-content: space-around;
+}
+</style>

From 059ace024cacd66a315b84adde6d53e20a8aba93 Mon Sep 17 00:00:00 2001
From: Kenny <27463495+Frontesque@users.noreply.github.com>
Date: Wed, 30 Mar 2022 08:32:08 -0400
Subject: [PATCH 4/8] refactor: :zap:

---
 NUXT/components/Player/VTPlayerV1.vue | 130 +++++++++++++++++++++++++
 NUXT/components/Player/index.vue      | 126 ++++++++++++++++++++++++
 NUXT/components/Player/scrubber.vue   |  30 ++++++
 NUXT/components/VTPlayerV1.vue        | 132 --------------------------
 NUXT/pages/watch_debug.vue            |   4 +-
 5 files changed, 288 insertions(+), 134 deletions(-)
 create mode 100644 NUXT/components/Player/VTPlayerV1.vue
 create mode 100644 NUXT/components/Player/index.vue
 create mode 100644 NUXT/components/Player/scrubber.vue
 delete mode 100644 NUXT/components/VTPlayerV1.vue

diff --git a/NUXT/components/Player/VTPlayerV1.vue b/NUXT/components/Player/VTPlayerV1.vue
new file mode 100644
index 0000000..f89b5f6
--- /dev/null
+++ b/NUXT/components/Player/VTPlayerV1.vue
@@ -0,0 +1,130 @@
+<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
new file mode 100644
index 0000000..9a69dd9
--- /dev/null
+++ b/NUXT/components/Player/index.vue
@@ -0,0 +1,126 @@
+<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>
+
+      <scrubber />
+
+      <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>
+import scrubber from "./scrubber.vue";
+
+export default {
+  components: {
+    scrubber,
+  },
+  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/scrubber.vue b/NUXT/components/Player/scrubber.vue
new file mode 100644
index 0000000..f86e12a
--- /dev/null
+++ b/NUXT/components/Player/scrubber.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+
+    <div class="scrubber">
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  duration: {
+    type: Number,
+    default: 0,
+  },
+  endDuration: {
+    type: Number,
+    default: 0,
+  },
+}
+</script>
+
+<style scoped>
+.scrubber {
+  width: 100%;
+  height: 1em;
+  background: #000;
+}
+</style>
diff --git a/NUXT/components/VTPlayerV1.vue b/NUXT/components/VTPlayerV1.vue
deleted file mode 100644
index 293040b..0000000
--- a/NUXT/components/VTPlayerV1.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-  <div>
-
-    <div class="content">
-
-      <v-btn @click="playing = !playing" class="pausePlay" text><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(value)" />
-      </div>
-
-      <video
-        autoplay
-        :src="vidSrc"
-        width="100%"
-        @webkitfullscreenchange="handleFullscreenChange"
-        ref="player"
-        style="max-height: 50vh"
-      />
-    </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()
-      },
-    },
-
-    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(val) {
-        const player = this.$refs.player;
-        player.currentTime = val;
-        console.log(val, this.currentTime, player.currentTime)
-      },
-
-      updateTiming() {
-        const player = this.$refs.player;
-        this.videoEnd = player?.duration;
-        this.currentTime = player?.currentTime;
-        console.log(player.currentTime, this.currentTime)
-      }
-
-    },
-
-
-    mounted() {
-      const src = this.sources[this.sources.length-1].url;
-      this.vidSrc = src;
-
-      setInterval(this.updateTiming, 100);
-    }
-
-
-  }
-
-</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>
\ No newline at end of file
diff --git a/NUXT/pages/watch_debug.vue b/NUXT/pages/watch_debug.vue
index d9cf883..1d66c68 100644
--- a/NUXT/pages/watch_debug.vue
+++ b/NUXT/pages/watch_debug.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="accent">
 
-    <VTPlayerV1 :sources="sources" v-if="sources.length > 0" />
+    <player :sources="sources" v-if="sources.length > 0" />
 
   </div>
 </template>
 
 <script>
-
+import player from "~/components/Player/index.vue"
 export default {
   data() {
     return {

From 432d0b84b6fdb05103e355647b19e45944dd080b Mon Sep 17 00:00:00 2001
From: Kenny <27463495+Frontesque@users.noreply.github.com>
Date: Wed, 30 Mar 2022 08:53:23 -0400
Subject: [PATCH 5/8] feat: :art: More progress on the player

---
 NUXT/components/Player/index.vue    | 23 +++++++++--------------
 NUXT/components/Player/scrubber.vue | 19 +++++++++++--------
 2 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index 9a69dd9..94de2d0 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -5,7 +5,7 @@
         <v-icon size="5em" color="white">mdi-{{ playing ? "pause" : "play" }}</v-icon>
       </v-btn>
 
-      <scrubber />
+      <scrubber class="scrubber" :duration="duration" :endDuration="endDuration" />
 
       <video
         ref="player"
@@ -13,6 +13,7 @@
         :src="vidSrc"
         width="100%"
         style="max-height: 50vh"
+        :duration="duration"
         @webkitfullscreenchange="handleFullscreenChange"
       />
     </div>
@@ -44,8 +45,8 @@ export default {
 
       //---   Player State Information   ---//
       playing: true,
-      currentTime: 0,
-      videoEnd: 0,
+      duration: 0,
+      endDuration: 0,
     };
   },
 
@@ -73,18 +74,11 @@ export default {
       }
     },
 
-    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);
+      this.endDuration = player.currentTime;
+      console.log(player.duration, this.endDuration);
     },
   },
 };
@@ -118,9 +112,10 @@ export default {
   left: 50%;
   transform: translate(-50%, -50%);
 }
-.seekBar {
+.scrubber {
   position: absolute;
   bottom: 0;
-  width: 100%;
 }
+
+
 </style>
diff --git a/NUXT/components/Player/scrubber.vue b/NUXT/components/Player/scrubber.vue
index f86e12a..e3364f9 100644
--- a/NUXT/components/Player/scrubber.vue
+++ b/NUXT/components/Player/scrubber.vue
@@ -2,7 +2,8 @@
   <div>
 
     <div class="scrubber">
-
+      <div ref="progress" class="progress" />
+      <div ref="background" class="background" />
     </div>
 
   </div>
@@ -10,13 +11,15 @@
 
 <script>
 export default {
-  duration: {
-    type: Number,
-    default: 0,
-  },
-  endDuration: {
-    type: Number,
-    default: 0,
+  props: {
+    duration: {
+      type: Number,
+      default: 0,
+    },
+    endDuration: {
+      type: Number,
+      default: 0,
+    },
   },
 }
 </script>

From dc1161a35c461c189d49e714cdd704ceeb69b45c Mon Sep 17 00:00:00 2001
From: Kenny <27463495+Frontesque@users.noreply.github.com>
Date: Wed, 30 Mar 2022 09:46:35 -0400
Subject: [PATCH 6/8] change 'Virtual Device' to 'Emulator' in
 '~/Pages/Mods/About'

---
 NUXT/pages/mods/about.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/NUXT/pages/mods/about.vue b/NUXT/pages/mods/about.vue
index 30d0ad7..44bdcfe 100644
--- a/NUXT/pages/mods/about.vue
+++ b/NUXT/pages/mods/about.vue
@@ -28,7 +28,7 @@
     <div>OS: {{ deviceInfo.operatingSystem }} ({{ deviceInfo.osVersion }})</div>
     <div>Model: {{ deviceInfo.model }}</div>
     <div>Manufacturer: {{ deviceInfo.manufacturer }}</div>
-    <div>Virtual Device: {{ deviceInfo.isVirtual ? "yes" : "no" }}</div>
+    <div>Emulator: {{ deviceInfo.isVirtual ? "yes" : "no" }}</div>
   </center>
 </template>
 

From cace94c644c363afb5db8dd44aac5e5d87bb3aab Mon Sep 17 00:00:00 2001
From: Kenny <27463495+Frontesque@users.noreply.github.com>
Date: Wed, 30 Mar 2022 12:57:49 -0400
Subject: [PATCH 7/8] feat: :+1: add seek bar to beta player

---
 NUXT/components/Player/index.vue    |  7 ++++---
 NUXT/components/Player/scrubber.vue | 31 +++++++++++++++++++----------
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index 94de2d0..f00f6b2 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -13,7 +13,6 @@
         :src="vidSrc"
         width="100%"
         style="max-height: 50vh"
-        :duration="duration"
         @webkitfullscreenchange="handleFullscreenChange"
       />
     </div>
@@ -77,8 +76,8 @@ export default {
     updateTiming() {
       const player = this.$refs.player;
       if (player == undefined) return;
-      this.endDuration = player.currentTime;
-      console.log(player.duration, this.endDuration);
+      this.duration = player.currentTime;
+      this.endDuration = player.duration;
     },
   },
 };
@@ -111,6 +110,8 @@ export default {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  height: 5em !important;
+  width: 5em !important;
 }
 .scrubber {
   position: absolute;
diff --git a/NUXT/components/Player/scrubber.vue b/NUXT/components/Player/scrubber.vue
index e3364f9..41c95f2 100644
--- a/NUXT/components/Player/scrubber.vue
+++ b/NUXT/components/Player/scrubber.vue
@@ -1,11 +1,6 @@
 <template>
-  <div>
-
-    <div class="scrubber">
-      <div ref="progress" class="progress" />
-      <div ref="background" class="background" />
-    </div>
-
+  <div class="scrubber">
+    <div id="progress" class="primary" />
   </div>
 </template>
 
@@ -21,13 +16,29 @@ export default {
       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: 1em;
-  background: #000;
+  height: 5px;
+  background: rgba(255, 255, 255, 0.5);
+}
+#progress {
+  height: 100%;
 }
 </style>

From 79c6b9efdd3c222c937864a42c83155105af36a1 Mon Sep 17 00:00:00 2001
From: Alex <56329333+404-Program-not-found@users.noreply.github.com>
Date: Thu, 31 Mar 2022 15:22:22 +1300
Subject: [PATCH 8/8] feat: continuation script

---
 NUXT/components/topNavigation.vue | 11 ++++++--
 NUXT/pages/home.vue               |  8 +++---
 NUXT/plugins/innertube.js         | 44 +++++++++++++++++++++++++++----
 NUXT/plugins/youtube.js           | 26 ++++++++++++++++--
 4 files changed, 75 insertions(+), 14 deletions(-)

diff --git a/NUXT/components/topNavigation.vue b/NUXT/components/topNavigation.vue
index ceaa8bb..5a63ff3 100644
--- a/NUXT/components/topNavigation.vue
+++ b/NUXT/components/topNavigation.vue
@@ -77,11 +77,18 @@ export default {
   methods: {
     refreshRecommendations() {
       this.$emit("scroll-to-top");
+      const continuations = this.$store.state.recommendedVideos.continuations;
       this.$store.commit("updateRecommendedVideos", []);
       this.$youtube
-        .recommend()
+        .continuation(
+          continuations[1].reloadContinuationData.continuation,
+          "browse"
+        )
         .then((result) => {
-          if (result) this.$store.commit("updateRecommendedVideos", result[0]);
+          if (result)
+            this.$youtube.recommend(result).then((result) => {
+              if (result) this.$store.commit("updateRecommendedVideos", result);
+            });
         })
         .catch((error) => this.$logger("Home Page (Nav Refresh)", error, true));
     },
diff --git a/NUXT/pages/home.vue b/NUXT/pages/home.vue
index d6bd426..27860e9 100644
--- a/NUXT/pages/home.vue
+++ b/NUXT/pages/home.vue
@@ -7,8 +7,8 @@
 
   <div>
     <!--   Video Loading Animation   -->
-    <vid-load-renderer v-if="!recommends" />
-    <horizontal-list-renderer v-else :render="recommends" />
+    <vid-load-renderer v-if="!recommends.contents" />
+    <horizontal-list-renderer v-else :render="recommends.contents[0]" />
   </div>
 </template>
 
@@ -29,14 +29,12 @@ export default {
     },
   },
 
-  // The following code is only a demo for debugging purposes, note that each "shelfRenderer" has a "title" value that seems to align to the categories at the top of the vanilla yt app
-
   mounted() {
     if (!this.recommends.items || !this.recommends.items.length) {
       this.$youtube
         .recommend()
         .then((result) => {
-          if (result) this.recommends = result[0];
+          if (result) this.recommends = result;
         })
         .catch((error) => this.$logger("Home Page", error, true));
     }
diff --git a/NUXT/plugins/innertube.js b/NUXT/plugins/innertube.js
index 637e258..67934bf 100644
--- a/NUXT/plugins/innertube.js
+++ b/NUXT/plugins/innertube.js
@@ -95,6 +95,42 @@ class Innertube {
     };
   }
 
+  async getContinuationsAsync(continuation, type) {
+    let data = { context: this.context, continuation: continuation };
+    let url
+    switch (type) {
+      case "browse":
+        url = `${constants.URLS.YT_BASE_API}/browse?key=${this.key}`;
+        break
+      case "search":
+        url = `${constants.URLS.YT_BASE_API}/search?key=${this.key}`;
+        break
+      case "next":
+        url = `${constants.URLS.YT_BASE_API}/next?key=${this.key}`;
+        break
+      default:
+        throw ("Invalid type")
+    }
+
+    const response = await Http.post({
+      url: url,
+      data: data,
+      headers: { "Content-Type": "application/json" },
+    }).catch((error) => error);
+    if (response instanceof Error) {
+      return {
+        success: false,
+        status_code: response.status,
+        message: response.message,
+      };
+    }
+    return {
+      success: true,
+      status_code: response.status,
+      data: response.data,
+    };
+  }
+
   async getVidAsync(id) {
     let data = { context: this.context, videoId: id };
     const responseNext = await Http.post({
@@ -181,11 +217,9 @@ class Innertube {
       response.data.output?.playabilityStatus?.status == ("ERROR" || undefined)
     )
       throw new Error(
-        `Could not get information for video: ${
-          response.status_code ||
-          response.data.output?.playabilityStatus?.status
-        } - ${
-          response.message || response.data.output?.playabilityStatus?.reason
+        `Could not get information for video: ${response.status_code ||
+        response.data.output?.playabilityStatus?.status
+        } - ${response.message || response.data.output?.playabilityStatus?.reason
         }`
       );
     const responseInfo = response.data.output;
diff --git a/NUXT/plugins/youtube.js b/NUXT/plugins/youtube.js
index 90dcc53..78facc8 100644
--- a/NUXT/plugins/youtube.js
+++ b/NUXT/plugins/youtube.js
@@ -114,6 +114,8 @@ const innertubeModule = {
   // Front page recommendation
   async recommend() {
     const response = await InnertubeAPI.getRecommendationsAsync();
+
+
     if (!response.success)
       throw new Error("An error occurred and innertube failed to respond");
 
@@ -125,8 +127,28 @@ const innertubeModule = {
 
       if (video) return video;
     });
-    console.log(final);
-    return final;
+    const continuations = response.data.contents.singleColumnBrowseResultsRenderer.tabs[0]
+      .tabRenderer.content.sectionListRenderer.continuations
+    console.log({ continuations: continuations, contents: final });
+    return { continuations: continuations, contents: final };
+  },
+
+  async recommendContinuation(response) {
+    const contents = response.continuationContents.sectionListContinuation.contents;
+    const final = contents.map((shelves) => {
+      const video = shelves.shelfRenderer?.content?.horizontalListRenderer;
+
+      if (video) return video;
+    });
+    const continuations = response.continuationContents.sectionListContinuation.continuations
+    return { continuations: continuations, contents: final };
+  },
+
+  async continuation(continuation, endpoint) {
+    const response = await InnertubeAPI.getContinuationsAsync(continuation, endpoint);
+    console.log(response)
+    if (!response.success) throw new Error("An error occurred and innertube failed to respond");
+    return response
   },
 
   async search(query) {