Fix:PDF ereader flickering

components/readers/PdfReader.vue

@@ -14,7 +14,7 @@
     <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 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>
 
@@ -48,7 +48,8 @@ export default {
       page: 1,
       numPages: 0,
       windowWidth: 0,
-      windowHeight: 0
+      windowHeight: 0,
+      pdfDocInitParams: null
     }
   },
   computed: {
@@ -106,14 +107,6 @@ export default {
       if (!this.userItemProgress?.ebookLocation || isNaN(this.userItemProgress.ebookLocation)) return 0
       return Number(this.userItemProgress.ebookLocation)
     },
-    pdfDocInitParams() {
-      return {
-        url: this.url,
-        httpHeaders: {
-          Authorization: `Bearer ${this.userToken}`
-        }
-      }
-    },
     isPlayerOpen() {
       return this.$store.getters['getIsPlayerOpen']
     }
@@ -157,6 +150,8 @@ export default {
       }
     },
     numPagesLoaded(e) {
+      if (!e) return
+
       this.numPages = e
     },
     prev() {
@@ -175,6 +170,14 @@ export default {
     screenOrientationChange() {
       this.windowWidth = window.innerWidth
       this.windowHeight = window.innerHeight
+    },
+    init() {
+      this.pdfDocInitParams = {
+        url: this.url,
+        httpHeaders: {
+          Authorization: `Bearer ${this.userToken}`
+        }
+      }
     }
   },
   mounted() {
@@ -188,6 +191,8 @@ export default {
       document.addEventListener('orientationchange', this.screenOrientationChange)
     }
     window.addEventListener('resize', this.screenOrientationChange)
+
+    this.init()
   },
   beforeDestroy() {
     if (screen.orientation) {
@@ -199,4 +204,4 @@ export default {
     window.removeEventListener('resize', this.screenOrientationChange)
   }
 }
-</script>
+</script>