The play media page

When visitors want to view specific media on MERN Mediastream, they will be taken to the play media page, which will contain the media details, a media player to stream the video, and a list of related media that can be played next.

Component structure

We will compose the component structure in the play media page in a way that allows the media data to trickle down to the inner components from the parent component. In this case, the PlayMedia component will be the parent component, containing the RelatedMedia component, and the Media component with a nested MediaPlayer component:

When individual media links are accessed, the PlayMedia component will mount and retrieve the media data and related media list from the server. Then, the relevant data will be passed as props to the Media and RelatedMedia child components.

The RelatedMedia component will link to a list of other related media, and clicking each will re-render the PlayMedia component and inner components with the...