Inprove mobile navigation.

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

Hide file tree

Showing 2 changed files with 71 additions and 67 deletions.
diff --git a/pages/v.js b/pages/v.js
@@ -264,7 +264,10 @@ function goToLink(
   state,
   setState,
   setResetPanAndZoom,
-  setDisplayResetButton
+  setDisplayResetButton,
+  setLoading,
+  setDisplayFlashScreen,
+  duringFlashScreenAnimation
 ) {
   if (!isUndefinedOrNull(link)) {
     setState({
@@ -280,6 +283,13 @@ function goToLink(
       `Manga ${state.idManga} - ${idChapter} ${idScan}`,
       link
     );
+    setLoading(true);
+  } else {
+    setDisplayFlashScreen(true);
+    setResetPanAndZoom(true);
+    setTimeout(() => {
+      duringFlashScreenAnimation();
+    }, 0);
   }
 }
 
@@ -289,8 +299,6 @@ function ViewDetail() {
 
   const classes = useStyles();
 
-  const flashScreen = useRef(null);
-
   if (
     isUndefinedOrNull(params.idManga) ||
     isUndefinedOrNull(params.idChapter) ||
@@ -306,6 +314,8 @@ function ViewDetail() {
     idScan: null,
   });
 
+  const flashScreen = useRef(null);
+
   const [loading, setLoading] = useState(true);
   const [displayFlashScreen, setDisplayFlashScreen] = useState(false);
 
@@ -396,7 +406,10 @@ function ViewDetail() {
       state,
       setState,
       setResetPanAndZoom,
-      setDisplayResetButton
+      setDisplayResetButton,
+      setLoading,
+      setDisplayFlashScreen,
+      duringFlashScreenAnimation
     );
   }, [previousLink, previousIdChapter, previousIdScan]);
 
@@ -408,7 +421,10 @@ function ViewDetail() {
       state,
       setState,
       setResetPanAndZoom,
-      setDisplayResetButton
+      setDisplayResetButton,
+      setLoading,
+      setDisplayFlashScreen,
+      duringFlashScreenAnimation
     );
   }, [nextLink, nextIdChapter, nextIdScan]);
 
@@ -419,25 +435,9 @@ function ViewDetail() {
   const handleKeyDown = useCallback(
     (evt) => {
       if (evt.key === "ArrowLeft") {
-        if (!isUndefinedOrNull(previousLink)) {
-          goPreviousLink();
-          setLoading(true);
-        } else {
-          setDisplayFlashScreen(true);
-          setTimeout(() => {
-            duringFlashScreenAnimation();
-          }, 0);
-        }
+        goPreviousLink();
       } else if (evt.key === "ArrowRight") {
-        if (!isUndefinedOrNull(nextLink)) {
-          goNextLink();
-          setLoading(true);
-        } else {
-          setDisplayFlashScreen(true);
-          setTimeout(() => {
-            duringFlashScreenAnimation();
-          }, 0);
-        }
+        goNextLink();
       } else if (evt.key === "f") {
         if (!document.fullscreenElement) {
           document.documentElement.requestFullscreen();
@@ -463,18 +463,20 @@ function ViewDetail() {
     };
   }, [handleKeyDown]);
 
-  const goScanAddress = useCallback((idManga_, idChapter_, idScan_) => {
-    // setIdChapter(idChapter_);
-    // setIdScan(idScan_);
-    setState({ ...state, idChapter: idChapter_, idScan: idScan_ });
-    resetPanAndZoom();
-    const newLink = computeLink(idManga_, idChapter_, idScan_);
-    window.history.replaceState(
-      { page: newLink },
-      `Manga ${idManga_} - ${idChapter_} ${idScan_}`,
-      newLink
-    );
-  }, []);
+  const goScanAddress = useCallback(
+    (idManga_, idChapter_, idScan_) => {
+      setState({ ...state, idChapter: idChapter_, idScan: idScan_ });
+      setResetPanAndZoom(true);
+      setDisplayResetButton(false);
+      const newLink = computeLink(idManga_, idChapter_, idScan_);
+      window.history.replaceState(
+        { page: newLink },
+        `Manga ${idManga_} - ${idChapter_} ${idScan_}`,
+        newLink
+      );
+    },
+    [state]
+  );
 
   const duringFlashScreenAnimation = () => {
     const flashScreenRef = flashScreen.current;
@@ -628,6 +630,8 @@ function ViewDetail() {
           setResetPanAndZoom={setResetPanAndZoom}
           loading={loading}
           setLoading={setLoading}
+          goPreviousLink={goPreviousLink}
+          goNextLink={goNextLink}
         />
         <ControlBar
           idScan={state.idScan}
@@ -645,29 +649,3 @@ function ViewDetail() {
     );
   }
 }
-
-{
-  /* <div style={{ color: "white" }}>
-  <h3>
-    ID: params {params.idManga} {params.idChapter} {params.idScan}
-  </h3>
-  <h3>
-    ID: local variable {idManga} {idChapter} {idScan}
-  </h3>
-  <h3>previousLink: {previousLink}</h3>
-  <h3>nextLink: {nextLink}</h3>
-  <h3>
-    imagesURL:
-    <ul>
-      {imagesURL.map((url) => {
-        return <li key={url}>{url}</li>;
-      })}
-    </ul>
-  </h3>
-  <h3>imageURL: {imageURL}</h3>
-  <h3>previousIdChapter: {previousIdChapter}</h3>
-  <h3>previousIdScan: {previousIdScan}</h3>
-  <h3>nextIdChapter: {nextIdChapter}</h3>
-  <h3>nextIdScan: {nextIdScan}</h3>
-</div> */
-}
diff --git a/src/scanViewer/DisplayImage.js b/src/scanViewer/DisplayImage.js
@@ -29,6 +29,8 @@ export default function DisplayImage(props) {
     setResetPanAndZoom,
     loading,
     setLoading,
+    goPreviousLink,
+    goNextLink,
   } = props;
 
   const domTarget = useRef(null);
@@ -54,7 +56,6 @@ export default function DisplayImage(props) {
 
   useEffect(() => {
     if (isMobileFunc(navigator.userAgent || navigator.vendor || window.opera)) {
-      // setMobileHeight("73vh");
       setIsMobile(true);
     }
   }, []);
@@ -81,10 +82,32 @@ export default function DisplayImage(props) {
 
   useGesture(
     {
-      onDrag: ({ movement: [mx, my], down }) => {
+      onDrag: ({
+        // displacement between offset and lastOffset
+        movement: [mx, my],
+        // true when a mouse button or touch is down
+        down,
+        // [swipeX, swipeY] 0 if no swipe detected, -1 or 1 otherwise
+        swipe: [swipeX],
+        // // is the drag assimilated to a tap
+        // tap,
+      }) => {
         if (down) {
-          springApi.start({ x: mx, y: my });
-          setDisplayResetButton(true);
+          if (swipeX !== 0) {
+            if (swipeX > 0) {
+              if (zoom.get() === 1) {
+                goPreviousLink();
+              }
+            }
+            if (swipeX < 0) {
+              if (zoom.get() === 1) {
+                goNextLink();
+              }
+            }
+          } else {
+            springApi.start({ x: mx, y: my });
+            setDisplayResetButton(true);
+          }
         }
       },
       onPinch: ({
@@ -128,10 +151,13 @@ export default function DisplayImage(props) {
           left: -600,
           right: 600,
           top: -800,
-          // bottom: bottomLimit * factor,
           bottom: 800,
+          // left: 0,
+          // right: 0,
+          // top: 0,
+          // bottom: 0,
         },
-        // rubberband: true,
+        rubberband: true,
         // swipeDistance: 20,
         // swipeVelocity: 0.01,
         // swipeDuration: 1000,