Can't get it to work in ReactJS

[c0debreaker]

Will it work with ReactJS? I saw it worked one time but the video only showed for a second then it disappeared. Never I saw the youtube video again.

[gkatsev]

It should work with react, though, you'd need to tell react that the div that videojs uses is going to get updated and that react shouldn't do anything about it. For example, wrapping it in a component that returns false from shouldComponentUpdate. I'm going to note that this is something we should write a guide about.

[c0debreaker]

Thanks a lot. I can wait. Hopefully you can write a quick example.

[c0debreaker]

I got it working!!! It was tough!!! I didn't use shouldComponentUpdate.

Though I noticed a new problem but I think it's React. The second time I open my Modal containing the youtube video, it won't display it anymore. It will just show the html5 default video controls.

Also, I see it in the DOM but it's not getting displayed.

[c0debreaker]

Here are more updates. The first time I load it after clicking Watch Now button, this is what I have in DOM - http://i.imgur.com/EwDpRYJ.png and I can watch it.

After I close the player and then click Watch Now button again, this is what I have. Tons of DOM elements are gone - http://i.imgur.com/Sw2mXJ9.png

I just see this - http://i.imgur.com/9sT946U.png vs this during first load - http://i.imgur.com/ot1Rrfy.png

Why is it doing this?

Here is the code - https://gist.github.com/c0debreaker/01f3962fedaea8cbb27b3145db03157e

[gkatsev]

I think that's exactly the problem that shouldComponentUpdate is fixing. If anything in the DOM changes, React will reload the entire component which will cause the player to break since videojs won't run again.

[c0debreaker]

I had return false in shouldComponentUpdate of my NoUpdate component. I wrapped the video code like this

<NoUpdate>
  <video> .........</video>
</NoUpdate>

However, when I do that, the Modal is blank. Here is the complete component

https://gist.github.com/c0debreaker/d4a2ed270e517fb4ebe14432e1ae0161

[c0debreaker]

This is how I wrote NoUpdate.js - https://gist.github.com/c0debreaker/986376be2c5486e43ee604bc62b49deb

[c0debreaker]

I got it working using the logic from this link - https://github.com/esportsguy/react-videojs/blob/master/src/index.js