From 5a7c3f0a9de05baac78135667cacdc6a7c96b20b Mon Sep 17 00:00:00 2001 From: Tim Date: Tue, 18 Jul 2023 22:45:52 +0200 Subject: [PATCH 1/8] fix(Video): context menu was not working on Firefox --- src/routes/MetaDetails/VideosList/Video/Video.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/routes/MetaDetails/VideosList/Video/Video.js b/src/routes/MetaDetails/VideosList/Video/Video.js index 6ce900537..a8092790a 100644 --- a/src/routes/MetaDetails/VideosList/Video/Video.js +++ b/src/routes/MetaDetails/VideosList/Video/Video.js @@ -24,13 +24,6 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w const popupLabelOnContextMenu = React.useCallback((event) => { if (!event.nativeEvent.togglePopupPrevented && !event.nativeEvent.ctrlKey) { event.preventDefault(); - if (event.nativeEvent.pointerType === 'mouse') { - toggleMenu(); - } - } - }, [toggleMenu]); - const popupLabelOnLongPress = React.useCallback((event) => { - if (event.nativeEvent.pointerType !== 'mouse' && !event.nativeEvent.togglePopupPrevented) { toggleMenu(); } }, [toggleMenu]); @@ -173,7 +166,6 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w href={href} {...props} onClick={popupLabelOnClick} - onLongPress={popupLabelOnLongPress} onContextMenu={popupLabelOnContextMenu} open={menuOpen} onCloseRequest={closeMenu} From 0201627a43d1f4ff34af01d9bb0b0afa1c289257 Mon Sep 17 00:00:00 2001 From: dexter21767-dev Date: Wed, 19 Jul 2023 15:26:31 +0100 Subject: [PATCH 2/8] use event.nativeEvent.button to detect right click --- src/routes/MetaDetails/VideosList/Video/Video.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/routes/MetaDetails/VideosList/Video/Video.js b/src/routes/MetaDetails/VideosList/Video/Video.js index a8092790a..7df1ec26a 100644 --- a/src/routes/MetaDetails/VideosList/Video/Video.js +++ b/src/routes/MetaDetails/VideosList/Video/Video.js @@ -24,6 +24,13 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w const popupLabelOnContextMenu = React.useCallback((event) => { if (!event.nativeEvent.togglePopupPrevented && !event.nativeEvent.ctrlKey) { event.preventDefault(); + if (event.nativeEvent.pointerType === 'mouse' || event.nativeEvent.button === 2) { + toggleMenu(); + } + } + }, [toggleMenu]); + const popupLabelOnLongPress = React.useCallback((event) => { + if (event.nativeEvent.pointerType !== 'mouse' && !event.nativeEvent.togglePopupPrevented) { toggleMenu(); } }, [toggleMenu]); @@ -167,6 +174,7 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w {...props} onClick={popupLabelOnClick} onContextMenu={popupLabelOnContextMenu} + onLongPress={popupLabelOnLongPress} open={menuOpen} onCloseRequest={closeMenu} renderLabel={renderLabel} From b9f45b33927d7a5fa0ed03681cb8a60b5701b694 Mon Sep 17 00:00:00 2001 From: unclekingpin Date: Wed, 19 Jul 2023 08:19:47 -0700 Subject: [PATCH 3/8] Empty-Commit From 61a8088a89a8e4a8c9b6d77ec2935416b2c642c1 Mon Sep 17 00:00:00 2001 From: dexter21767-dev Date: Thu, 20 Jul 2023 13:42:00 +0100 Subject: [PATCH 4/8] fix contextMenu trigger for mobile devices --- src/routes/MetaDetails/VideosList/Video/Video.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/routes/MetaDetails/VideosList/Video/Video.js b/src/routes/MetaDetails/VideosList/Video/Video.js index 7df1ec26a..27338d404 100644 --- a/src/routes/MetaDetails/VideosList/Video/Video.js +++ b/src/routes/MetaDetails/VideosList/Video/Video.js @@ -24,7 +24,7 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w const popupLabelOnContextMenu = React.useCallback((event) => { if (!event.nativeEvent.togglePopupPrevented && !event.nativeEvent.ctrlKey) { event.preventDefault(); - if (event.nativeEvent.pointerType === 'mouse' || event.nativeEvent.button === 2) { + if (event.nativeEvent.pointerType === 'mouse' || (event.nativeEvent.button === 2 && event.nativeEvent.button === 0)) { toggleMenu(); } } @@ -173,6 +173,7 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w href={href} {...props} onClick={popupLabelOnClick} + onLongPress={popupLabelOnLongPress} onContextMenu={popupLabelOnContextMenu} onLongPress={popupLabelOnLongPress} open={menuOpen} From d25db6ebde8334dc6acbe113795301d35ae8ed95 Mon Sep 17 00:00:00 2001 From: dexter21767-dev Date: Thu, 20 Jul 2023 14:04:26 +0100 Subject: [PATCH 5/8] disable pointer events for background images --- src/routes/MetaDetails/styles.less | 1 + 1 file changed, 1 insertion(+) diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less index db51e4a2d..a906c7a99 100644 --- a/src/routes/MetaDetails/styles.less +++ b/src/routes/MetaDetails/styles.less @@ -57,6 +57,7 @@ } .background-image { + pointer-events: none; display: block; width: 100%; height: 100%; From 903715fb244aced20e16edf97a6d53bd83cf3298 Mon Sep 17 00:00:00 2001 From: dexter21767-dev Date: Thu, 20 Jul 2023 14:32:21 +0100 Subject: [PATCH 6/8] fix typo --- src/routes/MetaDetails/VideosList/Video/Video.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/MetaDetails/VideosList/Video/Video.js b/src/routes/MetaDetails/VideosList/Video/Video.js index 27338d404..8006ed132 100644 --- a/src/routes/MetaDetails/VideosList/Video/Video.js +++ b/src/routes/MetaDetails/VideosList/Video/Video.js @@ -24,7 +24,7 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w const popupLabelOnContextMenu = React.useCallback((event) => { if (!event.nativeEvent.togglePopupPrevented && !event.nativeEvent.ctrlKey) { event.preventDefault(); - if (event.nativeEvent.pointerType === 'mouse' || (event.nativeEvent.button === 2 && event.nativeEvent.button === 0)) { + if (event.nativeEvent.pointerType === 'mouse' || (event.nativeEvent.button === 2 && event.nativeEvent.buttons === 0)) { toggleMenu(); } } From 02879d369fa48e9cfb4aea237c7fe653ed7d3ce4 Mon Sep 17 00:00:00 2001 From: dexter21767-dev Date: Thu, 20 Jul 2023 14:34:59 +0100 Subject: [PATCH 7/8] fix duplicate on longpress --- src/routes/MetaDetails/VideosList/Video/Video.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/routes/MetaDetails/VideosList/Video/Video.js b/src/routes/MetaDetails/VideosList/Video/Video.js index 8006ed132..62abb78bf 100644 --- a/src/routes/MetaDetails/VideosList/Video/Video.js +++ b/src/routes/MetaDetails/VideosList/Video/Video.js @@ -175,7 +175,6 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w onClick={popupLabelOnClick} onLongPress={popupLabelOnLongPress} onContextMenu={popupLabelOnContextMenu} - onLongPress={popupLabelOnLongPress} open={menuOpen} onCloseRequest={closeMenu} renderLabel={renderLabel} From 32caea1b9ec592aa69bb12715d33fe7666c32b9c Mon Sep 17 00:00:00 2001 From: Tim Date: Fri, 21 Jul 2023 01:56:06 +0200 Subject: [PATCH 8/8] fix(Video): issue on firefox desktop linux --- src/routes/MetaDetails/VideosList/Video/Video.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/routes/MetaDetails/VideosList/Video/Video.js b/src/routes/MetaDetails/VideosList/Video/Video.js index 62abb78bf..fd252d5ce 100644 --- a/src/routes/MetaDetails/VideosList/Video/Video.js +++ b/src/routes/MetaDetails/VideosList/Video/Video.js @@ -15,18 +15,17 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w const { core } = useServices(); const routeFocused = useRouteFocused(); const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false); - const popupLabelOnClick = React.useCallback((event) => { - if (!event.nativeEvent.togglePopupPrevented && event.nativeEvent.ctrlKey) { - event.preventDefault(); - toggleMenu(); + const popupLabelOnMouseUp = React.useCallback((event) => { + if (!event.nativeEvent.togglePopupPrevented) { + if (event.nativeEvent.ctrlKey || event.nativeEvent.button === 2) { + event.preventDefault(); + toggleMenu(); + } } }, []); const popupLabelOnContextMenu = React.useCallback((event) => { if (!event.nativeEvent.togglePopupPrevented && !event.nativeEvent.ctrlKey) { event.preventDefault(); - if (event.nativeEvent.pointerType === 'mouse' || (event.nativeEvent.button === 2 && event.nativeEvent.buttons === 0)) { - toggleMenu(); - } } }, [toggleMenu]); const popupLabelOnLongPress = React.useCallback((event) => { @@ -172,7 +171,7 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w scheduled={scheduled} href={href} {...props} - onClick={popupLabelOnClick} + onMouseUp={popupLabelOnMouseUp} onLongPress={popupLabelOnLongPress} onContextMenu={popupLabelOnContextMenu} open={menuOpen}