fix(player): fill last slider chapter gap based on duration difference

vidstack · Dec 18, 2023 · 32ed5d5 · 32ed5d5
1 parent f20e904
commit 32ed5d5
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/packages/vidstack/src/components/ui/sliders/time-slider/slider-chapters.ts b/packages/vidstack/src/components/ui/sliders/time-slider/slider-chapters.ts
@@ -263,10 +263,10 @@ export class SliderChapters extends Component<SliderChaptersProps, {}, SliderCha
 
     chapters.push(cues[cues.length - 1]);
 
-    // const { duration } = this._media.$state;
-    // if (Math.abs(cues[cues.length - 1].endTime - duration()) > 1) {
-    //   chapters.push(new window.VTTCue(cues[cues.length - 1].endTime, duration(), ''));
-    // }
+    const { duration } = this._media.$state;
+    if (duration() >= 0 && Math.abs(cues[cues.length - 1].endTime - duration()) > 1) {
+      chapters.push(new window.VTTCue(cues[cues.length - 1].endTime, duration(), ''));
+    }
 
     return chapters;
   }
@@ -285,6 +285,7 @@ export class SliderChapters extends Component<SliderChaptersProps, {}, SliderCha
       onCuesChange();
       onDispose(listenEvent(track, 'add-cue', onCuesChange));
       onDispose(listenEvent(track, 'remove-cue', onCuesChange));
+      effect(this._watchMediaDuration.bind(this));
     }
 
     this._titleRef = this._findChapterTitleRef();
@@ -298,6 +299,11 @@ export class SliderChapters extends Component<SliderChaptersProps, {}, SliderCha
     };
   }
 
+  private _watchMediaDuration() {
+    this._media.$state.duration();
+    this._onCuesChange();
+  }
+
   private _onCuesChange = debounce(
     () => {
       const track = peek(this._$track);