diff --git a/ui/v2.5/src/components/ScenePlayer/markers.css b/ui/v2.5/src/components/ScenePlayer/markers.css deleted file mode 100644 index 398fc90c6..000000000 --- a/ui/v2.5/src/components/ScenePlayer/markers.css +++ /dev/null @@ -1,27 +0,0 @@ -.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; -} diff --git a/ui/v2.5/src/components/ScenePlayer/markers.ts b/ui/v2.5/src/components/ScenePlayer/markers.ts index 34c9179a8..652f27d55 100644 --- a/ui/v2.5/src/components/ScenePlayer/markers.ts +++ b/ui/v2.5/src/components/ScenePlayer/markers.ts @@ -1,5 +1,4 @@ import videojs, { VideoJsPlayer } from "video.js"; -import "./markers.css"; import CryptoJS from "crypto-js"; export interface IMarker { @@ -67,14 +66,16 @@ class MarkersPlugin extends videojs.getPlugin("plugin") { dot?: HTMLDivElement; range?: HTMLDivElement; } = {}; - const seekBar = this.player.el().querySelector(".vjs-progress-control"); + const seekBar = this.player.el().querySelector(".vjs-progress-holder"); markerSet.dot = videojs.dom.createEl("div") as HTMLDivElement; - markerSet.dot.className = "vjs-marker-dot"; + markerSet.dot.className = "vjs-marker"; if (duration) { + // marker is 6px wide - adjust by 3px to align to center not left side markerSet.dot.style.left = `calc(${ (marker.seconds / duration) * 100 }% - 3px)`; + markerSet.dot.style.visibility = "visible"; } // Add event listeners to dot diff --git a/ui/v2.5/src/components/ScenePlayer/styles.scss b/ui/v2.5/src/components/ScenePlayer/styles.scss index bb3b4b9a5..95b1df8c7 100644 --- a/ui/v2.5/src/components/ScenePlayer/styles.scss +++ b/ui/v2.5/src/components/ScenePlayer/styles.scss @@ -266,6 +266,16 @@ $sceneTabWidth: 450px; } } + .vjs-marker-range { + background-color: rgba(255, 255, 255, 0.4); + border-radius: 2px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + height: 8px; + position: absolute; + transform: translateY(-28px); + transition: none; + } + .vjs-marker-tooltip { background-color: #fff; background-color: rgba(255, 255, 255, 0.8);