Dynamically load new text track source without re-rendering MediaPlayer component?

[MelvinHK]

I'm not sure if it's a limitation, a bug, or I am doing something wrong, but when dynamically changing the src prop of a Track component, the new vtt URL isn't fetched and/or rendered. I have to re-render the MediaPlayer component using a key prop that is the dynamic vttURL variable. Only then does the player fetch and render the new text track source.

One of my features includes changing video sources whilst in fullscreen (and new captions are fetched), however the re-render (as it re-mounts the player) will boot the user out of fullscreen.

Aside from the key prop solution, I've tried programmatically removing/adding tracks with a useEffect with vttURL as the dependency which didn't work.

Any help or insight to this is much appreciated.

[MelvinHK]

I just thought about wrapping the MediaPlayer component in a div element, and full screening the div element instead. This allows the player to re render without booting the user from fullscreen, because its the parent div element thats in fullscreen. Dont know if itll work but will try to implement it later.