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] Captions display over top of progress bar #658

Closed elynema closed 3 weeks ago

elynema commented 1 month ago

Describe the bug With the new multi-line progress bar + video.js widget display, multi-line captions are overlapping the progress bar. The captions should not overlap the progress bar.

To Reproduce Steps to reproduce the behavior:

  1. Go to a record in avalon-dev with captions: https://avalon-dev.dlib.indiana.edu/media_objects/37720c78r/section/cv43nw85w
  2. Begin playback with captions turned on
  3. You will see the captions overlap the progress bar once there is a multi-line caption.

Expected behavior The captions should display above the progress bar. Note: LinkedIn Learning uses video.js as well, and they have the captions move up (when the progress bar / widgets are visible) and down (when the progress bar and widgets disappear). This would be a cool solution.

This has not been tested on mobile devices, so not sure if it will work differently there.

Screenshots Current display in Avalon:

https://github.com/user-attachments/assets/7d4e3c11-a1f5-4922-a0a1-7300ba7c8842

LinkedIn example:

https://github.com/user-attachments/assets/624056a5-89d8-4edc-ac16-086580230006

Desktop (please complete the following information):

QA

joncameron commented 1 month ago

Could be a CSS change; VideoJS also has options that could be used for this purpose. JS-based approach could be better across platforms.

elynema commented 3 weeks ago

This seems to be working properly on Safari and Chrome on desktop.

For mobile devices, the progress bar and widget bar are never hidden because tapping screen to bring them back up pauses the video. Android seems to be working properly with captions displaying above the progress bar. Noting that because the progress bar is always there, this does place them fairly high on the video itself.

On iPad, sometimes the bottom of the captions is brushing up against the progress bar. This is not a blocker for 8.0.

image.png

In fullscreen playback on the iPad (not the native player), the captions are huge again. This is not happening on full-screen playback on Android. This would be good to look at for 8.0:

image.png
elynema commented 3 weeks ago

Created https://github.com/samvera-labs/ramp/issues/727 for issue with large caption text size on iPad.