Merge ImageCaption to ControlBar. Refactor link management.

frozar · Oct 12, 2021 · 4713b0c · 4713b0c
1 parent fb683de
commit 4713b0c
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 83 deletions.
diff --git a/pages/v.js b/pages/v.js
@@ -14,7 +14,6 @@ import { makeStyles } from "@material-ui/core/styles";
 import { getMangaChapters } from "../src/db";
 import TopBar from "../src/scanViewer/TopBar";
 import DisplayImage from "../src/scanViewer/DisplayImage";
-import ImageCaption from "../src/scanViewer/ImageCaption";
 import ControlBar from "../src/scanViewer/ControlBar";
 
 import titleCase from "../utils/titleCase";
@@ -258,6 +257,32 @@ function populateCacheImages(url) {
   }
 }
 
+function goToLink(
+  link,
+  idChapter,
+  idScan,
+  state,
+  setState,
+  setResetPanAndZoom,
+  setDisplayResetButton
+) {
+  if (!isUndefinedOrNull(link)) {
+    setState({
+      ...state,
+      idChapter: idChapter,
+      idScan: idScan,
+    });
+
+    setResetPanAndZoom(true);
+    setDisplayResetButton(false);
+    window.history.replaceState(
+      { page: link },
+      `Manga ${state.idManga} - ${idChapter} ${idScan}`,
+      link
+    );
+  }
+}
+
 function ViewDetail() {
   // Initially, retrieve input parameters from the route.
   const params = useParams();
@@ -364,35 +389,27 @@ function ViewDetail() {
   const [resetPanAndZoom, setResetPanAndZoom] = useState(false);
 
   const goPreviousLink = useCallback(() => {
-    if (!isUndefinedOrNull(previousLink)) {
-      setState({
-        ...state,
-        idChapter: previousIdChapter,
-        idScan: previousIdScan,
-      });
-
-      setResetPanAndZoom(true);
-      setDisplayResetButton(false);
-      window.history.replaceState(
-        { page: previousLink },
-        `Manga ${state.idManga} - ${previousIdChapter} ${previousIdScan}`,
-        previousLink
-      );
-    }
+    goToLink(
+      previousLink,
+      previousIdChapter,
+      previousIdScan,
+      state,
+      setState,
+      setResetPanAndZoom,
+      setDisplayResetButton
+    );
   }, [previousLink, previousIdChapter, previousIdScan]);
 
   const goNextLink = useCallback(() => {
-    if (!isUndefinedOrNull(nextLink)) {
-      setState({ ...state, idChapter: nextIdChapter, idScan: nextIdScan });
-
-      setResetPanAndZoom(true);
-      setDisplayResetButton(false);
-      window.history.replaceState(
-        { page: nextLink },
-        `Manga ${state.idManga} - ${nextIdChapter} ${nextIdScan}`,
-        nextLink
-      );
-    }
+    goToLink(
+      nextLink,
+      nextIdChapter,
+      nextIdScan,
+      state,
+      setState,
+      setResetPanAndZoom,
+      setDisplayResetButton
+    );
   }, [nextLink, nextIdChapter, nextIdScan]);
 
   // Replace the URL without using the React 'history' object, in a hacky way :
@@ -612,19 +629,18 @@ function ViewDetail() {
           loading={loading}
           setLoading={setLoading}
         />
-        <ImageCaption
-          displayResetButton={displayResetButton}
+        <ControlBar
           idScan={state.idScan}
           totalIdScan={imagesURL.length}
-        />
-        <ControlBar
-          resetPanAndZoom={resetPanAndZoom}
+          setResetPanAndZoom={setResetPanAndZoom}
           displayResetButton={displayResetButton}
+          setDisplayResetButton={setDisplayResetButton}
           previousLink={previousLink}
           nextLink={nextLink}
           goNextLink={goNextLink}
           goPreviousLink={goPreviousLink}
         />
+        <div style={{ marginBottom: "5em" }} />
       </>
     );
   }

diff --git a/src/scanViewer/ControlBar.js b/src/scanViewer/ControlBar.js
@@ -6,7 +6,7 @@ import Grid from "@material-ui/core/Grid";
 import KeyboardArrowLeftRoundedIcon from "@material-ui/icons/KeyboardArrowLeftRounded";
 import KeyboardArrowRightRoundedIcon from "@material-ui/icons/KeyboardArrowRightRounded";
 import RotateLeftRoundedIcon from "@material-ui/icons/RotateLeftRounded";
-
+import Typography from "@material-ui/core/Typography";
 // import Link from "../Link";
 
 // import { Link } from "react-router-dom";
@@ -36,8 +36,11 @@ function ControlButton(props) {
 
 export default function ControlBar(props) {
   const {
-    resetPanAndZoom,
+    idScan,
+    totalIdScan,
+    setResetPanAndZoom,
     displayResetButton,
+    setDisplayResetButton,
     previousLink,
     nextLink,
     goNextLink,
@@ -71,18 +74,37 @@ export default function ControlBar(props) {
           </ControlButton>
         )}
       </Grid>
-      <Grid
-        item
-        style={{ visibility: displayResetButton ? "inherit" : "hidden" }}
-      >
-        <ControlButton
-          onClick={(_) => {
-            resetPanAndZoom();
-          }}
-        >
-          <RotateLeftRoundedIcon fontSize="large" />
-        </ControlButton>
-      </Grid>
+      {displayResetButton ? (
+        <Grid item>
+          <ControlButton
+            onClick={() => {
+              setResetPanAndZoom(true);
+              setDisplayResetButton(false);
+            }}
+          >
+            <RotateLeftRoundedIcon fontSize="large" />
+          </ControlButton>
+        </Grid>
+      ) : (
+        <Grid item>
+          <Typography
+            variant="subtitle1"
+            style={{
+              color: "white",
+              textAlign: "end",
+              borderRadius: "100px",
+              borderColor: "rgb(255, 255, 255)",
+              borderWidth: "1px",
+              borderStyle: "groove",
+              fontSize: "0.7rem",
+              lineHeight: "1",
+              padding: "0.2rem 0.75rem",
+            }}
+          >
+            {`${Number(idScan) + 1} / ${totalIdScan}`}
+          </Typography>
+        </Grid>
+      )}
       <Grid item>
         {nextLink !== null && (
           <ControlButton

diff --git a/src/scanViewer/DisplayImage.js b/src/scanViewer/DisplayImage.js
@@ -42,7 +42,6 @@ export default function DisplayImage(props) {
   }));
 
   useEffect(() => {
-    console.log("resetPanAndZoom", resetPanAndZoom);
     if (resetPanAndZoom) {
       springApi({
         x: 0,

diff --git a/src/scanViewer/ImageCaption.js b/src/scanViewer/ImageCaption.js