🐛 fix: artist background #55 (#56)

TODO: add imageUrl for playlists with `main-entityHeader-withBackgroundImage`
sanoojes · Sep 4, 2024 · 2003c6c · 2003c6c
1 parent e4c8045
commit 2003c6c
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 280 deletions.
diff --git a/extension/src/components/background/BackgroundManager.tsx b/extension/src/components/background/BackgroundManager.tsx
@@ -6,7 +6,7 @@ import DynamicBackground from '@/components/background/DynamicBackground';
 import { useSettingsStore } from '@/store/settingsStore';
 import type { CustomCSSProperties } from '@/types/settingTypes';
 
-const BackgroundManager = () => {
+const BackgroundManager = React.memo(() => {
   const { backgroundMode, backgroundStyles } = useSettingsStore();
 
   const [dynamicStyle, setDynamicStyle] = React.useState<CustomCSSProperties>(
@@ -36,6 +36,6 @@ const BackgroundManager = () => {
       <DynamicBackground />
     </div>
   );
-};
+});
 
 export default BackgroundManager;
diff --git a/extension/src/components/background/DynamicBackground.tsx b/extension/src/components/background/DynamicBackground.tsx
@@ -3,7 +3,7 @@ import { saveColors, removeColors } from '@/utils/colorUtils';
 import { useSettingsStore } from '@/store/settingsStore';
 import { logToConsole } from '@/utils/logUtils';
 
-const DynamicBackground = () => {
+const DynamicBackground = React.memo(() => {
   const { isDynamicColor } = useSettingsStore();
   const styleRef = React.useRef<HTMLStyleElement | null>(null);
 
@@ -35,6 +35,6 @@ const DynamicBackground = () => {
   }, [isDynamicColor]);
 
   return <div id='dynamic-colors' />;
-};
+});
 
 export default DynamicBackground;
diff --git a/extension/src/components/playlistViews/PlaylistViewManager.tsx b/extension/src/components/playlistViews/PlaylistViewManager.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { useSettingsStore } from '@/store/settingsStore';
 
-const PlaylistView = () => {
+const PlaylistView = React.memo(() => {
   const { playlistViewMode, playlistImageMode } = useSettingsStore();
   const backgroundRef = React.useRef<HTMLDivElement | null>(null);
+  const blurRef = React.useRef<HTMLDivElement | null>(null);
 
   React.useEffect(() => {
     const bodyClasses = document.body.classList;
@@ -24,14 +25,25 @@ const PlaylistView = () => {
 
     if (scrollNode && backgroundRef.current) {
       const handleScroll = () => {
-        if (backgroundRef.current && !(window.pageCategory === 'other'))
+        if (backgroundRef.current && !(window.pageCategory === 'other')) {
           backgroundRef.current.style.transform = `translateY(-${Math.min(
             scrollNode.scrollTop,
             window.screen.height
           )}px)`;
+
+          // Apply blur filter based on scroll position
+          if (blurRef.current) {
+            const scrollAmount = Math.min(
+              scrollNode.scrollTop,
+              window.screen.height
+            );
+            blurRef.current.style.filter = `blur(${scrollAmount * 0.03}px)`;
+          }
+        }
       };
 
-      scrollNode.addEventListener('scroll', handleScroll);
+      // Use passive event listeners for better scroll performance
+      scrollNode.addEventListener('scroll', handleScroll, { passive: true });
       return () => scrollNode.removeEventListener('scroll', handleScroll);
     }
   }, [window.screen.height]);
@@ -41,14 +53,22 @@ const PlaylistView = () => {
       id='playlistArtContainer'
       className={`playlist-art-container ${playlistViewMode} ${playlistImageMode}`}
       data-playlistviewmode={playlistViewMode}
+      ref={backgroundRef}
     >
-      <div className='background' ref={backgroundRef} />
+      <div className='background' ref={blurRef} />
       <div
         className='overlay'
-        style={{ backgroundColor: 'var(--spice-main)' }}
+        style={{
+          height: '100%',
+          width: '100%',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          backgroundColor: 'transparent',
+        }}
       />
     </span>
   );
-};
+});
 
 export default PlaylistView;