From 230fa33525d07f6b63b1c2d3254993a0fdb90e89 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 24 Jul 2023 14:50:54 -0700
Subject: [PATCH] Adjust various elements on album artist page

---
 .../album-artist-detail-content.tsx           | 42 +++++-----
 .../components/album-artist-detail-header.tsx | 79 ++++++++-----------
 .../routes/album-artist-detail-route.tsx      | 24 +++---
 3 files changed, 67 insertions(+), 78 deletions(-)

diff --git a/src/renderer/features/artists/components/album-artist-detail-content.tsx b/src/renderer/features/artists/components/album-artist-detail-content.tsx
index 764e73ad..95835d90 100644
--- a/src/renderer/features/artists/components/album-artist-detail-content.tsx
+++ b/src/renderer/features/artists/components/album-artist-detail-content.tsx
@@ -335,7 +335,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
         <ContentContainer ref={cq.ref}>
             <LibraryBackgroundOverlay backgroundColor={background} />
             <DetailContainer>
-                <Box component="section">
+                <Stack spacing="lg">
                     <Group spacing="md">
                         <PlayButton onClick={() => handlePlay(playButtonBehavior)} />
                         <Group spacing="xs">
@@ -367,27 +367,29 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                             >
                                 <RiMoreFill size={20} />
                             </Button>
-                            <Button
-                                compact
-                                uppercase
-                                component={Link}
-                                to={artistDiscographyLink}
-                                variant="subtle"
-                            >
-                                View discography
-                            </Button>
-                            <Button
-                                compact
-                                uppercase
-                                component={Link}
-                                to={artistSongsLink}
-                                variant="subtle"
-                            >
-                                View all songs
-                            </Button>
                         </Group>
                     </Group>
-                </Box>
+                    <Group spacing="md">
+                        <Button
+                            compact
+                            uppercase
+                            component={Link}
+                            to={artistDiscographyLink}
+                            variant="subtle"
+                        >
+                            View discography
+                        </Button>
+                        <Button
+                            compact
+                            uppercase
+                            component={Link}
+                            to={artistSongsLink}
+                            variant="subtle"
+                        >
+                            View all songs
+                        </Button>
+                    </Group>
+                </Stack>
                 {showGenres ? (
                     <Box component="section">
                         <Group spacing="sm">
diff --git a/src/renderer/features/artists/components/album-artist-detail-header.tsx b/src/renderer/features/artists/components/album-artist-detail-header.tsx
index a40b3435..1131f9e8 100644
--- a/src/renderer/features/artists/components/album-artist-detail-header.tsx
+++ b/src/renderer/features/artists/components/album-artist-detail-header.tsx
@@ -5,7 +5,6 @@ import { LibraryItem, ServerType } from '/@/renderer/api/types';
 import { Text } from '/@/renderer/components';
 import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query';
 import { LibraryHeader, useSetRating } from '/@/renderer/features/shared';
-import { useContainerQuery } from '/@/renderer/hooks';
 import { AppRoute } from '/@/renderer/router/routes';
 import { formatDurationString } from '/@/renderer/utils';
 import { useCurrentServer } from '../../../store/auth.store';
@@ -22,7 +21,6 @@ export const AlbumArtistDetailHeader = forwardRef(
             query: { id: albumArtistId },
             serverId: server?.id,
         });
-        const cq = useContainerQuery();
 
         const metadataItems = [
             {
@@ -75,50 +73,39 @@ export const AlbumArtistDetailHeader = forwardRef(
         const showRating = detailQuery?.data?.serverType === ServerType.NAVIDROME;
 
         return (
-            <Stack ref={cq.ref}>
-                <LibraryHeader
-                    ref={ref}
-                    background={background}
-                    imageUrl={detailQuery?.data?.imageUrl}
-                    item={{ route: AppRoute.LIBRARY_ALBUM_ARTISTS, type: LibraryItem.ALBUM_ARTIST }}
-                    title={detailQuery?.data?.name || ''}
-                >
-                    <Stack>
-                        <Group>
-                            {metadataItems
-                                .filter((i) => i.value)
-                                .map((item, index) => (
-                                    <Fragment key={`item-${item.id}-${index}`}>
-                                        {index > 0 && <Text $noSelect>•</Text>}
-                                        <Text $secondary={item.secondary}>{item.value}</Text>
-                                    </Fragment>
-                                ))}
-                            {showRating && (
-                                <>
-                                    <Text $noSelect>•</Text>
-                                    <Rating
-                                        readOnly={
-                                            detailQuery?.isFetching ||
-                                            updateRatingMutation.isLoading
-                                        }
-                                        value={detailQuery?.data?.userRating || 0}
-                                        onChange={handleUpdateRating}
-                                        onClick={handleClearRating}
-                                    />
-                                </>
-                            )}
-                        </Group>
-                        <Group
-                            sx={{
-                                WebkitBoxOrient: 'vertical',
-                                WebkitLineClamp: 2,
-                                display: '-webkit-box',
-                                overflow: 'hidden',
-                            }}
-                        />
-                    </Stack>
-                </LibraryHeader>
-            </Stack>
+            <LibraryHeader
+                ref={ref}
+                background={background}
+                imageUrl={detailQuery?.data?.imageUrl}
+                item={{ route: AppRoute.LIBRARY_ALBUM_ARTISTS, type: LibraryItem.ALBUM_ARTIST }}
+                title={detailQuery?.data?.name || ''}
+            >
+                <Stack>
+                    <Group>
+                        {metadataItems
+                            .filter((i) => i.value)
+                            .map((item, index) => (
+                                <Fragment key={`item-${item.id}-${index}`}>
+                                    {index > 0 && <Text $noSelect>•</Text>}
+                                    <Text $secondary={item.secondary}>{item.value}</Text>
+                                </Fragment>
+                            ))}
+                        {showRating && (
+                            <>
+                                <Text $noSelect>•</Text>
+                                <Rating
+                                    readOnly={
+                                        detailQuery?.isFetching || updateRatingMutation.isLoading
+                                    }
+                                    value={detailQuery?.data?.userRating || 0}
+                                    onChange={handleUpdateRating}
+                                    onClick={handleClearRating}
+                                />
+                            </>
+                        )}
+                    </Group>
+                </Stack>
+            </LibraryHeader>
         );
     },
 );
diff --git a/src/renderer/features/artists/routes/album-artist-detail-route.tsx b/src/renderer/features/artists/routes/album-artist-detail-route.tsx
index 6d60499b..7ec212fa 100644
--- a/src/renderer/features/artists/routes/album-artist-detail-route.tsx
+++ b/src/renderer/features/artists/routes/album-artist-detail-route.tsx
@@ -1,15 +1,15 @@
-import { NativeScrollArea, Spinner } from '/@/renderer/components';
-import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
 import { useRef } from 'react';
 import { useParams } from 'react-router';
-import { useFastAverageColor } from '/@/renderer/hooks';
-import { usePlayQueueAdd } from '/@/renderer/features/player';
-import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { LibraryItem } from '/@/renderer/api/types';
-import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query';
-import { AlbumArtistDetailHeader } from '/@/renderer/features/artists/components/album-artist-detail-header';
+import { NativeScrollArea, Spinner } from '/@/renderer/components';
 import { AlbumArtistDetailContent } from '/@/renderer/features/artists/components/album-artist-detail-content';
+import { AlbumArtistDetailHeader } from '/@/renderer/features/artists/components/album-artist-detail-header';
+import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query';
+import { usePlayQueueAdd } from '/@/renderer/features/player';
+import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
+import { useFastAverageColor } from '/@/renderer/hooks';
 import { useCurrentServer } from '/@/renderer/store';
+import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 
 const AlbumArtistDetailRoute = () => {
     const scrollAreaRef = useRef<HTMLDivElement>(null);
@@ -23,7 +23,7 @@ const AlbumArtistDetailRoute = () => {
         query: { id: albumArtistId },
         serverId: server?.id,
     });
-    const { color, colorId } = useFastAverageColor({
+    const { color: background, colorId } = useFastAverageColor({
         id: albumArtistId,
         src: detailQuery.data?.imageUrl,
         srcLoaded: !detailQuery.isLoading,
@@ -39,7 +39,7 @@ const AlbumArtistDetailRoute = () => {
         });
     };
 
-    if (detailQuery.isLoading || !color || colorId !== albumArtistId) {
+    if (!background || colorId !== albumArtistId) {
         return <Spinner container />;
     }
 
@@ -48,7 +48,7 @@ const AlbumArtistDetailRoute = () => {
             <NativeScrollArea
                 ref={scrollAreaRef}
                 pageHeaderProps={{
-                    backgroundColor: color,
+                    backgroundColor: background,
                     children: (
                         <LibraryHeaderBar>
                             <LibraryHeaderBar.PlayButton onClick={handlePlay} />
@@ -63,9 +63,9 @@ const AlbumArtistDetailRoute = () => {
             >
                 <AlbumArtistDetailHeader
                     ref={headerRef}
-                    background={color}
+                    background={background}
                 />
-                <AlbumArtistDetailContent background={color} />
+                <AlbumArtistDetailContent background={background} />
             </NativeScrollArea>
         </AnimatedPage>
     );