diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js index 71ccba3e4a..dee639dbe7 100644 --- a/src/controllers/playback/video/index.js +++ b/src/controllers/playback/video/index.js @@ -1384,11 +1384,13 @@ export default function (view) { let chapterThumbContainer = bubble.querySelector('.chapterThumbContainer'); let chapterThumb; let chapterThumbText; + let chapterThumbName; // Create bubble elements if they don't already exist if (chapterThumbContainer) { chapterThumb = chapterThumbContainer.querySelector('.chapterThumbWrapper'); - chapterThumbText = chapterThumbContainer.querySelector('.chapterThumbText'); + chapterThumbText = chapterThumbContainer.querySelector('h2.chapterThumbText'); + chapterThumbName = chapterThumbContainer.querySelector('div.chapterThumbText'); } else { doFullUpdate = true; @@ -1407,11 +1409,24 @@ export default function (view) { chapterThumbTextContainer.classList.add('chapterThumbTextContainer'); chapterThumbContainer.appendChild(chapterThumbTextContainer); + chapterThumbName = document.createElement('div'); + chapterThumbName.classList.add('chapterThumbText', 'chapterThumbText-dim'); + chapterThumbTextContainer.appendChild(chapterThumbName); + chapterThumbText = document.createElement('h2'); chapterThumbText.classList.add('chapterThumbText'); chapterThumbTextContainer.appendChild(chapterThumbText); } + let chapter; + for (const currentChapter of item.Chapters || []) { + if (positionTicks < currentChapter.StartPositionTicks) { + break; + } + + chapter = currentChapter; + } + // Update trickplay values const currentTimeMs = positionTicks / 10_000; const currentTile = Math.floor(currentTimeMs / trickplayInfo.Interval); @@ -1435,6 +1450,7 @@ export default function (view) { chapterThumb.style.backgroundPositionY = offsetY + 'px'; chapterThumbText.textContent = datetime.getDisplayRunningTime(positionTicks); + chapterThumbName.textContent = chapter?.Name || ''; // Set bubble innerHTML if container isn't part of DOM if (doFullUpdate) {