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

Explore background to bring together progress bar and video.js widgets #659

Open elynema opened 2 weeks ago

elynema commented 2 weeks ago

Description

In the new multi-line display of progress bar and video.js widgets in Ramp, there's not background color that brings those 2 elements together into a group. Some type of gray background could be useful here.

Current Ramp in Avalon: image

Current MCO: image

LinkedIn example: image

Done Looks Like

Dananji commented 1 day ago

I found a VideoJS plugin which brings together icons in the progress bar: https://github.com/samueleastdev/videojs-setting-menu There are 2 reasons why we can't use it out of the box;

  1. When I tried to install it using yarn into Ramp, it gave an error. Related to other VideoJS dependencies we are using in Ramp
  2. We can't customize the icons and menus that goes into the plugin at the moment. i.e. it has a static set of icons and this cannot be changed when initializing in Ramp

So, I brought in the code to Ramp as a custom plugin to see whether we can change things around to include what we want in the menu and I got the following;

Settings menu;

Screenshot 2024-10-25 at 9 17 48 AM

Captions menu opened within settings;

Screenshot 2024-10-25 at 9 17 59 AM

Work to do:

  1. Fix the settings menu icon and styling to match Ramp
  2. Check for accessibility when using the settings menu
  3. When using the settings menu; the icons that goes into it still needs to be initialized as control-bar children in VideoJS options list, which for a couple of seconds shows up in the control bar when player is loading
  4. Customize the menus that goes into settings menu using props like enableFileDownload
  5. Test this implementation for mobile and how it works in that platform

Related work: https://github.com/samvera-labs/ramp/tree/settings-menu-659

Dananji commented 1 day ago

After standup and being clarified on the issue; I looked at the following players to see how the popup menus look like;

  1. YouTube: has a darker color (background: rgba(28,28,28,.9)) with a higher opacity than Ramp. You can still see the movements in the video underneath the popup menu when playing. The area underneath the progress-bar is transparent.
  2. Vimeo: has a darker color (background: rgba(0,0,0,.8)) with a higher opacity than Ramp. You can see the color but not so much the images underneath the popup menu when playing. Container around the progress-bar is darkened which separates the progress-bar from the video.
  3. Netflix: has an opaque (background: rgb(28,28,28)) dark background for popup menus, which hides part of the video when the menus are opened.

For reference Ramp's player has background: rgba(43, 51, 63, 0.7) for popup menus in VideoJS.