search

samvera-labs / ramp

Interactive, IIIF powered audio/video media player React components library. Styleguidist Docs: https://samvera-labs.github.io/ramp/
https://ramp.avalonmediasystem.org/
30 stars 5 forks source link

[BUG] Vertical menus for video.js widgets can be cut off for audio recordings #666

Open elynema opened 1 month ago

elynema commented 1 month ago

Description

Because the media player for audio recordings is so short, video.js widgets that pop open vertically can get cut off, depending on page layout.

This mostly works ok in avalon-dev, but the vertical menus can overlay page content and are a little hard to see. The experience can also be jarring, as when I select 2x from the playback menu, it also opens the Manage nav bar element that underlies the vertical menu.

image

In Media Collections Online, the upper options on both the audio quality and playback speed widgets are completely cut off.

image

joncameron commented 1 month ago

MCO production issue most likely due to the Rivet framework; z-index for popup menus not explicitly set in Ramp. This could be changed in Ramp for audio. For video, Add to Playlist modal could be underneath the popup menu and we'll need to be mindful of that and test this situation.

One option for the playback speed is to click to cycle through settings, rather than mouseover to display the menu.

Dananji commented 1 month ago

Clicking through the playback-rate menu button to change the playback-rate was removed in VideoJS 8. Guess I hadn't tested this after I had worked on this the first time. So we should probably extend changes we make for the quality selection menu in this issue to playback-rate menu.

Dananji commented 1 month ago

In MCO, Rivet sets z-index of the secondary navigation header to 200 and primary navigation header to 300. PR in Avalon IU repository to fix this: https://github.iu.edu/AvalonIU/Avalon/pull/302

Selected an option from the playback speed menu shouldn't also create a click event for elements that are underneath

In avalon-dev the click on the menu items doesn't trigger a click for the buttons underneath, but a mouseover event which activates CSS related to hover rule on the Manage navigation menu item. Changing the z-index doesn't fix this. I'm going to try changing the event handling of Manage button instead of just using CSS :hover to show the dropdown.

Test Add to Playlist modal — this should lay over the media player and menu items (could be underneath if there's a popup CSS fix to change z-index)

In Avalon the playlist dropdown in Add to Playlist modal has a z-index of 1051. So playlist dropdown menu will always be on top of VideoJS menus as long as we don't set the z-index to a higher value than that. In the above PR z-index of the VideoJS menus are set to 301.

Dananji commented 1 month ago

I couldn't find a solution to the issue with the Manage dropdown popping up on option selection in VideoJS menus. A possible solution could be bringing together these popup menus to a single settings menu which is suggested in #659.

elynema commented 2 weeks ago

The MCO issue will need to be tested on mco-staging. Moving this to code review, as https://github.iu.edu/AvalonIU/Avalon/pull/302 still needs to be merged, so can't be tested yet.