Merge translation strings

components/readers/EpubReader.vue

@@ -34,6 +34,7 @@ export default {
       currentLocationNum: 0,
       currentLocationCfi: null,
       inittingDisplay: true,
+      isRefreshingUI: false,
       ereaderSettings: {
         theme: 'dark',
         fontScale: 100,
@@ -43,7 +44,7 @@ export default {
   },
   watch: {
     isPlayerOpen() {
-      this.updateHeight()
+      this.refreshUI()
     }
   },
   computed: {
@@ -135,11 +136,6 @@ export default {
     goToChapter(href) {
       return this.rendition?.display(href)
     },
-    updateHeight() {
-      if (this.rendition && this.rendition.resize) {
-        this.rendition.resize(window.innerWidth, window.innerHeight - this.readerHeightOffset)
-      }
-    },
     prev() {
       if (this.rendition) {
         this.rendition.prev()
@@ -382,14 +378,54 @@ export default {
       this.rendition.getContents().forEach((c) => {
         c.addStylesheetRules(this.themeRules)
       })
+    },
+    async screenOrientationChange() {
+      if (this.isRefreshingUI) return
+      this.isRefreshingUI = true
+      const windowWidth = window.innerWidth
+      this.refreshUI()
+
+      // Window width does not always change right away. Wait up to 250ms for a change.
+      // iPhone 10 on iOS 16 took between 100 - 200ms to update when going from portrait to landscape
+      //   but landscape to portrait was immediate
+      for (let i = 0; i < 5; i++) {
+        await new Promise((resolve) => setTimeout(resolve, 50))
+        if (window.innerWidth !== windowWidth) {
+          this.refreshUI()
+          break
+        }
+      }
+
+      this.isRefreshingUI = false
+    },
+    refreshUI() {
+      if (this.rendition?.resize) {
+        this.rendition.resize(window.innerWidth, window.innerHeight - this.readerHeightOffset)
+      }
     }
   },
-  beforeDestroy() {
-    this.book?.destroy()
-  },
   mounted() {
     this.initEpub()
-  }
+
+    if (screen.orientation) {
+      // Not available on ios
+      screen.orientation.addEventListener('change', this.screenOrientationChange)
+    } else {
+      document.addEventListener('orientationchange', this.screenOrientationChange)
+    }
+    window.addEventListener('resize', this.screenOrientationChange)
+  },
+  beforeDestroy() {
+    this.book?.destroy()
+
+    if (screen.orientation) {
+      // Not available on ios
+      screen.orientation.removeEventListener('change', this.screenOrientationChange)
+    } else {
+      document.removeEventListener('orientationchange', this.screenOrientationChange)
+    }
+    window.removeEventListener('resize', this.screenOrientationChange)
+  },
 }
 </script>
 
@@ -404,4 +440,4 @@ export default {
   max-height: calc(100% - 132px);
   overflow: hidden;
 }
-</style>
+</style>

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>