On the play media page, we will add an autoplay toggle option above the related media list. Besides letting the user set autoplay, the toggle will also indicate whether it is currently set or not, as shown in the following screenshot:

To add the autoplay toggle option, we will use a Material-UI Switch component along with a FormControlLabel, and add it to the PlayMedia component over the RelatedMedia component. It will only be rendered when there are media in the related media list. We will add this Switch component representing the autoplay toggle as shown in the following code:

mern-mediastream/client/media/PlayMedia.js

<FormControlLabel
      control={
        <Switch
          checked={autoPlay}
          onChange={handleChange}
          color="primary"
        />
      }
      label={autoPlay ? 'Autoplay ON':'Autoplay OFF'}
/>

The autoplay toggle label will render according to the current value of autoPlay in the state. To handle the change to the toggle when the user interacts with it, and to reflect this change in the state's autoPlay value, we will use the following onChange handler function:

mern-mediastream/client/media/PlayMedia.js

const handleChange = (event) => {
   setAutoPlay(event.target.checked)
}

This autoPlay value, which represents whether the user chose to autoplay all the media, will determine what happens when the current video finishes streaming. In the next section, we will discuss how the autoplay behavior will be integrated with the child components in PlayMedia, depending on the toggled value set for autoPlay by the user.