feat: improve webapp, improve mobile player, improve design

[IEduStu]

Stremio is awesome and I use it a lot, so I wanted to add the missing features that I think would make its PWA on mobile (and on iOS and iPadOS in particular) first-class.

Changes

• Improved the look and feel on mobile devices
• Improved the look and feel of the mobile PWA app - it now feels much more like a native app on iOS
• Improved the design of the mobile app and desktop app with more immersive navigation bars
• Fixed and issue where the mobile PWA app ignored the system navigation bar and notch, which made some UI elements not easy to reach
• On mobile, the player:
  • Shows a play/pause button on the middle of the screen and behaves like the YouTube/Netflix player
  • When double tapping on the right/left side of the screen it skips 10 seconds or goes back 10 seconds instantly
  • Swiping up on the video enter full screen, and swiping down exits full screen
  • There's a new button in the 3 dots menu to open the video stream in nPlay (on iOS only)
  • On iOS, the volume slider is hidden, as there's not way to actually change the volume of a video using a <video> tag
  • On iOS. a new Airplay button (needs fix: workaround to make Airplay work on Safari stremio-video#74 to work), and a button in the 3 dots menu to open the vidoe in nPlayer
  • On iOS, on landscape, there's a small padding in the bottom to make sure the video is not rendered under the navigation bar, and added a workaround to turn the navigation bar black on some devices (testing on a physical device is needed to add this workaround to every device, so I've made sure it only works on the devices I could test this on)
• Various CSS bug fixes
• Fixed a bug where the maskable icon was overwritten in the build by the regular icon
• On the player, in the 3 dots menu, added a button to copy the video download link
• Added dev container to the repo to make it easier to start a development environment

Live demo: https://iedustu.github.io/stremio-web/

Related pull requests I created for this effort

• fix: workaround to make Airplay work on Safari stremio-video#74
• feat: add new texts for the mobile webapp improvements PR stremio-translations#796

Devices and platforms tested with these changes

• macOS:
  • Arc
  • Chrome
  • Firefox
  • Safari
• Windows:
  • Chrome
  • Edge
• iOS:
  • Safari
  • PWA (Clicking on Add to homescreen in the share menu in Safari)
  • Chrome
• iPadOS:
  • Safari
  • PWA (Clicking on Add to homescreen in the share menu in Safari)
  • Chrome
  • Tested all of these with an external trackpad and without an external trackpad connected
• Android:
  • Chrome
  • PWA

Screenshots

iOS web app

New mobile player design

New mobile player design on iOS

Mobile web

Desktop web

---

Screenshots of how it looked before (for reference)

iOS web app

Mobile player

Desktop web

[CLAassistant]

All committers have signed the CLA.

[tymmesyde]

Hi, thank you for your PR
As your PR contains a lot of various things, can you please segment your changes in separate PRs?
Like one for fixes or a feature, UI changes, UX changes, etc..
This will make the review easier and there is potentially some changes that we don't want to include in the project

[IEduStu]

It wouldn't be practical to separate it into multiple PRs as all the changes affect each other and dependant on each other.
For example, the handling of the notch gaps and adaptations for the mobile webapp are intertwined across all the other changes, I'm not sure how can I separate them.

I wrote the long list to detail all the changes and make it easier to CR, but essentially there are 3 main changes:

• Improvements to the mobile webapp to make it feel native
• Improvements to the player on mobile to make it feel similar to YouTube/Netflix
• Infra changes that I made to make it easier for me to develop all of this, so I left it as part of the PR

You can try the live demo of this here: https://iedustu.github.io/stremio-web/

[tymmesyde]

It wouldn't be practical to separate it into multiple PRs as all the changes affect each other and dependant on each other. For example, the handling of the notch gaps and adaptations for the mobile webapp are intertwined across all the other changes, I'm not sure how can I separate them.

I wrote the long list to detail all the changes and make it easier to CR, but essentially there are 3 main changes:

* Improvements to the mobile webapp to make it feel native

* Improvements to the player on mobile to make it feel similar to YouTube/Netflix

* Infra changes that I made to make it easier for me to develop all of this, so I left it as part of the PR

You can try the live demo of this here: https://iedustu.github.io/stremio-web/

I understand that it would not be practical to separate them, we will discuss which changes we want to keep or not before you do that
All your changes are not dependent with each other
As you listed in your comment, you updated the style of the tabs, server warning, etc ..
You also made changes to the player UX by adding a new component for mobile controls, etc...
And also made various fixes
Those can be different PRs and are not related

[IEduStu]

I've updated the screenshots to the latest version of this branch and detailed all the platforms and browsers I've tested this on to make sure everything works correctly.

If you still find issues, let me know so I can fix them, but I think that the current version of the PR is stable and covers all the platforms and browsers I could test this on.
I've been using it daily for a while now to spot all the issues I could find and I think I got them all.

I've attempted to maximixe the capbilities of Safari on iOS and iPadOS, and Chrome on Android, to make the PWA feel as native as possible on mobile devices, while making sure the desktop version also works great.

[kKaskak]

I started to extensively test your PR on my android device as a PWA. One thing I noticed is that local search no longer appears under search history. I will be testing it by simply using, the coming days. Be patient as I might be slow to review everything. Have a nice weekend

[kKaskak]

Hi. I noticed a small offset issue in the back button in the player route. Can you fix that?

[kKaskak]

trim.C90DBB98-812E-4F9B-92E2-0F50169D1463.MOV

[IEduStu]

@kKaskak I couldn't reproduce this issue where the back button jumps up.
How can I get to a situation where it happens?

[kKaskak]

@kKaskak I couldn't reproduce this issue where the back button jumps up.

How can I get to a situation where it happens?

As I previously mentioned when you enter the player it's not in the same position as on other routes.

[IEduStu]

I see what you mean.
On desktop it's on the same place, but on mobile I've shrunk the height of the header a bit to make more space available to touch the video area to hide the play/pause overlay.
This was very beneficial for some smarphone screen sizes I tested this on, but is irrelevant when the screen is tall enough, so I've added a fix to only shrink the header this way when the screen height is not tall enough.

[kKaskak]

There is one more thing that should be adjusted. The top navigation bar in iOS PWA now has a default white color which isn't the case on /development

[IEduStu]

I've just installed the PWA app from this link on my iPad and there's no white bar at the top.
The white bar was an issue with earlier versions of this PR, so if you installed the PWA with an older version you have to reinstall the PWA it fo fix it.

[gazer000]

On the ModalDialog styles, the .buttons-container custom style for mobile screen should be nested under .modal-dialog-content otherwise the modal's button list flex direction stays row and texts will clip on mobile screen

[kKaskak]

I've just installed the PWA app from this link on my iPad and there's no white bar at the top.
The white bar was an issue with earlier versions of this PR, so if you installed the PWA with an older version you have to reinstall the PWA it fo fix it.

I'm sure I'm running the latest version, and it still happens.
I also installed a new version to be sure 100%, it still shows up.

[kKaskak]

On the ModalDialog styles, the .buttons-container custom style for mobile screen should be nested under .modal-dialog-content otherwise the modal's button list flex direction stays row and texts will clip on mobile screen

Yes that's true. Thanks for mentioning it.

[IEduStu]

@kKaskak Can you please share with me what version of iPadOS do you have installed and whether there are custom accessibility features enabled on your iPad?
I couldn't reproduce the issue with the status bar color that you experience, but I've made some change that might fix it, althougt I cannot test that it does something on my iPad.

Essentially, this PR changes the meta tag in the head of the HTML to:

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Which according to Apple's documentation makes the status bar transparent.
Then, I made sure to cover the area of the status bar with CSS to make the gradient of the background of the app go under the status bar.

This is how it looks on my iPad Pro 12.9" with iPadOS 17.4.1:

BTW I also fixed the issue with .buttons-container in ModalDialog on mobile

Update: I just tested it again with my iPad updated to iPadOS 17.5.1 and I still couldn't reproduce the issue with the status bar color

[kKaskak]

It works fine now on iPad Pro iPadOS 17.4.1
Thank you for the change. Can you also ensure there are no conflicts between your branch and the development branch? 🚀

[kKaskak]

Buttons issue seems to be resolved too 🔥

[IEduStu]

@kKaskak It seems that my branch is up to date against the latest development branch and there are no conflicts