Fixes issue #3036

[seescode]

This fixes #3036 where you toggle mute while dragging which makes the mute toggle stop working.

[gkatsev]

Thanks for the PR, though, while this "fixes" the issue, it also removes a very useful feature for the volume control. Without this feature, you have to precisely click and drag on the volume slider itself, an element 4 pixels high; this makes it a lot easier because it allows you to click and drag anywhere, it just allows you to drag in too many places.
Instead, the mousemove handler needs to be smarter and reject movement on the mute toggle button itself and only delegate to the volume bar when the move is elsewhere inside the main element.
Would you be up to making that change? Thanks.

[seescode]

Okay, I'll take a stab at it.

[gkatsev]

Awesome, thanks @seescode!

[OwenEdwards]

Seems like you'd want to add the mouse event handlers to just the this.volumeBar component, not the whole VolumeMenuButton.

For V6, to fix keyboard & screen reader access, I'm looking at splitting the VolumeMenuButton into a grouping of controls rather than a specific single control, which will also fix this issue, but it'll change the DOM, so it'd be great if @seescode can fix this for V5.x.

[seescode]

Okay, I made the fix by attaching event handler to the vjs-menu-content. Please review.

[gkatsev]

LGTM.

[nickygerritsen]

Yup LGTM too