Adjust base page headers

2022-12-31 17:50:05 -08:00 · 2022-12-31 17:50:05 -08:00 · 6174dc128d
commit 6174dc128d
parent 81455602ef
10 changed files with 233 additions and 172 deletions
--- a/src/renderer/components/page-header/index.tsx
+++ b/src/renderer/components/page-header/index.tsx
@ -1,22 +1,26 @@
+import { Flex, FlexProps } from '@mantine/core';
 import { motion } from 'framer-motion';
 import { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { useShouldPadTitlebar } from '/@/renderer/hooks';

-const Container = styled(motion.div)<{ $useOpacity?: boolean; height?: string; position?: string }>`
-  position: ${(props) => props.position};
-  z-index: 100;
+const Container = styled(motion(Flex))<{ $isHidden?: boolean; height?: string; position?: string }>`
+  position: ${(props) => props.position || 'relative'};
+  z-index: 2000;
  width: 100%;
  height: ${(props) => props.height || '60px'};
-  opacity: ${(props) => props.$useOpacity && 'var(--header-opacity)'};
+  opacity: ${(props) => (props.$isHidden ? 0 : 1)};
  transition: opacity 0.3s ease-in-out;
+  user-select: ${(props) => (props.$isHidden ? 'none' : 'auto')};
+  pointer-events: ${(props) => (props.$isHidden ? 'none' : 'auto')};
 `;

 const Header = styled(motion.div)<{ $padRight?: boolean }>`
+  position: relative;
  z-index: 15;
+  width: 100%;
  height: 100%;
  margin-right: ${(props) => props.$padRight && '170px'};
-  padding: 1rem;
  -webkit-app-region: drag;

  button {
@ -28,40 +32,41 @@ const Header = styled(motion.div)<{ $padRight?: boolean }>`
  }
 `;

-// const BackgroundImage = styled.div<{ background: string }>`
-//   position: absolute;
-//   top: 0;
-//   z-index: -1;
-//   width: 100%;
-//   height: 100%;
-//   background: ${(props) => props.background};
-// `;
+const BackgroundImage = styled.div<{ background: string }>`
+  position: absolute;
+  top: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  background: ${(props) => props.background || 'var(--titlebar-bg)'};
+`;

-// const BackgroundImageOverlay = styled.div`
-//   position: absolute;
-//   top: 0;
-//   left: 0;
-//   z-index: -1;
-//   width: 100%;
-//   height: 100%;
-//   /* background: linear-gradient(180deg, rgba(25, 26, 28, 0%), var(--main-bg)); */
-//   /* background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1IiBkPSJNMCAwaDMwMHYzMDBIMHoiLz48L3N2Zz4='); */
-// `;
+const BackgroundImageOverlay = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 30%), var(--background-noise);
+`;

-interface PageHeaderProps {
+interface PageHeaderProps
+  extends Omit<FlexProps, 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'> {
  backgroundColor?: string;
  children?: React.ReactNode;
  height?: string;
+  isHidden?: boolean;
  position?: string;
-  useOpacity?: boolean;
 }

 export const PageHeader = ({
  position,
  height,
  backgroundColor,
-  useOpacity,
+  isHidden,
  children,
+  ...props
 }: PageHeaderProps) => {
  const ref = useRef(null);
  const padRight = useShouldPadTitlebar();
@ -74,17 +79,18 @@ export const PageHeader = ({
  return (
    <Container
      ref={ref}
-      $useOpacity={useOpacity}
-      animate={{
-        backgroundColor,
-        transition: { duration: 1.5 },
-      }}
+      $isHidden={isHidden}
      height={height}
      position={position}
+      {...props}
    >
-      <Header $padRight={padRight}>{children}</Header>
-      {/* <BackgroundImage background={backgroundColor} /> */}
-      {/* <BackgroundImageOverlay /> */}
+      <Header $padRight={padRight}>{!isHidden && <>{children}</>}</Header>
+      {backgroundColor && (
+        <>
+          <BackgroundImage background={'var(--titlebar-bg)' || ''} />
+          <BackgroundImageOverlay />
+        </>
+      )}
    </Container>
  );
 };
--- a/src/renderer/features/albums/components/album-detail-header.tsx
+++ b/src/renderer/features/albums/components/album-detail-header.tsx
@ -1,5 +1,6 @@
 import { Center, Group } from '@mantine/core';
-import { Fragment } from 'react';
+import { useMergedRef } from '@mantine/hooks';
+import { forwardRef, Fragment, Ref } from 'react';
 import { RiAlbumFill } from 'react-icons/ri';
 import { generatePath, useParams } from 'react-router';
 import { Link } from 'react-router-dom';
@ -64,119 +65,122 @@ const BackgroundImageOverlay = styled.div`
  z-index: 0;
  width: 100%;
  height: 100%;
-  background: linear-gradient(180deg, rgba(25, 26, 28, 5%), var(--main-bg));
+  background: linear-gradient(180deg, rgba(25, 26, 28, 5%), var(--main-bg)), var(--background-noise);
 `;

 interface AlbumDetailHeaderProps {
  background: string;
 }

-export const AlbumDetailHeader = ({ background }: AlbumDetailHeaderProps) => {
-  const { albumId } = useParams() as { albumId: string };
-  const detailQuery = useAlbumDetail({ id: albumId });
-  const cq = useContainerQuery();
+export const AlbumDetailHeader = forwardRef(
+  ({ background }: AlbumDetailHeaderProps, ref: Ref<HTMLDivElement>) => {
+    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 titleSize = cq.isXl
+      ? '6rem'
+      : cq.isLg
+      ? '5.5rem'
+      : cq.isMd
+      ? '4.5rem'
+      : cq.isSm
+      ? '3.5rem'
+      : '2rem';

-  return (
-    <HeaderContainer ref={cq.ref}>
-      <BackgroundImage background={background} />
-      <BackgroundImageOverlay />
-      <CoverImageWrapper>
-        {detailQuery?.data?.imageUrl ? (
-          <StyledImage
-            alt="cover"
-            height={225}
-            src={detailQuery?.data.imageUrl}
-            width={225}
-          />
-        ) : (
-          <Center
+    return (
+      <HeaderContainer ref={mergedRef}>
+        <BackgroundImage background={background} />
+        <BackgroundImageOverlay />
+        <CoverImageWrapper>
+          {detailQuery?.data?.imageUrl ? (
+            <StyledImage
+              alt="cover"
+              height={225}
+              src={detailQuery?.data.imageUrl}
+              width={225}
+            />
+          ) : (
+            <Center
+              sx={{
+                background: 'var(--placeholder-bg)',
+                borderRadius: 'var(--card-default-radius)',
+                height: `${225}px`,
+                width: `${225}px`,
+              }}
+            >
+              <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={{
-              background: 'var(--placeholder-bg)',
-              borderRadius: 'var(--card-default-radius)',
-              height: `${80}px`,
-              width: `${80}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
+                    $noSelect
+                    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>
+        </MetadataWrapper>
+      </HeaderContainer>
+    );
+  },
+);
--- a/src/renderer/features/albums/components/album-list-header.tsx
+++ b/src/renderer/features/albums/components/album-list-header.tsx
@ -296,7 +296,7 @@ export const AlbumListHeader = ({ gridRef, tableRef }: AlbumListHeaderProps) =>
  };

  return (
-    <PageHeader>
+    <PageHeader p="1rem">
      <HeaderItems ref={cq.ref}>
        <Flex
          align="center"
--- a/src/renderer/features/albums/routes/album-detail-route.tsx
+++ b/src/renderer/features/albums/routes/album-detail-route.tsx
@ -1,34 +1,61 @@
-import { PageHeader, ScrollArea } from '/@/renderer/components';
-import { AnimatedPage } from '/@/renderer/features/shared';
+import { PageHeader, ScrollArea, TextTitle } from '/@/renderer/components';
+import { AnimatedPage, PlayButton } 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 } from '/@/renderer/hooks';
+import { useFastAverageColor, useShouldPadTitlebar } 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';

 const AlbumDetailRoute = () => {
  const tableRef = useRef<AgGridReactType | null>(null);
  const { albumId } = useParams() as { albumId: string };
  const detailQuery = useAlbumDetail({ id: albumId });
  const background = useFastAverageColor(detailQuery.data?.imageUrl);
+  const padTop = useShouldPadTitlebar();
+
+  const containerRef = useRef();
+  const { ref, entry } = useIntersection({
+    root: containerRef.current,
+    threshold: 0,
+  });

  return (
    <AnimatedPage key={`album-detail-${albumId}`}>
      <PageHeader
-        useOpacity
+        backgroundColor="black"
+        isHidden={entry?.isIntersecting}
        position="absolute"
-      />
+      >
+        <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: '35px' } }}
+        styles={{ scrollbar: { marginTop: padTop ? '35px' : 0 } }}
      >
        {background && (
          <>
-            <AlbumDetailHeader background={background} />
+            <AlbumDetailHeader
+              ref={ref}
+              background={background}
+            />
            <AlbumDetailContent tableRef={tableRef} />
          </>
        )}
--- a/src/renderer/features/artists/components/album-artist-list-header.tsx
+++ b/src/renderer/features/artists/components/album-artist-list-header.tsx
@ -289,7 +289,7 @@ export const AlbumArtistListHeader = ({ gridRef, tableRef }: AlbumArtistListHead
  };

  return (
-    <PageHeader>
+    <PageHeader p="1rem">
      <HeaderItems ref={cq.ref}>
        <Flex
          align="center"
--- a/src/renderer/features/home/routes/home-route.tsx
+++ b/src/renderer/features/home/routes/home-route.tsx
@ -204,7 +204,7 @@ const HomeRoute = () => {
    <AnimatedPage>
      <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <PageHeader
-          useOpacity
+          isHidden
          backgroundColor="var(--sidebar-bg)"
        />
        <Box
--- a/src/renderer/features/now-playing/components/sidebar-play-queue.tsx
+++ b/src/renderer/features/now-playing/components/sidebar-play-queue.tsx
@ -1,35 +1,58 @@
 import { useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { Box, Stack } from '@mantine/core';
+import { Flex } from '@mantine/core';
 import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
+import styled from 'styled-components';
 import { PlayQueueListControls } from './play-queue-list-controls';
 import { Song } from '/@/renderer/api/types';

+const BackgroundImageOverlay = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 30%), var(--background-noise);
+`;
+
 export const SidebarPlayQueue = () => {
  const queueRef = useRef<{ grid: AgGridReactType<Song> } | null>(null);

  return (
-    <Stack
-      h="100%"
-      spacing={0}
-      sx={{ borderLeft: '2px solid var(--generic-border-color)' }}
-    >
-      <Box
-        h="50px"
-        mr="160px"
-        sx={{
-          WebkitAppRegion: 'drag',
-          zIndex: -1,
-        }}
-      />
-      <PlayQueue
-        ref={queueRef}
-        type="sideQueue"
-      />
-      <PlayQueueListControls
-        tableRef={queueRef}
-        type="sideQueue"
-      />
-    </Stack>
+    <>
+      <Flex
+        bg="var(--titlebar-bg)"
+        h="60px"
+        sx={{ position: 'relative' }}
+        w="100%"
+      >
+        <BackgroundImageOverlay />
+        <Flex
+          h="100%"
+          mr="160px"
+          sx={{
+            WebkitAppRegion: 'drag',
+            background: 'var(--titlebar-bg)',
+          }}
+          w="100%"
+        />
+      </Flex>
+      <Flex
+        direction="column"
+        h="calc(100% - 60px)"
+        sx={{ borderLeft: '2px solid var(--generic-border-color)' }}
+        w="100%"
+      >
+        <PlayQueue
+          ref={queueRef}
+          type="sideQueue"
+        />
+        <PlayQueueListControls
+          tableRef={queueRef}
+          type="sideQueue"
+        />
+      </Flex>
+    </>
  );
 };
--- a/src/renderer/features/playlists/components/playlist-list-header.tsx
+++ b/src/renderer/features/playlists/components/playlist-list-header.tsx
@ -189,7 +189,7 @@ export const PlaylistListHeader = ({ tableRef }: PlaylistListHeaderProps) => {
  };

  return (
-    <PageHeader>
+    <PageHeader p="1rem">
      <Flex
        ref={cq.ref}
        direction="row"
--- a/src/renderer/features/songs/components/song-list-header.tsx
+++ b/src/renderer/features/songs/components/song-list-header.tsx
@ -242,7 +242,7 @@ export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
  };

  return (
-    <PageHeader>
+    <PageHeader p="1rem">
      <Flex
        ref={cq.ref}
        direction="row"
--- a/src/renderer/layouts/default-layout.tsx
+++ b/src/renderer/layouts/default-layout.tsx
@ -63,6 +63,7 @@ const SidebarContainer = styled.div`
 const RightSidebarContainer = styled(motion.div)`
  position: relative;
  grid-area: right-sidebar;
+  height: 100%;
  background: var(--sidebar-bg);
  border-left: var(--sidebar-border);
 `;