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 af3eacadaf..202fd66e08 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 3d4ea7da0e..f3f1a699b7 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 c0ef57dd5c..020a835f59 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 8feb3e50e0..7a3f6eaf87 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 6dc00b00c2..1048a8e214 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 39b50aa17e..63db296621 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 6dc769e710..b19be860d7 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 cb16573f48..a2105f61f5 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 d4d2c69c85..09a5856b0e 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 d77378d3f8..112b644f1a 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 6d5d098de2..361d855154 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 7d984b69aa..390e25a994 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 1328e6f3d5..1188619b26 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 {