Can't access full-screen button in Android Samsung devices

[elynema]

Describe the bug
On Android Samsung devices, the full-screen button is missing from the right corner of the media player. (BrowserStack won't allow me to rotate this device for some reason, so I can't confirm if it is actually missing or just doesn't have enough space).

To Reproduce
Steps to reproduce the behavior:

1. Go to Android Samsung Galaxy device (v14 OS) in Browserstack
2. Open a media object in chrome. Example: https://avalon-dev.dlib.indiana.edu/media_objects/g158bh28p
3. There is no full-screen button in the bottom right of the media player.

Expected behavior
The full-screen button should show in the far right of the media player on Android Samsung devices.

Screenshots

Smartphone (please complete the following information):

• Device: Samsun Galaxy S24
• OS: 14
• Browser Chrome

Additional context
This problem is not happening in Google Pixel devices.

[elynema]

This looks ok on the demo site, but needs to be tested in the avalon context to finish QA.

[elynema]

@charumitraravi Can you QA this one?

[charumitraravi]

If I increase the display size the full screen button still gets hidden (This is on samsung s23 ultra, which is more wider than most devices.)
(Image 1 - increased by 2 units from default , image 2 - increased 1 unit from default size)
Although , this could just be an edge case , considering users who prefer bigger display of elements / smaller devices

[elynema]

@Dananji Do we have any options for resolving this? I know we are supposed to support up to 200% zoom.

[Dananji]

@elynema, @charumitraravi I tested on a Samsung Galaxy S24 v14.0 device in BrowserStack, by using zoom in 2 different ways and I was not seeing what's captured in the screenshots above.

1. By setting the zoom to 200% in the browser and this is what I was seeing;

The way I used zoom: Browser settings (click vertical dots on the top right hand side corner) -> Accessibility -> Drag the text scaling slider to 200%.

2. Pinch and zoom which enlarges the entire page which is equivalent to an image zoom.

And I tested these on avalon-dev not on avalon-staging, because this fix is not in staging yet.

Could you please mention the steps you followed as well?

[elynema]

I also tested with Galaxy s23 ultra in Browserstack. I increased text zoom to 200% in the browser's Accessibility menu and did not replicate this issue.

[charumitraravi]

@elynema
I adjusted the display size from the phone settings, and not the browser zoom. It is used to set the overall display size of all the elements, and not just the browser.

[Dananji]

@charumitraravi Could you please mention the steps to change the display size? I see there are multiple ways in the Accessibility settings to change the size.

[Dananji]

I bumped the 'Font size and style' and 'Screen Zoom' all the way up in the phone's Accessibility settings and I got the following, which has the fullscreen button partially visible:

[charumitraravi]

@Dananji Its the screen zoon under settings-> display-> screenzoom. I believe it varies with devices, and thus an edge case

[Dananji]

Okay. Both the settings I changed were under Settings -> Accessibility settings -> Visibility enhancements.

[Dananji]

@charumitraravi I tested with the settings change you mentioned (bumped Screen zoom all the way up) and I got the same partial visibility of the fullscreen button as above.
The device I tested is Samsung Galaxy S23 Ultra in Browserstack.
Maybe I'm missing something else?

[joncameron]

@joncameron Check the behavior and see if known issue or not

[joncameron]

I think this is edge case enough to fall under this existing issue/known issue: avalonmediasystem/avalon#5410. Closing this one.