From ea87c8ca2455843d6f350e1adbe632a05c3760d4 Mon Sep 17 00:00:00 2001
From: Ajay <dev@ajay.app>
Date: Thu, 18 Aug 2022 02:24:54 -0400
Subject: [PATCH] Fix seek bar progress offsets with custom chapter sections

---
 src/js-components/previewBar.ts | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/js-components/previewBar.ts b/src/js-components/previewBar.ts
index 8725bfbd..890cedf2 100644
--- a/src/js-components/previewBar.ts
+++ b/src/js-components/previewBar.ts
@@ -506,18 +506,22 @@ class PreviewBar {
             let cursor = 0;
 
             const sections = this.customChaptersBar.querySelectorAll(".ytp-chapter-hover-container") as NodeListOf<HTMLElement>;
-            for (const section of sections) {
+            for (let i = 0; i < sections.length; i++) {
+                const section = sections[i];
+
                 const sectionWidthDecimal = parseFloat(section.getAttribute("decimal-width"));
+                const sectionWidthDecimalNoMargin = sectionWidthDecimal - 2 / progressBar.clientWidth;
 
                 for (const className in changes) {
                     const selector = `.${className}`
                     const customChangedElement = section.querySelector(selector) as HTMLElement;
                     if (customChangedElement) {
+                        const fullSectionWidth = i === sections.length - 1 ? sectionWidthDecimal : sectionWidthDecimalNoMargin;
                         const changedElement = changes[className];
                         const changedData = this.findLeftAndScale(selector, changedElement, progressBar);
 
                         const left = (changedData.left) / progressBar.clientWidth;
-                        const calculatedLeft = Math.max(0, Math.min(1, (left - cursor) / sectionWidthDecimal));
+                        const calculatedLeft = Math.max(0, Math.min(1, (left - cursor) / fullSectionWidth));
                         if (!isNaN(left) && !isNaN(calculatedLeft)) {
                             customChangedElement.style.left = `${calculatedLeft * 100}%`;
                             customChangedElement.style.removeProperty("display");
@@ -525,9 +529,9 @@ class PreviewBar {
 
                         if (changedData.scale !== null) {
                             const transformScale = (changedData.scale) / progressBar.clientWidth;
-                            
+
                             customChangedElement.style.transform = 
-                                `scaleX(${Math.max(0, Math.min(1 - calculatedLeft, (transformScale - cursor) / sectionWidthDecimal - calculatedLeft))}`;
+                                `scaleX(${Math.max(0, Math.min(1 - calculatedLeft, (transformScale - cursor) / fullSectionWidth - calculatedLeft))}`;
                             if (firstUpdate) {
                                 customChangedElement.style.transition = "none";
                                 setTimeout(() => customChangedElement.style.removeProperty("transition"), 50);
@@ -577,7 +581,7 @@ class PreviewBar {
                 const transformScale = parseFloat(transformMatch[1]);
                 if (transformScale < 1 && transformScale + checkLeft / currentSectionWidthNoMargin < 0.99999) {
                     scale = transformScale;
-                    scaleWidth = currentSectionWidth;
+                    scaleWidth = currentSectionWidthNoMargin;
 
                     if (transformScale > 0) {
                         // reached the end of this section for sure, since the scale is now between 0 and 1