Merge commit 'b4e56822c72db54ba338940e2517a4e25e2159a6' into glitch-soc/merge-upstream

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(() => {
@@ -783,7 +805,7 @@ export const Video: React.FC<{
 
   // The outer wrapper is necessary to avoid reflowing the layout when going into full screen
   return (
-    <div style={{ aspectRatio }}>
+    <div>
       <div
         role='menuitem'
         className={classNames('video-player', {
@@ -795,6 +817,7 @@ export const Video: React.FC<{
         style={{ aspectRatio }}
         ref={playerRef}
         onMouseEnter={handleMouseEnter}
+        onMouseMove={handleMouseMove}
         onMouseLeave={handleMouseLeave}
         onClick={handleClickRoot}
         onKeyDown={handleKeyDown}