diff --git a/app/javascript/mastodon/features/video/index.tsx b/app/javascript/mastodon/features/video/index.tsx index 659c210568..fca6fd0250 100644 --- a/app/javascript/mastodon/features/video/index.tsx +++ b/app/javascript/mastodon/features/video/index.tsx @@ -57,6 +57,7 @@ const messages = defineMessages({ }); const DOUBLE_CLICK_THRESHOLD = 250; +const HOVER_FADE_DELAY = 4000; export const formatTime = (secondsNum: number) => { const hours = Math.floor(secondsNum / 3600); @@ -232,6 +233,7 @@ export const Video: React.FC<{ const seekRef = useRef(null); const volumeRef = useRef(null); const doubleClickTimeoutRef = useRef | null>(); + const hoverTimeoutRef = useRef | null>(); const [style, api] = useSpring(() => ({ progress: '0%', @@ -666,6 +668,26 @@ export const Video: React.FC<{ const handleMouseEnter = useCallback(() => { setHovered(true); + + if (hoverTimeoutRef.current) { + clearTimeout(hoverTimeoutRef.current); + } + + hoverTimeoutRef.current = setTimeout(() => { + setHovered(false); + }, HOVER_FADE_DELAY); + }, [setHovered]); + + const handleMouseMove = useCallback(() => { + setHovered(true); + + if (hoverTimeoutRef.current) { + clearTimeout(hoverTimeoutRef.current); + } + + hoverTimeoutRef.current = setTimeout(() => { + setHovered(false); + }, HOVER_FADE_DELAY); }, [setHovered]); const handleMouseLeave = useCallback(() => { @@ -795,6 +817,7 @@ export const Video: React.FC<{ style={{ aspectRatio }} ref={playerRef} onMouseEnter={handleMouseEnter} + onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave} onClick={handleClickRoot} onKeyDown={handleKeyDown} diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 553935d53b..6b5cbaa08b 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -7075,6 +7075,8 @@ a.status-card { height: 100% !important; margin: 0; aspect-ratio: auto !important; + outline: none; + border-radius: 0; video { width: 100% !important;