Full-Stack React Projects - Second Edition

Updating the Media component

The existing Media component contains a basic ReactPlayer with default browser controls for playing a given video. We will replace this ReactPlayer with a new MediaPlayer component that we will begin implementing in the next section. The MediaPlayer component will contain a customized ReactPlayer, and it will be added to the Media component code as follows:

mern-mediastream/client/media/Media.js

const mediaUrl = props.media._id          ? `/api/media/video/${props.media._id}`          : null...<MediaPlayer srcUrl={mediaUrl}              nextUrl={props.nextUrl}              handleAutoplay={props.handleAutoplay}/>

While adding this MediaPlayer component to the Media component, it will be passed the current video's source URL, the next video's source URL, ...