mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-02 02:43:33 +00:00
Lint all files
This commit is contained in:
jeffvli
parent
22af76b4d6
commit
30e52ebb54
334 changed files with 76519 additions and 75932 deletions
|
|
@ -4,37 +4,37 @@ import { motion } from 'framer-motion';
|
|||
import styled from 'styled-components';
|
||||
|
||||
interface AnimatedPageProps {
|
||||
children: ReactNode;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
const StyledAnimatedPage = styled(motion.main)`
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const variants = {
|
||||
animate: { opacity: 1 },
|
||||
exit: { opacity: 0 },
|
||||
initial: { opacity: 0 },
|
||||
animate: { opacity: 1 },
|
||||
exit: { opacity: 0 },
|
||||
initial: { opacity: 0 },
|
||||
};
|
||||
|
||||
export const AnimatedPage = forwardRef(
|
||||
({ children }: AnimatedPageProps, ref: Ref<HTMLDivElement>) => {
|
||||
return (
|
||||
<StyledAnimatedPage
|
||||
ref={ref}
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
initial="initial"
|
||||
transition={{ duration: 0.5, ease: 'anticipate' }}
|
||||
variants={variants}
|
||||
>
|
||||
{children}
|
||||
</StyledAnimatedPage>
|
||||
);
|
||||
},
|
||||
({ children }: AnimatedPageProps, ref: Ref<HTMLDivElement>) => {
|
||||
return (
|
||||
<StyledAnimatedPage
|
||||
ref={ref}
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
initial="initial"
|
||||
transition={{ duration: 0.5, ease: 'anticipate' }}
|
||||
variants={variants}
|
||||
>
|
||||
{children}
|
||||
</StyledAnimatedPage>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@ import styled from 'styled-components';
|
|||
import { Paper } from '/@/renderer/components';
|
||||
|
||||
const StyledFilterBar = styled(Paper)`
|
||||
z-index: 1;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 65%);
|
||||
z-index: 1;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 65%);
|
||||
`;
|
||||
|
||||
export const FilterBar = ({ children, ...props }: PaperProps) => {
|
||||
return <StyledFilterBar {...props}>{children}</StyledFilterBar>;
|
||||
return <StyledFilterBar {...props}>{children}</StyledFilterBar>;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,67 +5,67 @@ import { PlayButton as PlayBtn } from '/@/renderer/features/shared/components/pl
|
|||
import styled from 'styled-components';
|
||||
|
||||
interface LibraryHeaderBarProps {
|
||||
children: ReactNode;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
const HeaderContainer = styled.div`
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 1rem;
|
||||
`;
|
||||
|
||||
export const LibraryHeaderBar = ({ children }: LibraryHeaderBarProps) => {
|
||||
return <HeaderContainer>{children}</HeaderContainer>;
|
||||
return <HeaderContainer>{children}</HeaderContainer>;
|
||||
};
|
||||
|
||||
interface TitleProps {
|
||||
children: ReactNode;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
const Title = ({ children }: TitleProps) => {
|
||||
return (
|
||||
<TextTitle
|
||||
order={1}
|
||||
overflow="hidden"
|
||||
weight={700}
|
||||
>
|
||||
{children}
|
||||
</TextTitle>
|
||||
);
|
||||
return (
|
||||
<TextTitle
|
||||
order={1}
|
||||
overflow="hidden"
|
||||
weight={700}
|
||||
>
|
||||
{children}
|
||||
</TextTitle>
|
||||
);
|
||||
};
|
||||
|
||||
interface PlayButtonProps {
|
||||
onClick: () => void;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
const PlayButton = ({ onClick }: PlayButtonProps) => {
|
||||
return (
|
||||
<Box>
|
||||
<PlayBtn
|
||||
h="45px"
|
||||
w="45px"
|
||||
onClick={onClick}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
return (
|
||||
<Box>
|
||||
<PlayBtn
|
||||
h="45px"
|
||||
w="45px"
|
||||
onClick={onClick}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const Badge = styled(Paper)`
|
||||
padding: 0.3rem 1rem;
|
||||
font-weight: 600;
|
||||
border-radius: 0.3rem;
|
||||
padding: 0.3rem 1rem;
|
||||
font-weight: 600;
|
||||
border-radius: 0.3rem;
|
||||
`;
|
||||
|
||||
interface HeaderBadgeProps extends PaperProps {
|
||||
isLoading?: boolean;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
const HeaderBadge = ({ children, isLoading, ...props }: HeaderBadgeProps) => {
|
||||
return <Badge {...props}>{isLoading ? <SpinnerIcon /> : children}</Badge>;
|
||||
return <Badge {...props}>{isLoading ? <SpinnerIcon /> : children}</Badge>;
|
||||
};
|
||||
|
||||
LibraryHeaderBar.Title = Title;
|
||||
|
|
|
|||
|
|
@ -10,150 +10,151 @@ 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;
|
||||
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%));
|
||||
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%;
|
||||
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;
|
||||
}
|
||||
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};
|
||||
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);
|
||||
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);
|
||||
`;
|
||||
|
||||
interface LibraryHeaderProps {
|
||||
background: string;
|
||||
children?: ReactNode;
|
||||
imagePlaceholderUrl?: string | null;
|
||||
imageUrl?: string | null;
|
||||
item: { route: string; type: LibraryItem };
|
||||
title: string;
|
||||
background: string;
|
||||
children?: ReactNode;
|
||||
imagePlaceholderUrl?: string | null;
|
||||
imageUrl?: string | null;
|
||||
item: { route: string; type: LibraryItem };
|
||||
title: string;
|
||||
}
|
||||
|
||||
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';
|
||||
(
|
||||
{ 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;
|
||||
const imageSize = cq.isLg ? 250 : cq.isMd ? 225 : cq.isSm ? 200 : 175;
|
||||
|
||||
return (
|
||||
<HeaderContainer
|
||||
ref={mergedRef}
|
||||
imageSize={imageSize}
|
||||
>
|
||||
<BackgroundImage background={background} />
|
||||
<BackgroundImageOverlay />
|
||||
<CoverImageWrapper>
|
||||
{imageUrl ? (
|
||||
<StyledImage
|
||||
alt="cover"
|
||||
height={imageSize}
|
||||
placeholder={imagePlaceholderUrl || 'var(--placeholder-bg)'}
|
||||
src={imageUrl}
|
||||
width={imageSize}
|
||||
/>
|
||||
) : (
|
||||
<Center
|
||||
sx={{
|
||||
background: 'var(--placeholder-bg)',
|
||||
borderRadius: 'var(--card-default-radius)',
|
||||
height: `${imageSize}px`,
|
||||
width: `${imageSize}px`,
|
||||
}}
|
||||
return (
|
||||
<HeaderContainer
|
||||
ref={mergedRef}
|
||||
imageSize={imageSize}
|
||||
>
|
||||
<RiAlbumFill
|
||||
color="var(--placeholder-fg)"
|
||||
size={35}
|
||||
/>
|
||||
</Center>
|
||||
)}
|
||||
</CoverImageWrapper>
|
||||
<MetadataWrapper>
|
||||
<Group>
|
||||
<Text
|
||||
$link
|
||||
component={Link}
|
||||
to={item.route}
|
||||
tt="uppercase"
|
||||
weight={600}
|
||||
>
|
||||
{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>
|
||||
{children}
|
||||
</MetadataWrapper>
|
||||
</HeaderContainer>
|
||||
);
|
||||
},
|
||||
<BackgroundImage background={background} />
|
||||
<BackgroundImageOverlay />
|
||||
<CoverImageWrapper>
|
||||
{imageUrl ? (
|
||||
<StyledImage
|
||||
alt="cover"
|
||||
height={imageSize}
|
||||
placeholder={imagePlaceholderUrl || 'var(--placeholder-bg)'}
|
||||
src={imageUrl}
|
||||
width={imageSize}
|
||||
/>
|
||||
) : (
|
||||
<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>
|
||||
)}
|
||||
</CoverImageWrapper>
|
||||
<MetadataWrapper>
|
||||
<Group>
|
||||
<Text
|
||||
$link
|
||||
component={Link}
|
||||
to={item.route}
|
||||
tt="uppercase"
|
||||
weight={600}
|
||||
>
|
||||
{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>
|
||||
{children}
|
||||
</MetadataWrapper>
|
||||
</HeaderContainer>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,43 +3,43 @@ import { RiPlayFill } from 'react-icons/ri';
|
|||
import styled from 'styled-components';
|
||||
|
||||
const MotionButton = styled(UnstyledButton)`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--btn-filled-bg);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
opacity: 0.8;
|
||||
|
||||
svg {
|
||||
fill: var(--btn-filled-fg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--btn-filled-bg-hover);
|
||||
transform: scale(1.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--btn-filled-bg);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
opacity: 0.8;
|
||||
|
||||
svg {
|
||||
fill: var(--btn-filled-fg-hover);
|
||||
fill: var(--btn-filled-fg);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--btn-filled-bg-hover);
|
||||
transform: scale(1.1);
|
||||
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
svg {
|
||||
fill: var(--btn-filled-fg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
`;
|
||||
|
||||
export const PlayButton = ({ ...props }: any) => {
|
||||
return (
|
||||
<MotionButton
|
||||
{...props}
|
||||
h="45px"
|
||||
w="45px"
|
||||
>
|
||||
<RiPlayFill size={20} />
|
||||
</MotionButton>
|
||||
);
|
||||
return (
|
||||
<MotionButton
|
||||
{...props}
|
||||
h="45px"
|
||||
w="45px"
|
||||
>
|
||||
<RiPlayFill size={20} />
|
||||
</MotionButton>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,33 +1,33 @@
|
|||
import styled from 'styled-components';
|
||||
|
||||
export const ResizeHandle = styled.div<{
|
||||
isResizing: boolean;
|
||||
placement: 'top' | 'left' | 'bottom' | 'right';
|
||||
isResizing: boolean;
|
||||
placement: 'top' | 'left' | 'bottom' | 'right';
|
||||
}>`
|
||||
position: absolute;
|
||||
top: ${(props) => props.placement === 'top' && 0};
|
||||
right: ${(props) => props.placement === 'right' && 0};
|
||||
bottom: ${(props) => props.placement === 'bottom' && 0};
|
||||
left: ${(props) => props.placement === 'left' && 0};
|
||||
z-index: 90;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
cursor: ew-resize;
|
||||
opacity: ${(props) => (props.isResizing ? 1 : 0)};
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: ${(props) => props.placement === 'top' && 0};
|
||||
right: ${(props) => props.placement === 'right' && 0};
|
||||
bottom: ${(props) => props.placement === 'bottom' && 0};
|
||||
left: ${(props) => props.placement === 'left' && 0};
|
||||
width: 1px;
|
||||
z-index: 90;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background-color: var(--sidebar-handle-bg);
|
||||
content: '';
|
||||
}
|
||||
cursor: ew-resize;
|
||||
opacity: ${(props) => (props.isResizing ? 1 : 0)};
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: ${(props) => props.placement === 'top' && 0};
|
||||
right: ${(props) => props.placement === 'right' && 0};
|
||||
bottom: ${(props) => props.placement === 'bottom' && 0};
|
||||
left: ${(props) => props.placement === 'left' && 0};
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: var(--sidebar-handle-bg);
|
||||
content: '';
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue