robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[Video] Hide mouse when inactive (#5094)
samuel.fm
+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
const setSubtitlesEnabled = useSetSubtitlesEnabled()
79
const {
80
state: hovered,
81
-
onIn: onMouseEnter,
82
-
onOut: onMouseLeave,
83
} = useInteractionState()
84
const [isFullscreen, toggleFullscreen] = useFullscreen(fullscreenRef)
85
const {state: hasFocus, onIn: onFocus, onOut: onBlur} = useInteractionState()
···
220
onSeek(clamp(currentTime + 5, 0, duration))
221
}, [onSeek, videoRef])
222
223
const showControls =
224
(focused && !playing) || (interactingViaKeypress ? hasFocus : hovered)
225
···
236
evt.stopPropagation()
237
setInteractingViaKeypress(false)
238
}}
239
-
onMouseEnter={onMouseEnter}
240
-
onMouseLeave={onMouseLeave}
241
onFocus={onFocus}
242
onBlur={onBlur}
243
onKeyDown={onKeyDown}>
244
<Pressable
245
accessibilityRole="button"
246
accessibilityHint={_(
247
!focused
248
? msg`Unmute video`
···
250
? msg`Pause video`
251
: msg`Play video`,
252
)}
253
-
style={a.flex_1}
254
onPress={onPressEmptySpace}
255
/>
256
-
{active && !showControls && !focused && duration > 0 && (
257
<TimeIndicator time={Math.floor(duration - currentTime)} />
258
)}
259
<View
···
407
const [scrubberActive, setScrubberActive] = useState(false)
408
const {
409
state: hovered,
410
-
onIn: onMouseEnter,
411
-
onOut: onMouseLeave,
412
} = useInteractionState()
413
const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
414
const [seekPosition, setSeekPosition] = useState(0)
···
521
<View
522
testID="scrubber"
523
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}>
527
<div
528
ref={barRef}
529
style={{
···
78
const setSubtitlesEnabled = useSetSubtitlesEnabled()
79
const {
80
state: hovered,
81
+
onIn: onHover,
82
+
onOut: onEndHover,
83
} = useInteractionState()
84
const [isFullscreen, toggleFullscreen] = useFullscreen(fullscreenRef)
85
const {state: hasFocus, onIn: onFocus, onOut: onBlur} = useInteractionState()
···
220
onSeek(clamp(currentTime + 5, 0, duration))
221
}, [onSeek, videoRef])
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
+
242
const showControls =
243
(focused && !playing) || (interactingViaKeypress ? hasFocus : hovered)
244
···
255
evt.stopPropagation()
256
setInteractingViaKeypress(false)
257
}}
258
+
onPointerEnter={onHover}
259
+
onPointerMove={onHover}
260
+
onPointerLeave={onEndHover}
261
onFocus={onFocus}
262
onBlur={onBlur}
263
onKeyDown={onKeyDown}>
264
<Pressable
265
accessibilityRole="button"
266
+
onPointerEnter={onPointerMoveEmptySpace}
267
+
onPointerMove={onPointerMoveEmptySpace}
268
+
onPointerLeave={onPointerLeaveEmptySpace}
269
accessibilityHint={_(
270
!focused
271
? msg`Unmute video`
···
273
? msg`Pause video`
274
: msg`Play video`,
275
)}
276
+
style={[a.flex_1, web({cursor: showCursor ? 'pointer' : 'none'})]}
277
onPress={onPressEmptySpace}
278
/>
279
+
{!showControls && !focused && duration > 0 && (
280
<TimeIndicator time={Math.floor(duration - currentTime)} />
281
)}
282
<View
···
430
const [scrubberActive, setScrubberActive] = useState(false)
431
const {
432
state: hovered,
433
+
onIn: onStartHover,
434
+
onOut: onEndHover,
435
} = useInteractionState()
436
const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
437
const [seekPosition, setSeekPosition] = useState(0)
···
544
<View
545
testID="scrubber"
546
style={[{height: 10, width: '100%'}, a.flex_shrink_0, a.px_xs]}
547
+
onPointerEnter={onStartHover}
548
+
onPointerLeave={onEndHover}>
549
<div
550
ref={barRef}
551
style={{