From 875ec357d9f352f5b1b32ded0b51e27b5805e32a Mon Sep 17 00:00:00 2001 From: Ajay Date: Fri, 18 Oct 2024 05:05:03 -0400 Subject: Make gradiant display for chapter seek bar follow the same UI as YouTube --- src/js-components/previewBar.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/js-components/previewBar.ts b/src/js-components/previewBar.ts index 6dcd835a..e3fdf745 100644 --- 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) { -- cgit v1.2.3