bug(Angular Youtube player: Cannot read properties of null (reading 'src')

[mattiLeBlanc]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

17.0.9

Description

In our app, we can play YT music playlists. When we search for a keyword and get a couple of YT playlists as result, we can play the first result which opens the YT player. When I then search again and start the second search result, whilst the YT play er is still active, I change the playerVars with the new playlist ID.
The playlist will load but an error is thrown in the console
which is being picked up by my app error handler.

I have to be able to load a different video in the videoplayer, and the video player Angular component will not always be destroyed.

Reproduction

In our app, we can play YT music playlists. When we search for a keyword and get a couple of YT playlists as result, we can play the first result which opens the YT player. When I then search again and start the second search result, whilst the YT play er is still active, I change the playerVars with the new playlist ID.
The playlist will load but an error is thrown in the console:

TypeError: Cannot read properties of null (reading 'src')
    at r.sendMessage (www-widgetapi.js:253:96)
    at Jc (www-widgetapi.js:243:100)
    at <computed>.c.<computed> [as pauseVideo] (www-widgetapi.js:258:135)
    at a.pauseVideo (youtube-player.mjs:201:22)
    at Object.next (youtube-player.component.ts:82:20)
    at o.subscribe.a (tap.js:17:71)
    at Is._next (OperatorSubscriber.js:12:9)
    at Is.next (Subscriber.js:29:12)
    at filter.js:6:122
    at Is._next (OperatorSubscriber.js:12:9)

whichi is being picked up by my app error handler.

Expected Behavior

No error when I change the youtube playlist id.
I

Actual Behavior

JS error thrown

In our app, we can play YT music playlists. When we search for a keyword and get a couple of YT playlists as result, we can play the first result which opens the YT player. When I then search again and start the second search result, whilst the YT play er is still active, I change the playerVars with the new playlist ID.
The playlist will load but an error is thrown in the console:

TypeError: Cannot read properties of null (reading 'src')
at r.sendMessage (www-widgetapi.js:253:96)
at Jc (www-widgetapi.js:243:100)
at .c. [as pauseVideo] (www-widgetapi.js:258:135)
at a.pauseVideo (youtube-player.mjs:201:22)
at Object.next (youtube-player.component.ts:82:20)
at o.subscribe.a (tap.js:17:71)
at Is._next (OperatorSubscriber.js:12:9)
at Is.next (Subscriber.js:29:12)
at filter.js:6:122
at Is._next (OperatorSubscriber.js:12:9)

### Environment

Angular: 18
CDK/Material: 18
Browser(s): 'Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36`
Operating System (e.g. Windows, macOS, Ubuntu): MacOS / Chrome

[andrewseguin]

Without a link to reproduce this, it's going to be very unlikely that we can diagnose the issue

[mattiLeBlanc]

@andrewseguin I can try to if I can reproduce it in stackblitz. I think it is a race condition issue.
My app error handler is greedy and caught the error whilst the youtube playlist was playing fine.

[4dd4m]

Sorry, I couldnt reproduce this on stackblitz (player refuses the connection). So I just add some information to this.

My issue is around looping in some cases (I mostly use player.playVideo() to kick off the play). In every cases the video playback is fine. What I do is just getting a videoId from a service, get another videoId on some button push.

• I noticed that the (onready) and (apiChanges) fires inconsistently

• For instance on pageload (onready) fires 0 times, or multiple (2-3-4) times.

• When (onready) gets 0 calls, the video start playing, but every interaction with my 'player' object will result a TypeError of null (as described above).

• When (onready) gets a call (1-3) times, everything seems in place, the player even loops nicely at end, it seems like my 'player' object holds the reference fine

• When onready gets called to many times (3+), the video still starts playing, but invoking player.playVideo() when the playsertate ends throws TypeError null (as above).

• In every case, (stateChange) calls okay with the state.