Introduction
In the previous blog, we discussed the volume slider and how it utilizes the slider component. To dive deeper we also built the slider component in that blog. I recommend you all give it a read.
In this blog, we will be building the Seekbar of the video using the Slider component.
So, without further ado, let's get started!
đź’ˇ NOTE: The implementation of chapter fill css-variable was inspired from the https://www.vidstack.io/
Prerequisites
I would highly recommend going through the below topics before diving into this blog post:
What is a seekbar component?
A seek bar is a component that represents the video’s overall progress. It represents how much time that has elpased of the video. It can also be used to go forward or backward in the video by clicking or dragging the slider. It can also be used to preview the video’s current frame.
All these feature of the seek bar we will be implementing in this and in the subsequent blog posts.
Building the basic structure of the Seekbar Control component
In this section, we will be building the Seekbar component’s basic structure. So first let us start by creating the component file at this location: src/components/Seekbar.tsx
. Next, copy-paste the below code:
Here we build the very basic component structure. We will take a look at the details in the next section. Now, import this component inside the src/components/ControlToolbar.tsx
:
So the basic functionality of defining and calling the component is done. Now, let us dive deeper into the implementation of this component.
Implementing the Seekbar control component
Implementation is straightforward, we build this component below step-by-step:
-
First, import the
slider
component and add these basic props:
This will create a basic slider with a width of
780px
and with the$fillColor
ofred
. Here is what it will look like: -
Since this component aims to seek through the video. So for that, we need to create new properties in the global state:
currentTime
,totalDuration
,isSeeking
andhasVideoLoaded
. I won’t go into much detail on how to add these into the global state. For that you can follow this blog post. Will be giving a small summary of changes quickly:- Update the interface of the Global state along with the initial state:
- Update actions:
- Update reducer:
- In the
src/components/Video.tsx
file we add auseEffect
such that whenever the video is loaded we initialize thetotalDuration
andhasVideoLoaded
like below by dispatching theHAS_VIDEO_LOADED
action:- Next, we also need to add the following
useEffect
to update the duration of the video when thecurrentTime
changes while dragging of the slider: - Lastly, to make the above effect run we update the video duration on each second by passing on the
handleTimeUpdate
to theonTimeUpdate
event of the video element:
- Next, we also need to add the following
- Update the interface of the Global state along with the initial state:
-
Once we have our global store setup we now start implementing the
Seekbar
component. We first implement the mechanism of updating the slider on the playback of the video such that the slider gets updated every second. To do that we add the followinguseEffect
:
To update the slider on every second we need to update the
--slider-fill
variable on each second. To achieve that, inside theuseEffect
we calculate the fill percentage innewPosPercentage
with the help ofcurrentTime
andtotalDuration
. Once we get it, we update the--slider-fill
with theupdateSliderFill
function.If you are not getting the above concept I highly recommend you to go through the previous blog post for slider’s implementation.
Here if you see we also make use of the
isSeeking
state. This is because, we don’t want the above mechanism to get triggered while we are dragging the slider. -
Next, to add the logic of seeking the video on click of the slider we add an event handler called:
onPositionChangeByClick
and pass it on to theSlider
component:currentPercentage
of the slider i.e. the current value. From that we calculate the new current duration of the video. Then, we dispatch the action:UPDATE_VIDEO_CURRENT_TIME
to update thecurrentTime
.We also make use of the
UPDATE_SEEKING
action that updates theisSeeking
state. We first update it totrue
in the event handler and then tofalse
whenever the mouse up handler is fired. We do this so that we can distinguish when the slider is getting dragging for seeking or not. This helps us distinguish in lot many places. -
Next, to handle the scenario where we want to seek the video on drag we add the
onPositionChangeByDrag
event handler for theonDrag
event of theSlider
component:
Our final component updates will look like below:
Here is how are complete change will look like:
Summary
To Summarize we implemented the following things in this post:
- We saw the global state changes that were required.
- We implemented the seekbar that wired up with video.
- We made the seekbar intectative by adding event handlers for drag and click events.
- We also implemented the logic to update the seekbar on video playback.
In the next blog post of this series, we are going to talk about building an exciting component called FrameTooltip
component that shows the preview of each video frame on hover of seekbar, so stay tuned guys !!!
The entire code for this tutorial can be found here.
Thank you for reading!
Top comments (0)