hide ControlsBar when video doesn't have focus or mouse

primer · Dec 17, 2024 · 52dfae2 · 52dfae2
1 parent ec28371
commit 52dfae2
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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>
   )