Add chapter markings to video player timeline.

These labels show the start of each chapter when interacting with the
slider the same way that activates the slider bubble. They follow the
same color scheme as the slider (watched chapters turn blue).

Inspired by https://features.jellyfin.org/posts/397/chapter-markers-in-timeline

src/controllers/playback/video/index.html

@@ -21,6 +21,7 @@
             <div class="flex flex-direction-row align-items-center">
                 <div class="osdTextContainer startTimeText osdPositionText" style="margin: 0 .25em 0 0;"></div>
                 <div class="sliderContainer flex-grow" style="margin: .5em 0 .25em;">
+                    <div class="sliderChapterMarkContainer hide"></div>
                     <input type="range" step=".01" min="0" max="100" value="0" is="emby-slider" class="osdPositionSlider" data-slider-keep-progress="true" />
                 </div>
                 <div class="osdTextContainer endTimeText osdDurationText" style="margin: 0 0 0 .25em;"></div>

src/controllers/playback/video/index.js

@@ -1574,6 +1574,28 @@ import { setBackdropTransparency, TRANSPARENCY_LEVEL } from '../../../components
             return '<h1 class="sliderBubbleText">' + datetime.getDisplayRunningTime(ticks) + '</h1>';
         };
 
+        nowPlayingPositionSlider.getChapterFractions = function () {
+            showOsd();
+
+            const item = currentItem;
+
+            if (item && item.Chapters && item.Chapters.length) {
+                const chapterFractions = [];
+                const runtimeDuration = item.RunTimeTicks;
+
+                for (let i = 0, length = item.Chapters.length; i < length; i++) {
+                    const currentChapter = item.Chapters[i];
+
+                    const fraction = currentChapter.StartPositionTicks / runtimeDuration;
+                    chapterFractions.push(fraction);
+                }
+
+                return chapterFractions;
+            }
+
+            return [];
+        };
+
         view.querySelector('.btnPreviousTrack').addEventListener('click', function () {
             playbackManager.previousTrack(currentPlayer);
         });