diff --git a/src/renderer/components/virtual-grid/grid-card/default-card.tsx b/src/renderer/components/virtual-grid/grid-card/default-card.tsx index 35a5faca..39e51603 100644 --- a/src/renderer/components/virtual-grid/grid-card/default-card.tsx +++ b/src/renderer/components/virtual-grid/grid-card/default-card.tsx @@ -1,4 +1,7 @@ +import { Center, Stack } from '@mantine/core'; +import { RiAlbumFill, RiUserVoiceFill, RiPlayListFill } from 'react-icons/ri'; import { generatePath, useNavigate } from 'react-router-dom'; +import { SimpleImg } from 'react-simple-img'; import { ListChildComponentProps } from 'react-window'; import styled from 'styled-components'; import { Album, AlbumArtist, Artist, LibraryItem } from '/@/renderer/api/types'; @@ -88,14 +91,6 @@ const ImageContainer = styled.div` } `; -const Image = styled.img` - width: 100%; - max-width: 100%; - height: auto; - object-fit: contain; - border: 0; -`; - const DetailContainer = styled.div` margin-top: 0.5rem; `; @@ -120,6 +115,26 @@ export const DefaultCard = ({ }, {}), ); + let Placeholder = RiAlbumFill; + + switch (controls.itemType) { + case LibraryItem.ALBUM: + Placeholder = RiAlbumFill; + break; + case LibraryItem.ARTIST: + Placeholder = RiUserVoiceFill; + break; + case LibraryItem.ALBUM_ARTIST: + Placeholder = RiUserVoiceFill; + break; + case LibraryItem.PLAYLIST: + Placeholder = RiPlayListFill; + break; + default: + Placeholder = RiAlbumFill; + break; + } + return ( - + {data?.imageUrl ? ( + + ) : ( +
+ +
+ )} +
+ + + {controls.cardRows.map((row) => ( + + ))} + +
); diff --git a/src/renderer/components/virtual-grid/grid-card/poster-card.tsx b/src/renderer/components/virtual-grid/grid-card/poster-card.tsx index 3fe045b9..c1fc9b51 100644 --- a/src/renderer/components/virtual-grid/grid-card/poster-card.tsx +++ b/src/renderer/components/virtual-grid/grid-card/poster-card.tsx @@ -1,5 +1,7 @@ -import { Stack } from '@mantine/core'; +import { Center, Stack } from '@mantine/core'; +import { RiAlbumFill, RiPlayListFill, RiUserVoiceFill } from 'react-icons/ri'; import { generatePath, useNavigate } from 'react-router-dom'; +import { SimpleImg } from 'react-simple-img'; import { ListChildComponentProps } from 'react-window'; import styled from 'styled-components'; import { Album, AlbumArtist, Artist, LibraryItem } from '/@/renderer/api/types'; @@ -77,14 +79,6 @@ const ImageContainer = styled.div` } `; -const Image = styled.img` - width: 100%; - max-width: 100%; - height: auto; - object-fit: cover; - border: 0; -`; - const DetailContainer = styled.div` margin-top: 0.5rem; `; @@ -109,14 +103,52 @@ export const PosterCard = ({ }, {}), ); + let Placeholder = RiAlbumFill; + + switch (controls.itemType) { + case LibraryItem.ALBUM: + Placeholder = RiAlbumFill; + break; + case LibraryItem.ARTIST: + Placeholder = RiUserVoiceFill; + break; + case LibraryItem.ALBUM_ARTIST: + Placeholder = RiUserVoiceFill; + break; + case LibraryItem.PLAYLIST: + Placeholder = RiPlayListFill; + break; + default: + Placeholder = RiAlbumFill; + break; + } + return ( navigate(path)}> - + {data?.imageUrl ? ( + + ) : ( +
+ +
+ )}