diff --git a/package-lock.json b/package-lock.json index a2aaa3b51..12f0161d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,7 +37,8 @@ "react-is": "18.2.0", "spatial-navigation-polyfill": "https://github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6", "stremio-translations": "https://github.com/Stremio/stremio-translations.git#92675658de92113c5888cf5e57003e468e8b8c9c", - "url": "0.11.0" + "url": "0.11.0", + "use-long-press": "^3.1.5" }, "devDependencies": { "@babel/core": "7.16.0", @@ -13664,6 +13665,14 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" }, + "node_modules/use-long-press": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/use-long-press/-/use-long-press-3.1.5.tgz", + "integrity": "sha512-bnwk2SlvLLpeJPkNYSGkc59q5YNV9V/fLDkSOAF2p7Xt0zw3iYHEmgEGkNYkK7zEIEyRFi5CczKsT7MN99UzVQ==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/use-sidecar": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz", @@ -25104,6 +25113,12 @@ } } }, + "use-long-press": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/use-long-press/-/use-long-press-3.1.5.tgz", + "integrity": "sha512-bnwk2SlvLLpeJPkNYSGkc59q5YNV9V/fLDkSOAF2p7Xt0zw3iYHEmgEGkNYkK7zEIEyRFi5CczKsT7MN99UzVQ==", + "requires": {} + }, "use-sidecar": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz", diff --git a/package.json b/package.json index 771453a81..a6b2a9a28 100755 --- a/package.json +++ b/package.json @@ -40,7 +40,8 @@ "react-is": "18.2.0", "spatial-navigation-polyfill": "https://github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6", "stremio-translations": "https://github.com/Stremio/stremio-translations.git#92675658de92113c5888cf5e57003e468e8b8c9c", - "url": "0.11.0" + "url": "0.11.0", + "use-long-press": "^3.1.5" }, "devDependencies": { "@babel/core": "7.16.0", diff --git a/src/common/Button/Button.js b/src/common/Button/Button.js index d2b69e138..4c103dae9 100644 --- a/src/common/Button/Button.js +++ b/src/common/Button/Button.js @@ -4,20 +4,10 @@ const React = require('react'); const PropTypes = require('prop-types'); const classnames = require('classnames'); const styles = require('./styles'); +const { useLongPress } = require('use-long-press'); const Button = React.forwardRef(({ className, href, disabled, children, onLongPress, ...props }, ref) => { - const longPressTimeout = React.useRef(null); - const onTouchStart = React.useCallback((event) => { - longPressTimeout.current = setTimeout(function () { - clearTimeout(longPressTimeout.current); - if (typeof onLongPress === 'function') { - onLongPress(event); - } - }, 500); - }, [onLongPress]); - const onTouchEnd = React.useCallback(() => { - clearTimeout(longPressTimeout.current); - }, []); + const longPress = useLongPress(onLongPress); const onKeyDown = React.useCallback((event) => { if (typeof props.onKeyDown === 'function') { props.onKeyDown(event); @@ -49,8 +39,7 @@ const Button = React.forwardRef(({ className, href, disabled, children, onLongPr href, onKeyDown, onMouseDown, - onTouchStart, - onTouchEnd, + ...longPress() }, children ); diff --git a/src/routes/MetaDetails/VideosList/Video/Video.js b/src/routes/MetaDetails/VideosList/Video/Video.js index eda0ca399..ef6dc42e8 100644 --- a/src/routes/MetaDetails/VideosList/Video/Video.js +++ b/src/routes/MetaDetails/VideosList/Video/Video.js @@ -31,8 +31,7 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w } }, [toggleMenu]); const popupLabelOnLongPress = React.useCallback((event) => { - if (!event.nativeEvent.togglePopupPrevented && !event.nativeEvent.ctrlKey) { - if (event.cancelable) event.preventDefault(); + if (!event.nativeEvent.togglePopupPrevented) { toggleMenu(); } }, [toggleMenu]);