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

mattiLeBlanc commented 3 months ago

Is this a regression?

[X] 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 commented 3 months ago

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

mattiLeBlanc commented 3 months ago

@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.

angular / components