From 5b1a65112a246603538125f5e2a62038b42b504d Mon Sep 17 00:00:00 2001
From: Schoggi0815 <43815618+Schoggi0815@users.noreply.github.com>
Date: Fri, 17 May 2024 13:52:47 -0400
Subject: [PATCH] Backport pull request #5519 from jellyfin-web/release-10.9.z

Fix chapter markings not displayed properly

Original-merge: b17ca028f874706c88f581af23e577604becb21d

Merged-by: thornbill <thornbill@users.noreply.github.com>

Backported-by: Joshua M. Boniface <joshua@boniface.me>
---
 src/elements/emby-slider/emby-slider.js | 41 +++++++++++--------------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js
index 86a52c0787..2854a9dd09 100644
--- a/src/elements/emby-slider/emby-slider.js
+++ b/src/elements/emby-slider/emby-slider.js
@@ -138,9 +138,6 @@ function updateValues(isValueSet) {
         }
 
         if (range.markerContainerElement) {
-            if (!range.triedAddingMarkers) {
-                addMarkers(range);
-            }
             updateMarkers(range, value);
         }
     });
@@ -206,21 +203,6 @@ function setMarker(range, valueMarker, marker, valueProgress) {
 }
 
 function updateMarkers(range, currentValue) {
-    if (range.markerInfo?.length && range.markerElements?.length) {
-        for (let i = 0, length = range.markerElements.length; i < length; i++) {
-            if (range.markerInfo.length > i) {
-                setMarker(range, mapFractionToValue(range, range.markerInfo[i].progress), range.markerElements[i], currentValue);
-            }
-        }
-    }
-}
-
-function addMarkers(range) {
-    range.markerInfo = [];
-    if (range.getMarkerInfo) {
-        range.markerInfo = range.getMarkerInfo();
-    }
-
     function getMarkerHtml(markerInfo) {
         let markerTypeSpecificClasses = '';
 
@@ -236,12 +218,25 @@ function addMarkers(range) {
         return `<span class="material-icons sliderMarker ${markerTypeSpecificClasses}" aria-hidden="true"></span>`;
     }
 
-    range.markerInfo.forEach(info => {
-        range.markerContainerElement.insertAdjacentHTML('beforeend', getMarkerHtml(info));
-    });
+    if (range.getMarkerInfo) {
+        range.markerInfo = range.getMarkerInfo();
 
-    range.markerElements = range.markerContainerElement.querySelectorAll('.sliderMarker');
-    range.triedAddingMarkers = true;
+        range.markerContainerElement.innerHTML = '';
+
+        range.markerInfo.forEach(info => {
+            range.markerContainerElement.insertAdjacentHTML('beforeend', getMarkerHtml(info));
+        });
+
+        range.markerElements = range.markerContainerElement.querySelectorAll('.sliderMarker');
+    }
+
+    if (range.markerInfo?.length && range.markerElements?.length) {
+        for (let i = 0, length = range.markerElements.length; i < length; i++) {
+            if (range.markerInfo.length > i) {
+                setMarker(range, mapFractionToValue(range, range.markerInfo[i].progress), range.markerElements[i], currentValue);
+            }
+        }
+    }
 }
 
 EmbySliderPrototype.attachedCallback = function () {