Videos shared through link display incorrectly after hitting the full screen button on iOS Safari

[ChildLearningClub]

Describe the bug

when setting video to full screen it does not actually go full screen

To Reproduce
play a video in the browser and hit the full screen button when on iOS Safari, the icon changes, but the video remains non-fullscreen

Screenshots

RPReplay_Final1687136907.mov

Platform:

• OS: iOS
• Browser: Safari
• Memories Version: 5.1.0
• Nextcloud Version: 27
• PHP Version: 8.2.7

Additional context
I have found this to be the case with other programs that also do not implement the fullscreen correctly for iOS Safari. The example of it implemented correctly is in the Jellyfin program.

• Any errors in the JS console?
• Any errors in the Nextcloud server logs?

[meichthys]

Fullscreen does work for me on android (grapheneos) with chromium (vanadium), so perhaps this is limited to iOS.

[ChildLearningClub]

@pulsejet I’m happy to test any builds. Currently playback of video on an iOS through Safari is a really bad experience. I did notice that in the case of Jellyfin, as I posted above, that when going full screen it appears that Jellyfin is dropping its player and playing directly from the iPhones built in player. Is there some reason this is not possible within Nextcloud?

RPReplay_Final1702105414.mov

[pulsejet]

iPhones don't support fullscreen: https://caniuse.com/fullscreen

Safari should just die at this point 😞

[ChildLearningClub]

From what I have seen Safari is not very developer friendly :(. I know I keep referencing Jellyfin, but it is clear is the first video and the initial post above ☝️ that it is possible to play videos in full screen on iOS devices. It does not look like they are being played in the Safari browser but rather played from the iOS devices native built in video player possibly through its API https://developer.apple.com/documentation/webkitjs/htmlvideoelement/1630493-webkitdisplayingfullscreen So I’m sure there is a way to do this.

[pulsejet]

That's right, native apps can do this but not web apps. There's simply no fullscreen API (funnily enough, the fullscreen API supposedly works on iPads but not iPhones)

[ChildLearningClub]

https://media.childlearning.club/web/index.html#!/video

This is a web app playing in full screen and it goes full screen on iOS playing any of these videos.

[ChildLearningClub]

Sorry I should be more specific about the issue. Your app when download to the iOS Home Screen as a progressive web app works well and will play the videos in full screen perfectly fine. The issue above is with a shared video through a link. When I open the shared video in the browser it displays as you can see in the videos I posted above.

[ChildLearningClub]

Also something was changed in Memories between when I first created this issue and my second post where things got wonky. Initially it was simply that the full screen button had no effect. Now it’s that the video margins get all messed up. With the video getting stuck in the top right corner. Only way to fix it is to refresh the page and not touch the full screen button.

RPReplay_Final1702105414.mov