The RelatedMedia component takes the list of related media as a prop from the PlayMedia component, and renders the details along with a video snapshot of each video in the list.
We iterate through the media list using the map function to render each media item.
mern-mediastream/client/media/RelatedMedia.js:
{this.props.media.map((item, i) => { return <span key={i}>... video snapshot ... | ... media details ...</span> })}
To show the video snapshot, we will use a basic ReactPlayer without the controls.
mern-mediastream/client/media/RelatedMedia.js:
<Link to={"/media/"+item._id}> <ReactPlayer url={'/api/media/video/'+item._id} width='160px' height='140px'/></Link>
Clicking on the snapshot will re-render the PlayMedia ...
