From 62a5a2d069b27265855514974030b2bf78c9efc8 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Tue, 31 Jan 2023 15:30:13 -0600
Subject: [PATCH] Update:Increase height of minimized audio player to
 accomadate iOS safe area #531

---
 assets/app.css                    |  6 +++---
 components/app/AudioPlayer.vue    | 12 +++++-------
 components/readers/EpubReader.vue |  2 +-
 pages/localMedia/item/_id.vue     |  2 +-
 4 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/assets/app.css b/assets/app.css
index 7005cabe..c9e64e55 100644
--- a/assets/app.css
+++ b/assets/app.css
@@ -20,9 +20,9 @@ body {
 }
 
 #content.playerOpen {
-  height: calc(100% - 164px);
-  min-height: calc(100% - 164px);
-  max-height: calc(100% - 164px);
+  height: calc(100% - 184px);
+  min-height: calc(100% - 184px);
+  max-height: calc(100% - 184px);
 }
 
 #bookshelf {
diff --git a/components/app/AudioPlayer.vue b/components/app/AudioPlayer.vue
index 890b77ae..518f04be 100644
--- a/components/app/AudioPlayer.vue
+++ b/components/app/AudioPlayer.vue
@@ -916,7 +916,7 @@ export default {
 }
 
 .playerContainer {
-  height: 100px;
+  height: 120px;
 }
 .fullscreen .playerContainer {
   height: 200px;
@@ -931,14 +931,14 @@ export default {
 #playerTrack {
   transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
   transition-property: margin;
-  bottom: 20px;
+  bottom: 35px;
 }
 .fullscreen #playerTrack {
   bottom: unset;
 }
 
 .cover-wrapper {
-  bottom: 48px;
+  bottom: 68px;
   left: 12px;
   height: var(--cover-image-height-collapsed);
   width: var(--cover-image-width-collapsed);
@@ -959,7 +959,7 @@ export default {
   transform-origin: left bottom;
 
   width: 40%;
-  bottom: 56px;
+  bottom: 76px;
   left: var(--title-author-left-offset-collapsed);
   text-align: left;
 }
@@ -998,7 +998,7 @@ export default {
   width: 140px;
   padding-left: 12px;
   padding-right: 12px;
-  bottom: 50px;
+  bottom: 70px;
 }
 #playerControls .jump-icon {
   transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
@@ -1016,7 +1016,6 @@ export default {
   min-width: 40px;
   min-height: 40px;
   margin: 0px 14px;
-  /* padding: 8px; */
 }
 #playerControls .play-btn .material-icons {
   transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
@@ -1046,7 +1045,6 @@ export default {
   font-size: 2rem;
 }
 .fullscreen #playerControls .play-btn {
-  /* padding: 16px; */
   height: 65px;
   width: 65px;
   min-width: 65px;
diff --git a/components/readers/EpubReader.vue b/components/readers/EpubReader.vue
index 9bc86940..a3dd1507 100644
--- a/components/readers/EpubReader.vue
+++ b/components/readers/EpubReader.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="epub-frame" class="w-full">
     <div id="viewer" class="border border-gray-100 bg-white shadow-md h-full w-full"></div>
-    <div class="fixed left-0 h-8 w-full bg-bg px-2 flex items-center" :style="{ bottom: playerLibraryItemId ? '100px' : '0px' }">
+    <div class="fixed left-0 h-8 w-full bg-bg px-2 flex items-center" :style="{ bottom: playerLibraryItemId ? '120px' : '0px' }">
       <p class="text-xs">epub</p>
       <div class="flex-grow" />
 
diff --git a/pages/localMedia/item/_id.vue b/pages/localMedia/item/_id.vue
index fd7ab3eb..8104efae 100644
--- a/pages/localMedia/item/_id.vue
+++ b/pages/localMedia/item/_id.vue
@@ -90,7 +90,7 @@
       <p class="text-lg text-center px-8">{{ failed ? 'Failed to get local library item ' + localLibraryItemId : 'Loading..' }}</p>
     </div>
 
-    <div v-if="orderChanged" class="fixed left-0 w-full py-4 px-4 bg-bg box-shadow-book flex items-center" :style="{ bottom: playerLibraryItemId ? '100px' : '0px' }">
+    <div v-if="orderChanged" class="fixed left-0 w-full py-4 px-4 bg-bg box-shadow-book flex items-center" :style="{ bottom: playerLibraryItemId ? '120px' : '0px' }">
       <div class="flex-grow" />
       <ui-btn small color="success" @click="saveTrackOrder">Save Order</ui-btn>
     </div>