Player won't rerender when remounting on a new page

[et-nat1995]

I have two pages page A and page B

Page A uses a player with a config in jw player that auto plays when loaded on the screen.

Page B uses a player with a config in jw player that lets the user press play on the video.

When a user clicks on a link from page A to page B the package maintains the same config as page A in page B and vice versa.

Both players have different playerIds and I added a check to check if the page is mounted or unmounted. But that still doesn't make a difference.

Page A and B player setup:

const foo = (props) => {
  const classes = useStyles();

  const [isMounted, setIsMounted] = useState(false)
  useEffect(() => {
    setIsMounted(true)
    return () => {
      setIsMounted(false)
    }
  }, [])

  return (
        {
          isMounted ? <ReactJWPlayer playerId='unique_id' playerScript='https://cdn.jwplayer.com/libraries/some_player.js' playlist="https://cdn.jwplayer.com/feeds/some_id.json" /> : ''
        }
  )
}

[philmirez]

I was facing this same problem. It wasn't rerendering the video after changing the video id.

I stumbled across this closed issue, however it isn't in terms of hooks.

So, I updated it. 😁

const foo = (props) => {
  const [rerender, setRerender] = useState(true)

  useEffect(() => {
    setRerender(true)
  }, [props.videoId])

  useEffect(() => {
    if (rerender) {
      setRerender(false)
    }
  }, [rerender]

  return (
    <div>
      {!rerender && <ReactJWPlayer {...props} />}
    </div>
  )
}

[et-nat1995]

@philmirez oh man i was pretty close. I'll give this solution a shot. Thank you

[jretamal]

If you have an example playlist List 1, List 2, List 3

When you click on playlist 1, the content of that playlist is displayed and it works, but if you load playlist 2, it still continues with playlist 1, for that you must assign a key to .

e.g:

<JWPlayer key={props.id}