Use events and emits for finding currentTime.

src/components/ChaptersBar.vue

@@ -69,24 +69,21 @@
     @apply truncate overflow-hidden inline-block w-10em;
 }
 </style>
-<script type="text/javascript">
+
-export default {
+<script setup>
-    emits: ["seek"],
+import { defineProps, defineEmits } from "vue";
-    props: {
+
-        chapters: Object,
+defineProps({
-        mobileLayout: {
+    chapters: Object,
-            type: Boolean,
+    mobileLayout: {
-            default: () => true,
+        type: Boolean,
-        },
+        default: () => true,
     },
-    data() {
+    playerPosition: {
-        return { playerPosition: 0 };
+        type: Number,
+        default: () => 0,
     },
-    mounted() {
+});
-        // get current video position in regular intervals
+
-        setInterval(() => {
+defineEmits(["seek"]);
-            this.playerPosition = document.querySelector("video").currentTime;
-        }, 2000);
-    },
-};
 </script>

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

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>