From d9e723b265c0729aeeafd96a6ef7b7832e6e57e3 Mon Sep 17 00:00:00 2001
From: Ajay <dev@ajay.app>
Date: Wed, 14 Sep 2022 02:27:51 -0400
Subject: [PATCH] Sync official chapter margin

---
 src/js-components/previewBar.ts | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/js-components/previewBar.ts b/src/js-components/previewBar.ts
index 2b6a97e7..997befa9 100644
--- a/src/js-components/previewBar.ts
+++ b/src/js-components/previewBar.ts
@@ -53,6 +53,7 @@ class PreviewBar {
     chapterVote: ChapterVote;
     originalChapterBar: HTMLElement;
     originalChapterBarBlocks: NodeListOf<HTMLElement>;
+    chapterMargin: number;
 
     constructor(parent: HTMLElement, onMobileYouTube: boolean, onInvidious: boolean, chapterVote: ChapterVote, test=false) {
         if (test) return;
@@ -236,9 +237,15 @@ class PreviewBar {
         this.clear();
         if (!this.segments) return;
 
+        this.chapterMargin = 2;
         if (this.originalChapterBar) {
             this.originalChapterBarBlocks = this.originalChapterBar.querySelectorAll(":scope > div") as NodeListOf<HTMLElement>
             this.existingChapters = this.segments.filter((s) => s.source === SponsorSourceType.YouTube).sort((a, b) => a.segment[0] - b.segment[0]);
+        
+            if (this.existingChapters?.length > 0) {
+                const margin = parseFloat(this.originalChapterBarBlocks?.[0]?.style?.marginRight?.replace("px", ""));
+                if (margin) this.chapterMargin = margin;
+            }
         }
 
         const sortedSegments = this.segments.sort(({ segment: a }, { segment: b }) => {
@@ -282,7 +289,7 @@ class PreviewBar {
         const duration = Math.min(segment[1], this.videoDuration) - segment[0];
         if (duration > 0) {
             bar.style.width = `calc(${this.intervalToPercentage(segment[0], segment[1])}${
-                this.chapterFilter(barSegment) && segment[1] < this.videoDuration ? ' - 2px' : ''})`;
+                this.chapterFilter(barSegment) && segment[1] < this.videoDuration ? ` - ${this.chapterMargin}px` : ''})`;
         }
         
         const time = segment[1] ? Math.min(this.videoDuration, segment[0]) : segment[0];
@@ -456,8 +463,8 @@ class PreviewBar {
     private setupChapterSection(section: HTMLElement, startTime: number, endTime: number, addMargin: boolean): void {
         const sizePercent = this.intervalToPercentage(startTime, endTime);
         if (addMargin) {
-            section.style.marginRight = "2px";
-            section.style.width = `calc(${sizePercent} - 2px)`;
+            section.style.marginRight = `${this.chapterMargin}px`;
+            section.style.width = `calc(${sizePercent} - ${this.chapterMargin}px)`;
         } else {
             section.style.marginRight = "0";
             section.style.width = sizePercent;
@@ -534,7 +541,7 @@ class PreviewBar {
                 const section = sections[i];
 
                 const sectionWidthDecimal = parseFloat(section.getAttribute("decimal-width"));
-                const sectionWidthDecimalNoMargin = sectionWidthDecimal - 2 / progressBar.clientWidth;
+                const sectionWidthDecimalNoMargin = sectionWidthDecimal - this.chapterMargin / progressBar.clientWidth;
 
                 for (const className in changes) {
                     const selector = `.${className}`