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: https://github.com/epaudio/hammerheadaudio/blob/master/src/Content.js
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: