Maintain react-player light mode after user clicks on thumbnail

Question

I'm using the light={true} setting in my ReactPlayer component to show a thumbnail on a list of videos. This works fine on the initial load. However, when a user clicks on the thumbnail, I open a modal to play the video (in a separate ReactPlayer component). When the user closes the modal and returns to the list, the video they clicked on is now no longer in "thumbnail mode".

I have tried passing a light: true parameter from my reducer on the MODAL_CLOSED action, and I can successfully see that value coming into my component, but setting the light property to that value has no effect on the thumbnail mode of my ReactPlayer component.

Is there a way to keep the ReactPlayer in thumbnail mode always, regardless of user interaction?

Answer 1

I had a similar issue and this is how I kept it in "light" mode

• Add a ref with useRef

// Create a ref
const playerRef = React.useRef(null)
// Your video url
const yourUrl = "https://yourUrlHere..."

return (
  <ReactPlayer 
    ref={playerRef}
    light={true}
    url={yourUrl}
  />
):

• create a useEffect that calls ref.current.showPreview() anytime there is a change that causes ReactPlayer to leave "light" mode

// This will make the player go back to "light" mode
  React.useEffect(() => {
    
    if (playerRef) {
      playerRef.current.showPreview();
    }
    
  }, [index]);

I also made a CodeSandbox if you'd like to check it out