fix(UI): Align seek bar chapter markers with the playhead thumb

Author: KimKyuHoi

ui/seek_bar.js

@@ -532,6 +532,10 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
     const minSeekBarWindow =
         shaka.ui.SeekBar.MIN_SEEK_WINDOW_TO_SHOW_SEEKBAR_;
     if (seekRangeSize < minSeekBarWindow) {
+      if (seekRangeSize <= 0) {
+        this.chaptersTimer_.tickAfter(/* seconds= */ 0.1);
+        return;
+      }
       this.chapterMarkerContainer_.style.background = 'transparent';
       this.chaptersTimer_?.stop();
       return;
@@ -560,9 +564,23 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
       return;
     }
 
+    const rect = this.bar.getBoundingClientRect();
+    const thumbSize = 12;
+    const barMin = parseFloat(this.bar.min);
+    const barMax = parseFloat(this.bar.max);
+    const barRange = barMax - barMin;
+
+    if (rect.width === 0 || barRange === 0) {
+      this.chaptersTimer_.tickAfter(/* seconds= */ 0.1);
+      return;
+    }
+
     const sortedPoints = Array.from(points).sort((a, b) => a - b);
     for (const point of sortedPoints) {
-      const start = ((point - seekRange.start) / seekRangeSize) * 100 + '%';
+      const fraction = (point - barMin) / barRange;
+      const pixelPos = fraction * (rect.width - thumbSize) + thumbSize / 2;
+      const startPct = (pixelPos / rect.width) * 100;
+      const start = startPct + '%';
       const end = `calc(${start} + 2px)`;
 
       gradient.push(`transparent ${start}`);
@@ -840,7 +858,7 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
   getChapter_(totalSeconds) {
     for (const chapter of this.controls.getChapters()) {
       if (chapter.startTime <= totalSeconds &&
-          chapter.endTime >= totalSeconds) {
+          chapter.endTime > totalSeconds) {
         return chapter;
       }
     }