Youtube configs of start changed after player is ready won't be reflected

[LoyalPotato]

Not sure if this is an issue with this component or the youtube player itself, but reporting here nonetheless.

Current Behavior

I have a youtube video to be configured to start at a certain time. At the start there are times where the value is still not the newest, but is updated a milliseconds after.
The problem is that if the player gets ready with the first value, then even if it's updated to the new value, it will still use the first value.
This is without even clicking the play button.

Expected Behavior

Expected it to use the most recent value.

Steps to Reproduce

You can see it here:
https://codesandbox.io/s/crazy-babbage-g9owgs?file=/src/App.js

• Load video
• Don't click play
• Seconds should be at default, 120
• Click "Change start"
• New value should be shown above the button
• Click the video to start playing
• Starts at 2 minutes instead of 5

Environment

• URL attempting to play:
  https://www.youtube.com/watch?v=KRIBVykhpC4
• Browser:
  Brave (Chromium)
• Operating system:
  MacOS 13.2.1 (22D68)

[Jesuva]

Hi @LoyalPotato , This issue is not related to the youtube player. It is related to how we configure our component to re-render.
In your code there is no way the Player Component knows that some configure option value changed as the configure option is an object and react checks the object reference which won't trigger a render of the component even though one its props changes. We need to trigger a render for the player component and we could use key property to make this happen.
I have updated your code here to work properly for your scenario, Please check!

  const [start, setStart] = useState(120);
  const url = "https://www.youtube.com/watch?v=KRIBVykhpC4";
  const [id,setId] = useState(0);
  return (
    <div className="App">
      <Player  keyId = {id} start={start} url={url} />
      <p>{start} seconds</p>
      <button onClick={() => {setStart(300); setId(id+1)}}>{"Change start"}</button>
    </div>
  );
}
const Player = ({ url, start, keyId }) => {
  console.log(start);
  const config = {
    youtube: {
      playerVars: {
        start
      }
    }
  };
  return (
    <ReactPlayer
      key={keyId}
      controls
      config={config}
      url={url}
      volume={0.2}
      width="480px"
      height="400px"
    />
  );
};

[LoyalPotato]

Ohhh, that makes perfect sense.
I tested and it worked! Thanks :)