swipe gesture for next/prev

ui/package.json

@@ -54,11 +54,12 @@
     "tailwind-override": "^0.6.1",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
     "typescript": "^4.5.5",
+	"react-swipeable": "^6.1.0",
     "url-join": "^4.0.1"
   },
   "scripts": {
     "start": "BROWSER=none PORT=1234 craco start",
-    "build": "craco build",
+    "build": "HOST_TYPE=dev craco build",
     "test": "npm run lint && npm run jest -- --watchAll=false",
     "test:ci": "npm run lint && npm run jest:ci",
     "lint": "npm run lint:types & npm run lint:eslint",

ui/src/components/photoGallery/presentView/PresentNavigationOverlay.tsx

@@ -3,6 +3,8 @@ import styled from 'styled-components'
 import { debounce, DebouncedFn } from '../../../helpers/utils'
 import { closePresentModeAction, GalleryAction } from '../photoGalleryReducer'
 
+import { useSwipeable } from 'react-swipeable';
+
 import ExitIcon from './icons/Exit'
 import NextIcon from './icons/Next'
 import PrevIcon from './icons/Previous'
@@ -93,14 +95,24 @@ const PresentNavigationOverlay = ({
     }
   }, [])
 
+  const handlers = useSwipeable({
+    onSwipedLeft: () => dispatchMedia({ type: 'nextImage' }),
+    onSwipedRight: () => dispatchMedia({ type: 'previousImage' }),
+    preventDefaultTouchmoveEvent: false,
+    trackMouse: false
+  });
+
   return (
+  
     <StyledOverlayContainer
       data-testid="present-overlay"
       onMouseMove={() => {
         onMouseMove.current && onMouseMove.current()
       }}
     >
+	  <div {...handlers} >
       {children}
+	  
       <NavigationButton
         aria-label="Previous image"
         className={hide ? 'hide' : undefined}
@@ -130,7 +142,9 @@ const PresentNavigationOverlay = ({
       >
         <ExitIcon />
       </ExitButton>
+	  </div>
     </StyledOverlayContainer>
+	
   )
 }