Full-Stack React Projects - Second Edition

The Media component

The Media component will render details of an individual media record and stream the video in a basic ReactPlayer with default browser controls. The completed single Media view will look as follows:

The Media component can call the read API to fetch the media data itself or receive the data as props from a parent component that makes the call to the read API. In the latter case, the parent component will fetch the media from the server in a useEffect hook, set it to state, and add it to the Media component, as follows.

mern-mediastream/client/media/PlayMedia.js:

<Media media={media}/>

In MERN Mediastream, we will add the ...