feat: 👍 add seek bar to beta player

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;

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>