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

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

@@ -152,7 +152,7 @@ class PreviewBar {
if (this.onMobileYouTube) { if (this.onMobileYouTube) {
parent.style.backgroundColor = "rgba(255, 255, 255, 0.3)"; parent.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
parent.style.opacity = "1"; parent.style.opacity = "1";
this.container.style.transform = "none"; this.container.style.transform = "none";
} else if (!this.onInvidious) { } else if (!this.onInvidious) {
// Hover listener // Hover listener
@@ -181,7 +181,7 @@ class PreviewBar {
this.segments = segments; this.segments = segments;
this.videoDuration = videoDuration; 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 // Sort longer segments before short segments to make shorter segments render later
return (b[1] - b[0]) - (a[1] - a[0]); 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])); 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'); const bar = document.createElement('li');
bar.classList.add('previewbar'); bar.classList.add('previewbar');
bar.innerHTML = showLarger ? '  ' : ' '; bar.innerHTML = showLarger ? '  ' : ' ';
@@ -241,17 +241,17 @@ class PreviewBar {
this.chaptersBarSegments = segments; this.chaptersBarSegments = segments;
// Merge overlapping chapters // Merge overlapping chapters
const mergedSegments = segments.filter((segment) => getCategoryActionType(segment.category) !== CategoryActionType.POI const mergedSegments = segments.filter((segment) => getCategoryActionType(segment.category) !== CategoryActionType.POI
&& segment.segment.length === 2) && segment.segment.length === 2)
.reduce((acc, curr) => { .reduce((acc, curr) => {
if (acc.length === 0 || curr.segment[0] > acc[acc.length - 1].segment[1]) { if (acc.length === 0 || curr.segment[0] > acc[acc.length - 1].segment[1]) {
acc.push(curr); acc.push(curr);
} else { } else {
acc[acc.length - 1].segment[1] = Math.max(acc[acc.length - 1].segment[1], curr.segment[1]); acc[acc.length - 1].segment[1] = Math.max(acc[acc.length - 1].segment[1], curr.segment[1]);
} }
return acc; return acc;
}, [] as PreviewBarSegment[]); }, [] as PreviewBarSegment[]);
// Modify it to have sections for each segment // Modify it to have sections for each segment
for (let i = 0; i < mergedSegments.length; i++) { for (let i = 0; i < mergedSegments.length; i++) {
@@ -291,7 +291,7 @@ class PreviewBar {
progressBar.prepend(newChapterBar); progressBar.prepend(newChapterBar);
} }
this.updateChapterAllMutation(chapterBar, progressBar); this.updateChapterAllMutation(chapterBar, progressBar, true);
} }
private setupChapterSection(section: HTMLElement, duration: number): void { private setupChapterSection(section: HTMLElement, duration: number): void {
@@ -315,8 +315,8 @@ class PreviewBar {
const changes: Record<string, HTMLElement> = {}; const changes: Record<string, HTMLElement> = {};
for (const mutation of mutations) { for (const mutation of mutations) {
const currentElement = mutation.target as HTMLElement; const currentElement = mutation.target as HTMLElement;
if (mutation.type === "attributes" if (mutation.type === "attributes"
&& currentElement.parentElement.classList.contains("ytp-progress-list")) { && currentElement.parentElement.classList.contains("ytp-progress-list")) {
changes[currentElement.classList[0]] = mutation.target as HTMLElement; changes[currentElement.classList[0]] = mutation.target as HTMLElement;
} }
} }
@@ -330,18 +330,18 @@ class PreviewBar {
attributeFilter: ["style", "class"], attributeFilter: ["style", "class"],
}); });
} }
private updateChapterAllMutation(originalChapterBar: HTMLElement, progressBar: HTMLElement): void { private updateChapterAllMutation(originalChapterBar: HTMLElement, progressBar: HTMLElement, firstUpdate = false): void {
const elements = originalChapterBar.querySelectorAll(".ytp-progress-list > *"); const elements = originalChapterBar.querySelectorAll(".ytp-progress-list > *");
const changes: Record<string, HTMLElement> = {}; const changes: Record<string, HTMLElement> = {};
for (const element of elements) { for (const element of elements) {
changes[element.classList[0]] = element as HTMLElement; 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 // Go through each newly generated chapter bar and update the width based on changes array
if (this.customChaptersBar) { if (this.customChaptersBar) {
// Width reached so far in decimal percent // Width reached so far in decimal percent
@@ -366,9 +366,15 @@ class PreviewBar {
const transformMatch = changedElement.style.transform.match(/scaleX\(([0-9.]+?)\)/); const transformMatch = changedElement.style.transform.match(/scaleX\(([0-9.]+?)\)/);
if (transformMatch) { if (transformMatch) {
const transformScale = parseFloat(transformMatch[1]) + left; const transformScale = parseFloat(transformMatch[1]) + left;
customChangedElement.style.transform = customChangedElement.style.transform =
`scaleX(${Math.max(0, Math.min(1 - calculatedLeft, `scaleX(${Math.max(0, Math.min(1 - calculatedLeft,
(transformScale - cursor) / sectionWidthDecimal - 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; customChangedElement.className = changedElement.className;