ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extract "chapter thumbnail" into component

Browse Source
This commit is contained in:
schroda
2025-03-10 22:20:46 +01:00
parent 50493af71c
commit ac4bdebb61
3 changed files with 64 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/modules/chapter/components/cards/ChapterCardThumbnail.tsx Normal file
View File

@@ -0,0 +1,50 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { Link } from 'react-router-dom';
import Avatar from '@mui/material/Avatar';
import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
import { Mangas } from '@/modules/manga/services/Mangas.ts';
import { MangaIdInfo, MangaThumbnailInfo } from '@/modules/manga/Manga.types.ts';
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
export const ChapterCardThumbnail = ({
mangaId,
mangaTitle,
thumbnailUrl,
thumbnailUrlLastFetched,
}: MangaThumbnailInfo & {
mangaId: MangaIdInfo['id'];
mangaTitle: MangaType['title'];
}) => (
<Link to={AppRoutes.manga.path(mangaId)} style={{ textDecoration: 'none' }}>
<Avatar
variant="rounded"
sx={{
width: 56,
height: 56,
flex: '0 0 auto',
marginRight: 1,
background: 'transparent',
}}
>
<SpinnerImage
imgStyle={{
objectFit: 'cover',
width: '100%',
height: '100%',
imageRendering: 'pixelated',
}}
spinnerStyle={{ small: true }}
alt={mangaTitle}
src={Mangas.getThumbnailUrl({ thumbnailUrl, thumbnailUrlLastFetched })}
/>
</Avatar>
</Link>
);

34
src/modules/history/components/ChapterHistoryCard.tsx
View File

@@ -9,7 +9,6 @@
import DownloadIcon from '@mui/icons-material/Download';
import Box from '@mui/material/Box';
import CardActionArea from '@mui/material/CardActionArea';
import Avatar from '@mui/material/Avatar';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import IconButton from '@mui/material/IconButton';
@@ -20,8 +19,6 @@ import { memo } from 'react';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
import { ChapterHistoryListFieldsFragment, DownloadState } from '@/lib/graphql/generated/graphql.ts';
import { Mangas } from '@/modules/manga/services/Mangas.ts';
import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
import { requestManager } from '@/lib/requests/RequestManager.ts';
@@ -29,6 +26,7 @@ import { makeToast } from '@/modules/core/utils/Toast.ts';
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
import { Chapters } from '@/modules/chapter/services/Chapters.ts';
import { epochToDate, timeFormatter } from '@/util/DateHelper.ts';
import { ChapterCardThumbnail } from '@/modules/chapter/components/cards/ChapterCardThumbnail.tsx';
export const ChapterHistoryCard = memo(({ chapter }: { chapter: ChapterHistoryListFieldsFragment }) => {
const { manga } = chapter;
@@ -71,30 +69,12 @@ export const ChapterHistoryCard = memo(({ chapter }: { chapter: ChapterHistoryLi
}}
>
<Box sx={{ display: 'flex', flexGrow: 1 }}>
<Link to={AppRoutes.manga.path(chapter.manga.id)} style={{ textDecoration: 'none' }}>
<Avatar
variant="rounded"
sx={{
width: 56,
height: 56,
flex: '0 0 auto',
marginRight: 1,
background: 'transparent',
}}
>
<SpinnerImage
imgStyle={{
objectFit: 'cover',
width: '100%',
height: '100%',
imageRendering: 'pixelated',
}}
spinnerStyle={{ small: true }}
alt={manga.title}
src={Mangas.getThumbnailUrl(manga)}
/>
</Avatar>
</Link>
<ChapterCardThumbnail
mangaId={manga.id}
mangaTitle={manga.title}
thumbnailUrl={manga.thumbnailUrl}
thumbnailUrlLastFetched={manga.thumbnailUrlLastFetched}
/>
<Box
sx={{
display: 'flex',

34
src/modules/updates/components/ChapterUpdateCard.tsx
View File

@@ -9,7 +9,6 @@
import DownloadIcon from '@mui/icons-material/Download';
import Box from '@mui/material/Box';
import CardActionArea from '@mui/material/CardActionArea';
import Avatar from '@mui/material/Avatar';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import IconButton from '@mui/material/IconButton';
@@ -20,14 +19,13 @@ import { memo } from 'react';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
import { ChapterUpdateListFieldsFragment, DownloadState } from '@/lib/graphql/generated/graphql.ts';
import { Mangas } from '@/modules/manga/services/Mangas.ts';
import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { makeToast } from '@/modules/core/utils/Toast.ts';
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
import { Chapters } from '@/modules/chapter/services/Chapters.ts';
import { ChapterCardThumbnail } from '@/modules/chapter/components/cards/ChapterCardThumbnail.tsx';
export const ChapterUpdateCard = memo(({ chapter }: { chapter: ChapterUpdateListFieldsFragment }) => {
const { manga } = chapter;
@@ -71,30 +69,12 @@ export const ChapterUpdateCard = memo(({ chapter }: { chapter: ChapterUpdateList
}}
>
<Box sx={{ display: 'flex', flexGrow: 1 }}>
<Link to={AppRoutes.manga.path(chapter.manga.id)} style={{ textDecoration: 'none' }}>
<Avatar
variant="rounded"
sx={{
width: 56,
height: 56,
flex: '0 0 auto',
marginRight: 1,
background: 'transparent',
}}
>
<SpinnerImage
imgStyle={{
objectFit: 'cover',
width: '100%',
height: '100%',
imageRendering: 'pixelated',
}}
spinnerStyle={{ small: true }}
alt={manga.title}
src={Mangas.getThumbnailUrl(manga)}
/>
</Avatar>
</Link>
<ChapterCardThumbnail
mangaId={manga.id}
mangaTitle={manga.title}
thumbnailUrl={manga.thumbnailUrl}
thumbnailUrlLastFetched={manga.thumbnailUrlLastFetched}
/>
<Box
sx={{
display: 'flex',