diff --git a/ui/package.json b/ui/package.json index 5cf8801b..9719ed25 100644 --- a/ui/package.json +++ b/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", diff --git a/ui/src/components/photoGallery/presentView/PresentNavigationOverlay.tsx b/ui/src/components/photoGallery/presentView/PresentNavigationOverlay.tsx index d88ad5d9..4ee1f4b4 100644 --- a/ui/src/components/photoGallery/presentView/PresentNavigationOverlay.tsx +++ b/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 ( + { onMouseMove.current && onMouseMove.current() }} > +
{children} + +
+ ) }