diff --git a/package-lock.json b/package-lock.json index 0efe8cbf..904ec235 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "preact-router": "~4.1.0", "react-intersection-observer": "~9.4.1", "string-length": "~5.0.1", + "swiped-events": "~1.1.7", "toastify-js": "~1.12.0", "use-resize-observer": "~9.1.0", "valtio": "~1.8.0" @@ -5041,6 +5042,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/swiped-events": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/swiped-events/-/swiped-events-1.1.7.tgz", + "integrity": "sha512-bxEy7djwuLykZpPfoE4IFsbna/ngACEpyPqw9tBOaPQtAshsRK7H5CxoCgSXr0QRQ+7rd2TT3bSKLL3R6xJFwg==" + }, "node_modules/temp-dir": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz", @@ -9395,6 +9401,11 @@ "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", "devOptional": true }, + "swiped-events": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/swiped-events/-/swiped-events-1.1.7.tgz", + "integrity": "sha512-bxEy7djwuLykZpPfoE4IFsbna/ngACEpyPqw9tBOaPQtAshsRK7H5CxoCgSXr0QRQ+7rd2TT3bSKLL3R6xJFwg==" + }, "temp-dir": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz", diff --git a/package.json b/package.json index bf204b31..6cbdcb8a 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "preact-router": "~4.1.0", "react-intersection-observer": "~9.4.1", "string-length": "~5.0.1", + "swiped-events": "~1.1.7", "toastify-js": "~1.12.0", "use-resize-observer": "~9.1.0", "valtio": "~1.8.0" diff --git a/src/components/status.jsx b/src/components/status.jsx index 4fa862d6..b9ed83b4 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -10,6 +10,7 @@ import { useState, } from 'preact/hooks'; import { InView } from 'react-intersection-observer'; +import 'swiped-events'; import useResizeObserver from 'use-resize-observer'; import { useSnapshot } from 'valtio'; @@ -1270,10 +1271,25 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) { const [showControls, setShowControls] = useState(false); + useEffect(() => { + let handleSwipe = () => { + onClose(); + }; + if (carouselRef.current) { + carouselRef.current.addEventListener('swiped-down', handleSwipe); + } + return () => { + if (carouselRef.current) { + carouselRef.current.removeEventListener('swiped-down', handleSwipe); + } + }; + }, []); + return ( <>