Fix chapter name sometimes disappearing

2 files changed, 17 insertions, 13 deletions

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);
             }
         }