Change theme color. Fix the control bar button.

frozar · Oct 5, 2021 · 5505adf · 5505adf
1 parent 5256be1
commit 5505adf
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 32 deletions.
diff --git a/pages/v.js b/pages/v.js
@@ -278,6 +278,10 @@ function ViewDetail() {
   const [loading, setLoading] = useState(true);
   const [displayFlashScreen, setDisplayFlashScreen] = useState(false);
 
+  // const setLoading = useCallback((val) => {
+  //   loading = val;
+  // });
+
   // Massive sanity check
   let history = useHistory();
   useEffect(() => {
@@ -360,6 +364,38 @@ function ViewDetail() {
     setDisplayResetButton(false);
   }, [set]);
 
+  const goPreviousLink = useCallback(() => {
+    // console.log("goPreviousLink BEGIN");
+    if (!isUndefinedOrNull(previousLink)) {
+      // console.log("goPreviousLink IN IF");
+      setIdChapter(previousIdChapter);
+      setIdScan(previousIdScan);
+      resetPanAndZoom();
+      window.history.replaceState(
+        { page: previousLink },
+        `Manga ${idManga} - ${previousIdChapter} ${previousIdScan}`,
+        previousLink
+      );
+    }
+    // console.log("goPreviousLink END");
+  }, [previousLink, previousIdChapter, previousIdScan]);
+
+  const goNextLink = useCallback(() => {
+    // console.log("goNextLink BEGIN");
+    if (!isUndefinedOrNull(nextLink)) {
+      // console.log("goNextLink IN IF");
+      setIdChapter(nextIdChapter);
+      setIdScan(nextIdScan);
+      resetPanAndZoom();
+      window.history.replaceState(
+        { page: nextLink },
+        `Manga ${idManga} - ${nextIdChapter} ${nextIdScan}`,
+        nextLink
+      );
+    }
+    // console.log("goNextLink END");
+  }, [nextLink, nextIdChapter, nextIdScan]);
+
   // Replace the URL without using the React 'history' object, in a hacky way :
   // https://stackoverflow.com/questions/824349/how-do-i-modify-the-url-without-reloading-the-page
   // The use of the React 'history' object will pass throught the React Router
@@ -368,15 +404,8 @@ function ViewDetail() {
     (evt) => {
       if (evt.key === "ArrowLeft") {
         if (!isUndefinedOrNull(previousLink)) {
-          setIdChapter(previousIdChapter);
-          setIdScan(previousIdScan);
-          resetPanAndZoom();
+          goPreviousLink();
           setLoading(true);
-          window.history.replaceState(
-            { page: previousLink },
-            `Manga ${idManga} - ${previousIdChapter} ${previousIdScan}`,
-            previousLink
-          );
         } else {
           setDisplayFlashScreen(true);
           setTimeout(() => {
@@ -385,15 +414,8 @@ function ViewDetail() {
         }
       } else if (evt.key === "ArrowRight") {
         if (!isUndefinedOrNull(nextLink)) {
-          setIdChapter(nextIdChapter);
-          setIdScan(nextIdScan);
-          resetPanAndZoom();
+          goNextLink();
           setLoading(true);
-          window.history.replaceState(
-            { page: nextLink },
-            `Manga ${idManga} - ${nextIdChapter} ${nextIdScan}`,
-            nextLink
-          );
         } else {
           setDisplayFlashScreen(true);
           setTimeout(() => {
@@ -553,6 +575,8 @@ function ViewDetail() {
           displayResetButton={displayResetButton}
           previousLink={previousLink}
           nextLink={nextLink}
+          goNextLink={goNextLink}
+          goPreviousLink={goPreviousLink}
         />
       </>
     );

diff --git a/src/scanViewer/ControlBar.js b/src/scanViewer/ControlBar.js
@@ -7,7 +7,9 @@ import KeyboardArrowLeftRoundedIcon from "@material-ui/icons/KeyboardArrowLeftRo
 import KeyboardArrowRightRoundedIcon from "@material-ui/icons/KeyboardArrowRightRounded";
 import RotateLeftRoundedIcon from "@material-ui/icons/RotateLeftRounded";
 
-import Link from "../Link";
+// import Link from "../Link";
+
+// import { Link } from "react-router-dom";
 
 function ControlButton(props) {
   const { onClick } = props;
@@ -34,13 +36,12 @@ function ControlButton(props) {
 
 export default function ControlBar(props) {
   const {
-    // setLoading,
-    // getPreviousImage,
-    // getNextImage,
     resetPanAndZoom,
     displayResetButton,
     previousLink,
     nextLink,
+    goNextLink,
+    goPreviousLink,
   } = props;
 
   return (
@@ -61,11 +62,13 @@ export default function ControlBar(props) {
     >
       <Grid item>
         {previousLink !== null && (
-          <Link href={previousLink}>
-            <ControlButton onClick={(_) => {}}>
-              <KeyboardArrowLeftRoundedIcon fontSize="large" />
-            </ControlButton>
-          </Link>
+          <ControlButton
+            onClick={() => {
+              goPreviousLink();
+            }}
+          >
+            <KeyboardArrowLeftRoundedIcon fontSize="large" />
+          </ControlButton>
         )}
       </Grid>
       <Grid
@@ -82,11 +85,13 @@ export default function ControlBar(props) {
       </Grid>
       <Grid item>
         {nextLink !== null && (
-          <Link href={nextLink}>
-            <ControlButton onClick={(_) => {}}>
-              <KeyboardArrowRightRoundedIcon fontSize="large" />
-            </ControlButton>
-          </Link>
+          <ControlButton
+            onClick={() => {
+              goNextLink();
+            }}
+          >
+            <KeyboardArrowRightRoundedIcon fontSize="large" />
+          </ControlButton>
         )}
       </Grid>
     </Grid>

diff --git a/src/scanViewer/DisplayImage.js b/src/scanViewer/DisplayImage.js
@@ -54,8 +54,16 @@ export default function DisplayImage(props) {
   }, [updateDisplayScroll, isMobile]);
 
   const imageLoaded = () => {
+    // console.log("imageLoaded");
     setLoading(false);
     updateDisplayScroll();
+    // const timeoutID = setInterval(() => {
+    //   console.log("setInterval loading", loading);
+    //   if (loading) {
+    //     setLoading(false);
+    //     clearTimeout(timeoutID);
+    //   }
+    // }, 1000);
   };
 
   useGesture(

diff --git a/src/theme.js b/src/theme.js
@@ -6,10 +6,12 @@ const lightGrey = "#BBC8D4";
 const defaultTheme = createMuiTheme({
   palette: {
     background: {
-      default: "#e3e8ed",
+      // default: "#e3e8ed",
+      default: "#0D2622",
     },
     primary: { main: "#e3e8ed" },
-    containerBackground: "white",
+    // containerBackground: "white",
+    containerBackground: "#e8ab30",
     cardBackground: lightGrey,
     dark: dark,
   },