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

Sync official chapter margin

Browse Source
This commit is contained in:
Ajay
2022-09-14 02:27:51 -04:00
parent 9bb8a0986f
commit d9e723b265
1 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -53,6 +53,7 @@ class PreviewBar {
chapterVote: ChapterVote; chapterVote: ChapterVote;
originalChapterBar: HTMLElement; originalChapterBar: HTMLElement;
originalChapterBarBlocks: NodeListOf<HTMLElement>; originalChapterBarBlocks: NodeListOf<HTMLElement>;
chapterMargin: number;
constructor(parent: HTMLElement, onMobileYouTube: boolean, onInvidious: boolean, chapterVote: ChapterVote, test=false) { constructor(parent: HTMLElement, onMobileYouTube: boolean, onInvidious: boolean, chapterVote: ChapterVote, test=false) {
if (test) return; if (test) return;
@@ -236,9 +237,15 @@ class PreviewBar {
this.clear(); this.clear();
if (!this.segments) return; if (!this.segments) return;
this.chapterMargin = 2;
if (this.originalChapterBar) { if (this.originalChapterBar) {
this.originalChapterBarBlocks = this.originalChapterBar.querySelectorAll(":scope > div") as NodeListOf<HTMLElement> this.originalChapterBarBlocks = this.originalChapterBar.querySelectorAll(":scope > div") as NodeListOf<HTMLElement>
this.existingChapters = this.segments.filter((s) => s.source === SponsorSourceType.YouTube).sort((a, b) => a.segment[0] - b.segment[0]); this.existingChapters = this.segments.filter((s) => s.source === SponsorSourceType.YouTube).sort((a, b) => a.segment[0] - b.segment[0]);
if (this.existingChapters?.length > 0) {
const margin = parseFloat(this.originalChapterBarBlocks?.[0]?.style?.marginRight?.replace("px", ""));
if (margin) this.chapterMargin = margin;
}
} }
const sortedSegments = this.segments.sort(({ segment: a }, { segment: b }) => { const sortedSegments = this.segments.sort(({ segment: a }, { segment: b }) => {
@@ -282,7 +289,7 @@ class PreviewBar {
const duration = Math.min(segment[1], this.videoDuration) - segment[0]; const duration = Math.min(segment[1], this.videoDuration) - segment[0];
if (duration > 0) { if (duration > 0) {
bar.style.width = `calc(${this.intervalToPercentage(segment[0], segment[1])}${ bar.style.width = `calc(${this.intervalToPercentage(segment[0], segment[1])}${
this.chapterFilter(barSegment) && segment[1] < this.videoDuration ? ' - 2px' : ''})`; this.chapterFilter(barSegment) && segment[1] < this.videoDuration ? ` - ${this.chapterMargin}px` : ''})`;
} }
const time = segment[1] ? Math.min(this.videoDuration, segment[0]) : segment[0]; const time = segment[1] ? Math.min(this.videoDuration, segment[0]) : segment[0];
@@ -456,8 +463,8 @@ class PreviewBar {
private setupChapterSection(section: HTMLElement, startTime: number, endTime: number, addMargin: boolean): void { private setupChapterSection(section: HTMLElement, startTime: number, endTime: number, addMargin: boolean): void {
const sizePercent = this.intervalToPercentage(startTime, endTime); const sizePercent = this.intervalToPercentage(startTime, endTime);
if (addMargin) { if (addMargin) {
section.style.marginRight = "2px"; section.style.marginRight = `${this.chapterMargin}px`;
section.style.width = `calc(${sizePercent} - 2px)`; section.style.width = `calc(${sizePercent} - ${this.chapterMargin}px)`;
} else { } else {
section.style.marginRight = "0"; section.style.marginRight = "0";
section.style.width = sizePercent; section.style.width = sizePercent;
@@ -534,7 +541,7 @@ class PreviewBar {
const section = sections[i]; const section = sections[i];
const sectionWidthDecimal = parseFloat(section.getAttribute("decimal-width")); const sectionWidthDecimal = parseFloat(section.getAttribute("decimal-width"));
const sectionWidthDecimalNoMargin = sectionWidthDecimal - 2 / progressBar.clientWidth; const sectionWidthDecimalNoMargin = sectionWidthDecimal - this.chapterMargin / progressBar.clientWidth;
for (const className in changes) { for (const className in changes) {
const selector = `.${className}` const selector = `.${className}`