In MERN Mediastream, we want to provide users with a media player with more controls than those available in the default browser options, and with a look that matches the rest of the application. We will customize the player controls on ReactPlayer to replace these default controls with a custom look and functionality, as seen in the following screenshot:
The controls will be added below the video and will include the progress seeking bar; the play, pause, next, volume, loop, and fullscreen options; and will also display full duration of the video and the amount that's been played. In the following sections, we will first update the Media component discussed in the previous chapter, Chapter 11, Building a Media Streaming Application, to accommodate the new player features. Then, we will initialize a MediaPlayer component that will contain the...