From 52dfae2015447856bb4fb44f42f33d22f3f8870c Mon Sep 17 00:00:00 2001
From: Josh Farrant <joshfarrant@github.com>
Date: Tue, 17 Dec 2024 11:50:20 +0000
Subject: [PATCH] hide ControlsBar when video doesn't have focus or mouse

---
 .../src/VideoPlayer/VideoPlayer.module.css    |  8 ++-
 .../VideoPlayer/VideoPlayer.module.css.d.ts   |  1 +
 .../react/src/VideoPlayer/VideoPlayer.tsx     | 52 ++++++++++++++-----
 3 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/packages/react/src/VideoPlayer/VideoPlayer.module.css b/packages/react/src/VideoPlayer/VideoPlayer.module.css
index 2bfd23eca..429a6c010 100644
--- a/packages/react/src/VideoPlayer/VideoPlayer.module.css
+++ b/packages/react/src/VideoPlayer/VideoPlayer.module.css
@@ -120,8 +120,14 @@
   left: 0;
   width: 100%;
   background: var(--brand-videoPlayer-controls-bgColor);
-  padding: var(--base-size-16) var(--base-size-24);
+  padding: var(--base-size-12) var(--base-size-16);
   pointer-events: all;
+  opacity: 1;
+}
+
+.VideoPlayer__controlsBar--fade {
+  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+  opacity: 0;
 }
 
 .VideoPlayer__controls:focus,
diff --git a/packages/react/src/VideoPlayer/VideoPlayer.module.css.d.ts b/packages/react/src/VideoPlayer/VideoPlayer.module.css.d.ts
index b0a335433..742292f96 100644
--- a/packages/react/src/VideoPlayer/VideoPlayer.module.css.d.ts
+++ b/packages/react/src/VideoPlayer/VideoPlayer.module.css.d.ts
@@ -9,6 +9,7 @@ declare const styles: {
   readonly "VideoPlayer__controls": string;
   readonly "VideoPlayer__controls--hidden": string;
   readonly "VideoPlayer__controlsBar": string;
+  readonly "VideoPlayer__controlsBar--fade": string;
   readonly "VideoPlayer__iconControl": string;
   readonly "VideoPlayer__tooltip": string;
   readonly "VideoPlayer__seek": string;
diff --git a/packages/react/src/VideoPlayer/VideoPlayer.tsx b/packages/react/src/VideoPlayer/VideoPlayer.tsx
index b5f6ec57b..61110ca6a 100644
--- a/packages/react/src/VideoPlayer/VideoPlayer.tsx
+++ b/packages/react/src/VideoPlayer/VideoPlayer.tsx
@@ -1,4 +1,4 @@
-import React, {useRef, forwardRef, useContext, type HTMLProps, type FunctionComponent} from 'react'
+import React, {useEffect, useState, useRef, forwardRef, useContext, type HTMLProps, type FunctionComponent} from 'react'
 import clsx from 'clsx'
 import {Text} from '../Text'
 import {type AnimateProps} from '../animation'
@@ -63,7 +63,37 @@ const Root = ({
   const useVideoContext = useVideo()
   const {ccEnabled, isPlaying, ref, togglePlaying} = useVideoContext
 
-  const hideControls = !isPlaying && !showControlsWhenPaused
+  const [hasFocusOrMouse, setHasFocusOrMouse] = useState(false)
+
+  useEffect(() => {
+    const videoWrapper = videoWrapperRef.current
+
+    if (!videoWrapper) {
+      return
+    }
+
+    const showControls = () => {
+      setHasFocusOrMouse(true)
+    }
+
+    const hideControls = () => {
+      setHasFocusOrMouse(false)
+    }
+
+    videoWrapper.addEventListener('mousemove', showControls)
+    videoWrapper.addEventListener('mouseleave', hideControls)
+    videoWrapper.addEventListener('focusin', showControls)
+    videoWrapper.addEventListener('focusout', hideControls)
+
+    return () => {
+      videoWrapper.removeEventListener('mousemove', showControls)
+      videoWrapper.removeEventListener('mouseleave', hideControls)
+      videoWrapper.removeEventListener('focusin', showControls)
+      videoWrapper.removeEventListener('focusout', hideControls)
+    }
+  }, [videoWrapperRef])
+
+  const showControls = hasFocusOrMouse || (showControlsWhenPaused && !isPlaying)
 
   return (
     <div className={styles.VideoPlayer__container} ref={videoWrapperRef}>
@@ -93,16 +123,14 @@ const Root = ({
       </button>
       <div className={styles.VideoPlayer__controls}>
         {ccEnabled && <Captions />}
-        {!hideControls && (
-          <ControlsBar>
-            {showPlayPauseButton && <PlayPauseButton />}
-            {showSeekControl && <SeekControl />}
-            {showCCButton && <CCButton />}
-            {showMuteButton && <MuteButton />}
-            {showVolumeControl && !isSmall && <VolumeControl />}
-            {showFullScreenButton && <FullScreenButton />}
-          </ControlsBar>
-        )}
+        <ControlsBar className={clsx(!showControls && styles['VideoPlayer__controlsBar--fade'])}>
+          {showPlayPauseButton && <PlayPauseButton />}
+          {showSeekControl && <SeekControl />}
+          {showCCButton && <CCButton />}
+          {showMuteButton && <MuteButton />}
+          {showVolumeControl && !isSmall && <VolumeControl />}
+          {showFullScreenButton && <FullScreenButton />}
+        </ControlsBar>
       </div>
     </div>
   )