This should eliminate this race condition by using

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
#9.

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)

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"