From 1acfda0c3c5f4de7d56678ce39110c1468e4671d Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Fri, 16 Aug 2024 13:21:50 +0200
Subject: [PATCH] Fix chapters icon layout shift

---
 .../progress-bar-marker-component.ts          | 19 +++++++++++++++++--
 client/src/sass/player/control-bar.scss       |  2 +-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/client/src/assets/player/shared/control-bar/progress-bar-marker-component.ts b/client/src/assets/player/shared/control-bar/progress-bar-marker-component.ts
index c4d8b984a..9aed0c7c0 100644
--- a/client/src/assets/player/shared/control-bar/progress-bar-marker-component.ts
+++ b/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)
diff --git a/client/src/sass/player/control-bar.scss b/client/src/sass/player/control-bar.scss
index 9f81d52c6..5f7ccbe28 100644
--- a/client/src/sass/player/control-bar.scss
+++ b/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 {