fix: hide mouse tooltip on touch devices when not scrubbing (videojs#8945)

phloxic · web-flow · commit 4661aa770c2e · 2025-02-05T09:24:28.000-08:00
Problem: the vjs-user-inactive class triggering the hiding of the
tooltip is added much later on touch devices, therefore the mouse
tooltip stays visible on its last seek target position whenever the user
taps the screen to access the controls.

This change ensures that the mouse tooltip is only visible when the user
is actually scrubbing.
diff --git a/src/css/components/_progress.scss b/src/css/components/_progress.scss
@@ -178,7 +178,8 @@
   display: block;
 }
 
-.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display {
+.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display,
+.video-js.vjs-touch-enabled:not(.vjs-scrubbing) .vjs-progress-control .vjs-mouse-display {
   visibility: hidden;
   opacity: 0;
   $trans: visibility 1.0s, opacity 1.0s;

Original file line number	Diff line number	Diff line change
`@@ -178,7 +178,8 @@`
`178`	`178`	`display: block;`
`179`	`179`	`}`
`180`	`180`
`181`		`-.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display {`
	`181`	`+.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display,`
	`182`	`+.video-js.vjs-touch-enabled:not(.vjs-scrubbing) .vjs-progress-control .vjs-mouse-display {`
`182`	`183`	`visibility: hidden;`
`183`	`184`	`opacity: 0;`
`184`	`185`	`$trans: visibility 1.0s, opacity 1.0s;`