fix: ⚡ Beta Player Updates

fix beta player (again), add 'seekbar' module and improve readability

NUXT/components/Player/index.vue

@@ -9,42 +9,27 @@
       style="max-height: 50vh; display: block"
       @webkitfullscreenchange="handleFullscreenChange"
     />
-    <v-progress-linear
+    <seekbar :video=$refs.player v-if="$refs.player" />
-      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 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() {

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>

NUXT/pages/watch_debug.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="accent">
+  <div>
 
     <player :sources="sources" v-if="sources.length > 0" />