add LibraryContainer for max-width and background overlay

src/renderer/features/albums/components/album-detail-content.tsx

@@ -12,7 +12,6 @@ import { ItemTableList } from '/@/renderer/components/item-list/item-table-list/
 import { ItemTableListColumn } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { albumQueries } from '/@/renderer/features/albums/api/album-api';
 import { AlbumInfiniteCarousel } from '/@/renderer/features/albums/components/album-infinite-carousel';
-import { LibraryBackgroundOverlay } from '/@/renderer/features/shared/components/library-background-overlay';
 import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
 import { searchLibraryItems } from '/@/renderer/features/shared/utils';
 import { useContainerQuery } from '/@/renderer/hooks';
@@ -49,9 +48,6 @@ import {
 } from '/@/shared/types/domain-types';
 import { ItemListKey, ListDisplayType } from '/@/shared/types/types';
 
-interface AlbumDetailContentProps {
-    background?: string;
-}
 
 interface AlbumMetadataTagsProps {
     album: Album | undefined;
@@ -316,7 +312,7 @@ const AlbumMetadataExternalLinks = ({
     );
 };
 
-export const AlbumDetailContent = ({ background }: AlbumDetailContentProps) => {
+export const AlbumDetailContent = () => {
     const { t } = useTranslation();
     const { albumId } = useParams() as { albumId: string };
     const server = useCurrentServer();
@@ -370,7 +366,6 @@ export const AlbumDetailContent = ({ background }: AlbumDetailContentProps) => {
 
     return (
         <div className={styles.contentContainer} ref={ref}>
-            <LibraryBackgroundOverlay backgroundColor={background} />
             <div className={styles.detailContainer}>
                 {comment && <Spoiler maxHeight={75}>{replaceURLWithHTMLLinks(comment)}</Spoiler>}
                 <div className={styles.contentLayout}>

src/renderer/features/albums/components/album-detail-header.tsx

@@ -16,93 +16,82 @@ import { Stack } from '/@/shared/components/stack/stack';
 import { LibraryItem, ServerType } from '/@/shared/types/domain-types';
 import { Play } from '/@/shared/types/types';
 
-interface AlbumDetailHeaderProps {
-    background: {
-        background?: string;
-        blur: number;
-        loading: boolean;
-    };
-}
+export const AlbumDetailHeader = forwardRef<HTMLDivElement>((_props, ref) => {
+    const { albumId } = useParams() as { albumId: string };
+    const server = useCurrentServer();
+    const detailQuery = useQuery(
+        albumQueries.detail({ query: { id: albumId }, serverId: server?.id }),
+    );
 
-export const AlbumDetailHeader = forwardRef<HTMLDivElement, AlbumDetailHeaderProps>(
-    ({ background }, ref) => {
-        const { albumId } = useParams() as { albumId: string };
-        const server = useCurrentServer();
-        const detailQuery = useQuery(
-            albumQueries.detail({ query: { id: albumId }, serverId: server?.id }),
+    const showRating =
+        detailQuery?.data?._serverType === ServerType.NAVIDROME ||
+        detailQuery?.data?._serverType === ServerType.SUBSONIC;
+
+    const { addToQueueByFetch, setFavorite, setRating } = usePlayer();
+    const playButtonBehavior = usePlayButtonBehavior();
+
+    const handleFavorite = () => {
+        if (!detailQuery?.data) return;
+        setFavorite(
+            detailQuery.data._serverId,
+            [detailQuery.data.id],
+            LibraryItem.ALBUM,
+            !detailQuery.data.userFavorite,
         );
+    };
 
-        const showRating =
-            detailQuery?.data?._serverType === ServerType.NAVIDROME ||
-            detailQuery?.data?._serverType === ServerType.SUBSONIC;
-
-        const { addToQueueByFetch, setFavorite, setRating } = usePlayer();
-        const playButtonBehavior = usePlayButtonBehavior();
-
-        const handleFavorite = () => {
-            if (!detailQuery?.data) return;
-            setFavorite(
-                detailQuery.data._serverId,
-                [detailQuery.data.id],
-                LibraryItem.ALBUM,
-                !detailQuery.data.userFavorite,
-            );
-        };
-
-        const handleUpdateRating = showRating
-            ? (rating: number) => {
-                  if (!detailQuery?.data) return;
-
-                  if (detailQuery.data.userRating === rating) {
-                      return setRating(
-                          detailQuery.data._serverId,
-                          [detailQuery.data.id],
-                          LibraryItem.ALBUM,
-                          0,
-                      );
-                  }
+    const handleUpdateRating = showRating
+        ? (rating: number) => {
+              if (!detailQuery?.data) return;
 
+              if (detailQuery.data.userRating === rating) {
                   return setRating(
                       detailQuery.data._serverId,
                       [detailQuery.data.id],
                       LibraryItem.ALBUM,
-                      rating,
+                      0,
                   );
               }
-            : undefined;
 
-        const handlePlay = (type?: Play) => {
-            if (!server?.id || !albumId) return;
-            addToQueueByFetch(server.id, [albumId], LibraryItem.ALBUM, type || playButtonBehavior);
-        };
+              return setRating(
+                  detailQuery.data._serverId,
+                  [detailQuery.data.id],
+                  LibraryItem.ALBUM,
+                  rating,
+              );
+          }
+        : undefined;
 
-        const handleMoreOptions = (e: React.MouseEvent<HTMLButtonElement>) => {
-            if (!detailQuery?.data) return;
-            ContextMenuController.call({
-                cmd: { items: [detailQuery.data], type: LibraryItem.ALBUM },
-                event: e,
-            });
-        };
+    const handlePlay = (type?: Play) => {
+        if (!server?.id || !albumId) return;
+        addToQueueByFetch(server.id, [albumId], LibraryItem.ALBUM, type || playButtonBehavior);
+    };
 
-        return (
-            <Stack ref={ref}>
-                <LibraryHeader
-                    imageUrl={detailQuery?.data?.imageUrl}
-                    item={{ route: AppRoute.LIBRARY_ALBUMS, type: LibraryItem.ALBUM }}
-                    title={detailQuery?.data?.name || ''}
-                    {...background}
-                >
-                    <LibraryHeaderMenu
-                        favorite={detailQuery?.data?.userFavorite}
-                        onFavorite={handleFavorite}
-                        onMore={handleMoreOptions}
-                        onPlay={() => handlePlay(Play.NOW)}
-                        onRating={handleUpdateRating}
-                        onShuffle={() => handlePlay(Play.SHUFFLE)}
-                        rating={detailQuery?.data?.userRating || 0}
-                    />
-                </LibraryHeader>
-            </Stack>
-        );
-    },
-);
+    const handleMoreOptions = (e: React.MouseEvent<HTMLButtonElement>) => {
+        if (!detailQuery?.data) return;
+        ContextMenuController.call({
+            cmd: { items: [detailQuery.data], type: LibraryItem.ALBUM },
+            event: e,
+        });
+    };
+
+    return (
+        <Stack ref={ref}>
+            <LibraryHeader
+                imageUrl={detailQuery?.data?.imageUrl}
+                item={{ route: AppRoute.LIBRARY_ALBUMS, type: LibraryItem.ALBUM }}
+                title={detailQuery?.data?.name || ''}
+            >
+                <LibraryHeaderMenu
+                    favorite={detailQuery?.data?.userFavorite}
+                    onFavorite={handleFavorite}
+                    onMore={handleMoreOptions}
+                    onPlay={() => handlePlay(Play.NOW)}
+                    onRating={handleUpdateRating}
+                    onShuffle={() => handlePlay(Play.SHUFFLE)}
+                    rating={detailQuery?.data?.userRating || 0}
+                />
+            </LibraryHeader>
+        </Stack>
+    );
+});

src/renderer/features/albums/routes/album-detail-route.tsx

@@ -7,6 +7,11 @@ import { albumQueries } from '/@/renderer/features/albums/api/album-api';
 import { AlbumDetailContent } from '/@/renderer/features/albums/components/album-detail-content';
 import { AlbumDetailHeader } from '/@/renderer/features/albums/components/album-detail-header';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import {
+    LibraryBackgroundImage,
+    LibraryBackgroundOverlay,
+} from '/@/renderer/features/shared/components/library-background-overlay';
+import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
 import { useFastAverageColor } from '/@/renderer/hooks';
 import { useCurrentServer, useGeneralSettings } from '/@/renderer/store';
@@ -28,14 +33,15 @@ const AlbumDetailRoute = () => {
         staleTime: 0,
     });
 
-    const { background: backgroundColor, colorId } = useFastAverageColor({
+    const { background: backgroundColor } = useFastAverageColor({
         id: albumId,
         src: detailQuery.data?.imageUrl,
         srcLoaded: !detailQuery.isLoading,
     });
 
-    const backgroundUrl = detailQuery.data?.imageUrl || '';
-    const background = (albumBackground && `url(${backgroundUrl})`) || backgroundColor;
+    const background = backgroundColor;
+
+    const showBlurredImage = Boolean(detailQuery.data?.imageUrl) && albumBackground;
 
     return (
         <AnimatedPage key={`album-detail-${albumId}`}>
@@ -59,15 +65,19 @@ const AlbumDetailRoute = () => {
                 }}
                 ref={scrollAreaRef}
             >
-                <AlbumDetailHeader
-                    background={{
-                        background,
-                        blur: (albumBackground && albumBackgroundBlur) || 0,
-                        loading: !backgroundColor || colorId !== albumId,
-                    }}
-                    ref={headerRef}
-                />
-                <AlbumDetailContent background={background} />
+                {showBlurredImage ? (
+                    <LibraryBackgroundImage
+                        blur={albumBackgroundBlur}
+                        headerRef={headerRef}
+                        imageUrl={detailQuery.data.imageUrl!}
+                    />
+                ) : (
+                    <LibraryBackgroundOverlay backgroundColor={background} headerRef={headerRef} />
+                )}
+                <LibraryContainer>
+                    <AlbumDetailHeader ref={headerRef as React.Ref<HTMLDivElement>} />
+                    <AlbumDetailContent />
+                </LibraryContainer>
             </NativeScrollArea>
         </AnimatedPage>
     );