Full-Stack React Projects - Second Edition

Play, pause, and replay

Users will be able to play, pause, and replay the current video. We will implement these three options using Material-UI components bound to ReactPlayer attributes and events. The play, pause, and replay options will render as shown in the following screenshot:

To implement the play, pause, and replay functionality, we will add a play, pause, or replay icon button conditionally depending on whether the video is playing, is paused, or has ended, as shown in the following code:

mern-mediastream/client/media/MediaPlayer.js

<IconButton color="primary" onClick={playPause}> <Icon>{playing ? 'pause': (ended ? 'replay' : 'play_arrow')}</Icon> ...