do not auto-hide control bar on hover

culdo · Jan 3, 2025 · b903d3e · b903d3e
1 parent 6030273
commit b903d3e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/app/components/control-bar/audio-player/index.tsx b/app/components/control-bar/audio-player/index.tsx
@@ -119,7 +119,7 @@ function AudioPlayer() {
             <MediaTheme
                 id="rawPlayer"
                 template="media-theme-audio"
-                className={styles.player}
+                className={`${styles.player} control-bar`}
             >
                 <YoutubeVideo
                     ref={ytPlayer}

diff --git a/app/components/control-bar/fullscreen-button/index.tsx b/app/components/control-bar/fullscreen-button/index.tsx
@@ -15,7 +15,7 @@ function FullScreenButton() {
     }
 
     return (
-        <div id="fsBtn" className={styles.fsBtn} onClick={onClick}>
+        <div id="fsBtn" className={`${styles.fsBtn} control-bar`} onClick={onClick}>
             <Image src={icon} alt="fullscreen" height="24" width="24" />
         </div>
     );

diff --git a/app/components/control-bar/index.tsx b/app/components/control-bar/index.tsx
@@ -1,17 +1,19 @@
 import useGlobalStore from "@/app/stores/useGlobalStore";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import AudioPlayer from "./audio-player";
 import FullScreenButton from "./fullscreen-button";
 
 function ControlBar() {
     const getPlayer = () => useGlobalStore.getState().player
     const gui = useGlobalStore(state => state.gui)
     const presetInit = useGlobalStore(state => state.presetInit)
+    const isHoverRef = useRef(false)
 
     useEffect(() => {
         if(!presetInit) return
         const fullScreenBt = document.getElementById("fsBtn")
         const rawPlayer = document.getElementById("rawPlayer")
+        const controls = document.querySelectorAll(".control-bar")
         // control bar
         document.addEventListener('mousemove', (e) => {
             const player = getPlayer()
@@ -25,13 +27,22 @@ function ControlBar() {
             }
 
             gui._timeoutID = setTimeout(function () {
+                if(isHoverRef.current) return
                 rawPlayer.style.opacity = "0";
                 fullScreenBt.style.opacity = "0";
                 if (player && !player.paused) {
                     document.body.style.cursor = "none"
                 }
             }, 1000);
         });
+        for(const control of controls) {
+            control.addEventListener('mouseenter', () => {
+                isHoverRef.current = true
+            })
+            control.addEventListener('mouseleave', () => {
+                isHoverRef.current = false
+            })
+        }
     }, [presetInit])
     return (
         <>