CODEWITHSUNDEEP
reactjs
program.exe
program.exe

Reputation: 432

how to make only one video play at a time using react player

I have an array of react player components with different videos I want to play. Right now they can all play at the one time but I want to be able to make it so that only 1 can play at a time so if one is clicked to play the others are all paused but i am not too sure how to go about that and could do with some help. I have a play state created but I am not too sure what to do with it to achieve the outcome I want.

here is my code:

I have my main component here:


  const videos = data.map((item) => {
  return <Playlist url={item.url} id={item.id} />;
});

return (
  <div className="sidebar-container" style={styles.container}>
    <button className="add-playlist" onClick={(props) => addPlaylist()}>
      Add New Playlist
    </button>
    <p>sidebar for now!</p>
    {videos}
  </div>
);

Here is the code for my playlist component right now which is what the videos array is made up of:


const [play, setPlay] = useState(false);

  return (
    <div className="playlist-container">
      
        <ReactPlayer url={props.url} id={props.id} playing={play} />
      
    </div>
  );
}

Does anyone know what i can do to achieve my desired outcome?

Upvotes: 1

Views: 2257

Answers (1)

C. Helling
C. Helling

Reputation: 1402

How about using a unique ID to determine which state the "play" button applies to? Something like this:

const [play, setPlay] = useState(null);

  return (
    <div className="playlist-container">
      
        <ReactPlayer url={props.url} id={props.id} playing={play === props.id} />
      
    </div>
  );
}

where the corresponding "Play" button has an onClick function to setPlay(playerId)?

Upvotes: 2

Related Questions