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,7 +17,6 @@ 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
 
@@ -27,13 +26,14 @@ class ChaptersPlugin extends Plugin {
         this.getSeekBar().addChild(marker)
       }
     })
-    })
   }
 
   dispose () {
     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)