[Bug] Video player is unusable on ios (firefox and safari) since update to 25

[JuliaKirschenheuter]

Describe the bug
Since Nextcloud was upgraded to v.25 video player was unusable on ios (firefox and safari).

There are mainly 4 problems:

1. Problem: pressing the big triangle (play button) on the center of the video doesn't start the video, only the small triangle on the left works.
2. Problem: buttons are not aligned
3. Problem: when pressing full screen button, in portrait mode, the video doesn't goes to full screen as it use to. Only on the top of the page and the controls move to the lower part of the screen.
4. Problem: when turning the phone into landscape mode, still in "full screen mode" (which is not full screen), the video disappears completely

To Reproduce
Steps to reproduce the behavior:

1. Open any video via video player
2. Try to click on "play" button

Expected behavior
It is possible to play, pause and stop a video in portrait mode and landscape mode.

Screenshots

Desktop (please complete the following information):

• Browser: firefox and safari
• Version: 25

Smartphone (please complete the following information):

• Device: iPhone
• Browser: firefox and safari

Additional context

How i've tried to fix that problems:

1. Problem: pressing the big triangle (play button) on the center of the video doesn't start the video, only the small triangle on the left works. The reason could be that a play button is located below the PlayControls and can not be pushed.
   Possible solution: bump vue-plyr to version v3.7.8 was done, https://github.com/skjnldsv/vue-plyr/blob/master/package.json#L37

2. Problem: buttons are not aligned
   Possible solution: bump vue-plyr to version v3.7.8 was done, https://github.com/skjnldsv/vue-plyr/blob/master/package.json#L37

3. Problem: when pressing full screen button, in portrait mode, the video doesn't goes to full screen as it use to. Only on the top of the page and the controls move to the lower part of the screen.
   Possible solution: bump vue-plyr to version v3.7.8 was done, https://github.com/skjnldsv/vue-plyr/blob/master/package.json#L37. Thought that that case would be fixed by vue-plyr here: https://github.com/sampotts/plyr/releases/tag/v3.7.4

4. Problem: when turning the phone into landscape mode, still in "full screen mode" (which is not full screen), the video disappears completely.
   Possible solution: could be a problem in public.scss. Deactivation was a wrong idea, styles should be rewritten Fix a height of the landscape format server#37765

Updating vue-plyr to version v3.7.8 haven't helped at all described problems ;(

@skjnldsv could you please look in that problems? Thanks a lot!

[JuliaKirschenheuter]

reopening while fullscreen mode was not fixed

[szaimen]

Can you tick which problems have been addressed already?

[JuliaKirschenheuter]

New problems regarding full screen from customer side:

1. the full screen is not working, it’s just a window that loses all controls (play, pause, get back to windowed mode)
2. when in full screen, you basically can’t do anything anymore, I just quit the application (firefox or safari) to stop the video.
3. when turning the phone from portrait to landscape, the video disappear behind the title bar.

I don't have any iOS device ;( I've tested current stable25.0.8 with latest stable25 viewer version in Chrome, Firefox in mobile mode (iPhone12,..) and i can't reproduce 1 and 3 issues. But can reproduce second issue.

[szaimen]

Thanks!

[JuliaKirschenheuter]

@szaimen @skjnldsv are you able to reproduce first and third issues? Could you please test it?

[szaimen]

I dont have an ios device either :/

[hamza221]

I was able to reproduce on IPhone

[JuliaKirschenheuter]

@hamza221 unfortunately we have a problem with full screen again ;(
Ivan tested it on iPhone and confirmed that full screen is broken again:

Failing Cypress tests have to be fixed too

1 failing

1. See shared folder with link share
   Opens the shared video in the viewer:
   AssertionError: Timed out retrying after 4000ms: expected '<a#downloadFile.button>' to be 'visible'

But actually downloading itself (per download button) has no problems.

If a user click on "download" from action menu, nothing happens (but that could be another problem):

@hamza221 could you please have a look again? Thank you!

[st3iny]

I tested it again on my iPad (Safari) and the full screen player breaks when activating it in landscape and then switching to portrait (while full screen is still activated). From that point on the player will be broken and the page has to be reloaded. Other than that, I couldn't spot any breakage.

This only happens when viewing a video from a publicly shared link. The viewer in files works flawlessly. Downloading the file works too.

[hamza221]

I couldn't reproduce the download bug, Download button works at my end

[st3iny]

The reported bug is fixed. My repro above is from another bug that is not related.