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 1/5] 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 2/5] 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 3/5] 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 4/5] 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 5/5] 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>