mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-08-04 10:04:39 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix:EReader when player is open #442

Browse source
This commit is contained in:
advplyr 2022-12-04 08:29:55 -06:00
parent d72295a0e6
commit 7db503a2cf
3 changed files with 50 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

30
components/readers/EpubReader.vue
View file

@ -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>

26
components/readers/MobiReader.vue
View file

@ -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>

5
components/readers/Reader.vue
View file

@ -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: {