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}