Handling component unmounting before player is ready

[greggb]

Within my single page app a user can navigate between views that may or may not contain videos. When loading a view with a video (with react-player) and switching to a non-video view before the player has finished loading we see this error:

Uncaught Error: The YouTube player is not attached to the DOM.
    at Y.h.B (www-widgetapi.js:100)

We do have a callback registered to onProgress={onVideoProgress}

This clearly comes from the Youtube API, but I'm wondering if there is a hook from react-player that I can use to destroy the player on componentWillUnmount to avoid this console error?

Similar issues like (#20) didn't seem to apply in this case.

[hassaans]

Was this resolved?

[cookpete]

I'm not sure why this would ever happen. There is a specific check when stopping/unmounting to ensure the player is attached to the DOM, and the onProgress timeout is cleared when unmounting.

If anyone can reliably cause this error, please post an example repo or jsFiddle.

[greggb]

I ended up just grabbing a reference to the YouTube instance and destroying it in CWUm.

We were able to repro fairly consistently between two routes with react-router, but it could have been any number of other side effects causing the issue.

@hassaans I'd recommend manually destroying the instance to see if that helps.

[hassaans]

@cookpete If you quickly move away from the page before the video loads, this error is thrown:

Error: The YouTube player is not attached to the DOM.
  at Y.h.B(/yts/jsbin/www-widgetapi-vflHdGmps/www-widgetapi.js:100:224)
  at Array.forEach(<anonymous>)
  at y(/yts/jsbin/www-widgetapi-vflHdGmps/www-widgetapi.js:15:133)
  at Wa.g(/yts/jsbin/www-widgetapi-vflHdGmps/www-widgetapi.js:81:242)
  at Oa.f(/yts/jsbin/www-widgetapi-vflHdGmps/www-widgetapi.js:70:28)

This doesn't affect user experience, but it's really cluttering our Sentry. I suggest reopening this issue.

[cookpete]

 If anyone can reliably cause this error, please post an example repo or jsFiddle.

[cookpete]

I'm sure this is very annoying, but I have already described the how the library already is trying to avoid this error. If it is still happening, I cannot fix it unless I can consistently reproduce it. If anyone can give instructions on how to reliably cause this error, I will take a look when I get some time.

If you quickly move away from the page before the video loads, this error is thrown

I have attempted this but I cannot get the error to occur. The steps to reproduce are not specific enough.

[akougblenou]

I have found another issue raise on a similar library that may help reproduce:
gajus/youtube-player#66

[suleymangunduzz]

We are facing this issue too actually, and when I remove this code block,
if (this.isReady) { this.player.stop(); }

and add only

this.player.stop()

the issue is gone. So I am wondering why are you checking the isReady state on componentWillUnmount ?

and what if just delete this part ?