[Bug]: SponsorBlock segments don't always display in the timeline when using the Invidious API

[MarmadileManteater]

Guidelines

• I have encountered this bug in the latest release of FreeTube.
• I have searched the issue tracker for a bug report that matches the one I want to file, without success.
• I have searched the documentation for information that matches the description of the bug I want to file, without success.

Describe the bug

1. Enable "Sponsor Block" in the settings
2. Select "Invidious API" as your default API
3. Navigate to a video which has sponsored segments (ex: 2Q0bLo5nSsU)
4. Sponsor block segments are not visible, but the player does still skip the segments when they would occur.
   

Expected Behavior

The sponsored segments should display on the timeline in the color selected in the settings. This is what the video looks like when the local API is selected.

Issue Labels

race condition

FreeTube Version

v0.17.1

Operating System Version

Windows 10 Pro Version 21H2 Installed on 4/‎3/‎2022 OS build 19044.1889 Experience Windows Feature Experience Pack 120.2212.4180.0

Installation Method

.exe

Primary API used

Invidious API

Last Known Working FreeTube Version (If Any)

No response

Additional Information

This issue seems to be occurring because this.player.duration() is often 0 at the time when addSponsorBlockMarker is called (especially when the Invidious API is preferred), and this.player.duration() only becomes the length of the video after addSponsorBlockMarker is called. This causes a division by zero where the width and positioning of the sponsored segments would normally be set.

// line 630 of src\renderer\components\ft-video-player\ft-video-player.js
markerDiv.style.width = (marker.duration / this.player.duration()) * 100 + '%'
markerDiv.style.marginLeft = (marker.time / this.player.duration()) * 100 + '%'

JavaScript evaulates the strings as Infinity%, and the result is that the sponsored segments do not always appear when the Invidious API is selected as the preferred API.

Nightly Build

• I have encountered this bug in the latest nightly build.

[efb4f5ff-1298-471a-8973-3d47447115dc]

Did u also had issue with the local api like in #1439

[MarmadileManteater]

I am unsure. It is totally possible. It is very likely that it is less pronounced for the Local API because it is taking less time with each request.

[efb4f5ff-1298-471a-8973-3d47447115dc]

Is it possible for u to look into. If u want and have the time for it?

[MarmadileManteater]

I believe my pull request will fix this issue. I do not know for sure if it will fix the other issue, but it might from the looks of it.