Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-10 21:47:06 +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

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

@@ -181,7 +181,7 @@ class PreviewBar {
this.segments = segments;
this.videoDuration = videoDuration;
const sortedSegments = this.segments.sort(({segment: a}, {segment: b}) => {
const sortedSegments = this.segments.sort(({ segment: a }, { segment: b }) => {
// Sort longer segments before short segments to make shorter segments render later
return (b[1] - b[0]) - (a[1] - a[0]);
});
@@ -194,7 +194,7 @@ class PreviewBar {
this.createChaptersBar(segments.sort((a, b) => a.segment[0] - b.segment[0]));
}
createBar({category, unsubmitted, segment, showLarger}: PreviewBarSegment): HTMLLIElement {
createBar({ category, unsubmitted, segment, showLarger }: PreviewBarSegment): HTMLLIElement {
const bar = document.createElement('li');
bar.classList.add('previewbar');
bar.innerHTML = showLarger ? '  ' : ' ';
@@ -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;