Fix:EReader when player is open #442

components/readers/MobiReader.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="ebook-viewer w-full h-full">
-    <div class="absolute overflow-y-scroll left-0 right-0 w-full max-w-screen m-auto z-10 border border-black border-opacity-20 shadow-md bg-white">
-      <iframe title="html-viewer" class="w-screen"> Loading </iframe>
+  <div class="mobi-ebook-viewer w-full">
+    <div class="absolute overflow-hidden left-0 right-0 w-full max-w-full m-auto z-10 border border-black border-opacity-20 shadow-md bg-white">
+      <iframe title="html-viewer" class="w-full overflow-hidden"> Loading </iframe>
     </div>
-    <div class="fixed bottom-0 left-0 h-8 w-full bg-bg px-2 flex items-center z-20">
+    <div class="fixed bottom-0 left-0 h-8 w-full bg-bg px-2 flex items-center z-20" :style="{ bottom: playerLibraryItemId ? '100px' : '0px' }">
       <p class="text-xs">mobi</p>
       <div class="flex-grow" />
     </div>
@@ -22,7 +22,14 @@ export default {
   data() {
     return {}
   },
-  computed: {},
+  computed: {
+    playerLibraryItemId() {
+      return this.$store.state.playerLibraryItemId
+    },
+    readerHeightOffset() {
+      return this.playerLibraryItemId ? 164 : 64
+    }
+  },
   methods: {
     addHtmlCss() {
       let iframe = document.getElementsByTagName('iframe')[0]
@@ -114,7 +121,14 @@ export default {
 </script>
 
 <style>
-.ebook-viewer {
+.mobi-ebook-viewer {
   height: calc(100% - 32px);
+  max-height: calc(100% - 32px);
+  overflow: hidden;
+}
+.reader-player-open .mobi-ebook-viewer {
+  height: calc(100% - 132px);
+  max-height: calc(100% - 132px);
+  overflow: hidden;
 }
 </style>