change the playerbar animation

jeffvli · Sep 1, 2024 · c887a9b · c887a9b
1 parent 77f471d
commit c887a9b
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 14 deletions.
diff --git a/src/renderer/features/player/components/playerbar.tsx b/src/renderer/features/player/components/playerbar.tsx
@@ -68,7 +68,7 @@ const CenterGridItem = styled.div`
 export const Playerbar = () => {
     const playersRef = PlayersRef;
     const settings = useSettingsStore((state) => state.playback);
-    const generalSetings = useGeneralSettings();
+    const { playerbarOpenDrawer } = useGeneralSettings();
     const playbackType = usePlaybackType();
     const volume = useVolume();
     const player1 = usePlayer1Data();
@@ -81,10 +81,8 @@ export const Playerbar = () => {
     const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
 
     const handleToggleFullScreenPlayer = (e?: MouseEvent<HTMLDivElement> | KeyboardEvent) => {
-        if (generalSetings.playerbarOpenDrawer) {
-            e?.stopPropagation();
-            setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
-        }
+        e?.stopPropagation();
+        setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
     };
 
     const autoNextFn = useCallback(() => {
@@ -93,7 +91,9 @@ export const Playerbar = () => {
     }, [autoNext]);
 
     return (
-        <PlayerbarContainer onClick={handleToggleFullScreenPlayer}>
+        <PlayerbarContainer
+            onClick={playerbarOpenDrawer ? handleToggleFullScreenPlayer : undefined}
+        >
             <PlayerbarControlsGrid>
                 <LeftGridItem>
                     <LeftControls />

diff --git a/src/renderer/features/settings/components/general/control-settings.tsx b/src/renderer/features/settings/components/general/control-settings.tsx
@@ -515,6 +515,28 @@ export const ControlSettings = () => {
             isHidden: false,
             title: t('setting.albumBackgroundBlur', { postProcess: 'sentenceCase' }),
         },
+        {
+            control: (
+                <Switch
+                    aria-label={t('setting.playerbarOpenDrawer ', { postProcess: 'sentenceCase' })}
+                    defaultChecked={settings.playerbarOpenDrawer}
+                    onChange={(e) =>
+                        setSettings({
+                            general: {
+                                ...settings,
+                                playerbarOpenDrawer: e.currentTarget.checked,
+                            },
+                        })
+                    }
+                />
+            ),
+            description: t('setting.playerbarOpenDrawer', {
+                context: 'description',
+                postProcess: 'sentenceCase',
+            }),
+            isHidden: false,
+            title: t('setting.playerbarOpenDrawer', { postProcess: 'sentenceCase' }),
+        },
     ];
 
     return <SettingsSection options={controlOptions} />;

diff --git a/src/renderer/layouts/default-layout/player-bar.tsx b/src/renderer/layouts/default-layout/player-bar.tsx
@@ -1,15 +1,38 @@
+import { useState } from 'react';
 import styled from 'styled-components';
 import { Playerbar } from '/@/renderer/features/player';
+import { useGeneralSettings } from '/@/renderer/store/settings.store';
 
-const PlayerbarContainer = styled.footer`
+interface PlayerbarContainerProps {
+    barState: string;
+}
+
+const PlayerbarContainer = styled.footer<PlayerbarContainerProps>`
     z-index: 200;
     grid-area: player;
-    background: var(--playerbar-bg);
+    background: var(--${(props) => props.barState});
+    transition: background 0.5s;
 `;
 
 export const PlayerBar = () => {
+    const { playerbarOpenDrawer } = useGeneralSettings();
+    const [barState, setBarState] = useState('playerbar-bg');
+
+    const handleMouseEnter = () => {
+        setBarState('playerbar-bg-active');
+    };
+
+    const handleMouseLeave = () => {
+        setBarState('playerbar-bg');
+    };
+
     return (
-        <PlayerbarContainer id="player-bar">
+        <PlayerbarContainer
+            barState={barState}
+            id="player-bar"
+            onMouseLeave={playerbarOpenDrawer ? handleMouseLeave : undefined}
+            onMouseOver={playerbarOpenDrawer ? handleMouseEnter : undefined}
+        >
             <Playerbar />
         </PlayerbarContainer>
     );

diff --git a/src/renderer/themes/default.scss b/src/renderer/themes/default.scss
@@ -23,6 +23,7 @@
     --sidebar-handle-bg: #4d4d4d;
     --sidebar-border: 2px rgba(18, 18, 18, 70%) solid;
     --playerbar-bg: rgb(16, 16, 16);
+    --playerbar-bg-active: rgb(14, 14, 14);
     --playerbar-btn-main-fg: rgb(0, 0, 0);
     --playerbar-btn-main-fg-hover: rgb(0, 0, 0);
     --playerbar-btn-main-bg: rgb(230, 230, 230);

diff --git a/src/renderer/themes/light.scss b/src/renderer/themes/light.scss
@@ -15,11 +15,8 @@ body[data-theme='defaultLight'] {
     --sidebar-fg-hover: rgb(85, 85, 85);
     --sidebar-handle-bg: rgb(220, 220, 220);
     --sidebar-border: 1px rgba(220, 220, 220, 70%) solid;
-    --playerbar-bg: linear-gradient(
-        rgb(220, 220, 220) 0%,
-        rgb(240, 240, 240) 50%,
-        rgb(220, 220, 220) 100%
-    );
+    --playerbar-bg: rgb(220, 220, 220);
+    --playerbar-bg-active: rgb(175, 175, 175);
     --playerbar-btn-main-fg: rgb(0, 0, 0);
     --playerbar-btn-main-fg-hover: rgb(0, 0, 0);
     --playerbar-btn-main-bg: transparent;