From 166fe004b2d68f77352bad2f0afb463f65ee1efa Mon Sep 17 00:00:00 2001
From: MarmadileManteater <MarmadileManteater@proton.me>
Date: Sat, 20 Aug 2022 08:49:41 -0400
Subject: [PATCH] This should eliminate this race condition by using (#2493)

the seconds length value provided by the API
rather than trying to pull the time from the video
element. This is related to FreeTubeApp#2492 and
MarmadileManteater#9.
---
 .../components/ft-video-player/ft-video-player.js    | 12 ++++++++++--
 src/renderer/views/Watch/Watch.vue                   |  1 +
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/ft-video-player/ft-video-player.js b/src/renderer/components/ft-video-player/ft-video-player.js
index f15ebbd6..0967eabc 100644
--- a/src/renderer/components/ft-video-player/ft-video-player.js
+++ b/src/renderer/components/ft-video-player/ft-video-player.js
@@ -73,6 +73,10 @@ export default Vue.extend({
     videoId: {
       type: String,
       required: true
+    },
+    lengthSeconds: {
+      type: Number,
+      required: true
     }
   },
   data: function () {
@@ -566,6 +570,10 @@ export default Vue.extend({
             })
           })
         })
+      }).catch((error) => {
+        this.showToast({
+          message: error.message
+        })
       })
     },
 
@@ -627,8 +635,8 @@ export default Vue.extend({
       markerDiv.style.position = 'absolute'
       markerDiv.style.opacity = '0.6'
       markerDiv.style['background-color'] = marker.color
-      markerDiv.style.width = (marker.duration / this.player.duration()) * 100 + '%'
-      markerDiv.style.marginLeft = (marker.time / this.player.duration()) * 100 + '%'
+      markerDiv.style.width = (marker.duration / this.lengthSeconds) * 100 + '%'
+      markerDiv.style.marginLeft = (marker.time / this.lengthSeconds) * 100 + '%'
       markerDiv.title = this.sponsorBlockTranslatedCategory(marker.category)
 
       this.player.el().querySelector('.vjs-progress-holder').appendChild(markerDiv)
diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
index 241d7dd0..c582beb7 100644
--- a/src/renderer/views/Watch/Watch.vue
+++ b/src/renderer/views/Watch/Watch.vue
@@ -27,6 +27,7 @@
           :format="activeFormat"
           :thumbnail="thumbnail"
           :video-id="videoId"
+          :length-seconds="videoLengthSeconds"
           class="videoPlayer"
           :class="{ theatrePlayer: useTheatreMode }"
           @ready="checkIfWatched"