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

Update chapter bar progress right after clone

Browse Source
This commit is contained in:
Ajay Ramachandran
2021-11-01 21:10:43 -04:00
parent 9ed9f9b873
commit a804da06f5
1 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -219,7 +219,7 @@ class PreviewBar {
// TODO: run this only once, then just update it in another function // TODO: run this only once, then just update it in another function
const progressBar = document.querySelector('.ytp-progress-bar'); const progressBar = document.querySelector('.ytp-progress-bar') as HTMLElement;
const chapterBar = document.querySelector(".ytp-chapters-container:not(.sponsorBlockChapterBar)") as HTMLElement; const chapterBar = document.querySelector(".ytp-chapters-container:not(.sponsorBlockChapterBar)") as HTMLElement;
if (!progressBar || !chapterBar) return; if (!progressBar || !chapterBar) return;
@@ -290,6 +290,8 @@ class PreviewBar {
} else { } else {
progressBar.prepend(newChapterBar); progressBar.prepend(newChapterBar);
} }
this.updateChapterAllMutation(chapterBar, progressBar);
} }
private setupChapterSection(section: HTMLElement, duration: number): void { private setupChapterSection(section: HTMLElement, duration: number): void {
@@ -305,17 +307,17 @@ class PreviewBar {
} }
private createChapterMutationObserver(): void { private createChapterMutationObserver(): void {
const progressBar = document.querySelector('.ytp-progress-bar'); const progressBar = document.querySelector('.ytp-progress-bar') as HTMLElement;
const chapterBar = document.querySelector(".ytp-chapters-container:not(.sponsorBlockChapterBar)") as HTMLElement; const chapterBar = document.querySelector(".ytp-chapters-container:not(.sponsorBlockChapterBar)") as HTMLElement;
if (!progressBar || !chapterBar) return; if (!progressBar || !chapterBar) return;
const observer = new MutationObserver((mutations) => { const observer = new MutationObserver((mutations) => {
const changes: Record<string, MutationRecord> = {}; 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; changes[currentElement.classList[0]] = mutation.target as HTMLElement;
} }
} }
@@ -329,7 +331,17 @@ class PreviewBar {
}); });
} }
private updateChapterMutation(changes: Record<string, MutationRecord>, progressBar: HTMLElement): void { private updateChapterAllMutation(originalChapterBar: HTMLElement, progressBar: HTMLElement): 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);
}
private updateChapterMutation(changes: Record<string, HTMLElement>, progressBar: HTMLElement): 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
@@ -342,7 +354,7 @@ class PreviewBar {
for (const className in changes) { for (const className in changes) {
const customChangedElement = section.querySelector(`.${className}`) as HTMLElement; const customChangedElement = section.querySelector(`.${className}`) as HTMLElement;
if (customChangedElement) { if (customChangedElement) {
const changedElement = changes[className].target as HTMLElement; const changedElement = changes[className];
const left = parseFloat(changedElement.style.left.replace("px", "")) / progressBar.clientWidth; const left = parseFloat(changedElement.style.left.replace("px", "")) / progressBar.clientWidth;
const calculatedLeft = Math.max(0, Math.min(1, (left - cursor) / sectionWidthDecimal)); const calculatedLeft = Math.max(0, Math.min(1, (left - cursor) / sectionWidthDecimal));