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

Add mutation listener to update progress indicators

Browse Source
This commit is contained in:
Ajay Ramachandran
2021-10-27 23:21:22 -04:00
parent 4c9548b303
commit 6dee56dc95
1 changed files with 34 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -224,18 +224,39 @@ class PreviewBar {
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" && mutation.attributeName === "style" if (mutation.type === "attributes" && mutation.attributeName === "style"
&& currentElement.parentElement.classList.contains("ytp-chapter-hover-container")) { && currentElement.parentElement.classList.contains("ytp-progress-list")) {
changes[currentElement.classList[0]] = currentElement.style; changes[currentElement.classList[0]] = currentElement.style;
} }
} }
// newChapterBar.querySelector(`.${className}).style.width = `calc(${width * someFactor}% - 4px)`; // Go through each newly generated chapter bar and update the width based on changes array
const generatedChapterBar = document.querySelector(".sponsorBlockChapterBar");
if (generatedChapterBar) {
// Width reached so far in decimal percent
let cursor = 0;
const sections = generatedChapterBar.querySelectorAll(".ytp-chapter-hover-container") as NodeListOf<HTMLElement>;
for (const section of sections) {
const sectionWidth = parseFloat(section.getAttribute("decimal-width"));
for (const className in changes) {
const currentChangedElement = section.querySelector(`.${className}`) as HTMLElement;
if (currentChangedElement) {
const transformScale = parseFloat(changes[className].transform.match(/scaleX\(([0-9.]+?)\)/)[1]);
currentChangedElement.style.transform = `scaleX(${Math.min(1, (transformScale - cursor) / sectionWidth)}`;
}
}
cursor += sectionWidth;
}
}
}); });
// observer.observe(chapterBar, { observer.observe(chapterBar, {
// childList: true, subtree: true,
// subtree: true attributes: true,
// }); attributeFilter: ["style"] //TODO: check for left too
});
// Create it from cloning // Create it from cloning
const newChapterBar = chapterBar.cloneNode(true) as HTMLElement; const newChapterBar = chapterBar.cloneNode(true) as HTMLElement;
@@ -263,6 +284,7 @@ class PreviewBar {
newBlankSection.style.marginRight = "2px"; newBlankSection.style.marginRight = "2px";
newBlankSection.style.width = `calc(${this.timeToPercentage(blankDuration)} - 2px)`; newBlankSection.style.width = `calc(${this.timeToPercentage(blankDuration)} - 2px)`;
newBlankSection.setAttribute("decimal-width", String(this.timeToDecimal(blankDuration)));
newChapterBar.appendChild(newBlankSection); newChapterBar.appendChild(newBlankSection);
} }
@@ -271,6 +293,7 @@ class PreviewBar {
newSection.style.marginRight = "2px"; newSection.style.marginRight = "2px";
newSection.style.width = `calc(${this.timeToPercentage(duration)} - 2px)`; newSection.style.width = `calc(${this.timeToPercentage(duration)} - 2px)`;
newSection.setAttribute("decimal-width", String(this.timeToDecimal(duration)));
newChapterBar.appendChild(newSection); newChapterBar.appendChild(newSection);
if (segment.segment[1] < this.videoDuration) { if (segment.segment[1] < this.videoDuration) {
@@ -281,7 +304,7 @@ class PreviewBar {
newBlankSection.style.marginRight = "2px"; newBlankSection.style.marginRight = "2px";
newBlankSection.style.width = `calc(${this.timeToPercentage(blankDuration)} - 2px)`; newBlankSection.style.width = `calc(${this.timeToPercentage(blankDuration)} - 2px)`;
console.log(blankDuration + "\t" + this.videoDuration) newBlankSection.setAttribute("decimal-width", String(this.timeToDecimal(blankDuration)));
newChapterBar.appendChild(newBlankSection); newChapterBar.appendChild(newBlankSection);
} }
} }
@@ -361,6 +384,10 @@ class PreviewBar {
return Math.min(100, time / this.videoDuration * 100) + '%'; return Math.min(100, time / this.videoDuration * 100) + '%';
} }
timeToDecimal(time: number): number {
return Math.min(1, time / this.videoDuration);
}
/* /*
* Approximate size on preview bar for smallest element (due to &nbsp) * Approximate size on preview bar for smallest element (due to &nbsp)
*/ */