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

Progress bar overlaps other buttons in media player on iPhone on initial load #524

Closed elynema closed 1 month ago

elynema commented 3 months ago

Describe the bug With the addition of the playback speed widget, the buttons in the bottom bar of the media player are no longer fully accessible on iPhone. On Android Samsung devices, we see this same overlap while the player is loading in Ramp but once the media item can be played, the progress bar re-sizes to work properly.

To Reproduce Steps to reproduce the behavior:

  1. iPhone iOS 17 in Browserstack
  2. Load a media item page in Safari. Example: https://avalon-dev.dlib.indiana.edu/media_objects/g158bh28p
  3. on iPhone, the progress bar overlaps the time and the zoom scrubber button
  4. When playback begins, the native player opens. If you exit full screen, the buttons show up ok in the media player in browser, so apparently the problem only happens when the media player is first rendered.

Expected behavior the progress bar should be re-sized to available space in the media player when the page first loads.

Screenshots

screenshot-iPhone 15-17.0.png

Smartphone (please complete the following information):

elynema commented 2 months ago

Could be an event that is supposed to fire on initial load is not firing properly.

Dananji commented 1 month ago

I was not able to reproduce this on Browserstack iPhone 15 on iOS 17.5.

elynema commented 1 month ago

@Dananji I was able to reproduce this in Browserstack iPhone 15 on iOS 17.5 I did not see it in iOS 17 in the same environment. What record did you use? I used the one linked in this issue.

screenshot-iPhone 15-17.5 (4).png
Dananji commented 1 month ago

I used the same item. I re-tested in both iOS 17 and 17.5 on iPhone 15 and was unable to reproduce this.

elynema commented 1 month ago

@joncameron would you be willing to test this one out, too.

joncameron commented 1 month ago

I tested on my iPhone 13 with iOS 17.5 and in Browserstack with iPhone 15 and iOS 17.5 and couldn't reproduce.

elynema commented 1 month ago

Since we have 2 other folks who cannot reproduce, I'm going to mark this as closed.