Merge pull request #7798 from will-blk/add-chapter-name-to-hover-bubble

Add chapter name inside osd slider bubble

src/controllers/playback/video/index.js

@@ -1563,22 +1563,24 @@ export default function (view) {
         }
 
         const src = getImgUrl(item, chapter, index, 400, apiClient);
+        let html = '<div class="chapterThumbContainer chapterBubblePosition">';
 
         if (src) {
-            let html = '<div class="chapterThumbContainer">';
             html += '<img class="chapterThumb" src="' + src + '" />';
             html += '<div class="chapterThumbTextContainer">';
-            html += '<div class="chapterThumbText chapterThumbText-dim">';
-            html += escapeHtml(chapter.Name);
-            html += '</div>';
-            html += '<h2 class="chapterThumbText">';
-            html += datetime.getDisplayRunningTime(positionTicks);
-            html += '</h2>';
-            html += '</div>';
-            return html + '</div>';
+        } else {
+            html += '<div class="chapterThumbTextContainer chapterBubblePosition">';
         }
 
-        return null;
+        html += '<div class="chapterThumbText chapterThumbText-dim">';
+        html += escapeHtml(chapter.Name);
+        html += '</div>';
+        html += '<h2 class="chapterThumbText">';
+        html += datetime.getDisplayRunningTime(positionTicks);
+        html += '</h2>';
+        html += '</div>';
+
+        return html + '</div>';
     }
 
     let playPauseClickTimeout;
@@ -1909,7 +1911,7 @@ export default function (view) {
         ticks *= value;
         const item = currentItem;
 
-        if (item?.Chapters?.length && item.Chapters[0].ImageTag) {
+        if (item?.Chapters?.length) {
             const html = getChapterBubbleHtml(ServerConnections.getApiClient(item.ServerId), item, item.Chapters, ticks);
 
             if (html) {

src/styles/videoosd.scss

@@ -54,7 +54,10 @@
 .chapterThumbContainer {
     box-shadow: 0 0 1.9vh #000;
     flex-grow: 1;
-    position: relative;
+}
+
+.chapterBubblePosition {
+    position: relative !important;
 }
 
 .chapterThumb {
@@ -88,6 +91,7 @@
     background: none;
     padding: 0.25em 0.5em;
     user-select: none;
+    min-width: fit-content;
 }
 
 .chapterThumbText {
@@ -96,6 +100,8 @@
     opacity: 1;
     color: #fff;
     text-shadow: 0 0 25px #000, 0 0 6px #000;
+    white-space: nowrap;
+    min-width: fit-content;
 }
 
 .chapterThumbText-dim {