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

Extract list card avatar

Browse Source
This commit is contained in:
schroda
2025-04-25 00:50:51 +02:00
parent 6a6ff2cbe1
commit c0ab5f93a1
10 changed files with 74 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/modules/chapter/components/cards/ChapterCardThumbnail.tsx
View File

@@ -7,12 +7,11 @@
*/
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';
import { ListCardAvatar } from '@/modules/core/components/cards/list/ListCardAvatar.tsx';
export const ChapterCardThumbnail = ({
mangaId,
@@ -24,27 +23,10 @@ export const ChapterCardThumbnail = ({
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>
<ListCardAvatar
iconUrl={Mangas.getThumbnailUrl({ thumbnailUrl, thumbnailUrlLastFetched })}
alt={mangaTitle}
slots={{ spinnerImageProps: { imgStyle: { imageRendering: 'pixelated' } } }}
/>
</Link>
);

4
src/modules/core/components/SpinnerImage.tsx
View File

@@ -21,7 +21,7 @@ import { Priority } from '@/lib/Queue.ts';
import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
import { useIntersectionObserver } from '@/modules/core/hooks/useIntersectionObserver.tsx';
interface IProps {
export interface SpinnerImageProps {
shouldLoad?: boolean;
src: string;
@@ -44,7 +44,7 @@ interface IProps {
}
export const SpinnerImage = forwardRef(
(props: IProps, imgRef: ForwardedRef<HTMLImageElement | HTMLDivElement | null>) => {
(props: SpinnerImageProps, imgRef: ForwardedRef<HTMLImageElement | HTMLDivElement | null>) => {
const {
shouldLoad = true,
shouldDecode,

41
src/modules/core/components/cards/list/ListCardAvatar.tsx Normal file
View File

@@ -0,0 +1,41 @@
/*
* 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 Avatar, { AvatarProps } from '@mui/material/Avatar';
import { SpinnerImage, SpinnerImageProps } from '@/modules/core/components/SpinnerImage.tsx';
export const ListCardAvatar = ({
iconUrl,
alt,
slots,
}: {
iconUrl: string;
alt: string;
slots?: { avatarProps?: Partial<AvatarProps>; spinnerImageProps?: Partial<SpinnerImageProps> };
}) => (
<Avatar
variant="rounded"
alt={alt}
{...slots?.avatarProps}
sx={{
width: 56,
height: 56,
flex: '0 0 auto',
background: 'transparent',
...slots?.avatarProps?.sx,
}}
>
<SpinnerImage
alt={alt}
src={iconUrl}
{...slots?.spinnerImageProps}
spinnerStyle={{ small: true, ...slots?.spinnerImageProps?.spinnerStyle }}
imgStyle={{ objectFit: 'cover', width: '100%', height: '100%', ...slots?.spinnerImageProps?.imgStyle }}
/>
</Avatar>
);

21
src/modules/extension/components/ExtensionCard.tsx
View File

@@ -10,7 +10,6 @@ import { useEffect, useState } from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Button from '@mui/material/Button';
import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
import { useTranslation } from 'react-i18next';
import IconButton from '@mui/material/IconButton';
@@ -19,7 +18,6 @@ import Stack from '@mui/material/Stack';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { makeToast } from '@/modules/core/utils/Toast.ts';
import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
import {
ExtensionAction,
ExtensionState,
@@ -36,6 +34,7 @@ import {
import { getInstalledState } from '@/modules/extension/Extensions.utils.ts';
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip';
import { ListCardAvatar } from '@/modules/core/components/cards/list/ListCardAvatar.tsx';
interface IProps {
extension: TExtension;
@@ -130,23 +129,7 @@ export function ExtensionCard(props: IProps) {
},
}}
>
<Avatar
variant="rounded"
sx={{
width: 56,
height: 56,
flex: '0 0 auto',
background: 'transparent',
}}
alt={name}
>
<SpinnerImage
spinnerStyle={{ small: true }}
imgStyle={{ objectFit: 'cover', width: '100%', height: '100%' }}
alt={name}
src={requestManager.getValidImgUrlFor(iconUrl)}
/>
</Avatar>
<ListCardAvatar iconUrl={requestManager.getValidImgUrlFor(iconUrl)} alt={name} />
<Stack
sx={{
justifyContent: 'center',

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

@@ -43,7 +43,7 @@ export const ChapterHistoryCard = memo(({ chapter }: { chapter: ChapterHistoryLi
padding: 1.5,
}}
>
<Box sx={{ display: 'flex', flexGrow: 1 }}>
<Box sx={{ display: 'flex', flexGrow: 1, gap: 1 }}>
<ChapterCardThumbnail
mangaId={manga.id}
mangaTitle={manga.title}

36
src/modules/manga/components/cards/MangaListCard.tsx
View File

@@ -9,17 +9,16 @@
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardActionArea from '@mui/material/CardActionArea';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import { Link as RouterLink } from 'react-router-dom';
import { memo, useRef } from 'react';
import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
import { SpecificMangaCardProps } from '@/modules/manga/Manga.types.ts';
import { Mangas } from '@/modules/manga/services/Mangas.ts';
import { MangaOptionButton } from '@/modules/manga/components/MangaOptionButton.tsx';
import { ListCardAvatar } from '@/modules/core/components/cards/list/ListCardAvatar.tsx';
export const MangaListCard = memo(
({
@@ -71,30 +70,21 @@ export const MangaListCard = memo(
alignItems: 'center',
padding: 1.5,
position: 'relative',
gap: 1,
}}
>
<Avatar
variant="rounded"
sx={{
width: 56,
height: 56,
flex: '0 0 auto',
marginRight: 1,
<ListCardAvatar
iconUrl={Mangas.getThumbnailUrl(manga)}
alt={manga.title}
slots={{
spinnerImageProps: {
imgStyle: {
imageRendering: 'pixelated',
filter: inLibraryIndicator && isInLibrary ? 'brightness(0.4)' : undefined,
},
},
}}
>
<SpinnerImage
spinnerStyle={{ small: true }}
imgStyle={{
objectFit: 'cover',
width: '100%',
height: '100%',
imageRendering: 'pixelated',
filter: inLibraryIndicator && isInLibrary ? 'brightness(0.4)' : undefined,
}}
alt={manga.title}
src={Mangas.getThumbnailUrl(manga)}
/>
</Avatar>
/>
<Box
sx={{
display: 'flex',

23
src/modules/migration/components/MigrationCard.tsx
View File

@@ -11,15 +11,14 @@ import CardContent from '@mui/material/CardContent';
import Box from '@mui/material/Box';
import CardActionArea from '@mui/material/CardActionArea';
import Chip from '@mui/material/Chip';
import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { GetMigratableSourcesQuery } from '@/lib/graphql/generated/graphql.ts';
import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
import { translateExtensionLanguage } from '@/modules/extension/Extensions.utils.ts';
import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
import { ListCardAvatar } from '@/modules/core/components/cards/list/ListCardAvatar.tsx';
export type TMigratableSource = NonNullable<GetMigratableSourcesQuery['mangas']['nodes'][number]['source']> & {
mangaCount: number;
@@ -43,24 +42,8 @@ export const MigrationCard = ({ id, name, lang, iconUrl, mangaCount }: TMigratab
p: 1.5,
}}
>
<Box sx={{ display: 'flex' }}>
<Avatar
variant="rounded"
sx={{
width: 56,
height: 56,
flex: '0 0 auto',
mr: 1,
background: 'transparent',
}}
>
<SpinnerImage
spinnerStyle={{ small: true }}
imgStyle={{ objectFit: 'cover', width: '100%', height: '100%' }}
alt={sourceName}
src={requestManager.getValidImgUrlFor(iconUrl)}
/>
</Avatar>
<Box sx={{ display: 'flex', gap: 1 }}>
<ListCardAvatar iconUrl={requestManager.getValidImgUrlFor(iconUrl)} alt={sourceName} />
<Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
<Typography variant="h6" component="h3">
{sourceName}

6
src/modules/reader/components/viewer/ReaderPage.tsx
View File

@@ -6,8 +6,8 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { ComponentProps, memo, useCallback } from 'react';
import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
import { memo, useCallback } from 'react';
import { SpinnerImage, SpinnerImageProps } from '@/modules/core/components/SpinnerImage.tsx';
import {
IReaderSettings,
ReaderCustomFilter,
@@ -74,7 +74,7 @@ const BaseReaderPage = ({
readerNavBarWidth,
isLoaded,
...props
}: Omit<ComponentProps<typeof SpinnerImage>, 'ref' | 'spinnerStyle' | 'imgStyle' | 'onLoad' | 'onError'> &
}: Omit<SpinnerImageProps, 'spinnerStyle' | 'imgStyle' | 'onLoad' | 'onError'> &
Pick<IReaderSettings, 'readingMode' | 'customFilter' | 'pageScaleMode' | 'shouldStretchPage' | 'readerWidth'> &
Pick<TReaderScrollbarContext, 'scrollbarXSize' | 'scrollbarYSize'> &
Pick<NavbarContextType, 'readerNavBarWidth'> & {

21
src/modules/source/components/SourceCard.tsx
View File

@@ -7,7 +7,6 @@
*/
import CardActionArea from '@mui/material/CardActionArea';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
@@ -18,13 +17,13 @@ import { Link } from 'react-router-dom';
import Stack from '@mui/material/Stack';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { SourceContentType } from '@/modules/source/screens/SourceMangas.tsx';
import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
import { GetSourcesListQuery } from '@/lib/graphql/generated/graphql.ts';
import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
import { translateExtensionLanguage } from '@/modules/extension/Extensions.utils.ts';
import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
import { MUIUtil } from '@/lib/mui/MUI.util.ts';
import { Sources } from '@/modules/source/services/Sources.ts';
import { ListCardAvatar } from '@/modules/core/components/cards/list/ListCardAvatar.tsx';
interface IProps {
source: GetSourcesListQuery['sources']['nodes'][number];
@@ -69,23 +68,7 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
p: 1.5,
}}
>
<Avatar
variant="rounded"
alt={sourceName}
sx={{
width: 56,
height: 56,
flex: '0 0 auto',
background: 'transparent',
}}
>
<SpinnerImage
spinnerStyle={{ small: true }}
imgStyle={{ objectFit: 'cover', width: '100%', height: '100%' }}
alt={sourceName}
src={requestManager.getValidImgUrlFor(iconUrl)}
/>
</Avatar>
<ListCardAvatar iconUrl={requestManager.getValidImgUrlFor(iconUrl)} alt={sourceName} />
<Stack
sx={{
justifyContent: 'center',

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

@@ -42,7 +42,7 @@ export const ChapterUpdateCard = memo(({ chapter }: { chapter: ChapterUpdateList
padding: 1.5,
}}
>
<Box sx={{ display: 'flex', flexGrow: 1 }}>
<Box sx={{ display: 'flex', flexGrow: 1, gap: 1 }}>
<ChapterCardThumbnail
mangaId={manga.id}
mangaTitle={manga.title}