Enhancing a Personal Project with React Player

In my last blog, I revisited an old project and did some refactoring as a means to discuss the Context API and useContext hook. This week I am revisiting the same project to enhance the functionality of my video playback component using callback function props.

I’m using this revisit as a chance to enhance features I hadn’t gotten to in the past and to brainstorm potential future iterations of the app.

My app, Horrific, is a mock social media platform for horror film fans to catalog, review, and discuss genre films alongside video references. To enable the latter functionality, I used the Youtube Data API for searches and React Player for playback.

Built into React Player are a number of callback props, which are functions that fire on various player events, according to the very thorough and helpful React Player docs.

I will implement a couple of these functions to demonstrate the many features available to React Player users, as well as to provide myself with a brainstorming session to hopefully improve my own project.

Within the app, I reuse the VideoScreen component in three places. It plays back trailers and top videos pertaining to the given title on each film’s show page. It is used on the video search page for finding a video on which to leave a comment, as well as on the community videos page to play back the commented upon video and to allow other users to comment and interact with the media.

A function I never got to but feel would enhance the chat feature is time-stamped comments. I’ll make efforts here towards realizing that functionality.

The above VideoScreen component includes the React Player component itself, as well as a styled component wrapped around it to customize the look. In addition to the videoPick prop, which represents the YouTube id of the user-selected video, it takes built-in callback props onProgress and onPause.

I can then use the features of these functions in other components that use the VideoScreen component.

The onProgress callback, for example, returns an object with the played and loaded progress of the video as fractions and playedSeconds and loadedSeconds as the actual times.

Then, in my handleTime function, I can access that object and attach that data to the user’s comment at a given time. I can make that a clickable feature, so another user could jump to the timestamp and comment there. I could question whether a user wished to comment when they pause the video or when it has finished playing.

To fully implement the timestamp feature requires some database updates, too. I will check back in another blog with the backend schema updates and fully implemented timestamps.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store