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 Media component in a PlayMedia component that fetches the media content from the server in a useEffect hook using the read API and passes it to Media as a prop. The composition of the PlayMedia component will be discussed in more detail in the next chapter.

The Media component will take this data in the props and render it in the view to display the details and load the video in a ReactPlayer component. The title, genre, and view count details of the media can be rendered in a Material-UI CardHeader component in the Media component, as shown in the following code.

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

<CardHeader 
   title={props.media.title}
   action={<span>
                {props.media.views + ' views'}
           </span>}
   subheader={props.media.genre}
/>

Besides rendering these media details, we will also load the video in the Media component. The video URL, which is basically the get video API route we set up in the backend, is loaded in a ReactPlayer with default browser controls, as shown in the following code.

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

const mediaUrl = props.media._id
          ? `/api/media/video/${props.media._id}`
          : null
            … 
<ReactPlayer url={mediaUrl} 
             controls
             width={'inherit'}
             height={'inherit'}
             style={{maxHeight: '500px'}}
             config={{ attributes: 
                        { style: { height: '100%', width: '100%'} } 
}}/>

This will render a simple player that allows the user to play the video stream.

The Media component also renders additional details about the user who posted the video, a description of the video, and the date it was created, as shown in the following code.

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

<ListItem>
    <ListItemAvatar>
      <Avatar>
        {props.media.postedBy.name && 
                        props.media.postedBy.name[0]}
      </Avatar>
    </ListItemAvatar>
    <ListItemText primary={props.media.postedBy.name} 
              secondary={"Published on " + 
                        (new Date(props.media.created))
                        .toDateString()}/>
</ListItem>
<ListItem>
    <ListItemText primary={props.media.description}/>
</ListItem>

In the details being displayed in the Material-UI ListItem component, we will also conditionally show edit and delete options if the currently signed-in user is the one who posted the media being displayed. To render these elements conditionally in the view, we will add the following code after the ListItemText displaying the date.

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

{(auth.isAuthenticated().user && auth.isAuthenticated().user._id) 
    == props.media.postedBy._id && (<ListItemSecondaryAction>
        <Link to={"/media/edit/" + props.media._id}>
          <IconButton aria-label="Edit" color="secondary">
            <Edit/>
          </IconButton>
        </Link>
        <DeleteMedia mediaId={props.media._id} mediaTitle=
       {props.media.title}/>
      </ListItemSecondaryAction>)}

This will ensure that the edit and delete options only render when the current user is signed in and is the uploader of the media being displayed. The edit option links to the media edit form, while the delete option opens a dialog box that can initiate the deletion of this particular media document from the database. In the next section, we will implement the functionality of this option to edit details of the uploaded media post.