Fix:EReader when player is open #442

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 bottom-0 left-0 h-8 w-full bg-bg px-2 flex items-center">
+    <div class="fixed left-0 h-8 w-full bg-bg px-2 flex items-center" :style="{ bottom: playerLibraryItemId ? '100px' : '0px' }">
       <p class="text-xs">epub</p>
       <div class="flex-grow" />
 
@@ -29,8 +29,25 @@ export default {
       hasPrev: false
     }
   },
-  computed: {},
+  watch: {
+    playerLibraryItemId() {
+      this.updateHeight()
+    }
+  },
+  computed: {
+    playerLibraryItemId() {
+      return this.$store.state.playerLibraryItemId
+    },
+    readerHeightOffset() {
+      return this.playerLibraryItemId ? 164 : 64
+    }
+  },
   methods: {
+    updateHeight() {
+      if (this.rendition && this.rendition.resize) {
+        this.rendition.resize(window.innerWidth, window.innerHeight - this.readerHeightOffset)
+      }
+    },
     prev() {
       if (this.rendition) {
         this.rendition.prev()
@@ -54,12 +71,12 @@ export default {
 
       this.rendition = book.renderTo('viewer', {
         width: window.innerWidth,
-        height: window.innerHeight - 64,
+        height: window.innerHeight - this.readerHeightOffset,
         snap: true,
         manager: 'continuous',
         flow: 'paginated'
       })
-      var displayed = this.rendition.display()
+      const displayed = this.rendition.display()
 
       book.ready
         .then(() => {
@@ -127,4 +144,9 @@ export default {
   max-height: calc(100% - 32px);
   overflow: hidden;
 }
+.reader-player-open #epub-frame {
+  height: calc(100% - 132px);
+  max-height: calc(100% - 132px);
+  overflow: hidden;
+}
 </style>

components/readers/MobiReader.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="ebook-viewer w-full h-full">
+  <div class="mobi-ebook-viewer w-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">
+    <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-screen"> Loading </iframe>
+      <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>

components/readers/Reader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="show" class="absolute top-0 left-0 w-full h-full bg-bg z-40 pt-8">
+  <div v-if="show" class="absolute top-0 left-0 w-full h-full bg-bg z-40 pt-8" :class="{ 'reader-player-open': !!playerLibraryItemId }">
     <div class="h-8 w-full bg-primary flex items-center px-2 fixed top-0 left-0 z-30 box-shadow-sm">
       <p class="w-5/6 truncate">{{ title }}</p>
       <div class="flex-grow" />
@@ -98,6 +98,9 @@ export default {
 
       var serverAddress = this.$store.getters['user/getServerAddress']
       return `${serverAddress}/ebook/${this.libraryId}/${this.folderId}/${itemRelPath}/${relPath}`
+    },
+    playerLibraryItemId() {
+      return this.$store.state.playerLibraryItemId
     }
   },
   methods: {