smov icon indicating copy to clipboard operation
smov copied to clipboard

iOS PWA improvments

Open Pasithea0 opened this issue 6 months ago • 2 comments

This aims to solve most of the problems with the iOS PWA.

Apple has restricted the use of many features for PWAs such as, not supporting Picture in Picture (PiP), breaking the functionality of the "standalone" display property, and always showing the home indicator on iPhone X and beyond.

Preview: https://pwa-improvements.envyflix.pages.dev/

Changes:

Disable PiP and Fullscreen for iOS PWA

  • Disabled PiP and Fullscreen on iOS PWA only to mitigate Apple breaking the functionality, thus making the buttons useless.

Add info button for iOS PWA

  • Added a button in place of the Fullscreen button that shows an alert explaining why the PiP and Fullscreen buttons were removed.
Screenshot 2024-08-15 at 2 29 31 PM Screenshot 2024-08-15 at 2 29 52 PM

Add Widescreen button

  • Due to the Fullscreen feature being disabled, the user can no longer fill their screen (remove letterboxing), so I reimplemented the feature back into the player.
Screenshot 2024-08-15 at 2 31 44 PM

https://github.com/user-attachments/assets/4fbffa82-22b2-4cca-9292-8b6a50e1b7d2

  • I also made this a secret feature for desktop, only shown when holding the "SHIFT" key.

https://github.com/user-attachments/assets/e2ee6cf0-6bac-4cde-ba2b-d2ed0d3473f8

Fix top padding and safe areas for iOS PWA

  • The iOS PWA has an oversight that ignores the notch area, so I added safe areas for top elements.

BEFORE Screenshot 2024-08-15 at 2 27 58 PM

AFTER Screenshot 2024-08-15 at 2 28 26 PM

  • [x] I have read and agreed to the code of conduct.
  • [x] I have read and complied with the contributing guidelines.
  • [x] I have tested all of my changes.
  • Enter discord user: .pasithea (we require this for the contributor role)

Pasithea0 avatar Aug 15 '24 20:08 Pasithea0