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

Fix overlapping text on tooltip when chapters are present

Browse Source
This commit is contained in:
Ajay
2025-06-12 04:07:11 -04:00
parent 9a7c65899e
commit 689594851d
2 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
public/content.css
View File

@@ -115,6 +115,14 @@ div:hover > #previewbar.sbNotInvidious {
transform: translateY(-2em) !important; transform: translateY(-2em) !important;
} }
.ytp-tooltip.sponsorCategoryTooltipVisible.sponsorHasOriginalTooltip {
transform: translateY(-2em) !important;
}
.ytp-tooltip.sponsorCategoryTooltipVisible.sponsorTwoTooltips.sponsorHasOriginalTooltip {
transform: translateY(-3em) !important;
}
.ytp-big-mode .ytp-tooltip.sponsorCategoryTooltipVisible { .ytp-big-mode .ytp-tooltip.sponsorCategoryTooltipVisible {
transform: translateY(-2em) !important; transform: translateY(-2em) !important;
} }

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

@@ -3,8 +3,6 @@ Based on code from
https://github.com/videosegments/videosegments/commits/f1e111bdfe231947800c6efdd51f62a4e7fef4d4/segmentsbar/segmentsbar.js https://github.com/videosegments/videosegments/commits/f1e111bdfe231947800c6efdd51f62a4e7fef4d4/segmentsbar/segmentsbar.js
*/ */
'use strict';
import Config from "../config"; import Config from "../config";
import { ChapterVote } from "../render/ChapterVote"; import { ChapterVote } from "../render/ChapterVote";
import { ActionType, Category, SegmentContainer, SponsorHideType, SponsorSourceType, SponsorTime } from "../types"; import { ActionType, Category, SegmentContainer, SponsorHideType, SponsorSourceType, SponsorTime } from "../types";
@@ -205,9 +203,12 @@ class PreviewBar {
this.setTooltipTitle(mainSegment, this.categoryScrubTooltip); this.setTooltipTitle(mainSegment, this.categoryScrubTooltip);
this.setTooltipTitle(secondarySegment, this.chapterScrubTooltip); this.setTooltipTitle(secondarySegment, this.chapterScrubTooltip);
} }
this.categoryTooltipContainer.classList.remove("sponsorHasOriginalTooltip");
} else { } else {
this.categoryTooltipContainer.classList.add(TOOLTIP_VISIBLE_CLASS); this.categoryTooltipContainer.classList.add(TOOLTIP_VISIBLE_CLASS);
if (mainSegment !== null && secondarySegment !== null) { const hasTwoTooltips = mainSegment !== null && secondarySegment !== null;
if (hasTwoTooltips) {
this.categoryTooltipContainer.classList.add("sponsorTwoTooltips"); this.categoryTooltipContainer.classList.add("sponsorTwoTooltips");
originalTooltip.classList.remove("sponsorTooltipHasYTChapters"); originalTooltip.classList.remove("sponsorTooltipHasYTChapters");
} else { } else {
@@ -227,11 +228,15 @@ class PreviewBar {
} }
if (normalizeChapterName(originalTooltip.textContent) === normalizeChapterName(this.categoryTooltip.textContent) if (normalizeChapterName(originalTooltip.textContent) === normalizeChapterName(this.categoryTooltip.textContent)
|| normalizeChapterName(originalTooltip.textContent) === normalizeChapterName(this.chapterTooltip.textContent)) { || normalizeChapterName(originalTooltip.textContent) === normalizeChapterName(this.chapterTooltip.textContent)
|| !originalTooltip.textContent) {
if (originalTooltip.style.display !== "none") originalTooltip.style.display = "none"; if (originalTooltip.style.display !== "none") originalTooltip.style.display = "none";
this.categoryTooltipContainer.classList.remove("sponsorHasOriginalTooltip");
noYoutubeChapters = true; noYoutubeChapters = true;
} else if (originalTooltip.style.display === "none") { } else if (originalTooltip.style.display === "none") {
originalTooltip.style.removeProperty("display"); originalTooltip.style.removeProperty("display");
this.categoryTooltipContainer.classList.add("sponsorHasOriginalTooltip");
noYoutubeChapters = false;
} }
// To prevent offset issue // To prevent offset issue