diff --git a/app/javascript/flavours/glitch/features/video/index.tsx b/app/javascript/flavours/glitch/features/video/index.tsx index 1af8b4902e..0b690ffadd 100644 --- a/app/javascript/flavours/glitch/features/video/index.tsx +++ b/app/javascript/flavours/glitch/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); @@ -236,6 +237,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%', @@ -670,6 +672,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(() => { @@ -801,6 +823,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/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index 0838c25a3a..6f038fc9f8 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -7480,8 +7480,10 @@ img.modal-warning { &.fullscreen { width: 100% !important; - height: 100% !important; margin: 0; + height: 100% !important; + outline: none; + border-radius: 0; video { max-width: 100% !important;