Fix chapters icon layout shift

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

@@ -11,7 +11,12 @@ export class ProgressBarMarkerComponent extends Component {
     super(player, options)
 
     const updateMarker = () => {
-      (this.el() as HTMLElement).style.setProperty('left', this.buildLeftStyle())
+      if (!this.hasValidDuration()) return
+
+      const el = this.el() as HTMLElement
+
+      el.style.setProperty('left', this.buildLeftStyle())
+      el.style.setProperty('display', 'inline')
     }
     this.player().on('durationchange', updateMarker)
 
@@ -21,13 +26,23 @@ export class ProgressBarMarkerComponent extends Component {
   createEl () {
     return videojs.dom.createEl('span', {
       className: 'vjs-chapter-marker',
-      style: `left: ${this.buildLeftStyle()}`
+      style: this.hasValidDuration()
+        ? `left: ${this.buildLeftStyle()}`
+        : 'display: none;'
     }) as HTMLButtonElement
   }
 
   private buildLeftStyle () {
     return `${(this.options_.timecode / this.player().duration()) * 100}%`
   }
+
+  private hasValidDuration () {
+    const duration = this.player().duration()
+
+    if (isNaN(duration) || !duration) return false
+
+    return true
+  }
 }
 
 videojs.registerComponent('ProgressBarMarkerComponent', ProgressBarMarkerComponent)

client/src/sass/player/control-bar.scss

@@ -5,7 +5,7 @@
 
 $slider-height: 3px;
 $slider-hover-height: 5px;
-$chapter-marker-size: 10px;
+$chapter-marker-size: 9px;
 
 .vjs-peertube-skin.has-chapter {
   .vjs-time-tooltip {