Update album/playlist headers with shared styles

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

@@ -1,72 +1,14 @@
-import { Center, Group } from '@mantine/core';
-import { useMergedRef } from '@mantine/hooks';
+import { Group, Stack } from '@mantine/core';
 import { forwardRef, Fragment, Ref } from 'react';
-import { RiAlbumFill } from 'react-icons/ri';
 import { generatePath, useParams } from 'react-router';
 import { Link } from 'react-router-dom';
-import styled from 'styled-components';
-import { Text, TextTitle } from '/@/renderer/components';
+import { Text } from '/@/renderer/components';
 import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query';
+import { LibraryHeader } from '/@/renderer/features/shared';
 import { useContainerQuery } from '/@/renderer/hooks';
 import { AppRoute } from '/@/renderer/router/routes';
-
-const HeaderContainer = styled.div`
-  position: relative;
-  display: grid;
-  grid-auto-columns: 1fr;
-  grid-template-areas: 'image info';
-  grid-template-rows: 1fr;
-  grid-template-columns: 250px minmax(0, 1fr);
-  gap: 0.5rem;
-  width: 100%;
-  max-width: 100%;
-  height: 30vh;
-  min-height: 340px;
-  max-height: 500px;
-  padding: 5rem 2rem 2rem;
-`;
-
-const CoverImageWrapper = styled.div`
-  z-index: 15;
-  display: flex;
-  grid-area: image;
-  align-items: flex-end;
-  justify-content: center;
-  height: 100%;
-  filter: drop-shadow(0 0 8px rgb(0, 0, 0, 50%));
-`;
-
-const MetadataWrapper = styled.div`
-  z-index: 15;
-  display: flex;
-  flex-direction: column;
-  grid-area: info;
-  justify-content: flex-end;
-  width: 100%;
-`;
-
-const StyledImage = styled.img`
-  object-fit: cover;
-`;
-
-const BackgroundImage = styled.div<{ background: string }>`
-  position: absolute;
-  top: 0;
-  z-index: 0;
-  width: 100%;
-  height: 100%;
-  background: ${(props) => props.background};
-`;
-
-const BackgroundImageOverlay = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 0;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(180deg, rgba(25, 26, 28, 5%), var(--main-bg)), var(--background-noise);
-`;
+import { LibraryItem } from '/@/renderer/types';
+import { formatDurationString } from '/@/renderer/utils';
 
 interface AlbumDetailHeaderProps {
   background: string;
@@ -77,110 +19,81 @@ export const AlbumDetailHeader = forwardRef(
     const { albumId } = useParams() as { albumId: string };
     const detailQuery = useAlbumDetail({ id: albumId });
     const cq = useContainerQuery();
-    const mergedRef = useMergedRef(ref, cq.ref);
 
-    const titleSize = cq.isXl
-      ? '6rem'
-      : cq.isLg
-      ? '5.5rem'
-      : cq.isMd
-      ? '4.5rem'
-      : cq.isSm
-      ? '3.5rem'
-      : '2rem';
+    const metadataItems = [
+      {
+        id: 'releaseYear',
+        secondary: false,
+        value: detailQuery?.data?.releaseYear,
+      },
+      {
+        id: 'songCount',
+        secondary: false,
+        value: `${detailQuery?.data?.songCount} songs`,
+      },
+      {
+        id: 'duration',
+        secondary: true,
+        value: detailQuery?.data?.duration && formatDurationString(detailQuery.data.duration),
+      },
+    ];
+
+    console.log('detailQuery?.data?.duration :>> ', detailQuery?.data?.duration);
 
     return (
-      <HeaderContainer ref={mergedRef}>
-        <BackgroundImage background={background} />
-        <BackgroundImageOverlay />
-        <CoverImageWrapper>
-          {detailQuery?.data?.imageUrl ? (
-            <StyledImage
-              alt="cover"
-              height={225}
-              src={detailQuery?.data.imageUrl}
-              width={225}
-            />
-          ) : (
-            <Center
+      <Stack ref={cq.ref}>
+        <LibraryHeader
+          ref={ref}
+          background={background}
+          imageUrl={detailQuery?.data?.imageUrl}
+          item={{ route: AppRoute.PLAYLISTS, type: LibraryItem.ALBUM }}
+          title={detailQuery?.data?.name || ''}
+        >
+          <Stack mt="1rem">
+            <Group>
+              {metadataItems.map((item, index) => (
+                <Fragment key={`item-${item.id}-${index}`}>
+                  {index > 0 && <Text $noSelect>•</Text>}
+                  <Text $secondary={item.secondary}>{item.value}</Text>
+                </Fragment>
+              ))}
+            </Group>
+            <Group
               sx={{
-                background: 'var(--placeholder-bg)',
-                borderRadius: 'var(--card-default-radius)',
-                height: `${225}px`,
-                width: `${225}px`,
+                WebkitBoxOrient: 'vertical',
+                WebkitLineClamp: 2,
+                display: '-webkit-box',
+                overflow: 'hidden',
               }}
             >
-              <RiAlbumFill
-                color="var(--placeholder-fg)"
-                size={35}
-              />
-            </Center>
-          )}
-        </CoverImageWrapper>
-        <MetadataWrapper>
-          <Group>
-            <Text
-              $link
-              component={Link}
-              fw="600"
-              sx={{ textTransform: 'uppercase' }}
-              to={AppRoute.LIBRARY_ALBUMS}
-            >
-              Album
-            </Text>
-            {detailQuery?.data?.releaseYear && (
-              <>
-                <Text>•</Text>
-                <Text>{detailQuery?.data?.releaseYear}</Text>
-              </>
-            )}
-          </Group>
-          <TextTitle
-            fw="900"
-            lh="1"
-            mb="0.12em"
-            mt=".08em"
-            sx={{ fontSize: titleSize }}
-          >
-            {detailQuery?.data?.name}
-          </TextTitle>
-          <Group
-            spacing="xs"
-            sx={{
-              WebkitBoxOrient: 'vertical',
-              WebkitLineClamp: 2,
-              display: '-webkit-box',
-              overflow: 'hidden',
-            }}
-          >
-            {detailQuery?.data?.albumArtists.map((artist, index) => (
-              <Fragment key={`artist-${artist.id}`}>
-                {index > 0 && (
+              {detailQuery?.data?.albumArtists.map((artist, index) => (
+                <Fragment key={`artist-${artist.id}`}>
+                  {index > 0 && (
+                    <Text
+                      sx={{
+                        display: 'inline-block',
+                        padding: '0 0.5rem',
+                      }}
+                    >
+                      •
+                    </Text>
+                  )}
                   <Text
-                    $noSelect
-                    sx={{
-                      display: 'inline-block',
-                      padding: '0 0.5rem',
-                    }}
+                    $link
+                    component={Link}
+                    fw="600"
+                    to={generatePath(AppRoute.LIBRARY_ALBUMARTISTS_DETAIL, {
+                      albumArtistId: artist.id,
+                    })}
                   >
-                    •
+                    {artist.name}
                   </Text>
-                )}
-                <Text
-                  $link
-                  component={Link}
-                  fw="600"
-                  to={generatePath(AppRoute.LIBRARY_ALBUMARTISTS_DETAIL, {
-                    albumArtistId: artist.id,
-                  })}
-                >
-                  {artist.name}
-                </Text>
-              </Fragment>
-            ))}
-          </Group>
-        </MetadataWrapper>
-      </HeaderContainer>
+                </Fragment>
+              ))}
+            </Group>
+          </Stack>
+        </LibraryHeader>
+      </Stack>
     );
   },
 );

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

@@ -1,65 +1,60 @@
-import { PageHeader, ScrollArea, TextTitle } from '/@/renderer/components';
-import { AnimatedPage, PlayButton } from '/@/renderer/features/shared';
+import { NativeScrollArea } from '/@/renderer/components';
+import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
 import { useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query';
 import { useParams } from 'react-router';
-import { useFastAverageColor, useShouldPadTitlebar } from '/@/renderer/hooks';
+import { useFastAverageColor } from '/@/renderer/hooks';
 import { AlbumDetailContent } from '/@/renderer/features/albums/components/album-detail-content';
 import { AlbumDetailHeader } from '/@/renderer/features/albums/components/album-detail-header';
-import { useIntersection } from '@mantine/hooks';
-import { Group } from '@mantine/core';
+import { usePlayQueueAdd } from '/@/renderer/features/player';
+import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
+import { LibraryItem } from '/@/renderer/types';
 
 const AlbumDetailRoute = () => {
   const tableRef = useRef<AgGridReactType | null>(null);
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
+  const headerRef = useRef<HTMLDivElement>(null);
+
   const { albumId } = useParams() as { albumId: string };
   const detailQuery = useAlbumDetail({ id: albumId });
   const background = useFastAverageColor(detailQuery.data?.imageUrl);
-  const padTop = useShouldPadTitlebar();
+  const handlePlayQueueAdd = usePlayQueueAdd();
+  const playButtonBehavior = usePlayButtonBehavior();
 
-  const containerRef = useRef();
-  const { ref, entry } = useIntersection({
-    root: containerRef.current,
-    threshold: 0,
-  });
+  const handlePlay = () => {
+    handlePlayQueueAdd?.({
+      byItemType: {
+        id: [albumId],
+        type: LibraryItem.ALBUM,
+      },
+      play: playButtonBehavior,
+    });
+  };
+
+  if (!background) return null;
 
   return (
     <AnimatedPage key={`album-detail-${albumId}`}>
-      <PageHeader
-        backgroundColor="black"
-        isHidden={entry?.isIntersecting}
-        position="absolute"
+      <NativeScrollArea
+        ref={scrollAreaRef}
+        pageHeaderProps={{
+          backgroundColor: background,
+          children: (
+            <LibraryHeaderBar>
+              <LibraryHeaderBar.PlayButton onClick={handlePlay} />
+              <LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title>
+            </LibraryHeaderBar>
+          ),
+          target: headerRef,
+        }}
       >
-        <Group p="1rem">
-          <PlayButton
-            h={40}
-            w={40}
-          />
-          <TextTitle
-            fw="bold"
-            order={2}
-          >
-            {detailQuery?.data?.name}
-          </TextTitle>
-        </Group>
-      </PageHeader>
-
-      <ScrollArea
-        ref={containerRef}
-        h="100%"
-        offsetScrollbars={false}
-        styles={{ scrollbar: { marginTop: padTop ? '35px' : 0 } }}
-      >
-        {background && (
-          <>
-            <AlbumDetailHeader
-              ref={ref}
-              background={background}
-            />
-            <AlbumDetailContent tableRef={tableRef} />
-          </>
-        )}
-      </ScrollArea>
+        <AlbumDetailHeader
+          ref={headerRef}
+          background={background}
+        />
+        <AlbumDetailContent tableRef={tableRef} />
+      </NativeScrollArea>
     </AnimatedPage>
   );
 };