From 3d51c687257e2df64b39b33c0ec1ea9ab97fed5f Mon Sep 17 00:00:00 2001 From: taku0 Date: Sun, 29 May 2022 22:20:15 +0900 Subject: [PATCH] Respect safe area (notch) of mobile devices 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). - `src/assets/css/librarybrowser.scss` - `.skinHeader`: menu bar at the top. - `.padded-left` and `.padded-right`: the heading of library. - `src/assets/css/site.scss` - `.content-primary`, `.padded-bottom-page`, `.page`, `.pageWithAbsoluteTabs`, and `.pageTabContent`: settings and dashboards. - `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/alphaPicker/style.scss` - `.alphaPicker-fixed` and `.alphaPicker-fixed-right`: the alphabet picker. - `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` - `.tmla-mask` and `.touch-menu-la`: 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. --- src/assets/css/librarybrowser.scss | 6 ++++++ src/assets/css/site.scss | 1 + src/assets/css/videoosd.scss | 3 +++ src/components/alphaPicker/style.scss | 5 +++++ src/components/appFooter/appFooter.scss | 7 +++++++ src/components/multiSelect/multiSelect.scss | 8 +++++++- src/components/remotecontrol/remotecontrol.scss | 3 +++ src/components/toast/toast.scss | 7 ++++++- src/elements/emby-scroller/emby-scroller.scss | 4 ++++ src/index.html | 1 + src/libraries/navdrawer/navdrawer.scss | 2 ++ src/plugins/htmlVideoPlayer/style.scss | 7 +++++++ src/plugins/youtubePlayer/style.scss | 4 ++++ 13 files changed, 56 insertions(+), 2 deletions(-) diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss index af3eacada..202fd66e0 100644 --- a/src/assets/css/librarybrowser.scss +++ b/src/assets/css/librarybrowser.scss @@ -175,6 +175,9 @@ flex-direction: column; contain: layout style paint; transition: background ease-in-out 0.5s; + padding-left: env(safe-area-inset-left); + padding-right: env(safe-area-inset-right); + padding-top: env(safe-area-inset-top); } .layout-tv .skinHeader { @@ -1146,10 +1149,12 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { .padded-left { padding-left: 3.3%; + padding-left: max(env(safe-area-inset-left), 3.3%); } .padded-right { padding-right: 3.3%; + padding-right: max(env(safe-area-inset-right), 3.3%); } .padded-top { @@ -1173,6 +1178,7 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { @media all and (min-height: 31.25em) { .padded-right-withalphapicker { padding-right: 7.5%; + padding-right: max(env(safe-area-inset-left), 7.5%); } } diff --git a/src/assets/css/site.scss b/src/assets/css/site.scss index 3d4ea7da0..f3f1a699b 100644 --- a/src/assets/css/site.scss +++ b/src/assets/css/site.scss @@ -84,6 +84,7 @@ div[data-role="page"] { .pageWithAbsoluteTabs .pageTabContent { /* provides room for the music controls */ padding-bottom: 5em !important; + padding-bottom: calc(env(safe-area-inset-bottom) + 5em) !important; } .readOnlyContent { diff --git a/src/assets/css/videoosd.scss b/src/assets/css/videoosd.scss index c0ef57dd5..020a835f5 100644 --- a/src/assets/css/videoosd.scss +++ b/src/assets/css/videoosd.scss @@ -12,8 +12,11 @@ right: 0; position: fixed; background: linear-gradient(0deg, rgba(16, 16, 16, 0.75) 0%, rgba(16, 16, 16, 0) 100%); + padding-left: env(safe-area-inset-left); + padding-right: env(safe-area-inset-right); padding-top: 7.5em; padding-bottom: 1.75em; + padding-bottom: max(env(safe-area-inset-bottom), 1.75em); display: flex; flex-direction: row; justify-content: center; diff --git a/src/components/alphaPicker/style.scss b/src/components/alphaPicker/style.scss index 8feb3e50e..7a3f6eaf8 100644 --- a/src/components/alphaPicker/style.scss +++ b/src/components/alphaPicker/style.scss @@ -12,6 +12,7 @@ .alphaPicker-fixed { position: fixed; bottom: 5.5em; + bottom: max(env(safe-area-inset-bottom), 5.5em); } .alphaPickerRow { @@ -45,6 +46,7 @@ @media all and (max-height: 50em) { .alphaPicker-fixed { bottom: 5em; + bottom: max(env(safe-area-inset-bottom), 5em); } .alphaPickerButton-vertical { @@ -104,15 +106,18 @@ .alphaPicker-fixed.alphaPicker-tv { bottom: 1%; + bottom: max(env(safe-area-inset-bottom), 1%); } .alphaPicker-fixed-right { right: 0.4em; + right: max(env(safe-area-inset-right), 0.4em); } @media all and (min-width: 62.5em) { .alphaPicker-fixed-right { right: 1em; + right: max(env(safe-area-inset-right), 1em); } } diff --git a/src/components/appFooter/appFooter.scss b/src/components/appFooter/appFooter.scss index 6dc00b00c..1048a8e21 100644 --- a/src/components/appFooter/appFooter.scss +++ b/src/components/appFooter/appFooter.scss @@ -6,6 +6,13 @@ bottom: 0; transition: transform 180ms linear; contain: layout style; + padding-left: env(safe-area-inset-left); + padding-right: env(safe-area-inset-right); + padding-bottom: env(safe-area-inset-bottom); +} + +.appfooter:empty { + padding: 0; } .appfooter.headroom--unpinned { diff --git a/src/components/multiSelect/multiSelect.scss b/src/components/multiSelect/multiSelect.scss index 39b50aa17..63db29662 100644 --- a/src/components/multiSelect/multiSelect.scss +++ b/src/components/multiSelect/multiSelect.scss @@ -14,7 +14,13 @@ top: 0; left: 0; right: 0; - padding: 1em 0.5em; + padding-left: 0.5em; + padding-left: max(env(safe-area-inset-left), 0.5em); + padding-right: 0.5em; + padding-right: max(env(safe-area-inset-right), 0.5em); + padding-top: 1em; + padding-top: max(env(safe-area-inset-top), 1em); + padding-bottom: 1em; display: flex; align-items: center; z-index: 99999; diff --git a/src/components/remotecontrol/remotecontrol.scss b/src/components/remotecontrol/remotecontrol.scss index 6dc769e71..b19be860d 100644 --- a/src/components/remotecontrol/remotecontrol.scss +++ b/src/components/remotecontrol/remotecontrol.scss @@ -195,7 +195,10 @@ height: 4.2em; right: 0; padding-left: 7.3%; + padding-left: max(env(safe-area-inset-left), 7.3%); padding-right: 7.3%; + padding-right: max(env(safe-area-inset-right), 7.3%); + padding-bottom: env(safe-area-inset-bottom); } .layout-desktop .playlistSectionButton, diff --git a/src/components/toast/toast.scss b/src/components/toast/toast.scss index cb16573f4..a2105f61f 100644 --- a/src/components/toast/toast.scss +++ b/src/components/toast/toast.scss @@ -4,7 +4,12 @@ bottom: 0; pointer-events: none; z-index: 9999999; - padding: 1em; + padding-left: 1em; + padding-left: max(env(safe-area-inset-left), 1em); + padding-right: 1em; + padding-top: 1em; + padding-bottom: 1em; + padding-bottom: max(env(safe-area-inset-bottom), 1em); display: flex; flex-direction: column; } diff --git a/src/elements/emby-scroller/emby-scroller.scss b/src/elements/emby-scroller/emby-scroller.scss index d4d2c69c8..09a5856b0 100644 --- a/src/elements/emby-scroller/emby-scroller.scss +++ b/src/elements/emby-scroller/emby-scroller.scss @@ -4,7 +4,9 @@ .emby-scroller { margin-left: 3.3%; + margin-left: max(env(safe-area-inset-left), 3.3%); margin-right: 3.3%; + margin-right: max(env(safe-area-inset-right), 3.3%); } /* align first card in scroller to heading */ @@ -21,7 +23,9 @@ .layout-tv .emby-scroller, .layout-mobile .emby-scroller { padding-left: 3.3%; + padding-left: max(env(safe-area-inset-left), 3.3%); padding-right: 3.3%; + padding-right: max(env(safe-area-inset-right), 3.3%); margin-left: 0; margin-right: 0; } diff --git a/src/index.html b/src/index.html index d77378d3f..112b644f1 100644 --- a/src/index.html +++ b/src/index.html @@ -102,6 +102,7 @@ bottom: 0; z-index: 1; width: 0.8em; + padding-left: env(safe-area-inset-left); } @-webkit-keyframes fadein { diff --git a/src/libraries/navdrawer/navdrawer.scss b/src/libraries/navdrawer/navdrawer.scss index 6d5d098de..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 { diff --git a/src/plugins/htmlVideoPlayer/style.scss b/src/plugins/htmlVideoPlayer/style.scss index 7d984b69a..390e25a99 100644 --- a/src/plugins/htmlVideoPlayer/style.scss +++ b/src/plugins/htmlVideoPlayer/style.scss @@ -7,6 +7,10 @@ display: flex; align-items: center; background: #000 !important; + padding-left: env(safe-area-inset-left); + padding-right: env(safe-area-inset-right); + padding-top: env(safe-area-inset-top); + padding-bottom: env(safe-area-inset-bottom); } .videoPlayerContainer-onTop { @@ -58,6 +62,9 @@ video[controls]::-webkit-media-controls { right: 0; color: #fff; font-size: 170%; + padding-left: env(safe-area-inset-left); + padding-right: env(safe-area-inset-right); + padding-bottom: env(safe-area-inset-bottom); } .videoSubtitlesInner { diff --git a/src/plugins/youtubePlayer/style.scss b/src/plugins/youtubePlayer/style.scss index 1328e6f3d..1188619b2 100644 --- a/src/plugins/youtubePlayer/style.scss +++ b/src/plugins/youtubePlayer/style.scss @@ -7,6 +7,10 @@ right: 0; display: flex; align-items: center; + padding-left: env(safe-area-inset-left); + padding-right: env(safe-area-inset-right); + padding-top: env(safe-area-inset-top); + padding-bottom: env(safe-area-inset-bottom); } .youtubePlayerContainer.onTop {