[Video] Hide mouse when inactive (#5094)
parent
0469ca6cb4
commit
f9d736653c
|
@ -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={{
|
||||||
|
|
Loading…
Reference in New Issue