How I build a YouTube Video Player with ReactJS: Add chapters to the video

WEBVTT

00:00:00.000 --> 00:00:15.000
Chapter 1

00:00:15.000 --> 00:00:42.000
Chapter 2

00:00:42.000 --> 00:00:48.000
Chapter 3

00:00:48.000 --> 00:01:01.000
Chapter 4

00:01:01.000 --> 00:01:09.000
Chapter 5 

    - Quick thing to note here, We have created a StyleChapterContainer. It may look like this:
      

  


- It accepts a prop as `$width` that defines the width of this mini - slider component.



    

    






Now pass the chapters to the slider component via the seekbar component as follows:





Once this is hooked the output will look like below




  
  
  Handling filling logic on mouse move and click events


The above logic needs to be handled for the following scenarios:


While clicking and,
While dragging the slider


Here is the pictorial representation of these scenarios:


While Clicking:


<p>

<figure>

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/erymo9rbzpjls48q4cw5.gif" alt="Click interaction on sliders with chapters" />

  <figcaption>Click interaction on sliders with chapters</figcaption>

</figure>

</p>


While dragging:


<p>

<figure>

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8ryc9ia89pw6gc3bvo6.gif" alt="Drag interaction on sliders with chapters" />

  <figcaption>Drag interaction on sliders with chapters</figcaption>

</figure>

</p>

<aside>

💡 NOTE: I would like to remind you guys that to go through this blogpost: How I build a YouTube Video Player with ReactJS: Build the Seekbar control before proceeding further. Because it contains a lot of jargon which is better explained there.

</aside>

So here we go, below is the handleClick event handler that takes care of fill the chapters on click:


  


Below is the explanation for the same:


This part right here calculates all the chapter's width and with the help of the current --slider-fill value we get the current chapter index:



  



Next, we get the previous and the next chapter elements:



  



Next, we fill all the previous chapters before the current chapter:



  



A thing to note here, we track the fill of each slider element with the help of the CSS variable: --chapter-fill.
We also need to update our StyledSliderFill component such that whenever chapters exist we make use of the —chapter-fill CSS variable.



  



Next, we summon all the chapter fill values below:



  


Then, to fill the current chapter we make use of the computeCurrentWidthFromPointerPos utility function and then finally set its value to the current chapter’s --chapter-fill.


  



For scenarios of clicking from right to left direction i.e. going back in video, we fill the next chapter to 0 from the current chapter:



  


Similarly, we make use of the handleMouseMove function that handles the filling of chapters during the mousemove event i.e. when we are dragging the slider knob:


  


This is the same function we used to update the --slider-pointer CSS variable in the previous blog posts. The purpose of this function from the chapters point of view is as follows:


Update the chapter fill of the respective elements
Add a data-chapter-dragging attribute


I would like you guys to go through the comments in the above code block to understand the functionality. 

Just a quick note: The purpose of adding data-chapter-dragging attribute is to use it in styling which we will look into in the later section.

  
  
  Updating the slider position on playback


There is one more scenario left that we need to cover which is handling the playback mechanism across multiple sliders. Now to do this we need a mechanism that will help us to update the --chapter-fill CSS variable of each chapter whenever the current duration of the video changes.

This is a simple task. We just need to expose a function that updates this chapter fill for the given chapter with the help of [useImperativeHandle hook](https://react.dev/reference/react/useImperativeHandle).

The first thing is to update the useImperativeHandle hook in the Slider component:


  


We introduced a new function here: updateChapterFill which accepts the current chapter’s index and the percentage completion of that chapter. 

Next, we consume this function via refs in the Seekbar component like below:


  


Inside the Seekbar component, we access the currentTime and the chapters from the player context. 

Then we make use of the useEffect that updates on currentTime and isSeeking. Along with updating the slider-fill it also updates the chapter fill with the help of updateChapterFill.

We do some simple calculations and get the currentChapterFillWidth by dividing the currentTime by the total chapter duration. 

lastly, we pass this to our update function.

This is how our functionality will look like when during playback:

<p>

<figure>

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/whuawmq3nm8u8ucmy6nd.gif" alt="Chapter fill on video playback" />

  <figcaption>Chapter fill on video playback</figcaption>

</figure>

</p>

  
  
  Styling the chapter sliders


One last thing that is pending is adding a small styling effect that will give better UX feedback. The style that I am talking about is increasing the width of the slider whenever we are dragging the slider like below:

<p>

<figure>

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyb08j2kbzjpj4tt56qy.gif" alt="Emphasising chapters on drag" />

  <figcaption>Emphasising chapters on drag</figcaption>

</figure>

</p>

To do this we make use of the data-chapter-dragging attribute that we add in the handleMouseMove function. We use this attribute in StyledContainer of the Slider component:


  


We make sure that whenever we are dragging i.e. whenever the container has the data-dragging attribute only then check for any child div that has data-chapter-dragging attribute. If it has then we update the height of the slider/container by 8px.

  
  
  Summary


So to summarize we achieved the following things in this blogpost:


We understand the reason why are we doing this feature.
We saw how to get the chapter's data into the video via the track element.
And lastly, we saw the changes that we need to make to the slider component to achieve the desired chapter UX.


The entire code for this tutorial can be found here.

Thank you for reading!

Follow me on twitter, github, and linkedIn.