[Video] Hide mouse when inactive (#5094)

zio/stable
Samuel Newman 2024-09-03 11:51:16 +01:00 committed by GitHub
parent 0469ca6cb4
commit f9d736653c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 33 additions and 11 deletions

View File

@ -78,8 +78,8 @@ export function Controls({
const setSubtitlesEnabled = useSetSubtitlesEnabled() const setSubtitlesEnabled = useSetSubtitlesEnabled()
const { const {
state: hovered, state: hovered,
onIn: onMouseEnter, onIn: onHover,
onOut: onMouseLeave, onOut: onEndHover,
} = useInteractionState() } = useInteractionState()
const [isFullscreen, toggleFullscreen] = useFullscreen(fullscreenRef) const [isFullscreen, toggleFullscreen] = useFullscreen(fullscreenRef)
const {state: hasFocus, onIn: onFocus, onOut: onBlur} = useInteractionState() const {state: hasFocus, onIn: onFocus, onOut: onBlur} = useInteractionState()
@ -220,6 +220,25 @@ export function Controls({
onSeek(clamp(currentTime + 5, 0, duration)) onSeek(clamp(currentTime + 5, 0, duration))
}, [onSeek, videoRef]) }, [onSeek, videoRef])
const [showCursor, setShowCursor] = useState(true)
const cursorTimeoutRef = useRef<ReturnType<typeof setTimeout>>()
const onPointerMoveEmptySpace = useCallback(() => {
setShowCursor(true)
if (cursorTimeoutRef.current) {
clearTimeout(cursorTimeoutRef.current)
}
cursorTimeoutRef.current = setTimeout(() => {
setShowCursor(false)
onEndHover()
}, 2000)
}, [onEndHover])
const onPointerLeaveEmptySpace = useCallback(() => {
setShowCursor(false)
if (cursorTimeoutRef.current) {
clearTimeout(cursorTimeoutRef.current)
}
}, [])
const showControls = const showControls =
(focused && !playing) || (interactingViaKeypress ? hasFocus : hovered) (focused && !playing) || (interactingViaKeypress ? hasFocus : hovered)
@ -236,13 +255,17 @@ export function Controls({
evt.stopPropagation() evt.stopPropagation()
setInteractingViaKeypress(false) setInteractingViaKeypress(false)
}} }}
onMouseEnter={onMouseEnter} onPointerEnter={onHover}
onMouseLeave={onMouseLeave} onPointerMove={onHover}
onPointerLeave={onEndHover}
onFocus={onFocus} onFocus={onFocus}
onBlur={onBlur} onBlur={onBlur}
onKeyDown={onKeyDown}> onKeyDown={onKeyDown}>
<Pressable <Pressable
accessibilityRole="button" accessibilityRole="button"
onPointerEnter={onPointerMoveEmptySpace}
onPointerMove={onPointerMoveEmptySpace}
onPointerLeave={onPointerLeaveEmptySpace}
accessibilityHint={_( accessibilityHint={_(
!focused !focused
? msg`Unmute video` ? msg`Unmute video`
@ -250,10 +273,10 @@ export function Controls({
? msg`Pause video` ? msg`Pause video`
: msg`Play video`, : msg`Play video`,
)} )}
style={a.flex_1} style={[a.flex_1, web({cursor: showCursor ? 'pointer' : 'none'})]}
onPress={onPressEmptySpace} onPress={onPressEmptySpace}
/> />
{active && !showControls && !focused && duration > 0 && ( {!showControls && !focused && duration > 0 && (
<TimeIndicator time={Math.floor(duration - currentTime)} /> <TimeIndicator time={Math.floor(duration - currentTime)} />
)} )}
<View <View
@ -407,8 +430,8 @@ function Scrubber({
const [scrubberActive, setScrubberActive] = useState(false) const [scrubberActive, setScrubberActive] = useState(false)
const { const {
state: hovered, state: hovered,
onIn: onMouseEnter, onIn: onStartHover,
onOut: onMouseLeave, onOut: onEndHover,
} = useInteractionState() } = useInteractionState()
const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState() const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
const [seekPosition, setSeekPosition] = useState(0) const [seekPosition, setSeekPosition] = useState(0)
@ -521,9 +544,8 @@ function Scrubber({
<View <View
testID="scrubber" testID="scrubber"
style={[{height: 10, width: '100%'}, a.flex_shrink_0, a.px_xs]} style={[{height: 10, width: '100%'}, a.flex_shrink_0, a.px_xs]}
// @ts-expect-error web only -sfn onPointerEnter={onStartHover}
onMouseEnter={onMouseEnter} onPointerLeave={onEndHover}>
onMouseLeave={onMouseLeave}>
<div <div
ref={barRef} ref={barRef}
style={{ style={{