diff options
| author | Ajay <[email protected]> | 2024-10-18 05:05:03 -0400 |
|---|---|---|
| committer | Ajay <[email protected]> | 2024-10-18 05:05:03 -0400 |
| commit | 875ec357d9f352f5b1b32ded0b51e27b5805e32a (patch) | |
| tree | 4735a4b7845d5cbc334098e2b384eb3e94a7ad99 /src | |
| parent | 510c3723add1700ced48473bfe149bf02628cb24 (diff) | |
| download | SponsorBlock-875ec357d9f352f5b1b32ded0b51e27b5805e32a.tar.gz SponsorBlock-875ec357d9f352f5b1b32ded0b51e27b5805e32a.zip | |
Make gradiant display for chapter seek bar follow the same UI as YouTube
Diffstat (limited to 'src')
| -rw-r--r-- | src/js-components/previewBar.ts | 9 |
1 files 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) { |