From 5b5ea42cd45b67240ae65aa21a1d11a72339fc29 Mon Sep 17 00:00:00 2001
From: skier233 <benchy222@gmail.com>
Date: Tue, 25 Feb 2025 13:06:20 -0500
Subject: [PATCH] fix point markers ui bug

---
 .../src/components/ScenePlayer/ScenePlayer.tsx  | 10 ++--------
 ui/v2.5/src/components/ScenePlayer/markers.ts   | 17 ++++++++++++++++-
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx
index ea338a7f5b9..a20f25f6639 100644
--- a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx
+++ b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx
@@ -705,7 +705,6 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
     }));
 
     const markers = player!.markers();
-    markers.clearMarkers();
 
     const uniqueTagNames = markerData
       .map((marker) => marker.primaryTag.name)
@@ -734,15 +733,10 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
     }
 
     // Add markers in chunks
-    const CHUNK_SIZE = 10;
-    for (let i = 0; i < timestampMarkers.length; i += CHUNK_SIZE) {
-      const chunk = timestampMarkers.slice(i, i + CHUNK_SIZE);
-      requestAnimationFrame(() => {
-        chunk.forEach((m) => markers.addDotMarker(m));
-      });
-    }
 
     requestAnimationFrame(() => {
+      markers.clearMarkers();
+      markers.addDotMarkers(timestampMarkers);
       markers.addRangeMarkers(rangeMarkers);
     });
   }, [getPlayer, scene, uiConfig]);
diff --git a/ui/v2.5/src/components/ScenePlayer/markers.ts b/ui/v2.5/src/components/ScenePlayer/markers.ts
index 730e0924573..34c9179a8d3 100644
--- a/ui/v2.5/src/components/ScenePlayer/markers.ts
+++ b/ui/v2.5/src/components/ScenePlayer/markers.ts
@@ -100,6 +100,12 @@ class MarkersPlugin extends videojs.getPlugin("plugin") {
     if (seekBar) {
       seekBar.appendChild(markerSet.dot);
     }
+    this.markers.push(marker);
+    this.markerDivs.push(markerSet);
+  }
+
+  addDotMarkers(markers: IMarker[]) {
+    markers.forEach(this.addDotMarker, this);
   }
 
   private renderRangeMarkers(markers: IMarker[], layer: number) {
@@ -255,7 +261,16 @@ class MarkersPlugin extends videojs.getPlugin("plugin") {
   }
 
   clearMarkers() {
-    this.removeMarkers([...this.markers]);
+    for (const markerSet of this.markerDivs) {
+      if (markerSet.dot?.hasAttribute("marker-tooltip-shown")) {
+        this.hideMarkerTooltip();
+      }
+
+      markerSet.dot?.remove();
+      if (markerSet.range) markerSet.range.remove();
+    }
+    this.markers = [];
+    this.markerDivs = [];
   }
 
   // Implementing the findColors method