Fix markers ui bug (#5671)

* Move loadMarkers to separate callback
* Remove async from findColors
---------
Co-authored-by: WithoutPants <53250216+WithoutPants@users.noreply.github.com>

ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx

@@ -693,18 +693,10 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
     _initialTimestamp,
   ]);
 
-  useEffect(() => {
+  const loadMarkers = useCallback(() => {
     const player = getPlayer();
     if (!player) return;
 
-    if (scene.paths.screenshot) {
-      player.poster(scene.paths.screenshot);
-    } else {
-      player.poster("");
-    }
-
-    function loadMarkers() {
-      const loadMarkersAsync = async () => {
     const markerData = scene.scene_markers.map((marker) => ({
       title: getMarkerTitle(marker),
       seconds: marker.seconds,
@@ -720,7 +712,7 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
       .filter((value, index, self) => self.indexOf(value) === index);
 
     // Wait for colors
-        await markers.findColors(uniqueTagNames);
+    markers.findColors(uniqueTagNames);
 
     const showRangeTags =
       !ScreenUtils.isMobile() && (uiConfig?.showRangeMarkers ?? true);
@@ -753,24 +745,34 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
     requestAnimationFrame(() => {
       markers.addRangeMarkers(rangeMarkers);
     });
+  }, [getPlayer, scene, uiConfig]);
+
+  useEffect(() => {
+    const player = getPlayer();
+    if (!player) return;
+
+    if (scene.paths.screenshot) {
+      player.poster(scene.paths.screenshot);
+    } else {
+      player.poster("");
+    }
+
+    // Define the event handler outside the useEffect
+    const handleLoadMetadata = () => {
+      loadMarkers();
     };
 
-      // Call our async function
-      void loadMarkersAsync();
-    }
     // Ensure markers are added after player is fully ready and sources are loaded
     if (player.readyState() >= 1) {
       loadMarkers();
-      return;
     } else {
-      player.on("loadedmetadata", () => {
+      player.on("loadedmetadata", handleLoadMetadata);
-        loadMarkers();
-      });
-      return () => {
-        player.off("loadedmetadata", loadMarkers);
-      };
     }
-  }, [getPlayer, scene, uiConfig]);
+
+    return () => {
+      player.off("loadedmetadata", handleLoadMetadata);
+    };
+  }, [getPlayer, scene, loadMarkers]);
 
   useEffect(() => {
     const player = getPlayer();

ui/v2.5/src/components/ScenePlayer/markers.ts

@@ -259,11 +259,11 @@ class MarkersPlugin extends videojs.getPlugin("plugin") {
   }
 
   // Implementing the findColors method
-  async findColors(tagNames: string[]) {
+  findColors(tagNames: string[]) {
     // Compute base hues for each tag
     const baseHues: { [tag: string]: number } = {};
     for (const tag of tagNames) {
-      baseHues[tag] = await this.computeBaseHue(tag);
+      baseHues[tag] = this.computeBaseHue(tag);
     }
 
     // Adjust hues to avoid similar colors
@@ -278,7 +278,7 @@ class MarkersPlugin extends videojs.getPlugin("plugin") {
   // Helper methods translated from Python
 
   // Compute base hue from tag name
-  private async computeBaseHue(tag: string): Promise<number> {
+  private computeBaseHue(tag: string): number {
     const hash = CryptoJS.SHA256(tag);
     const hashHex = hash.toString(CryptoJS.enc.Hex);
     const hashInt = BigInt(`0x${hashHex}`);