Skip to content

Commit

Permalink
Feature/cleanup manga card (#716)
Browse files Browse the repository at this point in the history 
* Extract manga badge components

* Extract list/grid manga card

* Disable default promise error handler in production
  • Loading branch information
@schroda
schroda authored Apr 7, 2024
1 parent ca8daab commit 1b28ae2
Show file tree
Hide file tree
Showing 8 changed files with 511 additions and 427 deletions.
472 changes: 48 additions & 424 deletions src/components/MangaCard.tsx
View file

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion src/components/MangaGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,14 @@ import { GridItemProps, GridStateSnapshot, VirtuosoGrid } from 'react-virtuoso';
import { useLocation } from 'react-router-dom';
import { EmptyView } from '@/components/util/EmptyView';
import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder';
import { MangaCard, MangaCardProps } from '@/components/MangaCard';
import { MangaCard } from '@/components/MangaCard';
import { GridLayout } from '@/components/context/LibraryOptionsContext';
import { useLocalStorage, useSessionStorage } from '@/util/useStorage.tsx';
import { TManga, TPartialManga } from '@/typings.ts';
import { SelectableCollectionReturnType } from '@/components/collection/useSelectableCollection.ts';
import { DEFAULT_FULL_FAB_HEIGHT } from '@/components/util/StyledFab.tsx';
import { AppStorage } from '@/util/AppStorage.ts';
import { MangaCardProps } from '@/components/manga/MangaCard.types.tsx';

const GridContainer = React.forwardRef<HTMLDivElement, GridTypeMap['props']>(({ children, ...props }, ref) => (
<Grid {...props} ref={ref} container sx={{ paddingLeft: '5px', paddingRight: '13px' }}>
Expand Down
88 changes: 88 additions & 0 deletions src/components/manga/MangaBadges.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
/*
* 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 styled from '@mui/material/styles/styled';
import { useTranslation } from 'react-i18next';
import Button from '@mui/material/Button/Button';
import Typography from '@mui/material/Typography/Typography';
import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext.tsx';

const BadgeContainer = styled('div')({
display: 'flex',
height: 'fit-content',
borderRadius: '5px',
overflow: 'hidden',
'& p': {
color: 'white',
padding: '0.1em',
paddingInline: '0.2em',
fontSize: '1.05rem',
},
});

export const MangaBadges = ({
inLibraryIndicator,
updateLibraryState,
isInLibrary,
unread,
downloadCount,
}: {
inLibraryIndicator?: boolean;
updateLibraryState: () => void;
isInLibrary: boolean;
unread?: number;
downloadCount?: number;
}) => {
const { t } = useTranslation();

const {
options: { showUnreadBadge, showDownloadBadge },
} = useLibraryOptionsContext();

return (
<BadgeContainer>
{inLibraryIndicator && (
<Button
className="source-manga-library-state-button"
component="div"
variant="contained"
size="small"
onMouseDown={(e) => e.stopPropagation()}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
updateLibraryState();
}}
sx={{
display: 'none',
}}
color={isInLibrary ? 'error' : 'primary'}
>
{t(isInLibrary ? 'manga.action.library.remove.label.action' : 'manga.button.add_to_library')}
</Button>
)}
{inLibraryIndicator && isInLibrary && (
<Typography className="source-manga-library-state-indicator" sx={{ backgroundColor: 'primary.dark' }}>
{t('manga.button.in_library')}
</Typography>
)}
{showUnreadBadge && (unread ?? 0) > 0 && (
<Typography sx={{ backgroundColor: 'primary.dark' }}>{unread}</Typography>
)}
{showDownloadBadge && (downloadCount ?? 0) > 0 && (
<Typography
sx={{
backgroundColor: 'success.dark',
}}
>
{downloadCount}
</Typography>
)}
</BadgeContainer>
);
};
35 changes: 35 additions & 0 deletions src/components/manga/MangaCard.types.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/*
* 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 { LongPressPointerHandlers, LongPressResult } from 'use-long-press/lib/use-long-press.types';
import { PopupState } from 'material-ui-popup-state/hooks';
import { TManga, TPartialManga } from '@/typings.ts';
import { GridLayout } from '@/components/context/LibraryOptionsContext.tsx';
import { SelectableCollectionReturnType } from '@/components/collection/useSelectableCollection.ts';
import { useManageMangaLibraryState } from '@/components/manga/useManageMangaLibraryState.tsx';

export type MangaCardMode = 'default' | 'source' | 'migrate.search' | 'migrate.select';

export interface MangaCardProps {
manga: TPartialManga;
gridLayout?: GridLayout;
inLibraryIndicator?: boolean;
selected?: boolean | null;
handleSelection?: SelectableCollectionReturnType<TManga['id']>['handleSelection'];
mode?: MangaCardMode;
}

export type SpecificMangaCardProps = Omit<MangaCardProps, 'mode'> &
Pick<ReturnType<typeof useManageMangaLibraryState>, 'isInLibrary'> & {
longPressBind: LongPressResult<LongPressPointerHandlers>;
popupState: PopupState;
handleClick: (event: React.MouseEvent | React.TouchEvent) => void;
mangaLinkTo: string;
continueReadingButton: JSX.Element;
mangaBadges: JSX.Element;
};
207 changes: 207 additions & 0 deletions src/components/manga/MangaGridCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@
/*
* 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 '@mui/material/Link/Link';
import { Link as RouterLink } from 'react-router-dom';
import Box from '@mui/material/Box/Box';
import Card from '@mui/material/Card/Card';
import CardActionArea from '@mui/material/CardActionArea/CardActionArea';
import Stack from '@mui/material/Stack/Stack';
import Tooltip from '@mui/material/Tooltip/Tooltip';
import styled from '@mui/material/styles/styled';
import { isMobile } from 'react-device-detect';
import { useRef } from 'react';
import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
import { MangaOptionButton } from '@/components/manga/MangaOptionButton.tsx';
import { GridLayout } from '@/components/context/LibraryOptionsContext.tsx';
import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines.tsx';
import { Mangas } from '@/lib/data/Mangas.ts';
import { SpecificMangaCardProps } from '@/components/manga/MangaCard.types.tsx';

const BottomGradient = styled('div')({
position: 'absolute',
bottom: 0,
width: '100%',
height: '30%',
background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)',
});

const BottomGradientDoubledDown = styled('div')({
position: 'absolute',
bottom: 0,
width: '100%',
height: '20%',
background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)',
});

const GridMangaTitle = styled(TypographyMaxLines)({
fontSize: '1.05rem',
});

export const MangaGridCard = ({
manga,
longPressBind,
popupState,
handleClick,
mangaLinkTo,
selected,
inLibraryIndicator,
isInLibrary,
gridLayout,
handleSelection,
continueReadingButton,
mangaBadges,
}: SpecificMangaCardProps) => {
const optionButtonRef = useRef<HTMLButtonElement>(null);

const { id, title } = manga;

return (
<Link
component={RouterLink}
{...longPressBind(() => popupState.open(optionButtonRef.current))}
onClick={handleClick}
to={mangaLinkTo}
sx={{ textDecoration: 'none', touchCallout: 'none' }}
>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
margin: '2px',
outline: selected ? '4px solid' : undefined,
borderRadius: selected ? '1px' : undefined,
outlineColor: (theme) => theme.palette.primary.main,
backgroundColor: (theme) => (selected ? theme.palette.primary.main : undefined),
'@media (hover: hover) and (pointer: fine)': {
'&:hover .manga-option-button': {
visibility: 'visible',
pointerEvents: 'all',
},
},
'&:hover .source-manga-library-state-button': {
display: isMobile ? 'none' : 'inline-flex',
},
'&:hover .source-manga-library-state-indicator': {
display: 'none',
},
}}
>
<Card
sx={{
// force standard aspect ratio of manga covers
aspectRatio: '225/350',
display: 'flex',
}}
>
<CardActionArea
sx={{
position: 'relative',
height: '100%',
}}
>
<SpinnerImage
alt={title}
src={Mangas.getThumbnailUrl(manga)}
imgStyle={
inLibraryIndicator && isInLibrary
? {
height: '100%',
width: '100%',
objectFit: 'cover',
filter: 'brightness(0.4)',
}
: {
height: '100%',
width: '100%',
objectFit: 'cover',
}
}
spinnerStyle={{
display: 'grid',
placeItems: 'center',
}}
/>
<Stack
alignItems="start"
justifyContent="space-between"
direction="row"
sx={{
position: 'absolute',
top: 5,
left: 5,
right: 5,
}}
>
{mangaBadges}
<MangaOptionButton
ref={optionButtonRef}
popupState={popupState}
id={id}
selected={selected}
handleSelection={handleSelection}
/>
</Stack>
<>
{gridLayout !== GridLayout.Comfortable && (
<>
<BottomGradient />
<BottomGradientDoubledDown />
</>
)}
<Stack
direction="row"
justifyContent={gridLayout !== GridLayout.Comfortable ? 'space-between' : 'end'}
alignItems="end"
sx={{
position: 'absolute',
bottom: 0,
width: '100%',
margin: '0.5em 0',
padding: '0 0.5em',
gap: '0.5em',
}}
>
{gridLayout !== GridLayout.Comfortable && (
<Tooltip title={title} placement="top">
<GridMangaTitle
sx={{
color: 'white',
textShadow: '0px 0px 3px #000000',
}}
>
{title}
</GridMangaTitle>
</Tooltip>
)}
{continueReadingButton}
</Stack>
</>
</CardActionArea>
</Card>
{gridLayout === GridLayout.Comfortable && (
<Tooltip title={title} placement="top">
<GridMangaTitle
sx={{
position: 'relative',
width: '100%',
bottom: 0,
margin: '0.5em 0',
padding: '0 0.5em',
color: 'text.primary',
height: '3rem',
}}
>
{title}
</GridMangaTitle>
</Tooltip>
)}
</Box>
</Link>
);
};
Loading

0 comments on commit 1b28ae2

Please sign in to comment.