[Glitch] Fix being unable to hide controls in full screen video in web UI

Port 70e14c1ed0 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

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<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%',
@@ -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}

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;