Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-11 05:57:07 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix animation when chapter bar is recreated

Browse Source
This commit is contained in:
Ajay Ramachandran
2021-11-01 21:18:03 -04:00
parent a804da06f5
commit fb3635cdf8
1 changed files with 28 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/js-components/previewBar.ts
View File

@@ -291,7 +291,7 @@ class PreviewBar {
progressBar.prepend(newChapterBar);
}
this.updateChapterAllMutation(chapterBar, progressBar);
this.updateChapterAllMutation(chapterBar, progressBar, true);
}
private setupChapterSection(section: HTMLElement, duration: number): void {
@@ -331,17 +331,17 @@ class PreviewBar {
});
}
private updateChapterAllMutation(originalChapterBar: HTMLElement, progressBar: HTMLElement): void {
private updateChapterAllMutation(originalChapterBar: HTMLElement, progressBar: HTMLElement, firstUpdate = false): void {
const elements = originalChapterBar.querySelectorAll(".ytp-progress-list > *");
const changes: Record<string, HTMLElement> = {};
for (const element of elements) {
changes[element.classList[0]] = element as HTMLElement;
}
this.updateChapterMutation(changes, progressBar);
this.updateChapterMutation(changes, progressBar, firstUpdate);
}
private updateChapterMutation(changes: Record<string, HTMLElement>, progressBar: HTMLElement): void {
private updateChapterMutation(changes: Record<string, HTMLElement>, progressBar: HTMLElement, firstUpdate = false): void {
// Go through each newly generated chapter bar and update the width based on changes array
if (this.customChaptersBar) {
// Width reached so far in decimal percent
@@ -369,6 +369,12 @@ class PreviewBar {
customChangedElement.style.transform =
`scaleX(${Math.max(0, Math.min(1 - calculatedLeft,
(transformScale - cursor) / sectionWidthDecimal - calculatedLeft))}`;
// Prevent transition from occuring
if (firstUpdate) {
customChangedElement.style.transition = "none";
setTimeout(() => customChangedElement.style.transition = "inherit", 50);
}
}
customChangedElement.className = changedElement.className;