Fix being unable to hide controls in full screen video in web UI (#34308)

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<HTMLDivElement>(null);
   const volumeRef = useRef<HTMLDivElement>(null);
   const doubleClickTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>();
+  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | 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}

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;