Fix chapters markers in progress bar

Fix when we update the video source
Fix when we don't have the video duration yet when creating markers

client/src/assets/player/shared/control-bar/chapters-plugin.ts

@@ -17,16 +17,14 @@ class ChaptersPlugin extends Plugin {
     this.player.ready(() => {
       player.addClass('vjs-chapters')
 
-      this.player.one('durationchange', () => {
-        for (const chapter of this.chapters) {
-          if (chapter.timecode === 0) continue
+      for (const chapter of this.chapters) {
+        if (chapter.timecode === 0) continue
 
-          const marker = new ProgressBarMarkerComponent(player, { timecode: chapter.timecode })
+        const marker = new ProgressBarMarkerComponent(player, { timecode: chapter.timecode })
 
-          this.markers.push(marker)
-          this.getSeekBar().addChild(marker)
-        }
-      })
+        this.markers.push(marker)
+        this.getSeekBar().addChild(marker)
+      }
     })
   }
 
@@ -34,6 +32,8 @@ class ChaptersPlugin extends Plugin {
     for (const marker of this.markers) {
       this.getSeekBar().removeChild(marker)
     }
+
+    super.dispose()
   }
 
   getChapter (timecode: number) {

client/src/assets/player/shared/control-bar/progress-bar-marker-component.ts

@@ -9,16 +9,25 @@ export class ProgressBarMarkerComponent extends Component {
   // eslint-disable-next-line @typescript-eslint/no-useless-constructor
   constructor (player: videojs.Player, options?: ProgressBarMarkerComponentOptions & videojs.ComponentOptions) {
     super(player, options)
+
+    const updateMarker = () => {
+      (this.el() as HTMLElement).style.setProperty('left', this.buildLeftStyle())
+    }
+    this.player().on('durationchange', updateMarker)
+
+    this.one('dispose', () => this.player().off('durationchange', updateMarker))
   }
 
   createEl () {
-    const left = (this.options_.timecode / this.player().duration()) * 100
-
     return videojs.dom.createEl('span', {
       className: 'vjs-marker',
-      style: `left: ${left}%`
+      style: `left: ${this.buildLeftStyle()}`
     }) as HTMLButtonElement
   }
+
+  private buildLeftStyle () {
+    return `${(this.options_.timecode / this.player().duration()) * 100}%`
+  }
 }
 
 videojs.registerComponent('ProgressBarMarkerComponent', ProgressBarMarkerComponent)