tweak hover behavior to be more fluid

stashapp · Feb 4, 2025 · 6fdc027 · 6fdc027
1 parent 6ed00cd
commit 6fdc027
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/ui/v2.5/src/components/ScenePlayer/markers.css b/ui/v2.5/src/components/ScenePlayer/markers.css
@@ -21,6 +21,7 @@
   background-color: rgba(255, 255, 255, 0.4);
   height: 8px;
   border-radius: 2px;
-  transform: translateY(-10px);
+  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
@@ -66,7 +66,7 @@ class MarkersPlugin extends videojs.getPlugin("plugin") {
       dot?: HTMLDivElement;
       range?: HTMLDivElement;
     } = {};
-    const seekBar = this.player.el().querySelector(".vjs-progress-holder");
+    const seekBar = this.player.el().querySelector(".vjs-progress-control");
     if (marker.end_seconds) {
       throw new Error("Cannot add range marker with addDotMarker");
     }
@@ -105,7 +105,7 @@ class MarkersPlugin extends videojs.getPlugin("plugin") {
 
   private renderRangeMarkers(markers: IMarker[], layer: number) {
     const duration = this.player.duration();
-    const seekBar = this.player.el().querySelector(".vjs-progress-holder");
+    const seekBar = this.player.el().querySelector(".vjs-progress-control");
     if (!seekBar || !duration) return;
 
     markers.forEach((marker) => {
@@ -144,6 +144,15 @@ class MarkersPlugin extends videojs.getPlugin("plugin") {
 
     markerSet.range = rangeDiv;
     markerSet.range.style.display = "block";
+    markerSet.range.addEventListener("pointermove", (e) => {
+      e.stopPropagation();
+    });
+    markerSet.range.addEventListener("pointerover", (e) => {
+      e.stopPropagation();
+    });
+    markerSet.range.addEventListener("pointerout", (e) => {
+      e.stopPropagation();
+    });
     markerSet.range.addEventListener("mouseenter", () => {
       this.showMarkerTooltip(marker.title, layer);
       markerSet.range?.toggleAttribute("marker-tooltip-shown", true);

diff --git a/ui/v2.5/src/components/ScenePlayer/vtt-thumbnails.ts b/ui/v2.5/src/components/ScenePlayer/vtt-thumbnails.ts
@@ -151,8 +151,8 @@ class VTTThumbnailsPlugin extends videojs.getPlugin("plugin") {
       this.player.$(".vjs-mouse-display")?.classList.add("vjs-hidden");
     }
 
-    progressBar.addEventListener("pointerenter", this.onBarPointerEnter);
-    progressBar.addEventListener("pointerleave", this.onBarPointerLeave);
+    progressBar.addEventListener("pointerover", this.onBarPointerEnter);
+    progressBar.addEventListener("pointerout", this.onBarPointerLeave);
   }
 
   private onBarPointerEnter = () => {