Multiple video control menus can overlap without clear distinction

[bjester]

Observed behavior

The default behavior of control button menus in Video.js allows for overlap of multiple menus. Since adding two new buttons and menus with the transcript feature, all side by side, the overlap of menus can be confusing. The menus can be activated by hover and click, with click bringing up the primary issue.

*Red outline for emphasis

Proposed behavior

When activated by click, I propose disabling the hover functionality of the other menus until clicked off, either to another menu or away from the video.

User-facing consequences

Along with #6035 it can be difficult to understand which menu is currently activated and visible so it can cause confusion.

Steps to reproduce

1. Open a video
2. Click CC control button
3. Click Languages control button
4. Hover over Speed control button
5. Observe three menus visible at once

Context

Kolibri 0.13 #5631
Occurs in any browser

[indirectlylit]

When activated by click, I propose disabling the hover functionality of the other menus until clicked off, either to another menu or away from the video.

Yes. Alternatively, this might be another argument for your strategy of disabling the 'hover-to-show' function altogether, and only using clicks to hide/show

[indirectlylit]

decision made with @bjester:

Treat these menus like other pop-up menus, and only allow one open at a time.

• The menus should listen for any click events that occur outside of their bounds, and close themselves when that occurs
• The menus should toggle closed when their main button is clicked and the menu is currently open