Preload Conditionally Rendered React-Player Content

(Emmett Palaima) #1

Hi, I am building a single page app with ReactJS, and am using React-Player npm package to load videos. The way I am setting up my page I have a parent class which conditionally renders one of several subclasses based on a selected tab (using if-statements leading to a different return for the render function). You can find the full code for the class here:

This works well for my purposes, except that my React-Player reloads the video whenever I select a different tab. I am trying to find a way to load the video content with the page and keep it loaded, so that the user is not having to wait for it to reload every time a new tab is selected.

Is there a way to do this? Either through preloading the content or changing the way I am handling the conditional rendering?

People have suggested using shouldComponentUpdate(), but adding this to the class containing the player (returning false) did not prevent the player from being reloaded. React-Player also has a preload prop but this seems to be a fix for a specific bug rather than something about actually preloading the video in the sense that I mean.

Here is the website in progress and the source code on github:

(Emmett Palaima) #2

React-Player Documentation:
React-Player Preload Prop Documentation:

(Emmett Palaima) #3

I solved this issue by using style={{display: ‘none’}} to hide the content I was not showing. The value of display was set as a prop and passed to the outer div of each of the subclasses, while the inner divs were set to “display: inherit” in css.

No shouldComponentUpdate() required.

Hopefully this is helpful to anyone else dealing with the same issue.