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/shared/components/library-header.module.scss

@@ -123,6 +123,8 @@
     width: 100%;
     height: 100%;
     opacity: 0.9;
+    background-size: cover !important;
+    background-position: center !important;
 }
 
 .background-overlay {
@@ -135,6 +137,10 @@
     background: var(--bg-header-overlay);
 }
 
+.opaque-overlay {
+    opacity: 0.5;
+}
+
 .title {
     display: -webkit-box;
     overflow: hidden;

src/renderer/features/shared/components/library-header.tsx

@@ -1,15 +1,18 @@
 import { forwardRef, ReactNode, Ref, useState } from 'react';
 import { Group } from '@mantine/core';
 import { AutoTextSize } from 'auto-text-size';
+import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import styles from './library-header.module.scss';
 import { LibraryItem } from '/@/renderer/api/types';
 import { Text } from '/@/renderer/components';
 import { ItemImagePlaceholder } from '/@/renderer/features/shared/components/item-image-placeholder';
+import { useGeneralSettings } from '/@/renderer/store';
 
 interface LibraryHeaderProps {
     background: string;
+    blur?: number;
     children?: ReactNode;
     imagePlaceholderUrl?: string | null;
     imageUrl?: string | null;
@@ -19,11 +22,20 @@ interface LibraryHeaderProps {
 
 export const LibraryHeader = forwardRef(
     (
-        { imageUrl, imagePlaceholderUrl, background, title, item, children }: LibraryHeaderProps,
+        {
+            imageUrl,
+            imagePlaceholderUrl,
+            background,
+            blur,
+            title,
+            item,
+            children,
+        }: LibraryHeaderProps,
         ref: Ref<HTMLDivElement>,
     ) => {
         const { t } = useTranslation();
         const [isImageError, setIsImageError] = useState<boolean | null>(false);
+        const { albumBackground } = useGeneralSettings();
 
         const onImageError = () => {
             setIsImageError(true);
@@ -53,9 +65,13 @@ export const LibraryHeader = forwardRef(
             >
                 <div
                     className={styles.background}
-                    style={{ background }}
+                    style={{ background, filter: `blur(${blur ?? 0}rem)` }}
+                />
+                <div
+                    className={clsx(styles.backgroundOverlay, {
+                        [styles.opaqueOverlay]: albumBackground,
+                    })}
                 />
-                <div className={styles.backgroundOverlay} />
                 <div className={styles.imageSection}>
                     {imageUrl && !isImageError ? (
                         <img