From 25d82169b6fe4690cc58f09d435aee016577cf9b Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Tue, 19 Jul 2022 21:59:03 +0530
Subject: [PATCH] Use events and emits for finding currentTime.

---
 src/components/ChaptersBar.vue | 33 +++++++++++++++------------------
 src/components/VideoPlayer.vue |  2 ++
 src/components/WatchVideo.vue  |  6 ++++++
 3 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/components/ChaptersBar.vue b/src/components/ChaptersBar.vue
index 6630196c..ca57f195 100644
--- a/src/components/ChaptersBar.vue
+++ b/src/components/ChaptersBar.vue
@@ -69,24 +69,21 @@
     @apply truncate overflow-hidden inline-block w-10em;
 }
 </style>
-<script type="text/javascript">
-export default {
-    emits: ["seek"],
-    props: {
-        chapters: Object,
-        mobileLayout: {
-            type: Boolean,
-            default: () => true,
-        },
+
+<script setup>
+import { defineProps, defineEmits } from "vue";
+
+defineProps({
+    chapters: Object,
+    mobileLayout: {
+        type: Boolean,
+        default: () => true,
     },
-    data() {
-        return { playerPosition: 0 };
+    playerPosition: {
+        type: Number,
+        default: () => 0,
     },
-    mounted() {
-        // get current video position in regular intervals
-        setInterval(() => {
-            this.playerPosition = document.querySelector("video").currentTime;
-        }, 2000);
-    },
-};
+});
+
+defineEmits(["seek"]);
 </script>
diff --git a/src/components/VideoPlayer.vue b/src/components/VideoPlayer.vue
index d42b33a1..a1a2c79f 100644
--- a/src/components/VideoPlayer.vue
+++ b/src/components/VideoPlayer.vue
@@ -42,6 +42,7 @@ export default {
         selectedAutoLoop: Boolean,
         isEmbed: Boolean,
     },
+    emits: ["timeupdate"],
     data() {
         return {
             lastUpdate: new Date().getTime(),
@@ -343,6 +344,7 @@ export default {
             if (noPrevPlayer) {
                 videoEl.addEventListener("timeupdate", () => {
                     const time = videoEl.currentTime;
+                    this.$emit("timeupdate", time);
                     this.updateProgressDatabase(time);
                     if (this.sponsors && this.sponsors.segments) {
                         this.sponsors.segments.map(segment => {
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 49fd0a1f..64c4e86d 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -25,11 +25,13 @@
                     :index="index"
                     :selected-auto-play="selectedAutoPlay"
                     :selected-auto-loop="selectedAutoLoop"
+                    @timeupdate="onTimeUpdate"
                 />
                 <ChaptersBar
                     :mobileLayout="isMobile"
                     v-if="video?.chapters?.length > 0"
                     :chapters="video.chapters"
+                    :player-position="currentTime"
                     @seek="navigate"
                 />
             </div>
@@ -242,6 +244,7 @@ export default {
             smallView: smallViewQuery.matches,
             showModal: false,
             isMobile: true,
+            currentTime: 0,
         };
     },
     computed: {
@@ -465,6 +468,9 @@ export default {
         navigate(time) {
             this.$refs.videoPlayer.seek(time);
         },
+        onTimeUpdate(time) {
+            this.currentTime = time;
+        },
     },
 };
 </script>