fix(volume): vertical slider causes viewport overflow in rtl layout

[amtins]

Description

This PR fixes #7743 where a scroll bar appears when the text direction is set to RTL.

Screencast.from.13.06.23.19.02.52.webm

Specific Changes proposed

• .video-js .vjs-volume-vertical
  • remove the initial width/height so that it falls back to .video-js .vjs-volume-panel .vjs-volume-control
  • add pointer-events set to none so that the slider does not appear when the mouse is over the volume button
• resets the width, height and pointer-events when the mouse hovers over the volume button

Requirements Checklist

• Feature implemented / Bug fixed
• If necessary, more likely in a feature request than a bug fix
  • Change has been verified in an actual browser (Chrome, Firefox, IE)
  • Unit Tests updated or fixed
  • Docs/guides updated
  • Example created (starter template on JSBin)
• Reviewed by Two Core Contributors

[amtins]

Observation

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

actual-behavior.webm

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.

behavior-with-fix.webm

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

[amtins]

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,

[amtins]

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)

[misteroneill]

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.

[amtins]

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.