More layout and navigation fixes

kotcrab · Apr 2, 2023 · 4dda1e1 · 4dda1e1
1 parent c015beb
commit 4dda1e1
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/components/PageViewWrapper.tsx b/components/PageViewWrapper.tsx
@@ -10,7 +10,7 @@ interface Props {
   pageView: PageView,
   zoom: number,
   floatingPage: FloatingPageSettings,
-  wrapper: (ref: React.Ref<HTMLDivElement>, width: (dimensions: Dimensions) => string, alignSelf: string) => JSX.Element,
+  wrapper: (ref: React.Ref<HTMLDivElement>, alignSelf: string, imageDivWidth: (dimensions: Dimensions) => string, imageWidth: string | undefined) => JSX.Element,
 }
 
 export type PageViewWrapperHandle = {
@@ -62,7 +62,7 @@ export const PageViewWrapper = forwardRef<PageViewWrapperHandle, Props>(function
 
   switch (pageView) {
     case PageView.Fixed:
-      return wrapper(divRef, (dimensions) => Math.round(dimensions.w * zoom / 100) + "px", "center")
+      return wrapper(divRef, "center", (dimensions) => Math.round(dimensions.w * zoom / 100) + "px", "100%")
     case PageView.Floating:
       return <TransformWrapper
         limitToBounds={floatingPage.limitToBounds}
@@ -74,7 +74,7 @@ export const PageViewWrapper = forwardRef<PageViewWrapperHandle, Props>(function
         ref={transformRef}
       >
         <TransformComponent wrapperStyle={{width: "100%", height: "100%"}}>
-          {wrapper(divRef, () => "auto", "stretch")}
+          {wrapper(divRef, "stretch", () => "auto", undefined)}
         </TransformComponent>
       </TransformWrapper>
   }

diff --git a/pages/read/[bookId]/[page].tsx b/pages/read/[bookId]/[page].tsx
@@ -27,7 +27,7 @@ import {FloatingPageSettings} from "../../../model/AppSettings"
 import {useImmer} from "use-immer"
 import {MdSettingsBackupRestore} from "react-icons/md"
 import {TOOLTIP_OPEN_DELAY} from "../../../util/Util"
-import {calculatePageStep, calculateWantedPages} from "../../../util/Pages"
+import {calculatePageStep, calculateWantedPages, isCurrentPageCoverOrOnePageDisplay} from "../../../util/Pages"
 import {ReaderPage} from "../../../model/ReaderPage"
 import {ReadingDirection} from "../../../model/ReadingDirection"
 import {PageDisplay} from "../../../model/PageDisplay"
@@ -101,6 +101,9 @@ export default function ReadBookPage(
       if (reloadRequired) {
         setReloadRequired(false)
         await pushRouterPage(lowPage + 1)
+        if (isCurrentPageCoverOrOnePageDisplay(lowPage, readerSettings.pageDisplay)) {
+          pageViewWrapperRef.current?.pageTurned()
+        }
       }
     }, 300)
     return () => clearTimeout(timer)
@@ -255,16 +258,16 @@ export default function ReadBookPage(
             zoom={readerSettings.zoom}
             floatingPage={floatingPage}
             ref={pageViewWrapperRef}
-            wrapper={(divRef, width, alignSelf) =>
+            wrapper={(divRef, alignSelf, imageDivWidth, imageWidth) =>
               <HStack alignSelf={alignSelf} ref={divRef} spacing={0}>
                 {pages.map((page, index) => {
                   return <div
                     key={page.index}
-                    style={{position: "relative", width: width(page.dimensions)}}
+                    style={{position: "relative", width: imageDivWidth(page.dimensions)}}
                   >
                     <Image
                       alt={`Page ${page.index + 1}`}
-                      width="100%"
+                      width={imageWidth}
                       htmlWidth={page.dimensions.w}
                       htmlHeight={page.dimensions.h}
                       src={bookPageUrl(bookId, page.index)}

diff --git a/util/Pages.ts b/util/Pages.ts
@@ -1,7 +1,7 @@
 import {PageDisplay} from "../model/PageDisplay"
 
 export function calculatePageStep(page: number, pageDisplay: PageDisplay): number {
-  if (isOnePageOrOnCover(page, pageDisplay)) {
+  if (isCurrentPageCoverOrOnePageDisplay(page, pageDisplay)) {
     return 1
   }
   return 2
@@ -13,14 +13,14 @@ export function calculateWantedPages(page: number, totalPages: number, pageDispl
 }
 
 function calculateIdealWantedPages(page: number, pageDisplay: PageDisplay): number[] {
-  if (isOnePageOrOnCover(page, pageDisplay)) {
+  if (isCurrentPageCoverOrOnePageDisplay(page, pageDisplay)) {
     return [page]
   }
   const offset = pageDisplay === PageDisplay.TwoPagesWithCover ? 1 : 0
   const lowPage = Math.floor((page + offset) / 2) * 2 - offset
   return [lowPage, lowPage + 1]
 }
 
-function isOnePageOrOnCover(page: number, pageDisplay: PageDisplay): boolean {
+export function isCurrentPageCoverOrOnePageDisplay(page: number, pageDisplay: PageDisplay): boolean {
   return pageDisplay === PageDisplay.OnePage || (pageDisplay === PageDisplay.TwoPagesWithCover && page === 0)
 }