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

Support left style changes for chapters bar and fix negative size

Browse Source
This commit is contained in:
Ajay Ramachandran
2021-10-28 00:38:46 -04:00
parent 6dee56dc95
commit 2d3e293d83
1 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -220,12 +220,12 @@ class PreviewBar {
if (!progressBar || !chapterBar || segments?.length <= 0) return; if (!progressBar || !chapterBar || segments?.length <= 0) return;
const observer = new MutationObserver((mutations) => { const observer = new MutationObserver((mutations) => {
const changes: Record<string, CSSStyleDeclaration> = {}; const changes: Record<string, MutationRecord> = {};
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"
&& currentElement.parentElement.classList.contains("ytp-progress-list")) { && currentElement.parentElement.classList.contains("ytp-progress-list")) {
changes[currentElement.classList[0]] = currentElement.style; changes[currentElement.classList[0]] = mutation;
} }
} }
@@ -237,17 +237,24 @@ class PreviewBar {
const sections = generatedChapterBar.querySelectorAll(".ytp-chapter-hover-container") as NodeListOf<HTMLElement>; const sections = generatedChapterBar.querySelectorAll(".ytp-chapter-hover-container") as NodeListOf<HTMLElement>;
for (const section of sections) { for (const section of sections) {
const sectionWidth = parseFloat(section.getAttribute("decimal-width")); const sectionWidthDecimal = parseFloat(section.getAttribute("decimal-width"));
for (const className in changes) { for (const className in changes) {
const currentChangedElement = section.querySelector(`.${className}`) as HTMLElement; const currentChangedElement = section.querySelector(`.${className}`) as HTMLElement;
if (currentChangedElement) { if (currentChangedElement) {
const transformScale = parseFloat(changes[className].transform.match(/scaleX\(([0-9.]+?)\)/)[1]); const currentChange = changes[className];
currentChangedElement.style.transform = `scaleX(${Math.min(1, (transformScale - cursor) / sectionWidth)}`; const changedElement = changes[className].target as HTMLElement;
const left = parseFloat(changedElement.style.left.replace("px", "")) / progressBar.clientWidth;
if (currentChange.attributeName === "style") {
const transformScale = parseFloat(changedElement.style.transform.match(/scaleX\(([0-9.]+?)\)/)[1]) + left;
currentChangedElement.style.transform = `scaleX(${Math.max(0, Math.min(1, (transformScale - cursor) / sectionWidthDecimal))}`;
} else if (currentChange.attributeName === "left") {
currentChangedElement.style.left = `${Math.max(0, Math.min(1, (left - cursor) / sectionWidthDecimal)) * 100}%`;
}
} }
} }
cursor += sectionWidth; cursor += sectionWidthDecimal;
} }
} }
}); });
@@ -255,7 +262,7 @@ class PreviewBar {
observer.observe(chapterBar, { observer.observe(chapterBar, {
subtree: true, subtree: true,
attributes: true, attributes: true,
attributeFilter: ["style"] //TODO: check for left too attributeFilter: ["style", "left"]
}); });
// Create it from cloning // Create it from cloning