pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove custom image component for grid images

Browse source
This commit is contained in:
jeffvli 2023-02-06 01:57:49 -08:00
parent 757eddd6f1
commit eedcef8f52
2 changed files with 4 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/renderer/components/virtual-grid/grid-card/default-card.tsx
View file

@ -1,7 +1,6 @@
import { Center } from '@mantine/core'; import { Center } from '@mantine/core';
import { RiAlbumFill } from 'react-icons/ri'; import { RiAlbumFill } from 'react-icons/ri';
import { generatePath, useNavigate } from 'react-router'; import { generatePath, useNavigate } from 'react-router';
import { SimpleImg } from 'react-simple-img';
import type { ListChildComponentProps } from 'react-window'; import type { ListChildComponentProps } from 'react-window';
import styled from 'styled-components'; import styled from 'styled-components';
import type { CardRow, CardRoute, Play, PlayQueueAddOptions } from '/@/renderer/types'; import type { CardRow, CardRoute, Play, PlayQueueAddOptions } from '/@/renderer/types';
@ -78,7 +77,8 @@ const ImageSection = styled.div<{ size?: number }>`
} }
`; `;
const Image = styled(SimpleImg)` const Image = styled.img`
object-fit: cover;
border-radius: var(--card-default-radius); border-radius: var(--card-default-radius);
box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 20%); box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 20%);
`; `;
@ -156,9 +156,7 @@ export const DefaultCard = ({
<ImageSection size={itemWidth}> <ImageSection size={itemWidth}>
{data?.imageUrl ? ( {data?.imageUrl ? (
<Image <Image
animationDuration={0.3}
height={cardSize} height={cardSize}
imgStyle={{ objectFit: 'cover' }}
placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'} placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'}
src={data?.imageUrl} src={data?.imageUrl}
width={cardSize} width={cardSize}

10
src/renderer/components/virtual-grid/grid-card/poster-card.tsx
View file

@ -2,7 +2,6 @@ import { Center } from '@mantine/core';
import { RiAlbumFill } from 'react-icons/ri'; import { RiAlbumFill } from 'react-icons/ri';
import { generatePath } from 'react-router'; import { generatePath } from 'react-router';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { SimpleImg } from 'react-simple-img';
import type { ListChildComponentProps } from 'react-window'; import type { ListChildComponentProps } from 'react-window';
import styled from 'styled-components'; import styled from 'styled-components';
import { Skeleton } from '/@/renderer/components/skeleton'; import { Skeleton } from '/@/renderer/components/skeleton';
@ -78,13 +77,10 @@ interface ImageProps {
isLoading?: boolean; isLoading?: boolean;
} }
const Image = styled(SimpleImg)<ImageProps>` const Image = styled.img<ImageProps>`
object-fit: cover;
border: 0; border: 0;
border-radius: var(--card-poster-radius); border-radius: var(--card-poster-radius);
img {
object-fit: cover;
}
`; `;
const ControlsContainer = styled.div` const ControlsContainer = styled.div`
@ -151,9 +147,7 @@ export const PosterCard = ({
<ImageSection style={{ height: `${sizes.itemWidth}px` }}> <ImageSection style={{ height: `${sizes.itemWidth}px` }}>
{data?.imageUrl ? ( {data?.imageUrl ? (
<Image <Image
animationDuration={0.3}
height={sizes.itemWidth} height={sizes.itemWidth}
importance="auto"
placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'} placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'}
src={data?.imageUrl} src={data?.imageUrl}
width={sizes.itemWidth} width={sizes.itemWidth}