Stylized book view page

src/hooks/usePagination.ts

@@ -6,7 +6,8 @@ type IdPositions = Record<string, number>;
 type UsePaginationReturnTuple = [
   ready: boolean,
   goToPage: (pageNum: number) => void,
-  currentPage: number
+  currentPage: number,
+  pageNumber: number
 ];
 
 const isTextNode = (el: Node): el is TextNode => el.nodeType === Node.TEXT_NODE;
@@ -237,5 +238,5 @@ export const usePagination = (
     else return (pageNum: number) => {};
   };
 
-  return [ready, makeDisplayPage(pageEl), currentPage];
+  return [ready, makeDisplayPage(pageEl), currentPage, pages.length - 1];
 };

src/pages/BookView/BookView.module.css

@@ -2,19 +2,76 @@
   display: none;
 }
 
+.border {
+  position: fixed;
+  z-index: 2;
+  top: 15vh;
+  height: 100vh;
+  width: 15vh;
+}
+
+.leftBorder {
+  left: 0;
+}
+
+.rightBorder {
+  right: 0;
+}
+
 .pageContainer {
   display: block;
   position: fixed;
-  width: 80vw;
+  width: calc(100vw - 30vh);
-  left: 10vw;
+  left: 15vh;
-  height: 100vh;
+  top: 15vh;
-  top: 0;
+  height: 70vh;
-  /* overflow: hidden; */
   padding: 0;
   margin: 0;
 }
 
 img {
   max-height: 98vh;
-  max-width: 80vw;
+  max-width: 100%;
-}
+}
+
+.pageIndicator {
+  position: fixed;
+  z-index: 1;
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+  height: 15vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pageSwitchArrow {
+  background: none;
+  border: none;
+  cursor: pointer;
+  width: 5vh;
+  height: 5vh;
+}
+
+@media screen and (orientation: portrait) {
+  .border {
+    top: 15vw;
+    width: 15vw;
+  }
+
+  .pageContainer {
+    width: 70vw;
+    height: calc(100vh - 30vw);
+    left: 15vw;
+    top: 15vw;
+  }
+
+  .pageIndicator {
+    height: 15vw;
+  }
+
+  .pageSwitchArrow {
+    display: none;
+  }
+}

src/pages/BookView/index.tsx

@@ -17,7 +17,7 @@ export const BookView = ({ setLoading, loading }: IPageProps) => {
   const pageContainerRef = useRef<HTMLDivElement>(null);
   const pageRef = useRef<HTMLDivElement>(null);
 
-  const [ready, goToPage, currentPage] = usePagination(
+  const [ready, goToPage, currentPage, pagesNumber] = usePagination(
     contentRef,
     pageContainerRef,
     pageRef,
@@ -49,13 +49,35 @@ export const BookView = ({ setLoading, loading }: IPageProps) => {
     }
   }, [ready]);
 
+  const goPrev = () => goToPage(currentPage - 1);
+  const goNext = () => goToPage(currentPage + 1);
+
   if (books) {
     if (params?.hash && params.hash in books)
       return (
         <>
+          <div
+            className={`${styles.border} ${styles.leftBorder}`}
+            onClick={goPrev}
+          />
           <div className={styles.content} ref={contentRef} />
           <div className={styles.pageContainer} ref={pageContainerRef}>
-            <div ref={pageRef} />
+            <div ref={pageRef} onClick={goNext} />
+          </div>
+          <div
+            className={`${styles.border} ${styles.rightBorder}`}
+            onClick={goNext}
+          />
+          <div className={styles.pageIndicator}>
+            <button className={styles.pageSwitchArrow} onClick={goPrev}>
+              {currentPage !== 0 && "←"}
+            </button>
+            <span>
+              {currentPage + 1} / {pagesNumber}
+            </span>
+            <button className={styles.pageSwitchArrow} onClick={goNext}>
+              {currentPage !== pagesNumber - 1 && "→"}
+            </button>
           </div>
         </>
       );