Full-Stack React Projects - Second Edition

Play next

Users will be able to play the next video in the related media list using a play next button, which will render depending on whether the next video is available or not. The two versions of this play next button will display as shown in the following screenshot:

The play next button will be disabled if the related list does not contain any media. The play next icon will basically link to the next URL value passed in as a prop from PlayMedia. This play next button will be added to the MediaPlayer view, as follows:

mern-mediastream/client/media/MediaPlayer.js

<IconButton disabled={!props.nextUrl} color="primary"> <Link to={props.nextUrl}> ...