Make gradiant display for chapter seek bar follow the same UI as YouTube

ajayyy · Oct 18, 2024 · 875ec35 · 875ec35
1 parent 510c372
commit 875ec35
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/src/js-components/previewBar.ts b/src/js-components/previewBar.ts
@@ -651,10 +651,15 @@ class PreviewBar {
                             customChangedElement.style.transform =
                                 `scaleX(${scale})`;
                             if (customChangedElement.style.backgroundSize) {
-                                const backgroundSize = progressBar.clientWidth;
+                                const backgroundSize = Math.max(changedData.scale / scale, fullSectionWidth * progressBar.clientWidth);
                                 customChangedElement.style.backgroundSize = `${backgroundSize}px`;
 
-                                customChangedElement.style.backgroundPosition = `${-(cursor * progressBar.clientWidth)}px`;
+                                if (changedData.scale < (cursor + fullSectionWidth) * progressBar.clientWidth) {
+                                    customChangedElement.style.backgroundPosition = `-${backgroundSize - fullSectionWidth * progressBar.clientWidth}px`;
+                                } else {
+                                    // Passed this section
+                                    customChangedElement.style.backgroundPosition = `-${cursor * progressBar.clientWidth}px`;
+                                }
                             }
 
                             if (firstUpdate) {