Initiating controls to true then setting to false doesn't hide controls

[nzhiti]

Current Behavior

If you initiate the player with controls to true and then setting controls to false, controls are still visibles.

Expected Behavior

Controls shouldn't be visible

Steps to Reproduce

1. Create a state value named controls and initiated as true
2. Initiate the player with controls={controls}
3. Change the value of controls to false in useEffect with timeout

Environment

• URL attempting to play: https://vimeo.com/437991680
• Browser: Google Chrome
• Operating system: Windows 11
• Sandbox : https://codesandbox.io/p/sandbox/react-player-controls-issue-kwk7pr

Other Information

If the controls can only be displayed or hidden using the video URL, and updating the control values causes the video to reload due to new URL, the documentation should be updated to inform users about this.

[kaustavsarkar14]

The video player required a reload to reflect the changes to show/hide the controls. Here you can use a key to reload the player.

import React, { useState, useEffect } from "react";
import "./styles.css";
import ReactPlayer from "react-player";

export default function App() {
  const [controls, setControls] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setControls(false);
      alert("now controls should be disabled");
    }, 3000);
  }, []);

  return (
    <div className="App">
      <h1>React player controls</h1>
      <h2>
        If controls is initiated to true and then set to false, controls are
        still visible.
      </h2>

      <div style={{ maxWidth: `700px`, margin: `20px auto` }}>
        <div
          style={{
            paddingTop: `56.25%`,
            position: `relative`,
            overflow: "hidden",
          }}
        >
          <ReactPlayer
            style={{ position: `absolute`, zIndex: 0, top: 0, left: 0 }}
            url="https://vimeo.com/437991680"
            height="100%"
            controls={controls}
            width="100%"
            playing={false}
          />
        </div>
      </div>
    </div>
  );
}