Refactor library header
This commit is contained in:
jeffvli
parent
b57f601e1b
commit
2aaf3c34c8
4 changed files with 192 additions and 117 deletions
|
|
@ -0,0 +1,12 @@
|
|||
.image-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--placeholder-bg);
|
||||
border-radius: var(--card-default-radius);
|
||||
|
||||
svg {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
color: var(--placeholder-fg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { Center } from '@mantine/core';
|
||||
import { memo } from 'react';
|
||||
import { RiAlbumFill, RiPlayListFill, RiUserVoiceFill } from 'react-icons/ri';
|
||||
import styles from './item-image-placeholder.module.scss';
|
||||
import { LibraryItem } from '/@/renderer/api/types';
|
||||
|
||||
interface ItemImagePlaceholderProps {
|
||||
itemType?: LibraryItem;
|
||||
}
|
||||
|
||||
const Image = memo(function Image(props: ItemImagePlaceholderProps) {
|
||||
switch (props.itemType) {
|
||||
case LibraryItem.ALBUM:
|
||||
return <RiAlbumFill />;
|
||||
case LibraryItem.ARTIST:
|
||||
return <RiUserVoiceFill />;
|
||||
case LibraryItem.ALBUM_ARTIST:
|
||||
return <RiUserVoiceFill />;
|
||||
case LibraryItem.PLAYLIST:
|
||||
return <RiPlayListFill />;
|
||||
default:
|
||||
return <RiAlbumFill />;
|
||||
}
|
||||
});
|
||||
|
||||
export const ItemImagePlaceholder = ({ itemType }: ItemImagePlaceholderProps) => {
|
||||
return (
|
||||
<Center className={styles.imagePlaceholder}>
|
||||
<Image itemType={itemType} />
|
||||
</Center>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
.library-header {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-areas: 'image info';
|
||||
grid-template-rows: 100%;
|
||||
grid-template-columns: 175px minmax(0, 1fr);
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 30vh;
|
||||
min-height: 340px;
|
||||
max-height: 500px;
|
||||
padding: 5rem 2rem 2rem;
|
||||
|
||||
@container (min-width: 600px) {
|
||||
grid-template-columns: 175px minmax(0, 1fr);
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.image {
|
||||
img {
|
||||
width: 175px !important;
|
||||
height: 175px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width: 600px) {
|
||||
grid-template-columns: 200px minmax(0, 1fr);
|
||||
|
||||
h1 {
|
||||
font-size: 4.5rem;
|
||||
}
|
||||
|
||||
.image {
|
||||
img {
|
||||
width: 200px !important;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width: 768px) {
|
||||
grid-template-columns: 225px minmax(0, 1fr);
|
||||
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
.image {
|
||||
img {
|
||||
width: 225px !important;
|
||||
height: 225px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width: 1200px) {
|
||||
grid-template-columns: 250px minmax(0, 1fr);
|
||||
|
||||
h1 {
|
||||
font-size: 5.5rem;
|
||||
}
|
||||
|
||||
.image {
|
||||
img {
|
||||
width: 250px !important;
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-section {
|
||||
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%));
|
||||
}
|
||||
|
||||
.metadata-section {
|
||||
z-index: 15;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-area: info;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image {
|
||||
img {
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.background-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--bg-header-overlay);
|
||||
}
|
||||
|
||||
.title {
|
||||
overflow: hidden;
|
||||
color: var(--main-fg);
|
||||
line-height: 1.15;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
@ -1,74 +1,11 @@
|
|||
import { Group } from '@mantine/core';
|
||||
import { forwardRef, ReactNode, Ref } from 'react';
|
||||
import { Center, Group } from '@mantine/core';
|
||||
import { useMergedRef } from '@mantine/hooks';
|
||||
import { RiAlbumFill } from 'react-icons/ri';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { SimpleImg } from 'react-simple-img';
|
||||
import styled from 'styled-components';
|
||||
import styles from './library-header.module.scss';
|
||||
import { LibraryItem } from '/@/renderer/api/types';
|
||||
import { Text, TextTitle } from '/@/renderer/components';
|
||||
import { useContainerQuery } from '/@/renderer/hooks';
|
||||
|
||||
const HeaderContainer = styled.div<{ imageSize: number }>`
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-auto-columns: 1fr;
|
||||
grid-template-areas: 'image info';
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: ${(props) => props.imageSize + 25}px 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(SimpleImg)`
|
||||
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};
|
||||
opacity: 0.9;
|
||||
`;
|
||||
|
||||
const BackgroundImageOverlay = styled.div`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--bg-header-overlay);
|
||||
`;
|
||||
import { Text } from '/@/renderer/components';
|
||||
import { ItemImagePlaceholder } from '/@/renderer/features/shared/components/item-image-placeholder';
|
||||
|
||||
interface LibraryHeaderProps {
|
||||
background: string;
|
||||
|
|
@ -84,53 +21,30 @@ export const LibraryHeader = forwardRef(
|
|||
{ imageUrl, imagePlaceholderUrl, background, title, item, children }: LibraryHeaderProps,
|
||||
ref: Ref<HTMLDivElement>,
|
||||
) => {
|
||||
const cq = useContainerQuery();
|
||||
const mergedRef = useMergedRef(ref, cq.ref);
|
||||
const titleSize = cq.isXl
|
||||
? '6rem'
|
||||
: cq.isLg
|
||||
? '5.5rem'
|
||||
: cq.isMd
|
||||
? '5rem'
|
||||
: cq.isSm
|
||||
? '4.5rem'
|
||||
: '3rem';
|
||||
|
||||
const imageSize = cq.isLg ? 250 : cq.isMd ? 225 : cq.isSm ? 200 : 175;
|
||||
|
||||
return (
|
||||
<HeaderContainer
|
||||
ref={mergedRef}
|
||||
imageSize={imageSize}
|
||||
<div
|
||||
ref={ref}
|
||||
className={styles.libraryHeader}
|
||||
>
|
||||
<BackgroundImage background={background} />
|
||||
<BackgroundImageOverlay />
|
||||
<CoverImageWrapper>
|
||||
<div
|
||||
className={styles.background}
|
||||
style={{ background }}
|
||||
/>
|
||||
<div className={styles.backgroundOverlay} />
|
||||
<div className={styles.imageSection}>
|
||||
{imageUrl ? (
|
||||
<StyledImage
|
||||
<SimpleImg
|
||||
alt="cover"
|
||||
height={imageSize}
|
||||
className={styles.image}
|
||||
placeholder={imagePlaceholderUrl || 'var(--placeholder-bg)'}
|
||||
src={imageUrl}
|
||||
width={imageSize}
|
||||
style={{ height: '' }}
|
||||
/>
|
||||
) : (
|
||||
<Center
|
||||
sx={{
|
||||
background: 'var(--placeholder-bg)',
|
||||
borderRadius: 'var(--card-default-radius)',
|
||||
height: `${imageSize}px`,
|
||||
width: `${imageSize}px`,
|
||||
}}
|
||||
>
|
||||
<RiAlbumFill
|
||||
color="var(--placeholder-fg)"
|
||||
size={35}
|
||||
/>
|
||||
</Center>
|
||||
<ItemImagePlaceholder itemType={item.type} />
|
||||
)}
|
||||
</CoverImageWrapper>
|
||||
<MetadataWrapper>
|
||||
</div>
|
||||
<div className={styles.metadataSection}>
|
||||
<Group>
|
||||
<Text
|
||||
$link
|
||||
|
|
@ -142,19 +56,10 @@ export const LibraryHeader = forwardRef(
|
|||
{item.type}
|
||||
</Text>
|
||||
</Group>
|
||||
<TextTitle
|
||||
lh={1.15}
|
||||
lineClamp={2}
|
||||
overflow="hidden"
|
||||
pb={cq.isXs ? '0' : cq.isSm ? '0.2rem' : '0.36rem'}
|
||||
sx={{ fontSize: titleSize, overflow: 'hidden' }}
|
||||
weight={900}
|
||||
>
|
||||
{title}
|
||||
</TextTitle>
|
||||
<h1 className={styles.title}>{title}</h1>
|
||||
{children}
|
||||
</MetadataWrapper>
|
||||
</HeaderContainer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
|
|
|||
Reference in a new issue