ensure markers.findcolors is awaited

stashapp · Jan 30, 2025 · 6ed00cd · 6ed00cd
1 parent bb1eaaa
commit 6ed00cd
Showing 1 changed file with 40 additions and 31 deletions.
diff --git a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx
@@ -700,41 +700,50 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
 
     // Ensure markers are added after player is fully ready and sources are loaded
     player.on("loadedmetadata", () => {
-      const markerData = scene.scene_markers.map((marker) => ({
-        title: getMarkerTitle(marker),
-        seconds: marker.seconds,
-        end_seconds: marker.end_seconds ?? null,
-        primaryTag: marker.primary_tag,
-      }));
-
-      const markers = player.markers();
-      markers.clearMarkers();
-      const uniqueTagNames = markerData
-        .map((marker) => marker.primaryTag.name)
-        .filter((value, index, self) => self.indexOf(value) === index);
-      markers.findColors(uniqueTagNames);
-
-      const timestampMarkers: IMarker[] = [];
-      const rangeMarkers: IMarker[] = [];
-      for (const marker of markerData) {
-        if (marker.end_seconds === null) {
-          timestampMarkers.push(marker);
-        } else {
-          rangeMarkers.push(marker);
+      const loadMarkers = async () => {
+        const markerData = scene.scene_markers.map((marker) => ({
+          title: getMarkerTitle(marker),
+          seconds: marker.seconds,
+          end_seconds: marker.end_seconds ?? null,
+          primaryTag: marker.primary_tag,
+        }));
+
+        const markers = player.markers();
+        markers.clearMarkers();
+
+        const uniqueTagNames = markerData
+          .map((marker) => marker.primaryTag.name)
+          .filter((value, index, self) => self.indexOf(value) === index);
+
+        // Wait for colors
+        await markers.findColors(uniqueTagNames);
+
+        const timestampMarkers: IMarker[] = [];
+        const rangeMarkers: IMarker[] = [];
+        for (const marker of markerData) {
+          if (marker.end_seconds === null) {
+            timestampMarkers.push(marker);
+          } else {
+            rangeMarkers.push(marker);
+          }
         }
-      }
-      // Add markers in chunks to avoid blocking
-      const CHUNK_SIZE = 10;
-      for (let i = 0; i < timestampMarkers.length; i += CHUNK_SIZE) {
-        const chunk = timestampMarkers.slice(i, i + CHUNK_SIZE);
+
+        // 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(() => {
-          chunk.forEach((m) => markers.addDotMarker(m));
+          markers.addRangeMarkers(rangeMarkers);
         });
-      }
+      };
 
-      requestAnimationFrame(() => {
-        markers.addRangeMarkers(rangeMarkers);
-      });
+      // Call our async function
+      void loadMarkers();
     });
 
     return () => {