diff --git a/public/content.css b/public/content.css index 830fcabd..8e23aaa3 100644 --- a/public/content.css +++ b/public/content.css @@ -867,3 +867,7 @@ input::-webkit-inner-spin-button { .sponsorThumbnailLabel:hover span { display: inline; } + +.sponsorblock-chapter-visible { + display: inherit !important; +} \ No newline at end of file diff --git a/src/js-components/previewBar.ts b/src/js-components/previewBar.ts index 944066c7..d88912b2 100644 --- a/src/js-components/previewBar.ts +++ b/src/js-components/previewBar.ts @@ -774,10 +774,11 @@ class PreviewBar { if (!Config.config.showSegmentNameInChapterBar || ((!segments || segments.length <= 0) && submittingSegments?.length <= 0)) { const chaptersContainer = this.getChaptersContainer(); - const chapterButton = this.getChapterButton(chaptersContainer); - if (chapterButton && chapterButton.classList.contains("ytp-chapter-container-disabled")) { - chaptersContainer.style.display = "none"; - } + chaptersContainer.querySelector(".sponsorChapterText")?.remove(); + const chapterTitle = chaptersContainer.querySelector(".ytp-chapter-title-content") as HTMLDivElement; + + chapterTitle.style.removeProperty("display"); + chaptersContainer.classList.remove("sponsorblock-chapter-visible"); return []; } @@ -802,7 +803,7 @@ class PreviewBar { if (chaptersContainer) { if (segments.length > 0) { - chaptersContainer.style.removeProperty("display"); + chaptersContainer.classList.add("sponsorblock-chapter-visible"); const chosenSegment = segments.sort((a, b) => { if (a.actionType === ActionType.Chapter && b.actionType !== ActionType.Chapter) { @@ -819,11 +820,11 @@ class PreviewBar { chapterButton.disabled = false; const chapterTitle = chaptersContainer.querySelector(".ytp-chapter-title-content") as HTMLDivElement; - chapterTitle.innerText = ""; + chapterTitle.style.display = "none"; - const chapterCustomText = (chapterTitle.querySelector(".sponsorChapterText") || (() => { + const chapterCustomText = (chapterTitle.parentElement.querySelector(".sponsorChapterText") || (() => { const elem = document.createElement("div"); - chapterTitle.appendChild(elem); + chapterTitle.parentElement.insertBefore(elem, chapterTitle); elem.classList.add("sponsorChapterText"); return elem; })()) as HTMLDivElement; @@ -854,11 +855,10 @@ class PreviewBar { } else { chaptersContainer.querySelector(".sponsorChapterText")?.remove(); const chapterTitle = chaptersContainer.querySelector(".ytp-chapter-title-content") as HTMLDivElement; - if (chapterTitle.innerText === "") { - chaptersContainer.style.display = "none"; - } else { - chaptersContainer.style.removeProperty("display"); - } + + chapterTitle.style.removeProperty("display"); + chaptersContainer.classList.remove("sponsorblock-chapter-visible"); + this.chapterVote.setVisibility(false); } }