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

Internationalize missed "local source" occurences

Browse Source
This commit is contained in:
schroda
2024-09-29 15:19:06 +02:00
parent ff9f6b6207
commit da1a9d9e31
3 changed files with 92 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/components/MigrationCard.tsx
View File

@@ -14,6 +14,7 @@ import Chip from '@mui/material/Chip';
import Avatar from '@mui/material/Avatar'; import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { requestManager } from '@/lib/requests/RequestManager.ts'; import { requestManager } from '@/lib/requests/RequestManager.ts';
import { GetMigratableSourcesQuery } from '@/lib/graphql/generated/graphql.ts'; import { GetMigratableSourcesQuery } from '@/lib/graphql/generated/graphql.ts';
import { translateExtensionLanguage } from '@/screens/util/Extensions.ts'; import { translateExtensionLanguage } from '@/screens/util/Extensions.ts';
@@ -24,51 +25,58 @@ export type TMigratableSource = NonNullable<GetMigratableSourcesQuery['mangas'][
}; };
// TODO - cleanup source/extension components // TODO - cleanup source/extension components
export const MigrationCard = ({ id, name, lang, iconUrl, mangaCount }: TMigratableSource) => ( export const MigrationCard = ({ id, name, lang, iconUrl, mangaCount }: TMigratableSource) => {
<Card> const { t } = useTranslation();
<CardActionArea component={Link} to={`/migrate/source/${id}/`}>
<CardContent const isLocalSource = Number(id) === 0;
sx={{ const sourceName = isLocalSource ? t('source.local_source.title') : name;
display: 'flex',
justifyContent: 'space-between', return (
alignItems: 'center', <Card>
p: 1.5, <CardActionArea component={Link} to={`/migrate/source/${id}/`}>
}} <CardContent
> sx={{
<Box sx={{ display: 'flex' }}> display: 'flex',
<Avatar justifyContent: 'space-between',
variant="rounded" alignItems: 'center',
sx={{ p: 1.5,
width: 56, }}
height: 56, >
flex: '0 0 auto', <Box sx={{ display: 'flex' }}>
mr: 1, <Avatar
background: 'transparent', variant="rounded"
}}
>
<SpinnerImage
spinnerStyle={{ small: true }}
imgStyle={{ objectFit: 'cover', width: '100%', height: '100%' }}
alt={name}
src={requestManager.getValidImgUrlFor(iconUrl)}
/>
</Avatar>
<Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
<Typography variant="h6" component="h3">
{name}
</Typography>
<Typography
variant="caption"
sx={{ sx={{
display: 'block', width: 56,
height: 56,
flex: '0 0 auto',
mr: 1,
background: 'transparent',
}} }}
> >
{translateExtensionLanguage(lang)} <SpinnerImage
</Typography> spinnerStyle={{ small: true }}
imgStyle={{ objectFit: 'cover', width: '100%', height: '100%' }}
alt={sourceName}
src={requestManager.getValidImgUrlFor(iconUrl)}
/>
</Avatar>
<Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
<Typography variant="h6" component="h3">
{sourceName}
</Typography>
<Typography
variant="caption"
sx={{
display: 'block',
}}
>
{translateExtensionLanguage(lang)}
</Typography>
</Box>
</Box> </Box>
</Box> <Chip sx={{ borderRadius: 1 }} size="small" label={mangaCount} />
<Chip sx={{ borderRadius: 1 }} size="small" label={mangaCount} /> </CardContent>
</CardContent> </CardActionArea>
</CardActionArea> </Card>
</Card> );
); };

69
src/components/SourceCard.tsx
View File

@@ -47,6 +47,9 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
showSourceRepo, showSourceRepo,
} = props; } = props;
const isLocalSource = Number(id) === 0;
const sourceName = isLocalSource ? t('source.local_source.title') : name;
return ( return (
<Card <Card
sx={{ sx={{
@@ -70,7 +73,7 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
<Box sx={{ display: 'flex', alignItems: 'center' }}> <Box sx={{ display: 'flex', alignItems: 'center' }}>
<Avatar <Avatar
variant="rounded" variant="rounded"
alt={name} alt={sourceName}
sx={{ sx={{
width: 56, width: 56,
height: 56, height: 56,
@@ -82,7 +85,7 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
<SpinnerImage <SpinnerImage
spinnerStyle={{ small: true }} spinnerStyle={{ small: true }}
imgStyle={{ objectFit: 'cover', width: '100%', height: '100%' }} imgStyle={{ objectFit: 'cover', width: '100%', height: '100%' }}
alt={name} alt={sourceName}
src={requestManager.getValidImgUrlFor(iconUrl)} src={requestManager.getValidImgUrlFor(iconUrl)}
/> />
</Avatar> </Avatar>
@@ -94,39 +97,37 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
}} }}
> >
<Typography variant="h6" component="h3"> <Typography variant="h6" component="h3">
{name} {sourceName}
</Typography>
<Typography
variant="caption"
sx={{
display: 'block',
}}
>
{translateExtensionLanguage(lang)}
{isNsfw && (
<Typography
variant="caption"
color="error"
sx={{
display: 'inline',
}}
>
{' 18+'}
</Typography>
)}
{showSourceRepo && (
<Typography
variant="caption"
sx={{
display: 'block',
}}
>
{repo}
</Typography>
)}
</Typography> </Typography>
{id !== '0' && (
<Typography
variant="caption"
sx={{
display: 'block',
}}
>
{translateExtensionLanguage(lang)}
{isNsfw && (
<Typography
variant="caption"
color="error"
sx={{
display: 'inline',
}}
>
{' 18+'}
</Typography>
)}
{showSourceRepo && (
<Typography
variant="caption"
sx={{
display: 'block',
}}
>
{repo}
</Typography>
)}
</Typography>
)}
</Box> </Box>
</Box> </Box>
<Stack sx={{ flexDirection: 'row', gap: 1 }}> <Stack sx={{ flexDirection: 'row', gap: 1 }}>

5
src/components/manga/MangaDetails.tsx
View File

@@ -119,6 +119,11 @@ function getSourceName(source?: Pick<SourceType, 'id' | 'displayName'> | null):
return translate('global.label.unknown'); return translate('global.label.unknown');
} }
const isLocalSource = Number(source.id) === 0;
if (isLocalSource) {
return translate('source.local_source.title');
}
return source.displayName ?? source.id; return source.displayName ?? source.id;
} }