fixing arrows in the carousel

components/carousel.js

@@ -6,27 +6,43 @@ import styles from './carousel.module.css'
 import { useShowModal } from './modal'
 import { Dropdown } from 'react-bootstrap'
 
-function useSwiping ({ moveLeft, moveRight }) {
-  const [touchStartX, setTouchStartX] = useState(null)
+function useAutoFade (initialDelay = 2000) {
+  const [isActive, setIsActive] = useState(true)
+  const timerRef = useRef()
+  const bumpActivity = useCallback(() => {
+    setIsActive(true)
+    if (timerRef.current) clearTimeout(timerRef.current)
+    timerRef.current = setTimeout(() => setIsActive(false), initialDelay)
+  }, [initialDelay])
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    }
+  }, [])
+  return { isActive, bumpActivity }
+}
 
+function useSwiping ({ moveLeft, moveRight, bumpActivity }) {
+  const [touchStartX, setTouchStartX] = useState(null)
   const onTouchStart = useCallback((e) => {
     if (e.touches.length === 1) {
       setTouchStartX(e.touches[0].clientX)
     }
   }, [])
-
   const onTouchEnd = useCallback((e) => {
     if (touchStartX !== null) {
       const touchEndX = e.changedTouches[0].clientX
       const diff = touchEndX - touchStartX
       if (diff > 50) {
         moveLeft()
+        bumpActivity?.()
       } else if (diff < -50) {
         moveRight()
+        bumpActivity?.()
       }
       setTouchStartX(null)
     }
-  }, [touchStartX, moveLeft, moveRight])
+  }, [touchStartX, moveLeft, moveRight, bumpActivity])
 
   useEffect(() => {
     document.addEventListener('touchstart', onTouchStart)
@@ -38,34 +54,67 @@ function useSwiping ({ moveLeft, moveRight }) {
   }, [onTouchStart, onTouchEnd])
 }
 
-function useArrowKeys ({ moveLeft, moveRight }) {
+function useArrowKeys ({ moveLeft, moveRight, bumpActivity }) {
   const onKeyDown = useCallback((e) => {
     if (e.key === 'ArrowLeft') {
       moveLeft()
+      bumpActivity?.()
     } else if (e.key === 'ArrowRight') {
       moveRight()
+      bumpActivity?.()
     }
-  }, [moveLeft, moveRight])
+  }, [moveLeft, moveRight, bumpActivity])
 
   useEffect(() => {
     document.addEventListener('keydown', onKeyDown)
     return () => document.removeEventListener('keydown', onKeyDown)
   }, [onKeyDown])
 }
+function CarouselArrow ({ direction, onClick, disabled, onActivity }) {
+  const { isActive, bumpActivity } = useAutoFade(2000)
+  useEffect(() => {
+    onActivity?.(bumpActivity)
+  }, [onActivity, bumpActivity])
+  const handleClick = (e) => {
+    e.stopPropagation()
+    bumpActivity()
+    onClick?.()
+  }
+  return (
+    <div
+      className={classNames(
+        styles.fullScreenNav,
+        isActive ? styles.navActive : styles.navIdle,
+        disabled && 'invisible',
+        styles[direction]
+      )}
+      onClick={handleClick}
+    >
+      {direction === 'left' ? <ArrowLeft width={34} height={34} /> : <ArrowRight width={34} height={34} />}
+    </div>
+  )
+}
 
 function Carousel ({ close, mediaArr, src, setOptions }) {
   const [index, setIndex] = useState(mediaArr.findIndex(([key]) => key === src))
   const [currentSrc, canGoLeft, canGoRight] = useMemo(() => {
     if (index === -1) return [src, false, false]
     return [mediaArr[index][0], index > 0, index < mediaArr.length - 1]
   }, [src, mediaArr, index])
+  const leftArrowActivityRef = useRef()
+  const rightArrowActivityRef = useRef()
+  const bumpAllArrows = useCallback(() => {
+    leftArrowActivityRef.current?.()
+    rightArrowActivityRef.current?.()
+  }, [])
 
   useEffect(() => {
     if (index === -1) return
     setOptions({
       overflow: <CarouselOverflow {...mediaArr[index][1]} />
     })
-  }, [index, mediaArr, setOptions])
+    bumpAllArrows()
+  }, [index, mediaArr, setOptions, bumpAllArrows])
 
   const moveLeft = useCallback(() => {
     setIndex(i => Math.max(0, i - 1))
@@ -75,31 +124,25 @@ function Carousel ({ close, mediaArr, src, setOptions }) {
     setIndex(i => Math.min(mediaArr.length - 1, i + 1))
   }, [setIndex, mediaArr.length])
 
-  useSwiping({ moveLeft, moveRight })
-  useArrowKeys({ moveLeft, moveRight })
+  useSwiping({ moveLeft, moveRight, bumpActivity: bumpAllArrows })
+  useArrowKeys({ moveLeft, moveRight, bumpActivity: bumpAllArrows })
 
   return (
-    <div className={styles.fullScreenContainer} onClick={close}>
+    <div className={styles.fullScreenContainer} onClick={close} onMouseMove={bumpAllArrows} onTouchStart={bumpAllArrows}>
       <img className={styles.fullScreen} src={currentSrc} />
       <div className={styles.fullScreenNavContainer}>
-        <div
-          className={classNames(styles.fullScreenNav, !canGoLeft && 'invisible', styles.left)}
-          onClick={(e) => {
-            e.stopPropagation()
-            moveLeft()
-          }}
-        >
-          <ArrowLeft width={34} height={34} />
-        </div>
-        <div
-          className={classNames(styles.fullScreenNav, !canGoRight && 'invisible', styles.right)}
-          onClick={(e) => {
-            e.stopPropagation()
-            moveRight()
-          }}
-        >
-          <ArrowRight width={34} height={34} />
-        </div>
+        <CarouselArrow
+          direction='left'
+          onClick={moveLeft}
+          disabled={!canGoLeft}
+          onActivity={(bumpFn) => { leftArrowActivityRef.current = bumpFn }}
+        />
+        <CarouselArrow
+          direction='right'
+          onClick={moveRight}
+          disabled={!canGoRight}
+          onActivity={(bumpFn) => { rightArrowActivityRef.current = bumpFn }}
+        />
       </div>
     </div>
   )

components/carousel.module.css

@@ -30,8 +30,16 @@ img.fullScreen {
     height: 100%;
 }
 
-div.fullScreenNav:hover > svg {
-    background-color: rgba(0, 0, 0, .5);
+div.fullScreenNav.navActive > svg {
+  background-color: rgba(0,0,0,0.60);
+  fill: rgba(255,255,255,0.95);
+  opacity: 1;
+}
+
+div.fullScreenNav.navIdle > svg {
+  background-color: rgba(0,0,0,0.28);
+  fill: rgba(255,255,255,0.75);
+  opacity: 0.85;
 }
 
 div.fullScreenNav  {
@@ -41,6 +49,8 @@ div.fullScreenNav  {
     height: 72px;
     display: flex;
     align-items: center;
+    opacity: 0.75;
+    transition: opacity 0.2s;
 }
 
 div.fullScreenNav.left {
@@ -53,11 +63,11 @@ div.fullScreenNav.right {
 
 div.fullScreenNav > svg {
     border-radius: 50%;
-    backdrop-filter: blur(4px);
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: rgba(0, 0, 0, 0.25);
     fill: white;
+    transition: background-color 0.2s, fill 0.2s;
     max-height: 34px;
     max-width: 34px;
     padding: 0.35rem;
     margin: .75rem;
-}
+}