Observation

The current behavior allows users to hover over the volume slider when it's disappearing to make it reappear.

With this fix, the behavior doesn't allow users to hover over the volume slider when it's disappearing to make it reappear, which is a regression.

To test the fix open the preview page, then in the browser's developer console paste document.body.style.direction = 'rtl'

Observation

This is outside the scope of this fix. On touchscreen devices, a long press on the volume button displays the volume slider. Usually, on this type of device, a user would tend to use the device's physical buttons to adjust the volume.

I'm putting this PR up for review to get opinions and maybe find a better approach that doesn't introduce regression. Please see comment #8320 (comment)

Observation

This is outside the scope of this fix. On touchscreen devices, a long press on the volume button displays the volume slider. Usually, on this type of device, a user would tend to use the device's physical buttons to adjust the volume.

video.js/src/css/components/_volume.scss

Lines 39 to 41 in 2b0df25

	&:active .vjs-volume-control,
	&:focus .vjs-volume-control,
	& .vjs-volume-control:active,

Yes, my expectation would be that on a phone/tablet the user would use the physical buttons for volume instead of the web UI.

Yes, my expectation would be that on a phone/tablet the user would use the physical buttons for volume instead of the web UI.

@misteroneill thank you for the feedback. I'll try to create a PR to solve this problem this week-end.