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 growing chapter on hover

Browse Source
This commit is contained in:
Ajay Ramachandran
2021-10-28 23:57:53 -04:00
parent 2d3e293d83
commit 7c4a0628b7
2 changed files with 26 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/content.css
View File

@@ -49,6 +49,10 @@
transform: translateY(1em) !important; transform: translateY(1em) !important;
} }
.sponsorBlockChapterBar:hover {
z-index: 41;
}
/* */ /* */
.popup { .popup {

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

@@ -32,6 +32,9 @@ class PreviewBar {
segments: PreviewBarSegment[] = []; segments: PreviewBarSegment[] = [];
videoDuration = 0; videoDuration = 0;
// For chapter bar
hoveredSection?: HTMLElement;
constructor(parent: HTMLElement, onMobileYouTube: boolean, onInvidious: boolean) { constructor(parent: HTMLElement, onMobileYouTube: boolean, onInvidious: boolean) {
this.container = document.createElement('ul'); this.container = document.createElement('ul');
this.container.id = 'previewbar'; this.container.id = 'previewbar';
@@ -246,8 +249,11 @@ class PreviewBar {
const changedElement = changes[className].target as HTMLElement; const changedElement = changes[className].target as HTMLElement;
const left = parseFloat(changedElement.style.left.replace("px", "")) / progressBar.clientWidth; const left = parseFloat(changedElement.style.left.replace("px", "")) / progressBar.clientWidth;
if (currentChange.attributeName === "style") { if (currentChange.attributeName === "style") {
const transformScale = parseFloat(changedElement.style.transform.match(/scaleX\(([0-9.]+?)\)/)[1]) + left; const transformMatch = changedElement.style.transform.match(/scaleX\(([0-9.]+?)\)/);
currentChangedElement.style.transform = `scaleX(${Math.max(0, Math.min(1, (transformScale - cursor) / sectionWidthDecimal))}`; if (transformMatch) {
const transformScale = parseFloat(transformMatch[1]) + left;
currentChangedElement.style.transform = `scaleX(${Math.max(0, Math.min(1, (transformScale - cursor) / sectionWidthDecimal))}`;
}
} else if (currentChange.attributeName === "left") { } else if (currentChange.attributeName === "left") {
currentChangedElement.style.left = `${Math.max(0, Math.min(1, (left - cursor) / sectionWidthDecimal)) * 100}%`; currentChangedElement.style.left = `${Math.max(0, Math.min(1, (left - cursor) / sectionWidthDecimal)) * 100}%`;
} }
@@ -289,18 +295,14 @@ class PreviewBar {
const newBlankSection = originalSectionClone.cloneNode(true) as HTMLElement; const newBlankSection = originalSectionClone.cloneNode(true) as HTMLElement;
const blankDuration = segment.segment[0]; const blankDuration = segment.segment[0];
newBlankSection.style.marginRight = "2px"; this.setupChapterSection(newBlankSection, blankDuration);
newBlankSection.style.width = `calc(${this.timeToPercentage(blankDuration)} - 2px)`;
newBlankSection.setAttribute("decimal-width", String(this.timeToDecimal(blankDuration)));
newChapterBar.appendChild(newBlankSection); newChapterBar.appendChild(newBlankSection);
} }
const duration = segment.segment[1] - segment.segment[0]; const duration = segment.segment[1] - segment.segment[0];
const newSection = originalSectionClone.cloneNode(true) as HTMLElement; const newSection = originalSectionClone.cloneNode(true) as HTMLElement;
newSection.style.marginRight = "2px"; this.setupChapterSection(newSection, duration);
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) {
@@ -309,9 +311,7 @@ class PreviewBar {
const nextTime = nextSegment ? nextSegment.segment[0] : this.videoDuration; const nextTime = nextSegment ? nextSegment.segment[0] : this.videoDuration;
const blankDuration = nextTime - segment.segment[1]; const blankDuration = nextTime - segment.segment[1];
newBlankSection.style.marginRight = "2px"; this.setupChapterSection(newBlankSection, blankDuration);
newBlankSection.style.width = `calc(${this.timeToPercentage(blankDuration)} - 2px)`;
newBlankSection.setAttribute("decimal-width", String(this.timeToDecimal(blankDuration)));
newChapterBar.appendChild(newBlankSection); newChapterBar.appendChild(newBlankSection);
} }
} }
@@ -321,11 +321,18 @@ class PreviewBar {
// Hide old bar // Hide old bar
chapterBar.style.display = "none"; chapterBar.style.display = "none";
}
// clone stuff private setupChapterSection(section: HTMLElement, duration: number): void {
// Setup mutation listener section.style.marginRight = "2px";
// Modify sizes to meet new scales values section.style.width = `calc(${this.timeToPercentage(duration)} - 2px)`;
// Hide old element section.setAttribute("decimal-width", String(this.timeToDecimal(duration)));
section.addEventListener("mouseenter", () => {
this.hoveredSection?.classList.remove("ytp-exp-chapter-hover-effect");
section.classList.add("ytp-exp-chapter-hover-effect");
this.hoveredSection = section;
});
} }
updateChapterText(segments: SponsorTime[], currentTime: number): void { updateChapterText(segments: SponsorTime[], currentTime: number): void {