End time for video stuck at 1 second

[Phixyn]

Description

A clear and concise description of what the bug is.

End time for the video is stuck at 1 second. Slider is fully filled and its handles cannot be moved. To fix this, a few page refreshes may be needed.

Happens on mobile and desktop.

Steps to reproduce

A list of steps to reproduce the behavior.

1. Navigate to the website
2. Wait for video player to load

You should see that the end time input is stuck at 1, and so is the slider. If not, refresh the page until this happens.

Expected behavior

A clear and concise description of what you expected to happen.

End time input should be set to the end value in the original URL's querystring. Slider fill should reflect this. User should be able to move the slider handles.

Screenshots

If applicable, add screenshots or a GIF to help demonstrate the bug.

The video here is 3607 seconds long, so the slider and end time input field are clearly wrong.

Desktop

If using the website on desktop, please complete the following information.

• OS [e.g. Windows]: Windows 10
• Browser [e.g. Firefox, Chrome]: Firefox and Chrome
• Browser version [e.g. 22]: Firefox 84.0.2 64-bit and Chrome 87.0.4280.141 (Official Build) (64-bit)

Mobile

If using the website on mobile, please complete the following information.

• Device [e.g. Google Pixel]: OnePlus 6T
• OS: [e.g. Android 10]: Android 10 with OxygenOS 10.3.7
• Browser [e.g. Chrome]: Chrome
• Browser version [e.g. 22]: 88.0.4324.93

Additional information

If applicable, add any other information about the bug here.

This issue started happening recently, about two days ago. It was first noticed on a local instance, but quickly reproduced on the live instance. It has not previously been an issue and it's not related to any changes recently pushed to the master branch. As such, this could be an issue with the YouTube IFrame API.

It seems that the state object has the end set to 1, so the API may not be giving us the video duration. Since this only happens sometimes, it could also be a race condition of some sort.

[Phixyn]

Hey present Phix, it's me past Phix. Remember this meme from a while back?

Well, we used to be able to use getDuration() reliably when onPlayerReady event fired, because presumably the video metadata would be loaded by the time this event fired. But I added some logging to this event's handler, and now that seems no longer the case. getDuration() now returns 0 in some cases, which is the cause of this bug 😬

I guess we go ask the backend server for the video duration instead, I'm sure that's 100% reliable 🤔

[Phixyn]

Should try to do more asynchronously. Here it seems that we're trying to update the slider and input elements' data attributes before we know that the video player is ready and have access to the video duration. With Promises, this could become less of an issue.