Respect safe area (notch) of mobile devices

[taku0]

Changes

This adds paddings to various containers so that buttons and contents are not hidden by the notch or the Home indicator (the gray bar at the bottom).

https://webkit.org/blog/7929/designing-websites-for-iphone-x/

• src/assets/css/librarybrowser.scss

  • .skinHeader: menu bar at the top.
  • .padded-left and .padded-right: the heading of library.

• src/elements/emby-scroller/emby-scroller.scss

  • .emby-scroller: the library items.

• src/assets/css/videoosd.scss

  • .videoOsdBottom: the video playback control buttons and the progress bar.

• src/components/appFooter/appFooter.scss

  • .appfooter: the bottom bar showing the currently playing media.

• src/components/multiSelect/multiSelect.scss

  • .selectionCommandsPanel: the top bar when selecting multiple media. Shown when long-pressing media.

• src/components/remotecontrol/remotecontrol.scss

  • .playlistSectionButton: the bottom bar for current playlist. Shown when touching .appfooter.

• src/components/toast/toast.scss

  • .toastContainer: the toast. Shown when refreshing metadata.

• src/index.html

  • .mainDrawerHandle: gesture area for the drawer. It seems conflicting with gestures of Safari.

• src/libraries/navdrawer/navdrawer.scss

  • .drawer-open: the drawer.

• src/plugins/htmlVideoPlayer/style.scss

  • .videoPlayerContainer: the video area when not fullscreen.
  • .videoSubtitles: the video subtitles for some devices, not including iPhone.

• src/plugins/youtubePlayer/style.scss

  • .youtubePlayerContainer container for the YouTube plugin. Not tested.

Issues

How to Test

1. Open Jellyfin with iPhone X or later in landscape orientation.
2. Browse a library and check the buttons and contents are not hidden by the notch.
3. Open the drawer menu and check the menu items are not hidden by the notch.
4. Play a video and check the controls are not hidden by the notch.
5. Play a music and check the controls are not hidden by the notch or the Home indicator.
6. Tap the bottom bar while playing the music to show playlist and check the controls are not hidden by the notch or the Home indicator.
7. Long press a library item and check the top bar is not hidden by the notch.
8. Refresh metadata of a library and check the toast is not hidden by the notch.

I couldn't test with Android because I don't have one with a notch or hole.

[dmitrylyzo]

I guess since env is not supported by older browsers, we should add fallbacks without max and env.

[taku0]

Popular browsers except Internet Explorer supports env() as late as 2020-01-15. Does Jellyfin support IE or browsers older than two years?

https://developer.mozilla.org/en-US/docs/Web/CSS/env

Chrome 69 (Desktop and Mobile): 2018-09-04 Edge 79: 2020-01-15 Firefox 65 (Desktop and Mobile): 2019-01-29 Safari 11 (Desktop and Mobile): 2017-09-19 Opera 56: 2018-09-25 Opera Android 48: 2018-11-08 Samsung Internet 10.0: 2019-08-22 WebView Android 69: 2018-09-04

[dmitrylyzo]

Does Jellyfin support IE or browsers older than two years?

Yes, TVs. webOS 1/2 and Tizen 2.x use the old WebKit engines. We approximate them as Chrome 27. https://developer.samsung.com/smarttv/develop/specifications/web-engine-specifications.html https://webostv.developer.lge.com/discover/specifications/web-engine/

[taku0]

OK, added fallbacks.

[thornbill]

This will need testing. I suspect it will conflict with the mobile apps.

[taku0]

• [X] iOS Safari
• [X] Android Chrome
• [X] Desktop Firefox
• [ ] iOS App
• [ ] Android App
• [ ] Android TV App

I have tested on Android Chrome using an emulator with a cutout (notch). I need some efforts to run modified apps on iOS and Android.

[taku0]

• [X] iOS Safari
• [X] Android Chrome
• [X] Desktop Firefox
• [X] iOS App
• [X] Android App
• [X] Android TV App

iOS Safari without this patch:

iOS Safari with this patch:

jellyfin-expo in portrait orientation:

jellyfin-expo in landscape orientation:

jellyfin-android:

[taku0]

Also fixed alphaPicker.

[nyanmisaka]

Any chance this can be applied to the left menu of dashboard page? Everything else works fine for me on an iPhone 12.

[taku0]

Using box-sizing fixes the left menu of dashboard page. Is setting box-sizing for .touch-menu-la acceptable? If so, I will add this diff:

diff --git a/src/libraries/navdrawer/navdrawer.scss b/src/libraries/navdrawer/navdrawer.scss
index 8cb610b5a..361d85515 100644
--- a/src/libraries/navdrawer/navdrawer.scss
+++ b/src/libraries/navdrawer/navdrawer.scss
@@ -4,6 +4,8 @@
     top: 0;
     bottom: 0;
     contain: strict;
+    box-sizing: border-box;
+    padding-left: env(safe-area-inset-left);
 }
 
 .touch-menu-la {
@@ -27,7 +29,6 @@
 .drawer-open {
     -webkit-box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
     box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
-    padding-left: env(safe-area-inset-left);
 }
 
 .scrollContainer {

[taku0]

@nyanmisaka, I have updated the left menu of dashboard page.

[sonarqubecloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
2 Code Smells

No Coverage information
0.0% Duplication

[taku0]

Fixed dashboard and settings page.

[taku0]

Another couple of screenshots (without the patch and with the patch):

[taku0]

Rebased on the master.

[sonarqubecloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.3% Duplication