feat: improve webapp, improve mobile player, improve design ✨ #629

IEduStu · 2024-04-17T09:29:11Z

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

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 · 2024-04-17T09:29:18Z

All committers have signed the CLA.

tymmesyde · 2024-04-17T10:16:16Z

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 · 2024-04-17T10:32:24Z

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 · 2024-04-17T13:28:08Z

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 · 2024-07-25T20:00:10Z

Regarding the streaming service banner [...]
Personally, I believe it would look better if there was also some padding at the bottom

Fixed.

Also, could I ask if the fix for the settings section button is live at https://iedustu.github.io/stremio-web/ ? They still don't highlight correctly and I'm on default (100%) zoom. I do see that some workflows failed to run for your latest commits

You're right, I missed that.
I fixed the CI now and the fix is now live at https://iedustu.github.io/stremio-web/

Could you also address the changes that @unclekingpin requested? If they are already addressed please mark as resolved. Thank you

Done.
Before you merge this PR, make sure to go to the project settings in GitHub > Secrets and variables > Actions > variables tab > Repository variables > New repository variable, and then add a variable called GITHUB_PAGES_MULTI_BRANCH with its value set to true.
This is needed to preserve the existing method used for deployment to GitHub Pages that you currently have, while making it much easier for forks to deploy to GitHub Pages (like I did for this PR)

Still doesn't work as expected in my case, running Chrome on Ubuntu with 100% zoom

Try again now, the fix should be live now.
Also, try reloading with cmd+shift+R, since it seems that a cache of the page before the fix was used on my device so I had to refresh this way to flush it to get the fix.

Viren070 · 2024-07-25T20:24:22Z

Thanks for fixing the banner.

However, the section buttons still don't highlight correctly (still Brave on Windows 11).

Brave (100% zoom) on Windows 11 (100% scaling) gives me this:

Screen.Recording.2024-07-25.211246.mp4

However, if I set the browser zoom to 125% or 150% it does highlight correctly.

If I change the window size to something slightly smaller, it also highlights the correct section. Here is a video showing what I mean:

Screen.Recording.2024-07-25.212113.mp4

If you need more information please let me know. I am looking forward to this being merged.

IEduStu · 2024-07-25T21:46:02Z

@Viren070 I couldn't reproduce the issue now on my machine, so I've applied a fix that I think may solve this.
Can you please check now?

Also, after clicking on a section button, if the button is not focused, is scrolling down 1 pixel makes the button be focused?

If the issue still happens, can you please run this script and share with me its result?
Run this in the devtools console after clicking a section button and having the button not being focused.

console.log("innerWidth", window.innerWidth);
console.log("outerWidth", window.outerWidth);
console.log("innerHeight", window.innerHeight);
console.log("outerHeight", window.outerHeight);
console.log("devicePixelRatio", window.devicePixelRatio);
console.log("scrollTop", document.querySelector('[class^="sections-container"]')?.scrollTop);
console.log("sections", JSON.stringify(
    Array.from(document.querySelector('[class^="sections-container"]').children ?? [])
        .map((item) => ({
            className: item.className,
            offsetTop: item.offsetTop
        }))
    )
);
console.log("scrollPaddingTop", getComputedStyle(document.querySelector('[class^="sections-container"]')).scrollPaddingTop);

Viren070 · 2024-07-25T21:53:01Z

@Viren070 I couldn't reproduce the issue now on my machine, so I've applied a fix that I think may solve this. Can you please check now?

I have tried this again and the issue still occurs

Also, after clicking on a section button, if the button is not focused, is scrolling down 1 pixel makes the button be focused?

Yes.

If the issue still happens, can you please run this script and share with me its result? Run this in the devtools console after clicking a section button and having the button not being focused.

console.log("innerWidth", window.innerWidth);
console.log("outerWidth", window.outerWidth);
console.log("innerHeight", window.innerHeight);
console.log("outerHeight", window.outerHeight);
console.log("devicePixelRatio", window.devicePixelRatio);
console.log("scrollTop", document.querySelector('[class^="sections-container"]')?.scrollTop);
console.log("sections", JSON.stringify(
    Array.from(document.querySelector('[class^="sections-container"]').children ?? [])
        .map((item) => ({
            className: item.className,
            offsetTop: item.offsetTop
        }))
    )
);
console.log("scrollPaddingTop", getComputedStyle(document.querySelector('[class^="sections-container"]')).scrollPaddingTop);

After running this, I got the following output:

innerWidth 837
outerWidth 1920
innerHeight 951
outerHeight 1032
devicePixelRatio 1
scrollTop 708
sections [{"className":"section-container-twzKQ","offsetTop":77},{"className":"section-container-twzKQ","offsetTop":309},{"className":"section-container-twzKQ","offsetTop":604},{"className":"section-container-twzKQ","offsetTop":738},{"className":"section-container-twzKQ","offsetTop":1324},{"className":"section-container-twzKQ","offsetTop":1593},{"className":"section-container-twzKQ","offsetTop":1959},{"className":"section-container-twzKQ","offsetTop":2227},{"className":"section-container-twzKQ","offsetTop":2514},{"className":"section-container-twzKQ","offsetTop":2892},{"className":"section-container-twzKQ versions-section-container-LRCVQ","offsetTop":3962}]
scrollPaddingTop 77px

IEduStu · 2024-07-25T22:11:01Z

@Viren070 I think I found the issue and fixed it.
Can you please check again?

Viren070 · 2024-07-25T22:22:38Z

@IEduStu It works!

…ents

IEduStu · 2024-07-26T15:31:53Z

I just had to resolve another conflict now :/

…ents

IEduStu · 2024-07-31T14:36:57Z

@kKaskak Do you have any estimation of when will this get merged?
I just had to resolve another conflict...

IEduStu · 2024-08-14T00:22:17Z

@kKaskak It seems that using a streaming server stopped working on this branch and also on the development branch (via https://stremio.github.io/stremio-web/development).
I couldn't find any recent changes that might have caused this on the development branch.

Do you have an idea of why it happens?
The main website (https://web.stremio.com) seems to work fine though.

kKaskak · 2024-08-19T20:26:13Z

@kKaskak It seems that using a streaming server stopped working on this branch and also on the development branch (via https://stremio.github.io/stremio-web/development).

I couldn't find any recent changes that might have caused this on the development branch.

Do you have an idea of why it happens?

The main website (https://web.stremio.com) seems to work fine though.

It should be working the same as it did before

tsaridas · 2024-08-20T12:07:15Z

@kKaskak It seems that using a streaming server stopped working on this branch and also on the development branch (via https://stremio.github.io/stremio-web/development). I couldn't find any recent changes that might have caused this on the development branch.

Do you have an idea of why it happens? The main website (https://web.stremio.com) seems to work fine though.

try adding

"proxyStreamsEnabled": false

to your server-settings.json

kKaskak · 2024-07-29T10:41:14Z

src/App/styles.less

@@ -40,6 +40,8 @@
    --modal-background-color: rgba(15, 13, 32, 1);
    --outer-glow: 0px 0px 30px rgba(123, 91, 245, 0.37);
    --border-radius: 0.75rem;
+
+    background-color: #161523;


Can you use one of the existing variables instead of creating a new one?

If I understood correctly, this used to change the "apple-mobile-web-app-status-bar" style?

I copied this value from the WebpackPwaManifest config in webpack.config.js, so since it has to be hard-coded there, I thought it'd make sense to do the same here.
I've added a comment about that to make it more clear.

This ensures the title bar color is consistence across devices and browsers, instead of fallbacking to each browser's behavior which are inconsistent.

src/common/useFullscreen.js

kKaskak · 2024-07-29T12:03:06Z

src/routes/Addons/styles.less

Here you can use variables like this at the start of the file:

@selectable-inputs-assumed-height: 84px; @top-overlay-size: @@selectable-inputs-assumed-height; @bottom-vertical-nav-bar-size: 0px; @bottom-overlay-size: var(@bottom-vertical-nav-bar-size); @overlap-size: 6rem; @transparency-grandient-pad: 3rem;

This will clear up the code of all the vars you will just use

@variable

I used CSS variables here since I change them on some scopes based on media queries and other parameters, and it affects all the other dependant calculations.
This is impossible to do using preprocessor variables.

Some of the variables are static, though, so I can extract some of them to the top of the file using preprocessor variables like you suggested, but I think it would make it more cumbersome to read when some of the variables are CSS variables and some are preprocessor variables.

Should I change only the static ones to be preprocessor variables?

kKaskak · 2024-07-29T12:04:55Z

src/routes/Discover/styles.less

    height: 100%;
    background-color: transparent;

    .discover-content {
+        --selectable-inputs-assumed-height: 84px;


You can do the same here too, use @variable at the start of the file and define a value for it.
Then reuse as

@variable

Same issue here with some variables having to be CSS variables.
Let me know what you think I should do in the other comment (#629 (comment)).

src/routes/MetaDetails/MetaDetails.js

kKaskak · 2024-07-29T12:25:05Z

src/routes/MetaDetails/styles.less

+    padding-right: var(--safe-area-inset-right, 0px);
+    box-sizing: border-box;
+
+    --navbar-assumed-height: 84px;


Here the variables are indeed all static, but I think that for consistency with the other files it may make sense to keep them css vars.
Let me know if you agree or want me to change it to preprocessor variables anyway.

…ents

IEduStu · 2024-09-17T01:34:26Z

@kKaskak It seems that using a streaming server stopped working on this branch and also on the development branch (via https://stremio.github.io/stremio-web/development).
I couldn't find any recent changes that might have caused this on the development branch.
Do you have an idea of why it happens?
The main website (https://web.stremio.com) seems to work fine though.

It should be working the same as it did before

I found the cause for this - the latest version of @stremio/stremio-core-web (0.47.7) is broken and causes the connection to the streaming server to fail.
I reverted it to 0.47.6 on this PR and it now works.
Try using the development branch and notice that if fails to connect to the streaming server, while this PR works (refresh the page opening it, since the cache from previous load it used by default).

This seems to be the commit that caused this issue: 69a1a8b

…ents

IEduStu · 2024-09-18T21:15:40Z

@kKaskak I see that you now fixed the issue with @stremio/stremio-core-web that I mentioned.
update: I see that @elpiel fixed it. Thanks @elpiel :)

This PR just accrued another conflict that I had to solve...
This PR is open for months now, I fixed all the bugs a long time ago, and since then it just accrued a conflict after conflict, which I solved every time like you asked so you can finally merge it.

At this point, I think you can just merge it and make all the changes you want afterwards, since small formatting changes shouldn't be the reason to wait for another 2 months before reviewing this PR again, which by then I'll have to solve many more conflicts.

I don't mean to be rude, but if you don't plan to merge this then please just let me know so I can stop wasting time resolving conflicts...

…ents

tymmesyde · 2024-09-28T07:22:30Z

@IEduStu Hi, we need you to split your changes into multiple PRs so we can review and merge them
Can you start by making a PR for the mobile player changes?

IEduStu · 2024-09-28T13:17:56Z

@tymmesyde The mobile player depends on the style changes that make the app feel more native, since it goes to great lengths to ensure that the entire screen is used when the website is installed as PWA (including the status bar and the navigation bar areas), and the mobile player heavily depends on that.
I can extract a PR with only the changes to the style of the app without the mobile player first, and after that is merged, then open a new PR with the mobile player changes.
Does it sound good?

I'd also like to have some sort of estimation of a timeline for that to be reviewed and merged since I don't want to work again on something and end up waiting again for another 5 months in which I have to maintain it and merge conflicts with the main branch all the time.

IEduStu added 16 commits April 16, 2024 18:29

feat: add dev container config

8f350dc

fix: dev container config

1089a62

fix: make exposed dev port public by default

e45db84

fix: add note about exposing port in dev container

054bb8e

fix: make maskable icons not get overriden during the build

382eb44

feat: improve mobile design

2eb8d3d

feat: improve mobile design

c4c7f20

feat: mobile controls overlay

d8b9f10

fix: bugs

a9090ca

fix: bugs

ff90922

fix: bugs

14e5d6c

feat: open video in nPlayer on iOS

8d529ad

fix: colors

45bfd45

fix: iOS webapp config

c99a649

fix: remove double scrollbars

6e22348

fix: preserve existing desktop play behavior

c74879b

IEduStu added 6 commits April 17, 2024 09:59

build: allow manually triggering the CI

2769b03

test: fix tests

3d14818

style: lint

6a636c9

build: make deploying to GitHub Pages work

d6806fb

build: fix config

d405cf3

build: make deploying to GitHub Pages work

18d66fa

IEduStu added 4 commits April 17, 2024 11:02

fix: toggle show controls on tap when buffering on mobile

0e2b259

fix: bugs

2abceb3

fix: support toggling video fullscreen on iOS

e6061f1

fix: bugs

aea1518

fix: focused settings section buttons

30f0346

fix: focused settings section buttons

25a62ad

Merge remote-tracking branch 'origin/development' into mobileImprovem…

85544ca

…ents

Merge remote-tracking branch 'origin/development' into mobileImprovem…

b791e7e

…ents

kKaskak requested changes Sep 9, 2024

View reviewed changes

IEduStu added 4 commits September 17, 2024 00:42

fix: CR comments

ed078e1

style: lint

3513606

Merge remote-tracking branch 'origin/development' into mobileImprovem…

f357299

…ents

fix: rever to last not broken @stremio/stremio-core-web version

f15e365

Merge remote-tracking branch 'origin/development' into mobileImprovem…

596190a

…ents

IEduStu requested review from kKaskak and unclekingpin September 18, 2024 21:18

Merge remote-tracking branch 'origin/development' into mobileImprovem…

1aa1c11

…ents

IEduStu changed the title ~~feat: improve webapp, improve mobile player, improve design~~ feat: improve webapp, improve mobile player, improve design ✨ Sep 25, 2024

fix: resolve relative streamingServerUrl query param

06e0f3c

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: improve webapp, improve mobile player, improve design ✨ #629

feat: improve webapp, improve mobile player, improve design ✨ #629

IEduStu commented Apr 17, 2024 •

edited

Loading

CLAassistant commented Apr 17, 2024 •

edited

Loading

tymmesyde commented Apr 17, 2024 •

edited

Loading

IEduStu commented Apr 17, 2024

tymmesyde commented Apr 17, 2024

IEduStu commented Jul 25, 2024 •

edited

Loading

Viren070 commented Jul 25, 2024

IEduStu commented Jul 25, 2024 •

edited

Loading

Viren070 commented Jul 25, 2024

IEduStu commented Jul 25, 2024

Viren070 commented Jul 25, 2024

IEduStu commented Jul 26, 2024 •

edited

Loading

IEduStu commented Jul 31, 2024

IEduStu commented Aug 14, 2024 •

edited

Loading

kKaskak commented Aug 19, 2024

tsaridas commented Aug 20, 2024

kKaskak Jul 29, 2024

kKaskak Jul 29, 2024

IEduStu Sep 17, 2024

kKaskak Jul 29, 2024

kKaskak Jul 29, 2024

IEduStu Sep 17, 2024

IEduStu Sep 17, 2024

kKaskak Jul 29, 2024

IEduStu Sep 17, 2024

kKaskak Jul 29, 2024

IEduStu Sep 17, 2024

IEduStu commented Sep 17, 2024

IEduStu commented Sep 18, 2024 •

edited

Loading

tymmesyde commented Sep 28, 2024 •

edited

Loading

IEduStu commented Sep 28, 2024

feat: improve webapp, improve mobile player, improve design ✨ #629

Are you sure you want to change the base?

feat: improve webapp, improve mobile player, improve design ✨ #629

Conversation

IEduStu commented Apr 17, 2024 • edited Loading

Changes

Related pull requests I created for this effort

Devices and platforms tested with these changes

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 commented Apr 17, 2024 • edited Loading

tymmesyde commented Apr 17, 2024 • edited Loading

IEduStu commented Apr 17, 2024

tymmesyde commented Apr 17, 2024

IEduStu commented Jul 25, 2024 • edited Loading

Viren070 commented Jul 25, 2024

IEduStu commented Jul 25, 2024 • edited Loading

Viren070 commented Jul 25, 2024

IEduStu commented Jul 25, 2024

Viren070 commented Jul 25, 2024

IEduStu commented Jul 26, 2024 • edited Loading

IEduStu commented Jul 31, 2024

IEduStu commented Aug 14, 2024 • edited Loading

kKaskak commented Aug 19, 2024

tsaridas commented Aug 20, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

IEduStu commented Sep 17, 2024

IEduStu commented Sep 18, 2024 • edited Loading

tymmesyde commented Sep 28, 2024 • edited Loading

IEduStu commented Sep 28, 2024

IEduStu commented Apr 17, 2024 •

edited

Loading

CLAassistant commented Apr 17, 2024 •

edited

Loading

tymmesyde commented Apr 17, 2024 •

edited

Loading

IEduStu commented Jul 25, 2024 •

edited

Loading

IEduStu commented Jul 25, 2024 •

edited

Loading

IEduStu commented Jul 26, 2024 •

edited

Loading

IEduStu commented Aug 14, 2024 •

edited

Loading

IEduStu commented Sep 18, 2024 •

edited

Loading

tymmesyde commented Sep 28, 2024 •

edited

Loading