Add UI for Markers with end seconds on scene player.

ui/v2.5/package.json

@@ -39,6 +39,7 @@
     "base64-blob": "^1.4.1",
     "bootstrap": "^4.6.2",
     "classnames": "^2.3.2",
+    "crypto-js": "^4.2.0",
     "event-target-polyfill": "^0.0.4",
     "flag-icons": "^6.6.6",
     "flexbin": "^0.2.0",
@@ -89,6 +90,7 @@
     "@graphql-codegen/typescript-operations": "^4.0.1",
     "@graphql-codegen/typescript-react-apollo": "^4.1.0",
     "@types/apollo-upload-client": "^18.0.0",
+    "@types/crypto-js": "^4.2.2",
     "@types/lodash-es": "^4.17.6",
     "@types/mousetrap": "^1.6.11",
     "@types/node": "^18.13.0",

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

@@ -17,7 +17,8 @@ import "./live";
 import "./PlaylistButtons";
 import "./source-selector";
 import "./persist-volume";
-import "./markers";
+import MarkersPlugin, { type IMarker } from "./markers";
+void MarkersPlugin;
 import "./vtt-thumbnails";
 import "./big-buttons";
 import "./track-activity";
@@ -697,21 +698,74 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
     const player = getPlayer();
     if (!player) return;
 
-    const markers = player.markers();
-    markers.clearMarkers();
-    for (const marker of scene.scene_markers) {
-      markers.addMarker({
-        title: getMarkerTitle(marker),
-        time: marker.seconds,
-      });
-    }
+    function loadMarkers() {
+      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() && (uiConfig?.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);
+            }
+          }
+        }
 
-    if (scene.paths.screenshot) {
-      player.poster(scene.paths.screenshot);
+        // 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();
+      return;
     } else {
-      player.poster("");
+      player.on("loadedmetadata", () => {
+        loadMarkers();
+      });
+      return () => {
+        player.off("loadedmetadata", loadMarkers);
+      };
     }
-  }, [getPlayer, scene]);
+  }, [getPlayer, scene, uiConfig]);
 
   useEffect(() => {
     const player = getPlayer();

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

@@ -0,0 +1,27 @@
+.vjs-marker-dot {
+  position: absolute;
+  background-color: #10b981;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 2;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: transform 0.2s ease;
+}
+
+.vjs-marker-dot:hover {
+  transform: translate(-50%, -50%) scale(1.2);
+}
+
+.vjs-marker-range {
+  position: absolute;
+  background-color: rgba(255, 255, 255, 0.4);
+  height: 8px;
+  border-radius: 2px;
+  transform: translateY(-28px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: none;
+}