fix(player): fill all slider chapters when live edge

Author: mihar-22

packages/react/.templates/sandbox/player.tsx

@@ -62,7 +62,7 @@ export function Player() {
         setSrc(`https://stream.mux.com/${muxPlaybackId}.m3u8`);
         break;
       case 'live':
-        player.src = 'https://stream.mux.com/v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM.m3u8';
+        setSrc('https://stream.mux.com/v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM.m3u8');
         break;
     }
   }

packages/vidstack/src/components/ui/sliders/time-slider/slider-chapters.ts

@@ -148,6 +148,8 @@ export class SliderChapters extends Component<SliderChaptersProps> {
   }
 
   private _watchFillPercent() {
+    const { liveEdge } = this._media.$state;
+
     let { fillPercent, value } = this._sliderState,
       prevActiveIndex = peek(this._activeIndex),
       currentChapter = this._cues[prevActiveIndex],
@@ -156,13 +158,18 @@ export class SliderChapters extends Component<SliderChaptersProps> {
         fillPercent(),
       );
 
-    if (currentActiveIndex > prevActiveIndex) {
+    if (liveEdge()) {
+      this._updateFillPercents(0, this._cues.length, '100%');
+    } else if (currentActiveIndex > prevActiveIndex) {
       this._updateFillPercents(prevActiveIndex, currentActiveIndex, '100%');
     } else if (currentActiveIndex < prevActiveIndex) {
       this._updateFillPercents(currentActiveIndex + 1, prevActiveIndex + 1, '0%');
     }
 
-    const percent = this._calcPercent(this._cues[currentActiveIndex], fillPercent()) + '%';
+    const percent = liveEdge()
+      ? '100%'
+      : this._calcPercent(this._cues[currentActiveIndex], fillPercent()) + '%';
+
     this._updateFillPercent(this._refs[currentActiveIndex], percent);
 
     this._activeIndex.set(currentActiveIndex);