Album blur, allow clicking the playerbar to toggle the player, misc changes (#717)

* Album blur, allow clicking the playerbar to toggle the player

* Fix stopProporagion, sync package with upsteam, update translation

* recommit my existing changes

* Update default albumBackgroundBlur to 6

* according to git this commit resets the package files

* merge with our fork because pyx forgot to add it

* try adding a setting

* change the playerbar animation

* make the animation quicker bc its choppy

* change playerbar to use a bool instead

* requested opacity fix

* Refactor classes to use clsx

---------

Co-authored-by: iiPython <ben@iipython.dev>
Co-authored-by: Jeff <42182408+jeffvli@users.noreply.github.com>

src/renderer/features/player/components/left-controls.tsx

@@ -67,7 +67,7 @@ const PlayerbarImage = styled.img`
 
 const LineItem = styled.div<{ $secondary?: boolean }>`
     display: inline-block;
-    width: 95%;
+    width: fit-content;
     max-width: 20vw;
     overflow: hidden;
     line-height: 1.3;
@@ -122,6 +122,8 @@ export const LeftControls = () => {
         setSideBar({ image: true });
     };
 
+    const stopPropagation = (e?: MouseEvent) => e?.stopPropagation();
+
     useHotkeys([
         [
             bindings.toggleFullscreenPlayer.allowGlobal
@@ -207,7 +209,7 @@ export const LeftControls = () => {
                     )}
                 </AnimatePresence>
                 <MetadataStack layout="position">
-                    <LineItem>
+                    <LineItem onClick={stopPropagation}>
                         <Group
                             noWrap
                             align="flex-start"
@@ -234,7 +236,10 @@ export const LeftControls = () => {
                             )}
                         </Group>
                     </LineItem>
-                    <LineItem $secondary>
+                    <LineItem
+                        $secondary
+                        onClick={stopPropagation}
+                    >
                         {artists?.map((artist, index) => (
                             <React.Fragment key={`bar-${artist.id}`}>
                                 {index > 0 && <Separator />}
@@ -257,7 +262,10 @@ export const LeftControls = () => {
                             </React.Fragment>
                         ))}
                     </LineItem>
-                    <LineItem $secondary>
+                    <LineItem
+                        $secondary
+                        onClick={stopPropagation}
+                    >
                         <Text
                             $link
                             component={Link}

src/renderer/features/player/components/player-button.tsx

@@ -132,6 +132,10 @@ export const PlayerButton = forwardRef<HTMLDivElement, PlayerButtonProps>(
                         <StyledPlayerButton
                             variant={variant}
                             {...rest}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                rest.onClick?.(e);
+                            }}
                         >
                             {icon}
                         </StyledPlayerButton>
@@ -148,6 +152,10 @@ export const PlayerButton = forwardRef<HTMLDivElement, PlayerButtonProps>(
                 <StyledPlayerButton
                     variant={variant}
                     {...rest}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        rest.onClick?.(e);
+                    }}
                 >
                     {icon}
                 </StyledPlayerButton>

src/renderer/features/player/components/playerbar-slider.tsx

@@ -41,6 +41,9 @@ export const PlayerbarSlider = ({ ...props }: SliderProps) => {
                 },
             }}
             {...props}
+            onClick={(e) => {
+                e?.stopPropagation();
+            }}
         />
     );
 };

src/renderer/features/player/components/playerbar.tsx

@@ -1,6 +1,10 @@
-import { useCallback } from 'react';
+import { useCallback, MouseEvent } from 'react';
 import styled from 'styled-components';
-import { usePlaybackType, useSettingsStore } from '/@/renderer/store/settings.store';
+import {
+    usePlaybackType,
+    useSettingsStore,
+    useGeneralSettings,
+} from '/@/renderer/store/settings.store';
 import { PlaybackType } from '/@/renderer/types';
 import { AudioPlayer } from '/@/renderer/components';
 import {
@@ -11,6 +15,8 @@ import {
     usePlayer2Data,
     usePlayerControls,
     useVolume,
+    useSetFullScreenPlayerStore,
+    useFullScreenPlayerStore,
 } from '/@/renderer/store';
 import { CenterControls } from './center-controls';
 import { LeftControls } from './left-controls';
@@ -62,6 +68,7 @@ const CenterGridItem = styled.div`
 export const Playerbar = () => {
     const playersRef = PlayersRef;
     const settings = useSettingsStore((state) => state.playback);
+    const { playerbarOpenDrawer } = useGeneralSettings();
     const playbackType = usePlaybackType();
     const volume = useVolume();
     const player1 = usePlayer1Data();
@@ -70,6 +77,13 @@ export const Playerbar = () => {
     const player = useCurrentPlayer();
     const muted = useMuted();
     const { autoNext } = usePlayerControls();
+    const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
+    const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
+
+    const handleToggleFullScreenPlayer = (e?: MouseEvent<HTMLDivElement> | KeyboardEvent) => {
+        e?.stopPropagation();
+        setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
+    };
 
     const autoNextFn = useCallback(() => {
         const playerData = autoNext();
@@ -77,7 +91,9 @@ export const Playerbar = () => {
     }, [autoNext]);
 
     return (
-        <PlayerbarContainer>
+        <PlayerbarContainer
+            onClick={playerbarOpenDrawer ? handleToggleFullScreenPlayer : undefined}
+        >
             <PlayerbarControlsGrid>
                 <LeftGridItem>
                     <LeftControls />