keyurparalkar

const StyledContainer = styled.div<StyledContainerProps>`
     --slider-pointer: 0%; // when hover happens pointer is updated
     --slider-fill: 0%; // when click and drag happens fill is updated
     --slider-track-bg-color: ${COLORS.TRACK_BG_COLOR};
     --slider-fill-color: ${(props) => props.$fillColor};

     position: relative;
     height: 30px;
     width: ${(props) => props.$total};
     display: flex;

keyurparalkar

const currentChapter = chapters?.filter((chapter) => currentTime && currentTime > chapter.startTime && currentTime < chapter.endTime);

useEffect(() => {
     if (sliderRef.current && !isSeeking) {
          const newPosPercentage = (currentTime / totalDuration) * 100;
          sliderRef.current.updateSliderFill(newPosPercentage);

          if (currentChapter.length > 0) {
               const { index, endTime, startTime } = currentChapter[0];
               const totalChapterDuration = endTime - startTime;

keyurparalkar

useImperativeHandle(
     ref,
     () => {
          return {
               updateSliderFill(percentageCompleted: number) {
                    rootRef.current?.style.setProperty("--slider-fill", `${percentageCompleted}%`);
               },
               updateChapterFill(currentChapterIdx: number, completedPercentage: number) {
                    chapterRefs.current[currentChapterIdx].style.setProperty("--chapter-fill", `${completedPercentage}%`);
               },

keyurparalkar

const handleContainerMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
     /**
      * NOTE: 'data-dragging' attribute is available only when we are dragging the slider-thumb.
      * Thumb is said to be dragged when onMouseDown gets triggered on the .slider-thumb -> [data-dragging] is added to .slider
      * -> then handleMouseMove off .slider gets executed.
      * The dragging of thumb gets stopped when the data-dragging attribute is removed from .slider
      * We remove this attribute on MouseUp of .slider because on mouseup the target element can be different during dragging if the mouseup where on .slider-thumb
      * To have better dragging experience the data-dragging is removed on the mouseup of .slider
      */
     if (rootRef.current?.getAttribute("data-dragging")) {

keyurparalkar

// clean up the later chapters when going from right to left;
if (nextChapterFill > 0) {
     for (let i = currentChapterIdx + 1; i < $chapters.length; i++) {
          chapterRefs.current[i].style.setProperty("--chapter-fill", "0%");
     }
}

keyurparalkar

// Fill the current chapter;
if (previousChapterFill === 100 && currentChapterFill >= 0) {
     const currentChapterWidth = allChapterWidths[currentChapterIdx];
     const rect = currentChapterElem.getBoundingClientRect();
     const totalChapterWidth = (currentChapterWidth * $total) / 100;
     const chapterFillWidth = computeCurrentWidthFromPointerPos(e.pageX, rect.left, totalChapterWidth);
     currentChapterElem.style.setProperty("--chapter-fill", `${chapterFillWidth}%`);
}

keyurparalkar

const previousChapterFill = getCSSVariableAbsoluteValue("--chapter-fill", prevChapterElem);
const currentChapterFill = getCSSVariableAbsoluteValue("--chapter-fill", currentChapterElem);
const nextChapterFill = getCSSVariableAbsoluteValue("--chapter-fill", nextChapterElem);

keyurparalkar

const StyledSliderFill = styled.div<StyledSliderFillProps>`
     height: 5px;
     background-color: var(--slider-fill-color);
     width: var(${(props) => (props.$hasChapters ? "--chapter-fill" : "--slider-fill")}, 0%);
     position: absolute;
     pointer-events: none;
`;

keyurparalkar

// Fill the previous elements:
for (let i = 0; i < currentChapterIdx; i++) {
     chapterRefs.current[i].style.setProperty("--chapter-fill", "100%");
}

keyurparalkar

const nextIdx =
     currentChapterIdx === $chapters.length - 1 ? $chapters.length - 1 : currentChapterIdx + 1;
const prevChapterIdx = currentChapterIdx === 0 ? 0 : currentChapterIdx - 1;

const prevChapterElem = chapterRefs.current[prevChapterIdx];
const currentChapterElem = chapterRefs.current[currentChapterIdx];
const nextChapterElem = chapterRefs.current[nextIdx];