move loadmarkers

stashapp · Feb 11, 2025 · 1076e48 · 1076e48
1 parent 081db5e
commit 1076e48
Showing 1 changed file with 58 additions and 59 deletions.
diff --git a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx
@@ -698,6 +698,63 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
     const player = getPlayer();
     if (!player) return;
 
+    function loadMarkers() {
+      const player = getPlayer();
+      if (!player) return;
+      const loadMarkersAsync = 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 showRangeTags =
+          !ScreenUtils.isMobile() && (interfaceConfig?.showRangeMarkers ?? true);
+        const timestampMarkers: IMarker[] = [];
+        const rangeMarkers: IMarker[] = [];
+
+        if (!showRangeTags) {
+          for (const marker of markerData) {
+            timestampMarkers.push(marker);
+          }
+        } else {
+          for (const marker of markerData) {
+            if (marker.end_seconds === null) {
+              timestampMarkers.push(marker);
+            } else {
+              rangeMarkers.push(marker);
+            }
+          }
+        }
+
+        // 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.addRangeMarkers(rangeMarkers);
+        });
+      };
+
+      // Call our async function
+      void loadMarkersAsync();
+    }
     // Ensure markers are added after player is fully ready and sources are loaded
     if (player.readyState() >= 1) {
       loadMarkers();
@@ -710,7 +767,7 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
         player.off("loadedmetadata", loadMarkers);
       };
     }
-  }, [getPlayer, scene, loadMarkers]);
+  }, [getPlayer, scene]);
 
   useEffect(() => {
     const player = getPlayer();
@@ -796,64 +853,6 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
     }
   }
 
-  function loadMarkers() {
-    const player = getPlayer();
-    if (!player) return;
-    const loadMarkersAsync = 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 showRangeTags =
-        !ScreenUtils.isMobile() && (interfaceConfig?.showRangeMarkers ?? true);
-      const timestampMarkers: IMarker[] = [];
-      const rangeMarkers: IMarker[] = [];
-
-      if (!showRangeTags) {
-        for (const marker of markerData) {
-          timestampMarkers.push(marker);
-        }
-      } else {
-        for (const marker of markerData) {
-          if (marker.end_seconds === null) {
-            timestampMarkers.push(marker);
-          } else {
-            rangeMarkers.push(marker);
-          }
-        }
-      }
-
-      // 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.addRangeMarkers(rangeMarkers);
-      });
-    };
-
-    // Call our async function
-    void loadMarkersAsync();
-  }
-
   function onScrubberSeek(seconds: number) {
     if (started.current) {
       getPlayer()?.currentTime(seconds);