external/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2024-09-20 04:53:43 +02:00
Code Issues Projects Releases Packages Wiki Activity

Define left + right on previewbar segments instead of left + width

Browse source
This commit is contained in:
mini-bomba 2023-03-24 23:21:42 +01:00
parent 5711e70dbb
commit 0001d28f14
No known key found for this signature in database
GPG key ID: 30F8B138B4794886
1 changed files with 28 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/js-components/previewBar.ts
View file

@ -152,8 +152,8 @@ class PreviewBar {
} }
// Find the segment at that location, using the shortest if multiple found // Find the segment at that location, using the shortest if multiple found
const [normalSegments, chapterSegments] = const [normalSegments, chapterSegments] =
partition(this.segments.filter((s) => s.source !== SponsorSourceType.YouTube), partition(this.segments.filter((s) => s.source !== SponsorSourceType.YouTube),
(segment) => segment.actionType !== ActionType.Chapter); (segment) => segment.actionType !== ActionType.Chapter);
let mainSegment = this.getSmallestSegment(timeInSeconds, normalSegments, "normal"); let mainSegment = this.getSmallestSegment(timeInSeconds, normalSegments, "normal");
let secondarySegment = this.getSmallestSegment(timeInSeconds, chapterSegments, "chapter"); let secondarySegment = this.getSmallestSegment(timeInSeconds, chapterSegments, "chapter");
@ -292,7 +292,7 @@ class PreviewBar {
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) { if (this.existingChapters?.length > 0) {
const margin = parseFloat(this.originalChapterBarBlocks?.[0]?.style?.marginRight?.replace("px", "")); const margin = parseFloat(this.originalChapterBarBlocks?.[0]?.style?.marginRight?.replace("px", ""));
if (margin) this.chapterMargin = margin; if (margin) this.chapterMargin = margin;
@ -337,13 +337,16 @@ class PreviewBar {
bar.style.position = "absolute"; bar.style.position = "absolute";
const duration = Math.min(segment[1], this.videoDuration) - segment[0]; const duration = Math.min(segment[1], this.videoDuration) - segment[0];
const startTime = segment[1] ? Math.min(this.videoDuration, segment[0]) : segment[0];
const endTime = Math.min(this.videoDuration, segment[1]);
bar.style.left = this.timeToPercentage(startTime);
if (duration > 0) { if (duration > 0) {
bar.style.width = `calc(${this.intervalToPercentage(segment[0], segment[1])}${ bar.style.right = this.timeToPercentage(this.videoDuration - endTime);
this.chapterFilter(barSegment) && segment[1] < this.videoDuration ? ` - ${this.chapterMargin}px` : ''})`; }
if (this.chapterFilter(barSegment) && segment[1] < this.videoDuration) {
bar.style.marginRight = `${this.chapterMargin}px`;
} }
const time = segment[1] ? Math.min(this.videoDuration, segment[0]) : segment[0];
bar.style.left = this.timeToPercentage(time);
return bar; return bar;
} }
@ -366,9 +369,9 @@ class PreviewBar {
this.unfilteredChapterGroups = this.createChapterRenderGroups(segments); this.unfilteredChapterGroups = this.createChapterRenderGroups(segments);
} }
if (segments.every((segments) => segments.source === SponsorSourceType.YouTube) if (segments.every((segments) => segments.source === SponsorSourceType.YouTube)
|| (!Config.config.renderSegmentsAsChapters || (!Config.config.renderSegmentsAsChapters
&& segments.every((segment) => segment.actionType !== ActionType.Chapter && segments.every((segment) => segment.actionType !== ActionType.Chapter
|| segment.source === SponsorSourceType.YouTube))) { || segment.source === SponsorSourceType.YouTube))) {
if (this.customChaptersBar) this.customChaptersBar.style.display = "none"; if (this.customChaptersBar) this.customChaptersBar.style.display = "none";
this.originalChapterBar.style.removeProperty("display"); this.originalChapterBar.style.removeProperty("display");
@ -463,7 +466,7 @@ class PreviewBar {
const latestChapter = result[result.length - 1]; const latestChapter = result[result.length - 1];
if (latestChapter && latestChapter.segment[1] > segment.segment[0]) { if (latestChapter && latestChapter.segment[1] > segment.segment[0]) {
const segmentDuration = segment.segment[1] - segment.segment[0]; const segmentDuration = segment.segment[1] - segment.segment[0];
if (segment.segment[0] < latestChapter.segment[0] if (segment.segment[0] < latestChapter.segment[0]
|| segmentDuration < latestChapter.originalDuration) { || segmentDuration < latestChapter.originalDuration) {
// Remove latest if it starts too late // Remove latest if it starts too late
let latestValidChapter = latestChapter; let latestValidChapter = latestChapter;
@ -665,7 +668,7 @@ class PreviewBar {
if (changedData.scale !== null) { if (changedData.scale !== null) {
const transformScale = (changedData.scale) / progressBar.clientWidth; const transformScale = (changedData.scale) / progressBar.clientWidth;
customChangedElement.style.transform = customChangedElement.style.transform =
`scaleX(${Math.max(0, Math.min(1 - calculatedLeft, (transformScale - cursor) / fullSectionWidth - calculatedLeft))}`; `scaleX(${Math.max(0, Math.min(1 - calculatedLeft, (transformScale - cursor) / fullSectionWidth - calculatedLeft))}`;
if (firstUpdate) { if (firstUpdate) {
customChangedElement.style.transition = "none"; customChangedElement.style.transition = "none";
@ -682,7 +685,7 @@ class PreviewBar {
cursor += sectionWidthDecimal; cursor += sectionWidthDecimal;
} }
if (sections.length !== 0 && sections.length !== this.existingChapters?.length if (sections.length !== 0 && sections.length !== this.existingChapters?.length
&& Date.now() - this.lastChapterUpdate > 3000) { && Date.now() - this.lastChapterUpdate > 3000) {
this.lastChapterUpdate = Date.now(); this.lastChapterUpdate = Date.now();
this.updateExistingChapters(); this.updateExistingChapters();
@ -690,7 +693,7 @@ class PreviewBar {
} }
} }
private findLeftAndScale(selector: string, currentElement: HTMLElement, progressBar: HTMLElement): private findLeftAndScale(selector: string, currentElement: HTMLElement, progressBar: HTMLElement):
{ left: number; scale: number } { { left: number; scale: number } {
const sections = currentElement.parentElement.parentElement.parentElement.children; const sections = currentElement.parentElement.parentElement.parentElement.children;
let currentWidth = 0; let currentWidth = 0;
@ -708,7 +711,7 @@ class PreviewBar {
const section = sections[i] as HTMLElement; const section = sections[i] as HTMLElement;
const checkElement = section.querySelector(selector) as HTMLElement; const checkElement = section.querySelector(selector) as HTMLElement;
const currentSectionWidthNoMargin = this.getPartialChapterSectionStyle(section, "width") ?? progressBar.clientWidth; const currentSectionWidthNoMargin = this.getPartialChapterSectionStyle(section, "width") ?? progressBar.clientWidth;
const currentSectionWidth = currentSectionWidthNoMargin const currentSectionWidth = currentSectionWidthNoMargin
+ this.getPartialChapterSectionStyle(section, "marginRight"); + this.getPartialChapterSectionStyle(section, "marginRight");
// First check for left // First check for left
@ -751,8 +754,8 @@ class PreviewBar {
currentWidth += lastWidth; currentWidth += lastWidth;
} }
return { return {
left: left + leftPosition, left: left + leftPosition,
scale: scale !== null ? scale * scaleWidth + scalePosition : null scale: scale !== null ? scale * scaleWidth + scalePosition : null
}; };
} }
@ -767,7 +770,7 @@ class PreviewBar {
} }
updateChapterText(segments: SponsorTime[], submittingSegments: SponsorTime[], currentTime: number): SponsorTime[] { updateChapterText(segments: SponsorTime[], submittingSegments: SponsorTime[], currentTime: number): SponsorTime[] {
if (!Config.config.showSegmentNameInChapterBar if (!Config.config.showSegmentNameInChapterBar
|| ((!segments || segments.length <= 0) && submittingSegments?.length <= 0)) { || ((!segments || segments.length <= 0) && submittingSegments?.length <= 0)) {
const chaptersContainer = this.getChaptersContainer(); const chaptersContainer = this.getChaptersContainer();
const chapterButton = this.getChapterButton(chaptersContainer); const chapterButton = this.getChapterButton(chaptersContainer);
@ -781,7 +784,7 @@ class PreviewBar {
segments ??= []; segments ??= [];
if (submittingSegments?.length > 0) segments = segments.concat(submittingSegments); if (submittingSegments?.length > 0) segments = segments.concat(submittingSegments);
const activeSegments = segments.filter((segment) => { const activeSegments = segments.filter((segment) => {
return segment.hidden === SponsorHideType.Visible return segment.hidden === SponsorHideType.Visible
&& segment.segment[0] <= currentTime && segment.segment[1] > currentTime && segment.segment[0] <= currentTime && segment.segment[1] > currentTime
&& segment.category !== DEFAULT_CATEGORY; && segment.category !== DEFAULT_CATEGORY;
}); });
@ -838,7 +841,7 @@ class PreviewBar {
if (oldVoteContainers.length > 0) { if (oldVoteContainers.length > 0) {
oldVoteContainers.forEach((oldVoteContainer) => oldVoteContainer.remove()); oldVoteContainers.forEach((oldVoteContainer) => oldVoteContainer.remove());
} }
chapterButton.insertBefore(chapterVoteContainer, this.getChapterChevron()); chapterButton.insertBefore(chapterVoteContainer, this.getChapterChevron());
} }
@ -914,7 +917,7 @@ class PreviewBar {
for (let i = 0; i < this.originalChapterBarBlocks.length; i++) { for (let i = 0; i < this.originalChapterBarBlocks.length; i++) {
const chapterElement = this.originalChapterBarBlocks[i]; const chapterElement = this.originalChapterBarBlocks[i];
const widthPixels = parseFloat(chapterElement.style.width.replace("px", "")); const widthPixels = parseFloat(chapterElement.style.width.replace("px", ""));
if (time >= this.existingChapters[i].segment[1]) { if (time >= this.existingChapters[i].segment[1]) {
const marginPixels = chapterElement.style.marginRight ? parseFloat(chapterElement.style.marginRight.replace("px", "")) : 0; const marginPixels = chapterElement.style.marginRight ? parseFloat(chapterElement.style.marginRight.replace("px", "")) : 0;
pixelOffset += widthPixels + marginPixels; pixelOffset += widthPixels + marginPixels;
@ -929,8 +932,8 @@ class PreviewBar {
if (latestChapter) { if (latestChapter) {
const latestWidth = parseFloat(this.originalChapterBarBlocks[lastCheckedChapter + 1].style.width.replace("px", "")); const latestWidth = parseFloat(this.originalChapterBarBlocks[lastCheckedChapter + 1].style.width.replace("px", ""));
const latestChapterDuration = latestChapter.segment[1] - latestChapter.segment[0]; const latestChapterDuration = latestChapter.segment[1] - latestChapter.segment[0];
const percentageInCurrentChapter = (time - latestChapter.segment[0]) / latestChapterDuration; const percentageInCurrentChapter = (time - latestChapter.segment[0]) / latestChapterDuration;
const sizeOfCurrentChapter = latestWidth / totalPixels; const sizeOfCurrentChapter = latestWidth / totalPixels;
return Math.min(1, ((pixelOffset / totalPixels) + (percentageInCurrentChapter * sizeOfCurrentChapter))); return Math.min(1, ((pixelOffset / totalPixels) + (percentageInCurrentChapter * sizeOfCurrentChapter)));
} }
@ -955,7 +958,7 @@ class PreviewBar {
let segment: PreviewBarSegment | null = null; let segment: PreviewBarSegment | null = null;
let index = -1; let index = -1;
let currentSegmentLength = Infinity; let currentSegmentLength = Infinity;
for (let i = startSearchIndex; i < segments.length && i >= 0; i += direction) { for (let i = startSearchIndex; i < segments.length && i >= 0; i += direction) {
const seg = segments[i]; const seg = segments[i];
const segmentLength = seg.segment[1] - seg.segment[0]; const segmentLength = seg.segment[1] - seg.segment[0];