forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[Video] make hover state stick around if tapped (#5259)
authored by
Samuel Newman
and committed by
GitHub
fc259920
c2249214
+37
-3
+37
-3
src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx
+37
-3
src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx
···
244
244
}
245
245
}, [])
246
246
247
+
// these are used to trigger the hover state. on mobile, the hover state
248
+
// should stick around for a bit after they tap, and if the controls aren't
249
+
// present this initial tab should *only* show the controls and not activate anything
250
+
251
+
const onPointerDown = useCallback(
252
+
(evt: React.PointerEvent<HTMLDivElement>) => {
253
+
if (evt.pointerType !== 'mouse' && !hovered) {
254
+
evt.preventDefault()
255
+
}
256
+
},
257
+
[hovered],
258
+
)
259
+
260
+
const timeoutRef = useRef<ReturnType<typeof setTimeout>>()
261
+
262
+
const onHoverWithTimeout = useCallback(() => {
263
+
onHover()
264
+
clearTimeout(timeoutRef.current)
265
+
}, [onHover])
266
+
267
+
const onEndHoverWithTimeout = useCallback(
268
+
(evt: React.PointerEvent<HTMLDivElement>) => {
269
+
// if touch, end after 3s
270
+
// if mouse, end immediately
271
+
if (evt.pointerType !== 'mouse') {
272
+
setTimeout(onEndHover, 3000)
273
+
} else {
274
+
onEndHover()
275
+
}
276
+
},
277
+
[onEndHover],
278
+
)
279
+
247
280
const showControls =
248
281
((focused || autoplayDisabled) && !playing) ||
249
282
(interactingViaKeypress ? hasFocus : hovered)
···
261
294
evt.stopPropagation()
262
295
setInteractingViaKeypress(false)
263
296
}}
264
-
onPointerEnter={onHover}
265
-
onPointerMove={onHover}
266
-
onPointerLeave={onEndHover}
297
+
onPointerEnter={onHoverWithTimeout}
298
+
onPointerMove={onHoverWithTimeout}
299
+
onPointerLeave={onEndHoverWithTimeout}
300
+
onPointerDown={onPointerDown}
267
301
onFocus={onFocus}
268
302
onBlur={onBlur}
269
303
onKeyDown={onKeyDown}>