Bluesky app fork with some witchin' additions 💫

[Video] Hide mouse when inactive (#5094)

authored by samuel.fm and committed by

GitHub f9d73665 0469ca6c

+33 -11
+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={{