Merge pull request #780 from jellyfin/mobile-friendlier

Improve PWA experience

assets/global.scss

@@ -97,6 +97,27 @@ body {
   flex: 0;
 }
 
+.pa-s {
+  padding: env(safe-area-inset-top) env(safe-area-inset-right)
+  env(safe-area-inset-bottom) env(safe-area-inset-left);
+}
+
+.pt-s {
+  padding-top: env(safe-area-inset-top);
+}
+
+.pl-s {
+  padding-left: env(safe-area-inset-left);
+}
+
+.pr-s {
+  padding-right: env(safe-area-inset-right);
+}
+
+.pb-s {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
 /* Customized Vuetify components */
 .v-menu__content .v-list {
   background: map-get($material-light, 'cards') !important;

components/Layout/AudioControls.vue

@@ -11,7 +11,7 @@
       <v-container v-if="isFullScreenPlayer" fluid>
         <time-slider />
       </v-container>
-      <v-container fluid>
+      <v-container class="pb-s" fluid>
         <v-row class="ma-0">
           <v-col cols="9" md="3" class="d-flex flex-row pa-0">
             <nuxt-link :to="'/fullscreen/playback'">

components/Layout/Backdrop.vue

@@ -44,7 +44,7 @@ export default Vue.extend({
   }
   &::after {
     content: '';
-    position: absolute;
+    position: fixed;
     top: 0;
     bottom: 0;
     left: 0;

components/Players/PlayerManager.vue

@@ -72,7 +72,7 @@
               <div
                 class="d-flex flex-column justify-space-between align-center player-overlay"
               >
-                <div class="osd-top">
+                <div class="osd-top pt-s pl-s pr-s">
                   <div class="d-flex justify-space-between align-center">
                     <div class="d-flex">
                       <v-btn icon @click="stopPlayback">
@@ -104,8 +104,8 @@
                   </div>
                 </div>
 
-                <div class="px-4 osd-bottom">
-                  <div>
+                <div class="osd-bottom pb-s pl-s pr-s">
+                  <div class="px-4">
                     <time-slider />
                     <div class="d-flex justify-space-between">
                       <div>

layouts/default.vue

@@ -7,6 +7,7 @@
       :temporary="$vuetify.breakpoint.mobile"
       :permanent="!$vuetify.breakpoint.mobile"
       app
+      class="pa-s"
     >
       <template #prepend>
         <user-button />
@@ -49,7 +50,7 @@
     </v-navigation-drawer>
     <v-app-bar
       :clipped-left="$vuetify.breakpoint.mobile"
-      class="pl-2 pr-2"
+      class="pt-s pl-2 pr-2 app-bar-safe-zone"
       flat
       app
       :class="{ opaque: opaqueAppBar || $vuetify.breakpoint.xsOnly }"
@@ -95,7 +96,9 @@
       />
     </v-app-bar>
     <v-main>
-      <nuxt />
+      <div class="pa-s">
+        <nuxt />
+      </div>
     </v-main>
     <audio-controls />
     <!-- Utilities and global systems -->
@@ -190,6 +193,17 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
+@import '~vuetify/src/styles/styles.sass';
+.app-bar-safe-zone {
+  height: calc(56px + env(safe-area-inset-top)) !important;
+}
+
+@media #{map-get($display-breakpoints, 'md-and-up')} {
+  .app-bar-safe-zone {
+    height: calc(64px + env(safe-area-inset-top)) !important;
+  }
+}
+
 .v-app-bar:not(.v-app-bar--is-scrolled):not(.opaque) {
   background-color: transparent !important;
 }

nuxt.config.ts

@@ -35,13 +35,13 @@ const config: NuxtConfig = {
   pwa: {
     meta: {
       nativeUI: true,
-      appleStatusBarStyle: 'dark',
+      appleStatusBarStyle: 'black-translucent',
       name: 'Jellyfin',
-      theme_color: '#424242'
+      theme_color: '#1c2331'
     },
     manifest: {
       name: 'Jellyfin',
-      background_color: '#101010'
+      background_color: '#14141F'
     }
   },
   /*