in library badge to manga in sources (#156)

* add the in library badge to manga in sources * other layouts done
Suwayomi · Mar 11, 2022 · 841b945 · 841b945
1 parent 33c9def
commit 841b945
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 14 deletions.
diff --git a/src/components/MangaCard.tsx b/src/components/MangaCard.tsx
@@ -75,7 +75,8 @@ interface IProps {
 const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref) => {
     const {
         manga: {
-            id, title, thumbnailUrl, downloadCount, unreadCount: unread,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            id, title, thumbnailUrl, downloadCount, unreadCount: unread, inLibrary,
         },
         gridLayout,
     } = props;
@@ -110,6 +111,13 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
                             >
 
                                 <BadgeContainer>
+                                    {inLibrary && (
+                                        <Typography
+                                            sx={{ backgroundColor: 'primary.dark', zIndex: '1' }}
+                                        >
+                                            In library
+                                        </Typography>
+                                    )}
                                     { showUnreadBadge && unread! > 0 && (
                                         <Typography
                                             sx={{ backgroundColor: 'primary.dark' }}
@@ -129,11 +137,18 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
                                 <SpinnerImage
                                     alt={title}
                                     src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`}
-                                    imgStyle={{
-                                        height: '100%',
-                                        width: '100%',
-                                        objectFit: 'cover',
-                                    }}
+                                    imgStyle={inLibrary
+                                        ? {
+                                            height: '100%',
+                                            width: '100%',
+                                            objectFit: 'cover',
+                                            filter: 'brightness(0.4)',
+                                        }
+                                        : {
+                                            height: '100%',
+                                            width: '100%',
+                                            objectFit: 'cover',
+                                        }}
                                     spinnerStyle={{
                                         display: 'grid',
                                         placeItems: 'center',
@@ -189,13 +204,22 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
                 >
                     <Avatar
                         variant="rounded"
-                        sx={{
-                            width: 56,
-                            height: 56,
-                            flex: '0 0 auto',
-                            marginRight: 2,
-                            imageRendering: 'pixelated',
-                        }}
+                        sx={inLibrary
+                            ? {
+                                width: 56,
+                                height: 56,
+                                flex: '0 0 auto',
+                                marginRight: 2,
+                                imageRendering: 'pixelated',
+                                filter: 'brightness(0.4)',
+                            }
+                            : {
+                                width: 56,
+                                height: 56,
+                                flex: '0 0 auto',
+                                marginRight: 2,
+                                imageRendering: 'pixelated',
+                            }}
                         src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`}
                     />
                     <Box
@@ -211,6 +235,13 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
                         </Typography>
                     </Box>
                     <BadgeContainer sx={{ position: 'relative' }}>
+                        {inLibrary && (
+                            <Typography
+                                sx={{ backgroundColor: 'primary.dark', zIndex: '1' }}
+                            >
+                                In library
+                            </Typography>
+                        )}
                         { showUnreadBadge && unread! > 0 && (
                             <Typography
                                 sx={{ backgroundColor: 'primary.dark' }}

diff --git a/src/components/library/LibraryMangaGrid.tsx b/src/components/library/LibraryMangaGrid.tsx
@@ -84,12 +84,17 @@ export default function LibraryMangaGrid(props: IMangaGridProps) {
     const { active, query } = useLibraryOptions();
     const filteredManga = filterManga(mangas);
     const sortedManga = sortManga(filteredManga);
+    const DoneManga = sortedManga.map((ele) => {
+        // eslint-disable-next-line no-param-reassign
+        ele.inLibrary = undefined;
+        return ele;
+    });
     const showFilteredOutMessage = (active || query)
         && filteredManga.length === 0 && mangas.length > 0;
 
     return (
         <MangaGrid
-            mangas={sortedManga}
+            mangas={DoneManga}
             isLoading={isLoading}
             hasNextPage={hasNextPage}
             lastPageNum={lastPageNum}

diff --git a/src/screens/SourceMangas.tsx b/src/screens/SourceMangas.tsx
@@ -175,6 +175,7 @@ export default function SourceMangas(props: { popular: boolean }) {
                             title: it.title,
                             thumbnailUrl: it.thumbnailUrl,
                             id: it.id,
+                            inLibrary: it.inLibrary,
                         }))]);
                     setHasNextPage(data.hasNextPage);
                     setFetched(true);

diff --git a/src/typings.d.ts b/src/typings.d.ts
@@ -59,6 +59,7 @@ interface IMangaCard {
     thumbnailUrl: string
     unreadCount?: number
     downloadCount?: number
+    inLibrary?: boolean
 }
 
 interface IManga {