From b1e73752da7b43e269ebaf554cdd7ba466c81586 Mon Sep 17 00:00:00 2001 From: adi Date: Sat, 12 Feb 2022 19:09:21 +0100 Subject: [PATCH 1/4] swipe gesture for next/prev --- ui/package.json | 3 ++- .../presentView/PresentNavigationOverlay.tsx | 14 ++++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) 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} + +
+ ) } From 56354d8ee7c683224e63fc674dee67edde6302c4 Mon Sep 17 00:00:00 2001 From: adi Date: Sat, 12 Feb 2022 19:17:21 +0100 Subject: [PATCH 2/4] remove development setting --- ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/package.json b/ui/package.json index 9719ed25..eb9f6cfb 100644 --- a/ui/package.json +++ b/ui/package.json @@ -59,7 +59,7 @@ }, "scripts": { "start": "BROWSER=none PORT=1234 craco start", - "build": "HOST_TYPE=dev craco build", + "build": "HOST_TYPE=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", From 259119cfdbd8d4d2ecc00ec713cc8f4f2ab001c4 Mon Sep 17 00:00:00 2001 From: adi Date: Sat, 12 Feb 2022 19:18:14 +0100 Subject: [PATCH 3/4] fix typo --- ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/package.json b/ui/package.json index eb9f6cfb..4aeddb2f 100644 --- a/ui/package.json +++ b/ui/package.json @@ -59,7 +59,7 @@ }, "scripts": { "start": "BROWSER=none PORT=1234 craco start", - "build": "HOST_TYPE=craco build", + "build": "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", From 0d106274d2e92a3d8c08e2f2775631ab8e6bbafa Mon Sep 17 00:00:00 2001 From: PJ-Watson <59647390+PJ-Watson@users.noreply.github.com> Date: Fri, 12 Aug 2022 07:00:05 +0100 Subject: [PATCH 4/4] Manual merge of changes from react-swipeable branch, update react-swipeable version --- ui/package-lock.json | 15 +++++++++++++++ ui/package.json | 2 +- .../presentView/PresentNavigationOverlay.tsx | 15 ++++++--------- 3 files changed, 22 insertions(+), 10 deletions(-) diff --git a/ui/package-lock.json b/ui/package-lock.json index e6aaa652..e1fa0d11 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -39,6 +39,7 @@ "react-i18next": "^11.18.0", "react-router-dom": "^6.3.0", "react-scripts": "^5.0.1", + "react-swipeable": "^7.0.0", "react-test-renderer": "^18.2.0", "styled-components": "^5.3.5", "subscriptions-transport-ws": "^0.11.0", @@ -20874,6 +20875,14 @@ "react": "^16.3.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-swipeable": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-7.0.0.tgz", + "integrity": "sha512-NI7KGfQ6gwNFN0Hor3vytYW3iRfMMaivGEuxcADOOfBCx/kqwXE8IfHFxEcxSUkxCYf38COLKYd9EMYZghqaUA==", + "peerDependencies": { + "react": "^16.8.3 || ^17 || ^18" + } + }, "node_modules/react-test-renderer": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.2.0.tgz", @@ -40414,6 +40423,12 @@ "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==", "requires": {} }, + "react-swipeable": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-7.0.0.tgz", + "integrity": "sha512-NI7KGfQ6gwNFN0Hor3vytYW3iRfMMaivGEuxcADOOfBCx/kqwXE8IfHFxEcxSUkxCYf38COLKYd9EMYZghqaUA==", + "requires": {} + }, "react-test-renderer": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.2.0.tgz", diff --git a/ui/package.json b/ui/package.json index 3d2dfb63..0134147d 100644 --- a/ui/package.json +++ b/ui/package.json @@ -49,7 +49,7 @@ "react-i18next": "^11.18.0", "react-router-dom": "^6.3.0", "react-scripts": "^5.0.1", - "react-swipeable": "^6.1.0", + "react-swipeable": "^7.0.0", "react-test-renderer": "^18.2.0", "styled-components": "^5.3.5", "subscriptions-transport-ws": "^0.11.0", diff --git a/ui/src/components/photoGallery/presentView/PresentNavigationOverlay.tsx b/ui/src/components/photoGallery/presentView/PresentNavigationOverlay.tsx index 25962690..3962cde3 100644 --- a/ui/src/components/photoGallery/presentView/PresentNavigationOverlay.tsx +++ b/ui/src/components/photoGallery/presentView/PresentNavigationOverlay.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components' import { debounce, DebouncedFn } from '../../../helpers/utils' import { closePresentModeAction, GalleryAction } from '../mediaGalleryReducer' -import { useSwipeable } from 'react-swipeable'; +import { useSwipeable } from 'react-swipeable' import ExitIcon from './icons/Exit' import NextIcon from './icons/Next' @@ -98,21 +98,19 @@ const PresentNavigationOverlay = ({ const handlers = useSwipeable({ onSwipedLeft: () => dispatchMedia({ type: 'nextImage' }), onSwipedRight: () => dispatchMedia({ type: 'previousImage' }), - preventDefaultTouchmoveEvent: false, - trackMouse: false - }); + preventScrollOnSwipe: false, + trackMouse: false, + }) return ( - { onMouseMove.current && onMouseMove.current() }} > -
+
{children} - -
+
- ) }