[Video] make hover state stick around if tapped (#5259)
parent
c22492147b
commit
fc25992070
|
@ -244,6 +244,39 @@ export function Controls({
|
||||||
}
|
}
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
// these are used to trigger the hover state. on mobile, the hover state
|
||||||
|
// should stick around for a bit after they tap, and if the controls aren't
|
||||||
|
// present this initial tab should *only* show the controls and not activate anything
|
||||||
|
|
||||||
|
const onPointerDown = useCallback(
|
||||||
|
(evt: React.PointerEvent<HTMLDivElement>) => {
|
||||||
|
if (evt.pointerType !== 'mouse' && !hovered) {
|
||||||
|
evt.preventDefault()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[hovered],
|
||||||
|
)
|
||||||
|
|
||||||
|
const timeoutRef = useRef<ReturnType<typeof setTimeout>>()
|
||||||
|
|
||||||
|
const onHoverWithTimeout = useCallback(() => {
|
||||||
|
onHover()
|
||||||
|
clearTimeout(timeoutRef.current)
|
||||||
|
}, [onHover])
|
||||||
|
|
||||||
|
const onEndHoverWithTimeout = useCallback(
|
||||||
|
(evt: React.PointerEvent<HTMLDivElement>) => {
|
||||||
|
// if touch, end after 3s
|
||||||
|
// if mouse, end immediately
|
||||||
|
if (evt.pointerType !== 'mouse') {
|
||||||
|
setTimeout(onEndHover, 3000)
|
||||||
|
} else {
|
||||||
|
onEndHover()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[onEndHover],
|
||||||
|
)
|
||||||
|
|
||||||
const showControls =
|
const showControls =
|
||||||
((focused || autoplayDisabled) && !playing) ||
|
((focused || autoplayDisabled) && !playing) ||
|
||||||
(interactingViaKeypress ? hasFocus : hovered)
|
(interactingViaKeypress ? hasFocus : hovered)
|
||||||
|
@ -261,9 +294,10 @@ export function Controls({
|
||||||
evt.stopPropagation()
|
evt.stopPropagation()
|
||||||
setInteractingViaKeypress(false)
|
setInteractingViaKeypress(false)
|
||||||
}}
|
}}
|
||||||
onPointerEnter={onHover}
|
onPointerEnter={onHoverWithTimeout}
|
||||||
onPointerMove={onHover}
|
onPointerMove={onHoverWithTimeout}
|
||||||
onPointerLeave={onEndHover}
|
onPointerLeave={onEndHoverWithTimeout}
|
||||||
|
onPointerDown={onPointerDown}
|
||||||
onFocus={onFocus}
|
onFocus={onFocus}
|
||||||
onBlur={onBlur}
|
onBlur={onBlur}
|
||||||
onKeyDown={onKeyDown}>
|
onKeyDown={onKeyDown}>
|
||||||
|
|
Loading…
Reference in New Issue