fix markers not loading when creating/updating/deleting new marker, a…

…dd min range marker width
stashapp · Feb 11, 2025 · 0dad539 · 0dad539
1 parent 1c463d7
commit 0dad539
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 61 deletions.
diff --git a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx
@@ -699,67 +699,17 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
     if (!player) return;
 
     // Ensure markers are added after player is fully ready and sources are loaded
-    player.on("loadedmetadata", () => {
-      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 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 loadMarkers();
-    });
-
+    if (player.readyState() >= 1) {
+      loadMarkers();
+    } else {
+      player.on("loadedmetadata", () => {
+        loadMarkers();
+      });
+    }
     return () => {
-      player.off("loadedmetadata");
+      player.off("loadedmetadata", loadMarkers);
     };
-  }, [getPlayer, scene, interfaceConfig]);
+  }, [getPlayer, scene]);
 
   useEffect(() => {
     const player = getPlayer();
@@ -845,6 +795,64 @@ 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);

diff --git a/ui/v2.5/src/components/ScenePlayer/markers.ts b/ui/v2.5/src/components/ScenePlayer/markers.ts
@@ -129,8 +129,12 @@ class MarkersPlugin extends videojs.getPlugin("plugin") {
 
     const startPercent = (marker.seconds / duration) * 100;
     const endPercent = (marker.end_seconds / duration) * 100;
-    const width = endPercent - startPercent;
-
+    let width = endPercent - startPercent;
+    // Ensure the width is at least 8px
+    const minWidth = (10 / seekBar.clientWidth) * 100; // Convert 8px to percentage
+    if (width < minWidth) {
+      width = minWidth;
+    }
     rangeDiv.style.left = `${startPercent}%`;
     rangeDiv.style.width = `${width}%`;
     rangeDiv.style.bottom = `${layer * this.layerHeight}px`; // Adjust height based on layer