The MERN Mediastream application developed in the previous chapter implemented a simple media player with default browser controls that played one video at a time. In this chapter, we will update the view that plays media with a customized ReactPlayer and a related media list that can be set to play automatically when the current video ends. The updated view with the custom player and related playlist will resemble the following screenshot:
The code for the complete MERN Mediastream application is available on GitHub at https://github.com/PacktPublishing/Full-Stack-React-Projects-Second-Edition/tree/master/Chapter11%20and%2012/mern-mediastream. You can clone this code and run the application as you go through the code explanations for the rest of this chapter.
The following component tree diagram shows all the custom components...