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

Fix:PDF ereader flickering

Browse source
This commit is contained in:
advplyr 2024-06-02 15:54:50 -05:00
parent b33623b74f
commit b7e6cbf1ab
1 changed files with 16 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

27
components/readers/PdfReader.vue
View file

@ -14,7 +14,7 @@
<div class="h-full flex items-center justify-center"> <div class="h-full flex items-center justify-center">
<div :style="{ width: pdfWidth + 'px', height: pdfHeight + 'px' }" class="w-full h-full overflow-auto"> <div :style="{ width: pdfWidth + 'px', height: pdfHeight + 'px' }" class="w-full h-full overflow-auto">
<div v-if="loadedRatio > 0 && loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: loadedRatio * 100 + '%' }">{{ Math.floor(loadedRatio * 100) }}%</div> <div v-if="loadedRatio > 0 && loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: loadedRatio * 100 + '%' }">{{ Math.floor(loadedRatio * 100) }}%</div>
<pdf ref="pdf" class="m-auto z-10 border border-black border-opacity-20 shadow-md bg-white" :src="pdfDocInitParams" :page="page" :rotate="rotate" @progress="loadedRatio = $event" @error="error" @num-pages="numPagesLoaded" @link-clicked="page = $event" @loaded="loadedEvt"></pdf> <pdf v-if="pdfDocInitParams" ref="pdf" class="m-auto z-10 border border-black border-opacity-20 shadow-md bg-white" :src="pdfDocInitParams" :page="page" :rotate="rotate" @progress="loadedRatio = $event" @error="error" @num-pages="numPagesLoaded" @link-clicked="page = $event" @loaded="loadedEvt"></pdf>
</div> </div>
</div> </div>
@ -48,7 +48,8 @@ export default {
page: 1, page: 1,
numPages: 0, numPages: 0,
windowWidth: 0, windowWidth: 0,
windowHeight: 0 windowHeight: 0,
pdfDocInitParams: null
} }
}, },
computed: { computed: {
@ -106,14 +107,6 @@ export default {
if (!this.userItemProgress?.ebookLocation || isNaN(this.userItemProgress.ebookLocation)) return 0 if (!this.userItemProgress?.ebookLocation || isNaN(this.userItemProgress.ebookLocation)) return 0
return Number(this.userItemProgress.ebookLocation) return Number(this.userItemProgress.ebookLocation)
}, },
pdfDocInitParams() {
return {
url: this.url,
httpHeaders: {
Authorization: `Bearer ${this.userToken}`
}
}
},
isPlayerOpen() { isPlayerOpen() {
return this.$store.getters['getIsPlayerOpen'] return this.$store.getters['getIsPlayerOpen']
} }
@ -157,6 +150,8 @@ export default {
} }
}, },
numPagesLoaded(e) { numPagesLoaded(e) {
if (!e) return
this.numPages = e this.numPages = e
}, },
prev() { prev() {
@ -175,6 +170,14 @@ export default {
screenOrientationChange() { screenOrientationChange() {
this.windowWidth = window.innerWidth this.windowWidth = window.innerWidth
this.windowHeight = window.innerHeight this.windowHeight = window.innerHeight
},
init() {
this.pdfDocInitParams = {
url: this.url,
httpHeaders: {
Authorization: `Bearer ${this.userToken}`
}
}
} }
}, },
mounted() { mounted() {
@ -188,6 +191,8 @@ export default {
document.addEventListener('orientationchange', this.screenOrientationChange) document.addEventListener('orientationchange', this.screenOrientationChange)
} }
window.addEventListener('resize', this.screenOrientationChange) window.addEventListener('resize', this.screenOrientationChange)
this.init()
}, },
beforeDestroy() { beforeDestroy() {
if (screen.orientation) { if (screen.orientation) {
@ -199,4 +204,4 @@ export default {
window.removeEventListener('resize', this.screenOrientationChange) window.removeEventListener('resize', this.screenOrientationChange)
} }
} }
</script> </script>