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 ? (
+
+ ) : (
+
+
+
+ )}