bug(youtube-player): YT.Player is not a constructor

[dwolverton]

This is an intermittent exception due to a race condition.

The problem is in youtube-player.ts line 213. It checks if (!window.YT) but window.YT exists before window.YT.Player exists. There is an intermediate loading state where YT.loaded = 0. I believe a solution could be to change this if to if (!window.YT || !window.TY.loaded) or alternatively if (!window.YT || !window.TY.Player).

Reproduction

This Stackblitz has similar code to our app where the problem is happening, however it did not reproduce the race condition for me. https://stackblitz.com/edit/components-issue-dkswjg?file=src%2Findex.html

Steps to reproduce:

1. Get the youtube iframe API by adding this to index.html: <script src="https://www.youtube.com/iframe_api"></script>
2. Use the in a component that loads fairly immediately.

Expected Behavior

The player shows the video.

Actual Behavior

The player did not load. An error is logged to the console.

ERROR TypeError: YT.Player is not a constructor
at youtube-player.js:529
at ZoneDelegate.invoke (zone-evergreen.js:364)
at Zone.run (zone-evergreen.js:123)
at NgZone.runOutsideAngular (core.js:27364)
at ScanSubscriber.syncPlayerState [as accumulator] (youtube-player.js:529)
at ScanSubscriber._tryNext (scan.js:49)
at ScanSubscriber._next (scan.js:42)
at ScanSubscriber.next (Subscriber.js:49)
at MapSubscriber._next (map.js:35)
at MapSubscriber.next (Subscriber.js:49)

Environment

• Angular: 10.0.6
• CDK/Material: 10.2.1
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

Possibly some commenters on #19871 were seeing this same problem.

[jelbourn]

@dwolverton great report, feel free to send a PR with your proposed solution

[crisbeto]

I tried looking into this, but I wasn't able to reproduce it, even if I throttle the request for YouTube's API for long after the Angular app is done loading. I don't doubt that it's happening, but I have a hard time understanding what is going on, because the way we have the component set up is that it'll wait for window.onYouTubeIframeAPIReady to be called by YouTube itself. The only way it could happen is if YouTube decides to invoke the callback before it is actually ready which seems counter-intuitive.

As you mentioned, it can happen if YT is defined, but YT.Player doesn't exist yet, but that seems like a very narrow window of time between it loading and our code being run.

[dwolverton]

I'll try to have another look in the next few days to see if I can find a way to get a sample that reproduces it.

[Ronll]

I am having the same issue, can confirm that @dwolverton 's fix works (if (!window.YT || !window.TY.Player))

made a pr in case it helps :)

[dwolverton]

I have been able to create a stackblitz that reproduces and illustrates the issue. https://stackblitz.com/edit/components-issue-2tnqui?file=src%2Fapp%2Fexample-component.ts The example-components.ts file has three different points where the YoutubePlayer can be created by setting this.videoId. One is early enough to work, one is late enough to work, and one is right at the time when this failure happens. Those that would work are commented out.

Also instructive is the YouTube API loading code itself... https://www.youtube.com/iframe_api

I see that @Ronll made a pull request, but let me know if you need any more help from me.