forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[Video] Hide mouse when inactive (#5094)
authored by
Samuel Newman
and committed by
GitHub
f9d73665
0469ca6c
+33
-11
+33
-11
src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx
+33
-11
src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx
···
78
78
const setSubtitlesEnabled = useSetSubtitlesEnabled()
79
79
const {
80
80
state: hovered,
81
-
onIn: onMouseEnter,
82
-
onOut: onMouseLeave,
81
+
onIn: onHover,
82
+
onOut: onEndHover,
83
83
} = useInteractionState()
84
84
const [isFullscreen, toggleFullscreen] = useFullscreen(fullscreenRef)
85
85
const {state: hasFocus, onIn: onFocus, onOut: onBlur} = useInteractionState()
···
220
220
onSeek(clamp(currentTime + 5, 0, duration))
221
221
}, [onSeek, videoRef])
222
222
223
+
const [showCursor, setShowCursor] = useState(true)
224
+
const cursorTimeoutRef = useRef<ReturnType<typeof setTimeout>>()
225
+
const onPointerMoveEmptySpace = useCallback(() => {
226
+
setShowCursor(true)
227
+
if (cursorTimeoutRef.current) {
228
+
clearTimeout(cursorTimeoutRef.current)
229
+
}
230
+
cursorTimeoutRef.current = setTimeout(() => {
231
+
setShowCursor(false)
232
+
onEndHover()
233
+
}, 2000)
234
+
}, [onEndHover])
235
+
const onPointerLeaveEmptySpace = useCallback(() => {
236
+
setShowCursor(false)
237
+
if (cursorTimeoutRef.current) {
238
+
clearTimeout(cursorTimeoutRef.current)
239
+
}
240
+
}, [])
241
+
223
242
const showControls =
224
243
(focused && !playing) || (interactingViaKeypress ? hasFocus : hovered)
225
244
···
236
255
evt.stopPropagation()
237
256
setInteractingViaKeypress(false)
238
257
}}
239
-
onMouseEnter={onMouseEnter}
240
-
onMouseLeave={onMouseLeave}
258
+
onPointerEnter={onHover}
259
+
onPointerMove={onHover}
260
+
onPointerLeave={onEndHover}
241
261
onFocus={onFocus}
242
262
onBlur={onBlur}
243
263
onKeyDown={onKeyDown}>
244
264
<Pressable
245
265
accessibilityRole="button"
266
+
onPointerEnter={onPointerMoveEmptySpace}
267
+
onPointerMove={onPointerMoveEmptySpace}
268
+
onPointerLeave={onPointerLeaveEmptySpace}
246
269
accessibilityHint={_(
247
270
!focused
248
271
? msg`Unmute video`
···
250
273
? msg`Pause video`
251
274
: msg`Play video`,
252
275
)}
253
-
style={a.flex_1}
276
+
style={[a.flex_1, web({cursor: showCursor ? 'pointer' : 'none'})]}
254
277
onPress={onPressEmptySpace}
255
278
/>
256
-
{active && !showControls && !focused && duration > 0 && (
279
+
{!showControls && !focused && duration > 0 && (
257
280
<TimeIndicator time={Math.floor(duration - currentTime)} />
258
281
)}
259
282
<View
···
407
430
const [scrubberActive, setScrubberActive] = useState(false)
408
431
const {
409
432
state: hovered,
410
-
onIn: onMouseEnter,
411
-
onOut: onMouseLeave,
433
+
onIn: onStartHover,
434
+
onOut: onEndHover,
412
435
} = useInteractionState()
413
436
const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
414
437
const [seekPosition, setSeekPosition] = useState(0)
···
521
544
<View
522
545
testID="scrubber"
523
546
style={[{height: 10, width: '100%'}, a.flex_shrink_0, a.px_xs]}
524
-
// @ts-expect-error web only -sfn
525
-
onMouseEnter={onMouseEnter}
526
-
onMouseLeave={onMouseLeave}>
547
+
onPointerEnter={onStartHover}
548
+
onPointerLeave={onEndHover}>
527
549
<div
528
550
ref={barRef}
529
551
style={{