Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 10:42:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

add onTouchStart to popup, to fix multiple menus

Browse source
This commit is contained in:
dexter21767-dev 2023-07-03 12:23:19 +01:00
parent d43a2ade4b
commit db2236dadd
4 changed files with 25 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/common/Button/styles.less
View file

@ -3,11 +3,19 @@
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
.button-container {
// IOS specific
// prevents showing the default context-menu when long pressing an anchor in safari.
-webkit-touch-callout: none !important;
// prevents user from selecting text from a div on long pressing in safari.
-webkit-user-select: none !important;
user-select: none !important;
outline-width: var(--focus-outline-size);
outline-color: @color-surface-light5;
outline-offset: calc(-1 * var(--focus-outline-size));
cursor: pointer;
&:focus {
outline-style: solid;
}

9
src/common/Popup/Popup.js
View file

@ -28,6 +28,9 @@ const Popup = ({ open, direction, renderLabel, renderMenu, dataset, onCloseReque
const menuOnMouseDown = React.useCallback((event) => {
event.nativeEvent.closePopupPrevented = true;
}, []);
const menuOnTouchStart = React.useCallback((event) => {
event.nativeEvent.closePopupPrevented = true;
}, []);
React.useEffect(() => {
const onCloseEvent = (event) => {
if (!event.closePopupPrevented && typeof onCloseRequest === 'function') {
@ -42,7 +45,7 @@ const Popup = ({ open, direction, renderLabel, renderMenu, dataset, onCloseReque
onCloseRequest(closeEvent);
}
break;
case 'mousedown':
case 'mousedown' || 'touchstart':
if (event.target !== document.documentElement && !labelRef.current.contains(event.target)) {
onCloseRequest(closeEvent);
}
@ -53,10 +56,12 @@ const Popup = ({ open, direction, renderLabel, renderMenu, dataset, onCloseReque
if (routeFocused && open) {
window.addEventListener('keydown', onCloseEvent);
window.addEventListener('mousedown', onCloseEvent);
window.addEventListener('touchstart', onCloseEvent);
}
return () => {
window.removeEventListener('keydown', onCloseEvent);
window.removeEventListener('mousedown', onCloseEvent);
window.removeEventListener('touchstart', onCloseEvent);
};
}, [routeFocused, open, onCloseRequest, dataset]);
React.useLayoutEffect(() => {
@ -104,7 +109,7 @@ const Popup = ({ open, direction, renderLabel, renderMenu, dataset, onCloseReque
ref: labelRef,
className: classnames(styles['label-container'], props.className, { 'active': open }),
children: open ?
<FocusLock ref={menuRef} className={classnames(styles['menu-container'], { [styles[`menu-direction-${autoDirection}`]]: !direction }, { [styles[`menu-direction-${direction}`]]: direction })} autoFocus={false} lockProps={{ onMouseDown: menuOnMouseDown }}>
<FocusLock ref={menuRef} className={classnames(styles['menu-container'], { [styles[`menu-direction-${autoDirection}`]]: !direction }, { [styles[`menu-direction-${direction}`]]: direction })} autoFocus={false} lockProps={{ onMouseDown: menuOnMouseDown, ontouchstart: menuOnTouchStart }}>
{renderMenu()}
</FocusLock>
:

11
src/routes/MetaDetails/VideosList/Video/Video.js
View file

@ -31,9 +31,14 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w
}
}, [toggleMenu]);
const popupLabelOnLongPress = React.useCallback((event) => {
event.preventDefault();
toggleMenu();
if (!event.nativeEvent.togglePopupPrevented && !event.nativeEvent.ctrlKey) {
event.preventDefault();
toggleMenu();
}
}, [toggleMenu]);
const popupMenuOnLongPress = React.useCallback((event) => {
event.nativeEvent.togglePopupPrevented = true;
}, []);
const popupMenuOnContextMenu = React.useCallback((event) => {
event.nativeEvent.togglePopupPrevented = true;
}, []);
@ -137,7 +142,7 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w
}, []);
const renderMenu = React.useMemo(() => function renderMenu() {
return (
<div className={styles['context-menu-content']} onContextMenu={popupMenuOnContextMenu} onClick={popupMenuOnClick}>
<div className={styles['context-menu-content']} onTouchStart={popupMenuOnLongPress} onContextMenu={popupMenuOnContextMenu} onClick={popupMenuOnClick}>
<Button className={styles['context-menu-option-container']} title={'Watch'}>
<div className={styles['context-menu-option-label']}>{t('CTX_WATCH')}</div>
</Button>

6
src/routes/MetaDetails/VideosList/Video/styles.less
View file

@ -12,11 +12,6 @@
}
.video-container {
// IOS specific
// prevents showing the default context-menu when long pressing an anchor in safari.
-webkit-touch-callout: none !important;
// prevents user from selecting text from a div on long pressing in safari.
-webkit-user-select: none!important;
display: flex;
flex-direction: row;
@ -33,6 +28,7 @@
flex: none;
.thumbnail {
pointer-events: none;
display: block;
width: 7.5rem;
height: 5rem;