feat: ✨ Beta Player Duration Information

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) {