Rename folder "modules" to "features"
This commit is contained in:
schroda
17
src/features/manga/components/BaseMangaGrid.tsx
Normal file
17
src/features/manga/components/BaseMangaGrid.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
/*
|
||||
* 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 { MangaGrid, IMangaGridProps } from '@/features/manga/components/MangaGrid.tsx';
|
||||
|
||||
type TMangaBaseGrid = Omit<IMangaGridProps['mangas'][number], 'downloadCount' | 'unreadCount' | 'chapters'>;
|
||||
|
||||
export function BaseMangaGrid(props: Omit<IMangaGridProps, 'mangas'> & { mangas: TMangaBaseGrid[] }) {
|
||||
const { mangas } = props;
|
||||
|
||||
return <MangaGrid gridWrapperProps={{ sx: { p: 1 } }} {...props} mangas={mangas as IMangaGridProps['mangas']} />;
|
||||
}
|
||||
52
src/features/manga/components/ContinueReadingButton.tsx
Normal file
52
src/features/manga/components/ContinueReadingButton.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
/*
|
||||
* 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 { useTranslation } from 'react-i18next';
|
||||
import Button from '@mui/material/Button';
|
||||
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { CustomTooltip } from '@/features/core/components/CustomTooltip.tsx';
|
||||
import { Chapters } from '@/features/chapter/services/Chapters.ts';
|
||||
import { MUIUtil } from '@/lib/mui/MUI.util.ts';
|
||||
import { ChapterReadInfo, ChapterSourceOrderInfo } from '@/features/chapter/Chapter.types.ts';
|
||||
|
||||
export const ContinueReadingButton = ({
|
||||
showContinueReadingButton,
|
||||
chapter,
|
||||
mangaLinkTo,
|
||||
}: {
|
||||
showContinueReadingButton: boolean;
|
||||
chapter?: (ChapterSourceOrderInfo & ChapterReadInfo) | null;
|
||||
mangaLinkTo: string;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (!showContinueReadingButton || !chapter) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { sourceOrder } = chapter;
|
||||
const isFirstChapter = sourceOrder === 1;
|
||||
|
||||
return (
|
||||
<CustomTooltip title={t(isFirstChapter ? 'global.button.start' : 'global.button.resume')}>
|
||||
<Button
|
||||
{...MUIUtil.preventRippleProp()}
|
||||
variant="contained"
|
||||
size="small"
|
||||
sx={{ minWidth: 'unset', py: 0.5, px: 0.75 }}
|
||||
component={Link}
|
||||
to={`${mangaLinkTo}/chapter/${chapter.sourceOrder}`}
|
||||
state={Chapters.getReaderOpenChapterLocationState(chapter)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<PlayArrowIcon />
|
||||
</Button>
|
||||
</CustomTooltip>
|
||||
);
|
||||
};
|
||||
207
src/features/manga/components/MangaActionMenuItems.tsx
Normal file
207
src/features/manga/components/MangaActionMenuItems.tsx
Normal file
@@ -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 CheckBoxOutlineBlank from '@mui/icons-material/CheckBoxOutlineBlank';
|
||||
import Delete from '@mui/icons-material/Delete';
|
||||
import Download from '@mui/icons-material/Download';
|
||||
import RemoveDone from '@mui/icons-material/RemoveDone';
|
||||
import Done from '@mui/icons-material/Done';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
|
||||
import Label from '@mui/icons-material/Label';
|
||||
import { useMemo, useState } from 'react';
|
||||
import SyncAltIcon from '@mui/icons-material/SyncAlt';
|
||||
import { Link } from 'react-router-dom';
|
||||
import SyncIcon from '@mui/icons-material/Sync';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import { Mangas } from '@/features/manga/services/Mangas.ts';
|
||||
import { SelectableCollectionReturnType } from '@/features/collection/hooks/useSelectableCollection.ts';
|
||||
import { MenuItem } from '@/features/core/components/menu/MenuItem.tsx';
|
||||
import {
|
||||
createGetMenuItemTitle,
|
||||
createIsMenuItemDisabled,
|
||||
createShouldShowMenuItem,
|
||||
} from '@/features/core/components/menu/Menu.utils.ts';
|
||||
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
|
||||
import { TrackManga } from '@/features/tracker/components/TrackManga.tsx';
|
||||
import { useCategorySelect } from '@/features/category/hooks/useCategorySelect.tsx';
|
||||
import { ChaptersDownloadActionMenuItems } from '@/features/chapter/components/actions/ChaptersDownloadActionMenuItems.tsx';
|
||||
import { NestedMenuItem } from '@/features/core/components/menu/NestedMenuItem.tsx';
|
||||
import { MangaChapterStatFieldsFragment, MangaType } from '@/lib/graphql/generated/graphql.ts';
|
||||
import { MangaAction, MangaDownloadInfo, MangaIdInfo, MangaUnreadInfo } from '@/features/manga/Manga.types.ts';
|
||||
import { MANGA_ACTION_TO_TRANSLATION } from '@/features/manga/Manga.constants.ts';
|
||||
import { AppRoutes } from '@/features/core/AppRoute.constants.ts';
|
||||
|
||||
const ACTION_DISABLES_SELECTION_MODE: MangaAction[] = ['remove_from_library'] as const;
|
||||
|
||||
type BaseProps = { onClose: (selectionModeState: boolean) => void; setHideMenu: (hide: boolean) => void };
|
||||
|
||||
export type SingleModeProps = {
|
||||
manga: Pick<MangaType, 'id' | 'title' | 'sourceId'> & MangaDownloadInfo & MangaUnreadInfo;
|
||||
handleSelection?: SelectableCollectionReturnType<MangaType['id']>['handleSelection'];
|
||||
};
|
||||
|
||||
type SelectModeProps = {
|
||||
selectedMangas: MangaChapterStatFieldsFragment[];
|
||||
};
|
||||
|
||||
type Props =
|
||||
| (BaseProps & SingleModeProps & PropertiesNever<SelectModeProps>)
|
||||
| (BaseProps & PropertiesNever<SingleModeProps> & SelectModeProps);
|
||||
|
||||
export const MangaActionMenuItems = ({
|
||||
manga,
|
||||
handleSelection,
|
||||
selectedMangas: passedSelectedMangas,
|
||||
onClose,
|
||||
setHideMenu,
|
||||
}: Props) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [isTrackDialogOpen, setIsTrackDialogOpen] = useState(false);
|
||||
|
||||
const isSingleMode = !!manga;
|
||||
const selectedMangas = passedSelectedMangas ?? [];
|
||||
|
||||
const getMenuItemTitle = createGetMenuItemTitle(isSingleMode, MANGA_ACTION_TO_TRANSLATION);
|
||||
const shouldShowMenuItem = createShouldShowMenuItem(isSingleMode);
|
||||
const isMenuItemDisabled = createIsMenuItemDisabled(isSingleMode);
|
||||
|
||||
const isFullyDownloaded = !!manga && manga.downloadCount === manga.chapters.totalCount;
|
||||
const hasDownloadedChapters = !!manga?.downloadCount;
|
||||
const hasUnreadChapters = !!manga?.unreadCount;
|
||||
const hasReadChapters = !!manga && manga.unreadCount !== manga.chapters.totalCount;
|
||||
|
||||
const { openCategorySelect, CategorySelectComponent } = useCategorySelect({
|
||||
mangaId: manga?.id,
|
||||
mangaIds: passedSelectedMangas ? Mangas.getIds(selectedMangas) : undefined,
|
||||
onClose: () => onClose(true),
|
||||
addToLibrary: false,
|
||||
});
|
||||
|
||||
const handleSelect = () => {
|
||||
handleSelection?.(manga.id, true);
|
||||
onClose(true);
|
||||
};
|
||||
|
||||
const performAction = (action: MangaAction, mangas: MangaIdInfo[]) => {
|
||||
Mangas.performAction(action, manga ? [manga.id] : Mangas.getIds(mangas), {
|
||||
wasManuallyMarkedAsRead: true,
|
||||
}).catch(defaultPromiseErrorHandler(`MangaActionMenuItems:performAction(${action})`));
|
||||
|
||||
onClose(!ACTION_DISABLES_SELECTION_MODE.includes(action));
|
||||
};
|
||||
|
||||
const { downloadableMangas, downloadedMangas, unreadMangas, readMangas } = useMemo(
|
||||
() => ({
|
||||
downloadableMangas: [
|
||||
...Mangas.getNotDownloaded(selectedMangas),
|
||||
...Mangas.getPartiallyDownloaded(selectedMangas),
|
||||
],
|
||||
downloadedMangas: [
|
||||
...Mangas.getPartiallyDownloaded(selectedMangas),
|
||||
...Mangas.getFullyDownloaded(selectedMangas),
|
||||
],
|
||||
unreadMangas: [...Mangas.getUnread(selectedMangas), ...Mangas.getPartiallyRead(selectedMangas)],
|
||||
readMangas: [...Mangas.getPartiallyRead(selectedMangas), ...Mangas.getFullyRead(selectedMangas)],
|
||||
}),
|
||||
[selectedMangas],
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{!!handleSelection && isSingleMode && (
|
||||
<MenuItem onClick={handleSelect} Icon={CheckBoxOutlineBlank} title={t('chapter.action.label.select')} />
|
||||
)}
|
||||
{shouldShowMenuItem(!isFullyDownloaded) && (
|
||||
<NestedMenuItem
|
||||
disabled={isMenuItemDisabled(!downloadableMangas.length)}
|
||||
LeftIcon={Download}
|
||||
label={getMenuItemTitle('download', downloadableMangas.length)}
|
||||
parentMenuOpen
|
||||
>
|
||||
<ChaptersDownloadActionMenuItems
|
||||
mangaIds={isSingleMode ? [manga.id] : Mangas.getIds(selectedMangas)}
|
||||
closeMenu={() => onClose(true)}
|
||||
/>
|
||||
</NestedMenuItem>
|
||||
)}
|
||||
{shouldShowMenuItem(hasDownloadedChapters) && (
|
||||
<MenuItem
|
||||
Icon={Delete}
|
||||
disabled={isMenuItemDisabled(!downloadedMangas.length)}
|
||||
onClick={() => performAction('delete', downloadedMangas)}
|
||||
title={getMenuItemTitle('delete', downloadedMangas.length)}
|
||||
/>
|
||||
)}
|
||||
{shouldShowMenuItem(hasUnreadChapters) && (
|
||||
<MenuItem
|
||||
Icon={Done}
|
||||
disabled={isMenuItemDisabled(!unreadMangas.length)}
|
||||
onClick={() => performAction('mark_as_read', unreadMangas)}
|
||||
title={getMenuItemTitle('mark_as_read', unreadMangas.length)}
|
||||
/>
|
||||
)}
|
||||
{shouldShowMenuItem(hasReadChapters) && (
|
||||
<MenuItem
|
||||
Icon={RemoveDone}
|
||||
disabled={isMenuItemDisabled(!readMangas.length)}
|
||||
onClick={() => performAction('mark_as_unread', readMangas)}
|
||||
title={getMenuItemTitle('mark_as_unread', readMangas.length)}
|
||||
/>
|
||||
)}
|
||||
{isSingleMode && (
|
||||
<Link
|
||||
to={AppRoutes.migrate.childRoutes.search.path(manga?.sourceId ?? -1, manga?.id ?? -1, manga?.title)}
|
||||
state={{ mangaTitle: manga?.title }}
|
||||
style={{ textDecoration: 'none', color: 'inherit' }}
|
||||
>
|
||||
<MenuItem Icon={SyncAltIcon} title={getMenuItemTitle('migrate', selectedMangas.length)} />
|
||||
</Link>
|
||||
)}
|
||||
{isSingleMode && (
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setIsTrackDialogOpen(true);
|
||||
setHideMenu(true);
|
||||
}}
|
||||
Icon={SyncIcon}
|
||||
title={getMenuItemTitle('track', selectedMangas.length)}
|
||||
/>
|
||||
)}
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
openCategorySelect(true);
|
||||
setHideMenu(true);
|
||||
}}
|
||||
Icon={Label}
|
||||
title={getMenuItemTitle('change_categories', selectedMangas.length)}
|
||||
/>
|
||||
<MenuItem
|
||||
onClick={() => performAction('remove_from_library', selectedMangas)}
|
||||
Icon={FavoriteBorderIcon}
|
||||
title={getMenuItemTitle('remove_from_library', selectedMangas.length)}
|
||||
/>
|
||||
{CategorySelectComponent}
|
||||
{isTrackDialogOpen && (
|
||||
<Dialog
|
||||
open
|
||||
maxWidth="md"
|
||||
fullWidth
|
||||
scroll="paper"
|
||||
onClose={() => {
|
||||
setIsTrackDialogOpen(false);
|
||||
onClose(true);
|
||||
}}
|
||||
>
|
||||
<TrackManga manga={manga!} />
|
||||
</Dialog>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
98
src/features/manga/components/MangaBadges.tsx
Normal file
98
src/features/manga/components/MangaBadges.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
/*
|
||||
* 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';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import Button from '@mui/material/Button';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { MangaCardMode } from '@/features/manga/Manga.types.ts';
|
||||
import { MediaQuery } from '@/features/core/utils/MediaQuery.tsx';
|
||||
import { useMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts';
|
||||
import { MUIUtil } from '@/lib/mui/MUI.util.ts';
|
||||
|
||||
const BadgeContainer = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
height: 'fit-content',
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
overflow: 'hidden',
|
||||
}));
|
||||
|
||||
const Badge = styled(Typography)(({ theme }) => ({
|
||||
color: theme.palette.primary.contrastText,
|
||||
paddingInline: theme.spacing(0.3),
|
||||
}));
|
||||
|
||||
export const MangaBadges = ({
|
||||
inLibraryIndicator,
|
||||
updateLibraryState,
|
||||
isInLibrary,
|
||||
unread,
|
||||
downloadCount,
|
||||
mode,
|
||||
}: {
|
||||
inLibraryIndicator?: boolean;
|
||||
updateLibraryState: () => void;
|
||||
isInLibrary: boolean;
|
||||
unread?: number;
|
||||
downloadCount?: number;
|
||||
mode: MangaCardMode;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const isTouchDevice = MediaQuery.useIsTouchDevice();
|
||||
|
||||
const {
|
||||
settings: { showUnreadBadge, showDownloadBadge },
|
||||
} = useMetadataServerSettings();
|
||||
|
||||
return (
|
||||
<BadgeContainer>
|
||||
{!isTouchDevice && inLibraryIndicator && mode === 'source' && (
|
||||
<Button
|
||||
className="source-manga-library-state-button"
|
||||
component="div"
|
||||
variant="contained"
|
||||
size="small"
|
||||
{...MUIUtil.preventRippleProp()}
|
||||
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', color: 'primary.contrastText', p: 0.3 }}
|
||||
>
|
||||
{t('manga.button.in_library')}
|
||||
</Typography>
|
||||
)}
|
||||
{((showUnreadBadge && mode === 'default') || mode === 'duplicate') && (unread ?? 0) > 0 && (
|
||||
<Badge sx={{ backgroundColor: 'primary.main', color: 'primary.contrastText' }}>{unread}</Badge>
|
||||
)}
|
||||
{((showDownloadBadge && mode === 'default') || mode === 'duplicate') && (downloadCount ?? 0) > 0 && (
|
||||
<Badge
|
||||
sx={{
|
||||
backgroundColor: 'secondary.main',
|
||||
color: 'secondary.contrastText',
|
||||
}}
|
||||
>
|
||||
{downloadCount}
|
||||
</Badge>
|
||||
)}
|
||||
</BadgeContainer>
|
||||
);
|
||||
};
|
||||
372
src/features/manga/components/MangaGrid.tsx
Normal file
372
src/features/manga/components/MangaGrid.tsx
Normal file
@@ -0,0 +1,372 @@
|
||||
/*
|
||||
* 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 React, {
|
||||
ForwardedRef,
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useLayoutEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
type JSX,
|
||||
} from 'react';
|
||||
import Grid, { GridTypeMap } from '@mui/material/Grid';
|
||||
import Box, { BoxProps } from '@mui/material/Box';
|
||||
import { GridItemProps } from 'react-virtuoso';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { EmptyViewAbsoluteCentered } from '@/features/core/components/feedback/EmptyViewAbsoluteCentered.tsx';
|
||||
import { LoadingPlaceholder } from '@/features/core/components/feedback/LoadingPlaceholder.tsx';
|
||||
import { MangaCard } from '@/features/manga/components/cards/MangaCard.tsx';
|
||||
import { SelectableCollectionReturnType } from '@/features/collection/hooks/useSelectableCollection.ts';
|
||||
import { DEFAULT_FULL_FAB_HEIGHT } from '@/features/core/components/buttons/StyledFab.tsx';
|
||||
import { MangaCardProps } from '@/features/manga/Manga.types.ts';
|
||||
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
|
||||
import { useResizeObserver } from '@/features/core/hooks/useResizeObserver.tsx';
|
||||
import { useNavBarContext } from '@/features/navigation-bar/contexts/NavbarContext.tsx';
|
||||
import { GridLayout } from '@/features/core/Core.types.ts';
|
||||
import { useMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts';
|
||||
import { VirtuosoGridPersisted } from '@/lib/virtuoso/Component/VirtuosoGridPersisted.tsx';
|
||||
|
||||
const GridContainer = React.forwardRef<HTMLDivElement, GridTypeMap['props']>(({ children, ...props }, ref) => (
|
||||
<Grid {...props} ref={ref} container spacing={1}>
|
||||
{children}
|
||||
</Grid>
|
||||
));
|
||||
|
||||
const GridItemContainerWithDimension = (
|
||||
dimensions: number,
|
||||
itemWidth: number,
|
||||
gridLayout?: GridLayout,
|
||||
maxColumns: number = 12,
|
||||
) => {
|
||||
const itemsPerRow = Math.ceil(dimensions / itemWidth);
|
||||
const columnsPerItem = gridLayout === GridLayout.List ? maxColumns : maxColumns / itemsPerRow;
|
||||
|
||||
// MUI GridProps and Virtuoso GridItemProps use different types for the "ref" prop which conflict with each other
|
||||
return ({ children, ...itemProps }: GridTypeMap['props'] & Omit<Partial<GridItemProps>, 'ref'>) => (
|
||||
<Grid {...itemProps} size={columnsPerItem}>
|
||||
{children}
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
type TManga = MangaCardProps['manga'];
|
||||
|
||||
const createMangaCard = (
|
||||
manga: TManga,
|
||||
gridLayout?: GridLayout,
|
||||
inLibraryIndicator?: boolean,
|
||||
isSelectModeActive: boolean = false,
|
||||
selectedMangaIds?: MangaType['id'][],
|
||||
handleSelection?: DefaultGridProps['handleSelection'],
|
||||
mode?: MangaCardProps['mode'],
|
||||
) => (
|
||||
<MangaCard
|
||||
manga={manga}
|
||||
gridLayout={gridLayout}
|
||||
inLibraryIndicator={inLibraryIndicator}
|
||||
selected={isSelectModeActive ? selectedMangaIds?.includes(manga.id) : null}
|
||||
handleSelection={handleSelection}
|
||||
mode={mode}
|
||||
/>
|
||||
);
|
||||
|
||||
type DefaultGridProps = Pick<MangaCardProps, 'mode'> & {
|
||||
isLoading: boolean;
|
||||
mangas: TManga[];
|
||||
inLibraryIndicator?: boolean;
|
||||
GridItemContainer: (props: GridTypeMap['props'] & Partial<GridItemProps>) => JSX.Element;
|
||||
gridLayout?: GridLayout;
|
||||
isSelectModeActive?: boolean;
|
||||
selectedMangaIds?: Required<MangaType['id']>[];
|
||||
handleSelection?: SelectableCollectionReturnType<MangaType['id']>['handleSelection'];
|
||||
};
|
||||
|
||||
const HorizontalGrid = forwardRef(
|
||||
(
|
||||
{
|
||||
isLoading,
|
||||
mangas,
|
||||
inLibraryIndicator,
|
||||
GridItemContainer,
|
||||
gridLayout,
|
||||
isSelectModeActive,
|
||||
selectedMangaIds,
|
||||
handleSelection,
|
||||
mode,
|
||||
}: DefaultGridProps,
|
||||
ref: ForwardedRef<HTMLDivElement | null>,
|
||||
) => (
|
||||
<Grid
|
||||
ref={ref}
|
||||
container
|
||||
spacing={1}
|
||||
sx={{
|
||||
width: '100%',
|
||||
overflowX: 'auto',
|
||||
display: '-webkit-inline-box',
|
||||
flexWrap: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{isLoading ? (
|
||||
<LoadingPlaceholder />
|
||||
) : (
|
||||
mangas.map((manga) => (
|
||||
<GridItemContainer key={manga.id}>
|
||||
{createMangaCard(
|
||||
manga,
|
||||
gridLayout,
|
||||
inLibraryIndicator,
|
||||
isSelectModeActive,
|
||||
selectedMangaIds,
|
||||
handleSelection,
|
||||
mode,
|
||||
)}
|
||||
</GridItemContainer>
|
||||
))
|
||||
)}
|
||||
</Grid>
|
||||
),
|
||||
);
|
||||
|
||||
export const MANGA_GRID_SNAPSHOT_KEY = 'MangaGrid-snapshot-location';
|
||||
|
||||
const VerticalGrid = forwardRef(
|
||||
(
|
||||
{
|
||||
isLoading,
|
||||
mangas,
|
||||
inLibraryIndicator,
|
||||
GridItemContainer,
|
||||
gridLayout,
|
||||
hasNextPage,
|
||||
loadMore,
|
||||
isSelectModeActive,
|
||||
selectedMangaIds,
|
||||
handleSelection,
|
||||
mode,
|
||||
}: DefaultGridProps & {
|
||||
hasNextPage: boolean;
|
||||
loadMore: () => void;
|
||||
},
|
||||
ref: ForwardedRef<HTMLDivElement | null>,
|
||||
) => (
|
||||
<>
|
||||
<Box ref={ref}>
|
||||
<VirtuosoGridPersisted
|
||||
persistKey={MANGA_GRID_SNAPSHOT_KEY}
|
||||
useWindowScroll
|
||||
increaseViewportBy={window.innerHeight * 0.5}
|
||||
totalCount={mangas.length}
|
||||
components={{
|
||||
List: GridContainer,
|
||||
Item: GridItemContainer,
|
||||
}}
|
||||
endReached={() => loadMore()}
|
||||
computeItemKey={(index) => mangas[index].id}
|
||||
itemContent={(index) =>
|
||||
createMangaCard(
|
||||
mangas[index],
|
||||
gridLayout,
|
||||
inLibraryIndicator,
|
||||
isSelectModeActive,
|
||||
selectedMangaIds,
|
||||
handleSelection,
|
||||
mode,
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
{/* render div to prevent UI jumping around when showing/hiding loading placeholder */
|
||||
/* eslint-disable-next-line no-nested-ternary */}
|
||||
{isSelectModeActive && gridLayout === GridLayout.List ? (
|
||||
<Box sx={{ paddingBottom: DEFAULT_FULL_FAB_HEIGHT }} />
|
||||
) : // eslint-disable-next-line no-nested-ternary
|
||||
isLoading ? (
|
||||
<LoadingPlaceholder />
|
||||
) : hasNextPage ? (
|
||||
<div style={{ height: '75px' }} />
|
||||
) : null}
|
||||
</>
|
||||
),
|
||||
);
|
||||
|
||||
export interface IMangaGridProps
|
||||
extends Omit<DefaultGridProps, 'GridItemContainer'>,
|
||||
Partial<React.ComponentProps<typeof EmptyViewAbsoluteCentered>> {
|
||||
hasNextPage: boolean;
|
||||
loadMore: () => void;
|
||||
horizontal?: boolean | undefined;
|
||||
noFaces?: boolean | undefined;
|
||||
gridWrapperProps?: Omit<BoxProps, 'ref'>;
|
||||
}
|
||||
|
||||
export const MangaGrid: React.FC<IMangaGridProps> = ({
|
||||
mangas,
|
||||
isLoading,
|
||||
message,
|
||||
messageExtra,
|
||||
hasNextPage,
|
||||
loadMore,
|
||||
gridLayout,
|
||||
horizontal,
|
||||
noFaces,
|
||||
inLibraryIndicator,
|
||||
isSelectModeActive,
|
||||
selectedMangaIds,
|
||||
handleSelection,
|
||||
mode,
|
||||
retry,
|
||||
gridWrapperProps,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { navBarWidth } = useNavBarContext();
|
||||
const {
|
||||
settings: { mangaGridItemWidth },
|
||||
} = useMetadataServerSettings();
|
||||
|
||||
const gridRef = useRef<HTMLDivElement>(null);
|
||||
const gridWrapperRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [dimensions, setDimensions] = useState(
|
||||
gridWrapperRef.current?.offsetWidth ?? Math.max(0, document.documentElement.offsetWidth - navBarWidth),
|
||||
);
|
||||
const GridItemContainer = useMemo(
|
||||
() => GridItemContainerWithDimension(dimensions, mangaGridItemWidth, gridLayout),
|
||||
[dimensions, mangaGridItemWidth, gridLayout],
|
||||
);
|
||||
|
||||
// always show vertical scrollbar to prevent https://github.com/Suwayomi/Suwayomi-WebUI/issues/758
|
||||
useLayoutEffect(() => {
|
||||
if (horizontal) {
|
||||
return () => {};
|
||||
}
|
||||
|
||||
// in case "overflow" is currently set to "hidden" that (most likely) means that a MUI modal is open and locks the scrollbar
|
||||
// once this modal is closed MUI restores the previous "overflow" value, thus, reverting the just set "overflow" value
|
||||
let timeout: NodeJS.Timeout;
|
||||
const changeStyle = (timeoutMS: number) => {
|
||||
timeout = setTimeout(() => {
|
||||
if (document.body.style.overflow.includes('hidden')) {
|
||||
changeStyle(250);
|
||||
return;
|
||||
}
|
||||
|
||||
document.body.style.overflowY = gridLayout === GridLayout.List ? 'auto' : 'scroll';
|
||||
}, timeoutMS);
|
||||
};
|
||||
|
||||
changeStyle(0);
|
||||
|
||||
return () => {
|
||||
clearTimeout(timeout);
|
||||
};
|
||||
}, [gridLayout]);
|
||||
useLayoutEffect(
|
||||
() => () => {
|
||||
if (horizontal) {
|
||||
return;
|
||||
}
|
||||
|
||||
document.body.style.overflowY = 'auto';
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
useResizeObserver(
|
||||
gridWrapperRef,
|
||||
useCallback(() => {
|
||||
const getDimensions = () => {
|
||||
const gridWidth = gridWrapperRef.current?.offsetWidth;
|
||||
|
||||
if (!gridWidth) {
|
||||
return document.documentElement.offsetWidth - navBarWidth;
|
||||
}
|
||||
|
||||
return gridWidth;
|
||||
};
|
||||
|
||||
setDimensions(getDimensions());
|
||||
}, [navBarWidth]),
|
||||
);
|
||||
|
||||
useResizeObserver(
|
||||
gridRef,
|
||||
useCallback(
|
||||
(entries, resizeObserver) => {
|
||||
const gridHeight = entries[0].target.clientHeight;
|
||||
const isScrollbarVisible = gridHeight > document.documentElement.clientHeight;
|
||||
|
||||
if (isLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!gridHeight) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isScrollbarVisible) {
|
||||
resizeObserver.disconnect();
|
||||
return;
|
||||
}
|
||||
|
||||
loadMore();
|
||||
resizeObserver.disconnect();
|
||||
},
|
||||
[gridRef, loadMore, isLoading],
|
||||
),
|
||||
);
|
||||
|
||||
const hasNoItems = !isLoading && mangas.length === 0;
|
||||
if (hasNoItems) {
|
||||
return (
|
||||
<EmptyViewAbsoluteCentered
|
||||
noFaces={noFaces}
|
||||
message={message ?? t('manga.error.label.no_mangas_found')}
|
||||
messageExtra={messageExtra}
|
||||
retry={retry}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box {...gridWrapperProps} ref={gridWrapperRef} sx={{ ...gridWrapperProps?.sx, overflow: 'hidden' }}>
|
||||
{horizontal ? (
|
||||
<HorizontalGrid
|
||||
ref={gridRef}
|
||||
isLoading={isLoading}
|
||||
mangas={mangas}
|
||||
inLibraryIndicator={inLibraryIndicator}
|
||||
GridItemContainer={GridItemContainer}
|
||||
gridLayout={gridLayout}
|
||||
isSelectModeActive={isSelectModeActive}
|
||||
selectedMangaIds={selectedMangaIds}
|
||||
handleSelection={handleSelection}
|
||||
mode={mode}
|
||||
/>
|
||||
) : (
|
||||
<VerticalGrid
|
||||
ref={gridRef}
|
||||
isLoading={isLoading}
|
||||
mangas={mangas}
|
||||
inLibraryIndicator={inLibraryIndicator}
|
||||
GridItemContainer={GridItemContainer}
|
||||
hasNextPage={hasNextPage}
|
||||
loadMore={loadMore}
|
||||
gridLayout={gridLayout}
|
||||
isSelectModeActive={isSelectModeActive}
|
||||
selectedMangaIds={selectedMangaIds}
|
||||
handleSelection={handleSelection}
|
||||
mode={mode}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
112
src/features/manga/components/MangaOptionButton.tsx
Normal file
112
src/features/manga/components/MangaOptionButton.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
/*
|
||||
* 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 { useTranslation } from 'react-i18next';
|
||||
import { BaseSyntheticEvent, ChangeEvent, useMemo, forwardRef, ForwardedRef } from 'react';
|
||||
import Button from '@mui/material/Button';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
||||
import { PopupState } from 'material-ui-popup-state/hooks';
|
||||
import { bindTrigger } from 'material-ui-popup-state';
|
||||
import { CustomTooltip } from '@/features/core/components/CustomTooltip.tsx';
|
||||
import { SelectableCollectionReturnType } from '@/features/collection/hooks/useSelectableCollection.ts';
|
||||
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
|
||||
import { MUIUtil } from '@/lib/mui/MUI.util.ts';
|
||||
|
||||
export const MangaOptionButton = forwardRef(
|
||||
(
|
||||
{
|
||||
id,
|
||||
selected,
|
||||
handleSelection,
|
||||
asCheckbox = false,
|
||||
popupState,
|
||||
}: {
|
||||
id: number;
|
||||
selected?: boolean | null;
|
||||
handleSelection?: SelectableCollectionReturnType<MangaType['id']>['handleSelection'];
|
||||
asCheckbox?: boolean;
|
||||
popupState: PopupState;
|
||||
},
|
||||
ref: ForwardedRef<HTMLButtonElement | null>,
|
||||
) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const bindTriggerProps = useMemo(() => bindTrigger(popupState), [popupState]);
|
||||
|
||||
const preventDefaultAction = (e: BaseSyntheticEvent) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
const handleSelectionChange = (e: ChangeEvent, isSelected: boolean) => {
|
||||
preventDefaultAction(e);
|
||||
handleSelection?.(id, isSelected);
|
||||
};
|
||||
|
||||
if (!handleSelection) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const isSelected = selected !== null;
|
||||
if (isSelected) {
|
||||
if (!asCheckbox) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<CustomTooltip title={t(selected ? 'global.button.deselect' : 'global.button.select')}>
|
||||
<Checkbox {...MUIUtil.preventRippleProp()} checked={selected} onChange={handleSelectionChange} />
|
||||
</CustomTooltip>
|
||||
);
|
||||
}
|
||||
|
||||
if (asCheckbox) {
|
||||
return (
|
||||
<CustomTooltip title={t('global.button.options')}>
|
||||
<IconButton
|
||||
ref={ref}
|
||||
{...MUIUtil.preventRippleProp(bindTriggerProps, { onClick: preventDefaultAction })}
|
||||
aria-label="more"
|
||||
>
|
||||
<MoreVertIcon />
|
||||
</IconButton>
|
||||
</CustomTooltip>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<CustomTooltip title={t('global.button.options')}>
|
||||
<Button
|
||||
ref={ref}
|
||||
{...MUIUtil.preventRippleProp(bindTriggerProps, { onClick: preventDefaultAction })}
|
||||
className="manga-option-button"
|
||||
size="small"
|
||||
variant="contained"
|
||||
sx={{
|
||||
minWidth: 'unset',
|
||||
paddingX: '0',
|
||||
paddingY: '2.5px',
|
||||
visibility: popupState.isOpen ? 'visible' : 'hidden',
|
||||
pointerEvents: 'none',
|
||||
'@media not (pointer: fine)': {
|
||||
visibility: 'hidden',
|
||||
width: 0,
|
||||
height: 0,
|
||||
p: 0,
|
||||
m: 0,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MoreVertIcon />
|
||||
</Button>
|
||||
</CustomTooltip>
|
||||
);
|
||||
},
|
||||
);
|
||||
162
src/features/manga/components/MangaToolbarMenu.tsx
Normal file
162
src/features/manga/components/MangaToolbarMenu.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
/*
|
||||
* 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 Label from '@mui/icons-material/Label';
|
||||
import MoreHoriz from '@mui/icons-material/MoreHoriz';
|
||||
import Refresh from '@mui/icons-material/Refresh';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import ListItemIcon from '@mui/material/ListItemIcon';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import Menu from '@mui/material/Menu';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Link } from 'react-router-dom';
|
||||
import SyncAltIcon from '@mui/icons-material/SyncAlt';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import useMediaQuery from '@mui/material/useMediaQuery';
|
||||
import { CustomTooltip } from '@/features/core/components/CustomTooltip.tsx';
|
||||
import { useCategorySelect } from '@/features/category/hooks/useCategorySelect.tsx';
|
||||
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
|
||||
import { AppRoutes } from '@/features/core/AppRoute.constants.ts';
|
||||
|
||||
interface IProps {
|
||||
manga: Pick<MangaType, 'id' | 'inLibrary' | 'sourceId' | 'title'>;
|
||||
onRefresh: () => any;
|
||||
refreshing: boolean;
|
||||
}
|
||||
|
||||
export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const theme = useTheme();
|
||||
const isLargeScreen = useMediaQuery(theme.breakpoints.up('sm'));
|
||||
|
||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||
const open = Boolean(anchorEl);
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const { openCategorySelect, CategorySelectComponent } = useCategorySelect({
|
||||
mangaId: manga.id,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLargeScreen && (
|
||||
<>
|
||||
<CustomTooltip title={t('manga.label.reload_from_source')} disabled={refreshing}>
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
onRefresh();
|
||||
}}
|
||||
disabled={refreshing}
|
||||
color="inherit"
|
||||
>
|
||||
<Refresh />
|
||||
</IconButton>
|
||||
</CustomTooltip>
|
||||
{manga.inLibrary && (
|
||||
<>
|
||||
<CustomTooltip title={t('global.button.migrate')}>
|
||||
<Link
|
||||
to={AppRoutes.migrate.childRoutes.search.path(
|
||||
manga.sourceId,
|
||||
manga.id,
|
||||
manga.title,
|
||||
)}
|
||||
state={{ mangaTitle: manga.title }}
|
||||
style={{ textDecoration: 'none', color: 'inherit' }}
|
||||
>
|
||||
<IconButton color="inherit">
|
||||
<SyncAltIcon />
|
||||
</IconButton>
|
||||
</Link>
|
||||
</CustomTooltip>
|
||||
<CustomTooltip title={t('manga.label.edit_categories')}>
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
openCategorySelect(true);
|
||||
}}
|
||||
color="inherit"
|
||||
>
|
||||
<Label />
|
||||
</IconButton>
|
||||
</CustomTooltip>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{!isLargeScreen && (
|
||||
<>
|
||||
<IconButton
|
||||
id="chaptersMenuButton"
|
||||
aria-controls={open ? 'chaptersMenu' : undefined}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={open ? 'true' : undefined}
|
||||
onClick={(e) => setAnchorEl(e.currentTarget)}
|
||||
color="inherit"
|
||||
>
|
||||
<MoreHoriz />
|
||||
</IconButton>
|
||||
<Menu
|
||||
id="chaptersMenu"
|
||||
anchorEl={anchorEl}
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
MenuListProps={{
|
||||
'aria-labelledby': 'chaptersMenuButton',
|
||||
}}
|
||||
>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
onRefresh();
|
||||
handleClose();
|
||||
}}
|
||||
disabled={refreshing}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Refresh fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>{t('manga.label.reload_from_source')}</ListItemText>
|
||||
</MenuItem>
|
||||
{manga.inLibrary && [
|
||||
<MenuItem
|
||||
key="migrate"
|
||||
component={Link}
|
||||
to={AppRoutes.migrate.childRoutes.search.path(manga.sourceId, manga.id, manga.title)}
|
||||
state={{ mangaTitle: manga.title }}
|
||||
style={{ textDecoration: 'none', color: 'inherit' }}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<SyncAltIcon fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>{t('migrate.title')}</ListItemText>
|
||||
</MenuItem>,
|
||||
<MenuItem
|
||||
key="categories"
|
||||
onClick={() => {
|
||||
openCategorySelect(true);
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Label fontSize="small" />
|
||||
</ListItemIcon>
|
||||
<ListItemText>{t('manga.label.edit_categories')}</ListItemText>
|
||||
</MenuItem>,
|
||||
]}
|
||||
</Menu>
|
||||
</>
|
||||
)}
|
||||
|
||||
{CategorySelectComponent}
|
||||
</>
|
||||
);
|
||||
};
|
||||
32
src/features/manga/components/ResumeFAB.tsx
Normal file
32
src/features/manga/components/ResumeFAB.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
/*
|
||||
* 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 PlayArrow from '@mui/icons-material/PlayArrow';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { StyledFab } from '@/features/core/components/buttons/StyledFab.tsx';
|
||||
import { Chapters } from '@/features/chapter/services/Chapters.ts';
|
||||
import { ChapterMangaInfo, ChapterReadInfo, ChapterSourceOrderInfo } from '@/features/chapter/Chapter.types.ts';
|
||||
|
||||
export function ResumeFab({ chapter }: { chapter: ChapterMangaInfo & ChapterSourceOrderInfo & ChapterReadInfo }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { sourceOrder } = chapter;
|
||||
return (
|
||||
<StyledFab
|
||||
component={Link}
|
||||
variant="extended"
|
||||
color="primary"
|
||||
to={Chapters.getReaderUrl(chapter)}
|
||||
state={Chapters.getReaderOpenChapterLocationState(chapter)}
|
||||
>
|
||||
<PlayArrow />
|
||||
{sourceOrder === 1 ? t('global.button.start') : t('global.button.resume')}
|
||||
</StyledFab>
|
||||
);
|
||||
}
|
||||
75
src/features/manga/components/TrackMangaButton.tsx
Normal file
75
src/features/manga/components/TrackMangaButton.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
/*
|
||||
* 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 { useNavigate } from 'react-router-dom';
|
||||
import SyncIcon from '@mui/icons-material/Sync';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import PopupState, { bindDialog, bindTrigger } from 'material-ui-popup-state';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import CheckIcon from '@mui/icons-material/Check';
|
||||
import { requestManager } from '@/lib/requests/RequestManager.ts';
|
||||
import { makeToast } from '@/features/core/utils/Toast.ts';
|
||||
import { TrackManga } from '@/features/tracker/components/TrackManga.tsx';
|
||||
import { Trackers } from '@/features/tracker/services/Trackers.ts';
|
||||
import { CustomButton } from '@/features/core/components/buttons/CustomButton.tsx';
|
||||
import { GetTrackersSettingsQuery, MangaType } from '@/lib/graphql/generated/graphql.ts';
|
||||
import { GET_TRACKERS_SETTINGS } from '@/lib/graphql/queries/TrackerQuery.ts';
|
||||
import { MangaTrackRecordInfo } from '@/features/manga/Manga.types.ts';
|
||||
import { AppRoutes } from '@/features/core/AppRoute.constants.ts';
|
||||
|
||||
export const TrackMangaButton = ({ manga }: { manga: MangaTrackRecordInfo & Pick<MangaType, 'title'> }) => {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const trackerList = requestManager.useGetTrackerList<GetTrackersSettingsQuery>(GET_TRACKERS_SETTINGS);
|
||||
const trackers = trackerList.data?.trackers.nodes ?? [];
|
||||
const mangaTrackers = manga.trackRecords.nodes;
|
||||
|
||||
const loggedInTrackers = Trackers.getLoggedIn(trackers);
|
||||
const trackersInUse = Trackers.getLoggedIn(Trackers.getTrackers(mangaTrackers, trackers));
|
||||
|
||||
const handleClick = (openPopup: () => void) => {
|
||||
if (trackerList.error) {
|
||||
makeToast(t('tracking.error.label.could_not_load_track_info'), 'error', trackerList.error?.toString());
|
||||
return;
|
||||
}
|
||||
|
||||
if (!loggedInTrackers.length) {
|
||||
navigate(AppRoutes.tracker.path);
|
||||
return;
|
||||
}
|
||||
|
||||
openPopup();
|
||||
};
|
||||
|
||||
return (
|
||||
<PopupState variant="dialog" popupId="manga-track-modal">
|
||||
{(popupState) => (
|
||||
<>
|
||||
<CustomButton
|
||||
{...bindTrigger(popupState)}
|
||||
size="medium"
|
||||
disabled={trackerList.loading || !!trackerList.error}
|
||||
onClick={() => handleClick(popupState.open)}
|
||||
variant={trackersInUse.length ? 'contained' : 'outlined'}
|
||||
>
|
||||
{trackersInUse.length ? <CheckIcon /> : <SyncIcon />}
|
||||
{trackersInUse.length
|
||||
? t('manga.button.track.active', { count: trackersInUse.length })
|
||||
: t('manga.button.track.start')}
|
||||
</CustomButton>
|
||||
{popupState.isOpen && (
|
||||
<Dialog {...bindDialog(popupState)} maxWidth="md" fullWidth scroll="paper">
|
||||
<TrackManga manga={manga} />
|
||||
</Dialog>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</PopupState>
|
||||
);
|
||||
};
|
||||
166
src/features/manga/components/cards/MangaCard.tsx
Normal file
166
src/features/manga/components/cards/MangaCard.tsx
Normal file
@@ -0,0 +1,166 @@
|
||||
/*
|
||||
* 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 PopupState, { bindMenu } from 'material-ui-popup-state';
|
||||
import { memo, useCallback, useMemo, useState } from 'react';
|
||||
import { useLongPress } from 'use-long-press';
|
||||
import { MangaActionMenuItems, SingleModeProps } from '@/features/manga/components/MangaActionMenuItems.tsx';
|
||||
import { Menu } from '@/features/core/components/menu/Menu.tsx';
|
||||
import { MigrateDialog } from '@/features/migration/components/MigrateDialog.tsx';
|
||||
import { useManageMangaLibraryState } from '@/features/manga/hooks/useManageMangaLibraryState.tsx';
|
||||
import { MangaGridCard } from '@/features/manga/components/cards/MangaGridCard.tsx';
|
||||
import { MangaListCard } from '@/features/manga/components/cards/MangaListCard.tsx';
|
||||
import { MangaCardMode, MangaCardProps } from '@/features/manga/Manga.types.ts';
|
||||
import { ContinueReadingButton } from '@/features/manga/components/ContinueReadingButton.tsx';
|
||||
import { MangaBadges } from '@/features/manga/components/MangaBadges.tsx';
|
||||
import { GridLayout } from '@/features/core/Core.types.ts';
|
||||
import { AppRoutes } from '@/features/core/AppRoute.constants.ts';
|
||||
import { useMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts';
|
||||
|
||||
const getMangaLinkTo = (
|
||||
mode: MangaCardMode,
|
||||
mangaId: number,
|
||||
sourceId: string | undefined,
|
||||
mangaTitle: string,
|
||||
): string => {
|
||||
switch (mode) {
|
||||
case 'default':
|
||||
case 'source':
|
||||
case 'duplicate':
|
||||
return AppRoutes.manga.path(mangaId);
|
||||
case 'migrate.search':
|
||||
return AppRoutes.migrate.childRoutes.search.path(sourceId ?? '-1', mangaId, mangaTitle);
|
||||
case 'migrate.select':
|
||||
return '';
|
||||
default:
|
||||
throw new Error(`getMangaLinkTo: unexpected MangaCardMode "${mode}"`);
|
||||
}
|
||||
};
|
||||
|
||||
export const MangaCard = memo((props: MangaCardProps) => {
|
||||
const { manga, gridLayout, inLibraryIndicator, selected, handleSelection, mode = 'default' } = props;
|
||||
const { id, firstUnreadChapter, downloadCount, unreadCount } = manga;
|
||||
const {
|
||||
settings: { showContinueReadingButton },
|
||||
} = useMetadataServerSettings();
|
||||
|
||||
const { CategorySelectComponent, updateLibraryState, isInLibrary } = useManageMangaLibraryState(
|
||||
manga,
|
||||
mode === 'source',
|
||||
);
|
||||
|
||||
const mangaLinkTo = getMangaLinkTo(mode, manga.id, manga.sourceId, manga.title);
|
||||
|
||||
const [isMigrateDialogOpen, setIsMigrateDialogOpen] = useState(false);
|
||||
|
||||
const handleClick = useCallback(
|
||||
(event: React.MouseEvent | React.TouchEvent, openMenu?: () => void) => {
|
||||
const isDefaultMode = mode === 'default';
|
||||
const isSourceMode = mode === 'source';
|
||||
const isMigrateSelectMode = mode === 'migrate.select';
|
||||
const isSelectionMode = selected !== null;
|
||||
const isLongPress = !!openMenu;
|
||||
|
||||
const shouldHandleClick =
|
||||
isMigrateSelectMode || isSelectionMode || ((isDefaultMode || isSourceMode) && isLongPress);
|
||||
if (!shouldHandleClick) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
if (isSourceMode) {
|
||||
updateLibraryState();
|
||||
return;
|
||||
}
|
||||
|
||||
if (isSelectionMode) {
|
||||
handleSelection?.(id, !selected, { selectRange: event.shiftKey });
|
||||
return;
|
||||
}
|
||||
|
||||
if (isDefaultMode) {
|
||||
openMenu?.();
|
||||
return;
|
||||
}
|
||||
|
||||
if (isMigrateSelectMode) {
|
||||
setIsMigrateDialogOpen(true);
|
||||
}
|
||||
},
|
||||
[mode, selected, updateLibraryState, handleSelection],
|
||||
);
|
||||
|
||||
const longPressBind = useLongPress(
|
||||
useCallback(
|
||||
(e: any, { context }: any) => {
|
||||
e.shiftKey = true;
|
||||
handleClick(e, context as () => {});
|
||||
},
|
||||
[handleClick],
|
||||
),
|
||||
);
|
||||
|
||||
const MangaCardComponent = useMemo(
|
||||
() => (gridLayout === GridLayout.List ? MangaListCard : MangaGridCard),
|
||||
[gridLayout],
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isMigrateDialogOpen && (
|
||||
<MigrateDialog mangaIdToMigrateTo={manga.id} onClose={() => setIsMigrateDialogOpen(false)} />
|
||||
)}
|
||||
<PopupState variant="popover" popupId="manga-card-action-menu">
|
||||
{(popupState) => (
|
||||
<>
|
||||
<MangaCardComponent
|
||||
{...props}
|
||||
longPressBind={longPressBind}
|
||||
popupState={popupState}
|
||||
handleClick={handleClick}
|
||||
mangaLinkTo={mangaLinkTo}
|
||||
isInLibrary={isInLibrary}
|
||||
inLibraryIndicator={inLibraryIndicator}
|
||||
continueReadingButton={
|
||||
<ContinueReadingButton
|
||||
showContinueReadingButton={showContinueReadingButton && mode === 'default'}
|
||||
chapter={firstUnreadChapter}
|
||||
mangaLinkTo={mangaLinkTo}
|
||||
/>
|
||||
}
|
||||
mangaBadges={
|
||||
<MangaBadges
|
||||
inLibraryIndicator={inLibraryIndicator}
|
||||
isInLibrary={isInLibrary}
|
||||
unread={unreadCount}
|
||||
downloadCount={downloadCount}
|
||||
updateLibraryState={updateLibraryState}
|
||||
mode={mode}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
{!!handleSelection && popupState.isOpen && (
|
||||
<Menu {...bindMenu(popupState)}>
|
||||
{(onClose, setHideMenu) => (
|
||||
<MangaActionMenuItems
|
||||
manga={manga as SingleModeProps['manga']}
|
||||
handleSelection={handleSelection}
|
||||
onClose={onClose}
|
||||
setHideMenu={setHideMenu}
|
||||
/>
|
||||
)}
|
||||
</Menu>
|
||||
)}
|
||||
{CategorySelectComponent}
|
||||
</>
|
||||
)}
|
||||
</PopupState>
|
||||
</>
|
||||
);
|
||||
});
|
||||
213
src/features/manga/components/cards/MangaGridCard.tsx
Normal file
213
src/features/manga/components/cards/MangaGridCard.tsx
Normal file
@@ -0,0 +1,213 @@
|
||||
/*
|
||||
* 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';
|
||||
import { Link as RouterLink } from 'react-router-dom';
|
||||
import Box from '@mui/material/Box';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardActionArea from '@mui/material/CardActionArea';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { memo, useRef } from 'react';
|
||||
import { CustomTooltip } from '@/features/core/components/CustomTooltip.tsx';
|
||||
import { SpinnerImage } from '@/features/core/components/SpinnerImage.tsx';
|
||||
import { MangaOptionButton } from '@/features/manga/components/MangaOptionButton.tsx';
|
||||
import { Mangas } from '@/features/manga/services/Mangas.ts';
|
||||
import { SpecificMangaCardProps } from '@/features/manga/Manga.types.ts';
|
||||
import { TypographyMaxLines } from '@/features/core/components/texts/TypographyMaxLines.tsx';
|
||||
import { MANGA_COVER_ASPECT_RATIO } from '@/features/manga/Manga.constants.ts';
|
||||
import { GridLayout } from '@/features/core/Core.types.ts';
|
||||
import { MediaQuery } from '@/features/core/utils/MediaQuery.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%)',
|
||||
});
|
||||
|
||||
export const MangaGridCard = memo(
|
||||
({
|
||||
manga,
|
||||
longPressBind,
|
||||
popupState,
|
||||
handleClick,
|
||||
mangaLinkTo,
|
||||
selected,
|
||||
inLibraryIndicator,
|
||||
isInLibrary,
|
||||
gridLayout,
|
||||
handleSelection,
|
||||
continueReadingButton,
|
||||
mangaBadges,
|
||||
mode,
|
||||
}: SpecificMangaCardProps) => {
|
||||
const preventMobileContextMenu = MediaQuery.usePreventMobileContextMenu();
|
||||
const optionButtonRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
const { id, title } = manga;
|
||||
|
||||
return (
|
||||
<Link
|
||||
component={RouterLink}
|
||||
{...longPressBind(() => popupState.open(optionButtonRef.current))}
|
||||
onClick={handleClick}
|
||||
to={mangaLinkTo}
|
||||
state={Mangas.createLocationState(manga, mode)}
|
||||
onContextMenu={preventMobileContextMenu}
|
||||
sx={{
|
||||
...MediaQuery.preventMobileContextMenuSx(),
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
m: 0.25,
|
||||
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: 'inline-flex',
|
||||
},
|
||||
'&:hover .source-manga-library-state-indicator': {
|
||||
display: mode === 'source' ? 'none' : 'flex',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
sx={{
|
||||
// force standard aspect ratio of manga covers
|
||||
aspectRatio: MANGA_COVER_ASPECT_RATIO,
|
||||
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
|
||||
direction="row"
|
||||
sx={{
|
||||
alignItems: 'start',
|
||||
justifyContent: 'space-between',
|
||||
position: 'absolute',
|
||||
top: (theme) => theme.spacing(1),
|
||||
left: (theme) => theme.spacing(1),
|
||||
right: (theme) => theme.spacing(1),
|
||||
}}
|
||||
>
|
||||
{mangaBadges}
|
||||
<MangaOptionButton
|
||||
ref={optionButtonRef}
|
||||
popupState={popupState}
|
||||
id={id}
|
||||
selected={selected}
|
||||
handleSelection={handleSelection}
|
||||
/>
|
||||
</Stack>
|
||||
<>
|
||||
{gridLayout !== GridLayout.Comfortable && (
|
||||
<>
|
||||
<BottomGradient />
|
||||
<BottomGradientDoubledDown />
|
||||
</>
|
||||
)}
|
||||
<Stack
|
||||
direction="row"
|
||||
sx={{
|
||||
justifyContent: gridLayout !== GridLayout.Comfortable ? 'space-between' : 'end',
|
||||
alignItems: 'end',
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
width: '100%',
|
||||
p: 1,
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
{gridLayout !== GridLayout.Comfortable && (
|
||||
<CustomTooltip title={title} placement="top">
|
||||
<TypographyMaxLines
|
||||
component="h3"
|
||||
sx={{
|
||||
color: 'white',
|
||||
textShadow: '0px 0px 3px #000000',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</TypographyMaxLines>
|
||||
</CustomTooltip>
|
||||
)}
|
||||
{continueReadingButton}
|
||||
</Stack>
|
||||
</>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
{gridLayout === GridLayout.Comfortable && (
|
||||
<Stack sx={{ pb: 1 }}>
|
||||
<CustomTooltip title={title} placement="top">
|
||||
<TypographyMaxLines
|
||||
component="h3"
|
||||
sx={{
|
||||
color: (theme) =>
|
||||
selected ? theme.palette.primary.contrastText : 'text.primary',
|
||||
height: '3rem',
|
||||
pt: 0.5,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</TypographyMaxLines>
|
||||
</CustomTooltip>
|
||||
</Stack>
|
||||
)}
|
||||
</Box>
|
||||
</Link>
|
||||
);
|
||||
},
|
||||
);
|
||||
125
src/features/manga/components/cards/MangaListCard.tsx
Normal file
125
src/features/manga/components/cards/MangaListCard.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
/*
|
||||
* 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 Card from '@mui/material/Card';
|
||||
import CardActionArea from '@mui/material/CardActionArea';
|
||||
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 '@/features/core/components/CustomTooltip.tsx';
|
||||
import { TypographyMaxLines } from '@/features/core/components/texts/TypographyMaxLines.tsx';
|
||||
import { SpecificMangaCardProps } from '@/features/manga/Manga.types.ts';
|
||||
import { Mangas } from '@/features/manga/services/Mangas.ts';
|
||||
import { MangaOptionButton } from '@/features/manga/components/MangaOptionButton.tsx';
|
||||
import { ListCardAvatar } from '@/features/core/components/lists/cards/ListCardAvatar.tsx';
|
||||
import { ListCardContent } from '@/features/core/components/lists/cards/ListCardContent';
|
||||
import { MediaQuery } from '@/features/core/utils/MediaQuery.tsx';
|
||||
|
||||
export const MangaListCard = memo(
|
||||
({
|
||||
manga,
|
||||
longPressBind,
|
||||
popupState,
|
||||
handleClick,
|
||||
mangaLinkTo,
|
||||
selected,
|
||||
inLibraryIndicator,
|
||||
isInLibrary,
|
||||
handleSelection,
|
||||
continueReadingButton,
|
||||
mangaBadges,
|
||||
mode,
|
||||
}: SpecificMangaCardProps) => {
|
||||
const preventMobileContextMenu = MediaQuery.usePreventMobileContextMenu();
|
||||
|
||||
const optionButtonRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
const { id, title } = manga;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardActionArea
|
||||
component={RouterLink}
|
||||
to={mangaLinkTo}
|
||||
state={Mangas.createLocationState(manga, mode)}
|
||||
onClick={handleClick}
|
||||
{...longPressBind(() => popupState.open(optionButtonRef.current))}
|
||||
onContextMenu={preventMobileContextMenu}
|
||||
sx={{
|
||||
...MediaQuery.preventMobileContextMenuSx(),
|
||||
'@media (hover: hover) and (pointer: fine)': {
|
||||
'&:hover .manga-option-button': {
|
||||
visibility: 'visible',
|
||||
pointerEvents: 'all',
|
||||
},
|
||||
'&:hover .source-manga-library-state-button': {
|
||||
display: 'inline-flex',
|
||||
},
|
||||
'&:hover .source-manga-library-state-indicator': {
|
||||
display: mode === 'source' ? 'none' : 'inline-flex',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ListCardContent
|
||||
sx={{
|
||||
justifyContent: 'space-between',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<ListCardAvatar
|
||||
iconUrl={Mangas.getThumbnailUrl(manga)}
|
||||
alt={manga.title}
|
||||
slots={{
|
||||
spinnerImageProps: {
|
||||
imgStyle: {
|
||||
imageRendering: 'pixelated',
|
||||
filter: inLibraryIndicator && isInLibrary ? 'brightness(0.4)' : undefined,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
flexGrow: 1,
|
||||
width: 'min-content',
|
||||
}}
|
||||
>
|
||||
<CustomTooltip title={title} placement="top">
|
||||
<TypographyMaxLines variant="h6" component="h3">
|
||||
{title}
|
||||
</TypographyMaxLines>
|
||||
</CustomTooltip>
|
||||
</Box>
|
||||
<Stack
|
||||
direction="row"
|
||||
sx={{
|
||||
alignItems: 'center',
|
||||
gap: 0.5,
|
||||
}}
|
||||
>
|
||||
{mangaBadges}
|
||||
{continueReadingButton}
|
||||
<MangaOptionButton
|
||||
ref={optionButtonRef}
|
||||
popupState={popupState}
|
||||
id={id}
|
||||
selected={selected}
|
||||
handleSelection={handleSelection}
|
||||
asCheckbox
|
||||
/>
|
||||
</Stack>
|
||||
</ListCardContent>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
);
|
||||
},
|
||||
);
|
||||
104
src/features/manga/components/details/DescriptionGenre.tsx
Normal file
104
src/features/manga/components/details/DescriptionGenre.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
/*
|
||||
* 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 { useCallback, useMemo, useState } from 'react';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Collapse from '@mui/material/Collapse';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import { useLocalStorage } from '@/features/core/hooks/useStorage.tsx';
|
||||
import { useResizeObserver } from '@/features/core/hooks/useResizeObserver.tsx';
|
||||
import {
|
||||
MangaDescriptionInfo,
|
||||
MangaGenreInfo,
|
||||
MangaLocationState,
|
||||
MangaSourceIdInfo,
|
||||
} from '@/features/manga/Manga.types.ts';
|
||||
import { SearchLink } from '@/features/manga/components/details/SearchLink.tsx';
|
||||
|
||||
const OPEN_CLOSE_BUTTON_HEIGHT = '35px';
|
||||
const DESCRIPTION_COLLAPSED_SIZE = 75;
|
||||
|
||||
export const DescriptionGenre = ({
|
||||
manga: { description, genre: mangaGenres, sourceId },
|
||||
mode,
|
||||
}: {
|
||||
manga: MangaDescriptionInfo & MangaGenreInfo & MangaSourceIdInfo;
|
||||
mode: MangaLocationState['mode'];
|
||||
}) => {
|
||||
const [descriptionElement, setDescriptionElement] = useState<HTMLSpanElement | null>(null);
|
||||
const [descriptionHeight, setDescriptionHeight] = useState<number>();
|
||||
useResizeObserver(
|
||||
descriptionElement,
|
||||
useCallback(() => setDescriptionHeight(descriptionElement?.clientHeight), [descriptionElement]),
|
||||
);
|
||||
|
||||
const [isCollapsed, setIsCollapsed] = useLocalStorage('isDescriptionGenreCollapsed', true);
|
||||
|
||||
const collapsedSize = description
|
||||
? Math.min(DESCRIPTION_COLLAPSED_SIZE, descriptionHeight ?? DESCRIPTION_COLLAPSED_SIZE)
|
||||
: 0;
|
||||
const genres = useMemo(() => mangaGenres.filter(Boolean), [mangaGenres]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{description && (
|
||||
<Stack sx={{ position: 'relative' }}>
|
||||
<Collapse collapsedSize={collapsedSize} in={!isCollapsed}>
|
||||
<Typography
|
||||
ref={setDescriptionElement}
|
||||
sx={{
|
||||
whiteSpace: 'pre-line',
|
||||
textAlign: 'justify',
|
||||
textJustify: 'inter-word',
|
||||
mb: OPEN_CLOSE_BUTTON_HEIGHT,
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
</Typography>
|
||||
</Collapse>
|
||||
<Stack
|
||||
onClick={() => setIsCollapsed(!isCollapsed)}
|
||||
sx={{
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
cursor: 'pointer',
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: OPEN_CLOSE_BUTTON_HEIGHT,
|
||||
bottom: 0,
|
||||
background: (theme) =>
|
||||
`linear-gradient(transparent -15px, ${theme.palette.background.default})`,
|
||||
}}
|
||||
>
|
||||
<IconButton sx={{ color: (theme) => (theme.palette.mode === 'light' ? 'black' : 'text') }}>
|
||||
{isCollapsed ? <ExpandMoreIcon /> : <ExpandLessIcon />}
|
||||
</IconButton>
|
||||
</Stack>
|
||||
</Stack>
|
||||
)}
|
||||
<Stack
|
||||
sx={{
|
||||
flexDirection: 'row',
|
||||
flexWrap: isCollapsed ? 'no-wrap' : 'wrap',
|
||||
gap: 1,
|
||||
overflowX: isCollapsed ? 'auto' : null,
|
||||
}}
|
||||
>
|
||||
{genres.map((genre) => (
|
||||
<SearchLink key={genre} query={genre} sourceId={sourceId} mode={mode}>
|
||||
<Chip label={genre} variant="outlined" onClick={() => {}} />
|
||||
</SearchLink>
|
||||
))}
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
};
|
||||
297
src/features/manga/components/details/MangaDetails.tsx
Normal file
297
src/features/manga/components/details/MangaDetails.tsx
Normal file
@@ -0,0 +1,297 @@
|
||||
/*
|
||||
* 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 FavoriteIcon from '@mui/icons-material/Favorite';
|
||||
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { ComponentProps, ReactNode, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { t as translate } from 'i18next';
|
||||
import Link from '@mui/material/Link';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
|
||||
import ButtonGroup from '@mui/material/ButtonGroup';
|
||||
import { CustomTooltip } from '@/features/core/components/CustomTooltip.tsx';
|
||||
import { makeToast } from '@/features/core/utils/Toast.ts';
|
||||
import { Mangas } from '@/features/manga/services/Mangas.ts';
|
||||
import { SpinnerImage } from '@/features/core/components/SpinnerImage.tsx';
|
||||
import { CustomButton } from '@/features/core/components/buttons/CustomButton.tsx';
|
||||
import { TrackMangaButton } from '@/features/manga/components/TrackMangaButton.tsx';
|
||||
import { useManageMangaLibraryState } from '@/features/manga/hooks/useManageMangaLibraryState.tsx';
|
||||
import { Metadata as BaseMetadata } from '@/features/core/components/texts/Metadata.tsx';
|
||||
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
|
||||
import { MangaType, SourceType } from '@/lib/graphql/generated/graphql.ts';
|
||||
import { useMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts';
|
||||
import { MANGA_STATUS_TO_TRANSLATION } from '@/features/manga/Manga.constants.ts';
|
||||
import {
|
||||
MangaArtistInfo,
|
||||
MangaAuthorInfo,
|
||||
MangaDescriptionInfo,
|
||||
MangaGenreInfo,
|
||||
MangaIdInfo,
|
||||
MangaInLibraryInfo,
|
||||
MangaLocationState,
|
||||
MangaSourceIdInfo,
|
||||
MangaStatusInfo,
|
||||
MangaThumbnailInfo,
|
||||
MangaTitleInfo,
|
||||
MangaTrackRecordInfo,
|
||||
} from '@/features/manga/Manga.types.ts';
|
||||
import { applyStyles } from '@/features/core/utils/ApplyStyles.ts';
|
||||
import { CustomButtonIcon } from '@/features/core/components/buttons/CustomButtonIcon.tsx';
|
||||
import { Sources } from '@/features/source/services/Sources.ts';
|
||||
import { SourceIdInfo } from '@/features/source/Source.types.ts';
|
||||
import { Thumbnail } from '@/features/manga/components/details/Thumbnail.tsx';
|
||||
import { DescriptionGenre } from '@/features/manga/components/details/DescriptionGenre.tsx';
|
||||
import { SearchLink } from '@/features/manga/components/details/SearchLink.tsx';
|
||||
import { requestManager } from '@/lib/requests/RequestManager.ts';
|
||||
import { IconBrowser } from '@/assets/icons/IconBrowser.tsx';
|
||||
import { IconWebView } from '@/assets/icons/IconWebView.tsx';
|
||||
|
||||
const DetailsWrapper = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: theme.spacing(2),
|
||||
padding: theme.spacing(1),
|
||||
[theme.breakpoints.up('md')]: {
|
||||
flexBasis: '40%',
|
||||
height: 'calc(100vh - 64px)',
|
||||
overflowY: 'auto',
|
||||
},
|
||||
}));
|
||||
|
||||
const TopContentWrapper = ({
|
||||
url,
|
||||
mangaThumbnailBackdrop,
|
||||
children,
|
||||
}: {
|
||||
url: string;
|
||||
mangaThumbnailBackdrop: boolean;
|
||||
children: ReactNode;
|
||||
}) => (
|
||||
<Stack
|
||||
sx={{
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{mangaThumbnailBackdrop && (
|
||||
<>
|
||||
<SpinnerImage
|
||||
spinnerStyle={{ display: 'none' }}
|
||||
imgStyle={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
}}
|
||||
src={url}
|
||||
alt="Manga Thumbnail"
|
||||
/>
|
||||
<Stack
|
||||
sx={{
|
||||
'&::before': (theme) =>
|
||||
applyStyles(mangaThumbnailBackdrop, {
|
||||
position: 'absolute',
|
||||
display: 'inline-block',
|
||||
content: '""',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
background: `linear-gradient(to top, ${theme.palette.background.default}, transparent 100%, transparent 1px),linear-gradient(to right, ${theme.palette.background.default}, transparent 50%, transparent 1px),linear-gradient(to bottom, ${theme.palette.background.default}, transparent 50%, transparent 1px),linear-gradient(to left, ${theme.palette.background.default}, transparent 50%, transparent 1px)`,
|
||||
backdropFilter: 'blur(4.5px) brightness(0.75)',
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{children}
|
||||
</Stack>
|
||||
);
|
||||
|
||||
const ThumbnailMetadataWrapper = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
paddingBottom: theme.spacing(1),
|
||||
}));
|
||||
|
||||
const MetadataContainer = styled('div')(({ theme }) => ({
|
||||
zIndex: 1,
|
||||
marginLeft: theme.spacing(1),
|
||||
}));
|
||||
|
||||
const Metadata = (props: ComponentProps<typeof BaseMetadata>) => <BaseMetadata {...props} />;
|
||||
|
||||
const MangaButtonsContainer = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
gap: theme.spacing(1),
|
||||
}));
|
||||
|
||||
const OpenSourceButton = ({ url }: { url?: string | null }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<ButtonGroup>
|
||||
<CustomTooltip title={t('global.button.open_browser')} disabled={!url}>
|
||||
<CustomButtonIcon
|
||||
size="medium"
|
||||
disabled={!url}
|
||||
component={Link}
|
||||
href={url ?? undefined}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
variant="outlined"
|
||||
>
|
||||
<IconBrowser />
|
||||
</CustomButtonIcon>
|
||||
</CustomTooltip>
|
||||
<CustomTooltip title={t('global.button.open_webview')} disabled={!url}>
|
||||
<CustomButtonIcon
|
||||
size="medium"
|
||||
disabled={!url}
|
||||
component={Link}
|
||||
href={url ? requestManager.getWebviewUrl(url) : undefined}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
variant="outlined"
|
||||
>
|
||||
<IconWebView />
|
||||
</CustomButtonIcon>
|
||||
</CustomTooltip>
|
||||
</ButtonGroup>
|
||||
);
|
||||
};
|
||||
|
||||
function getSourceName(source?: Pick<SourceType, 'id' | 'displayName'> | null): string {
|
||||
if (!source) {
|
||||
return translate('global.label.unknown');
|
||||
}
|
||||
|
||||
if (Sources.isLocalSource(source)) {
|
||||
return translate('source.local_source.title');
|
||||
}
|
||||
|
||||
return source.displayName ?? source.id;
|
||||
}
|
||||
|
||||
const valuesToJoinedSearchLinks = (
|
||||
values: string[] | undefined,
|
||||
sourceId: SourceIdInfo['id'] | undefined,
|
||||
mode: MangaLocationState['mode'],
|
||||
) =>
|
||||
values
|
||||
?.map((value) => <SearchLink key={value} query={value} sourceId={sourceId} mode={mode} />)
|
||||
.reduce((acc, valueLink) => (
|
||||
<>
|
||||
{acc}, {valueLink}
|
||||
</>
|
||||
));
|
||||
|
||||
export const MangaDetails = ({
|
||||
manga,
|
||||
mode,
|
||||
}: {
|
||||
manga: Pick<MangaType, 'realUrl'> &
|
||||
MangaIdInfo &
|
||||
MangaTitleInfo &
|
||||
MangaStatusInfo &
|
||||
MangaInLibraryInfo &
|
||||
MangaAuthorInfo &
|
||||
MangaArtistInfo &
|
||||
MangaDescriptionInfo &
|
||||
MangaGenreInfo &
|
||||
MangaThumbnailInfo &
|
||||
MangaSourceIdInfo &
|
||||
MangaTrackRecordInfo & {
|
||||
source?: Pick<SourceType, 'id' | 'displayName'> | null;
|
||||
};
|
||||
mode: MangaLocationState['mode'];
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const {
|
||||
settings: { mangaThumbnailBackdrop, mangaDynamicColorSchemes },
|
||||
} = useMetadataServerSettings();
|
||||
|
||||
useEffect(() => {
|
||||
if (!manga.source) {
|
||||
makeToast(translate('source.error.label.source_not_found'), 'error');
|
||||
}
|
||||
}, [manga.source]);
|
||||
|
||||
const { CategorySelectComponent, updateLibraryState } = useManageMangaLibraryState(manga);
|
||||
|
||||
const copyTitle = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(manga.title);
|
||||
makeToast(t('global.label.copied_clipboard'), 'info');
|
||||
} catch (e) {
|
||||
defaultPromiseErrorHandler('MangaDetails::copyTitleLongPress')(e);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DetailsWrapper>
|
||||
<TopContentWrapper url={Mangas.getThumbnailUrl(manga)} mangaThumbnailBackdrop={mangaThumbnailBackdrop}>
|
||||
<ThumbnailMetadataWrapper>
|
||||
<Thumbnail manga={manga} mangaDynamicColorSchemes={mangaDynamicColorSchemes} />
|
||||
<MetadataContainer>
|
||||
<Stack sx={{ flexDirection: 'row', gap: 1, alignItems: 'flex-start', mb: 1 }}>
|
||||
<SearchLink query={manga.title} sourceId={manga.sourceId} mode="source.global-search">
|
||||
<Typography variant="h5" component="h2" sx={{ wordBreak: 'break-word' }}>
|
||||
{manga.title}
|
||||
</Typography>
|
||||
</SearchLink>
|
||||
<CustomTooltip title={t('global.button.copy')}>
|
||||
<IconButton onClick={copyTitle} color="inherit">
|
||||
<ContentCopyIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</CustomTooltip>
|
||||
</Stack>
|
||||
{manga.author && (
|
||||
<Metadata
|
||||
title={t('manga.label.author')}
|
||||
value={valuesToJoinedSearchLinks(Mangas.getAuthors(manga), manga.source?.id, mode)}
|
||||
/>
|
||||
)}
|
||||
{manga.artist && (
|
||||
<Metadata
|
||||
title={t('manga.label.artist')}
|
||||
value={valuesToJoinedSearchLinks(Mangas.getArtists(manga), manga.source?.id, mode)}
|
||||
/>
|
||||
)}
|
||||
<Metadata
|
||||
title={t('manga.label.status')}
|
||||
value={t(MANGA_STATUS_TO_TRANSLATION[manga.status])}
|
||||
/>
|
||||
<Metadata title={t('source.title_one')} value={getSourceName(manga.source)} />
|
||||
</MetadataContainer>
|
||||
</ThumbnailMetadataWrapper>
|
||||
<MangaButtonsContainer>
|
||||
<CustomButton
|
||||
size="medium"
|
||||
onClick={updateLibraryState}
|
||||
variant={manga.inLibrary ? 'contained' : 'outlined'}
|
||||
>
|
||||
{manga.inLibrary ? <FavoriteIcon /> : <FavoriteBorderIcon />}
|
||||
{manga.inLibrary ? t('manga.button.in_library') : t('manga.button.add_to_library')}
|
||||
</CustomButton>
|
||||
<TrackMangaButton manga={manga} />
|
||||
<OpenSourceButton url={manga.realUrl} />
|
||||
</MangaButtonsContainer>
|
||||
</TopContentWrapper>
|
||||
<DescriptionGenre manga={manga} mode={mode} />
|
||||
</DetailsWrapper>
|
||||
{CategorySelectComponent}
|
||||
</>
|
||||
);
|
||||
};
|
||||
45
src/features/manga/components/details/SearchLink.tsx
Normal file
45
src/features/manga/components/details/SearchLink.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
/*
|
||||
* 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 { ReactNode } from 'react';
|
||||
import Link from '@mui/material/Link';
|
||||
import { Link as RouterLink } from 'react-router-dom';
|
||||
import { MangaLocationState } from '@/features/manga/Manga.types.ts';
|
||||
import { SourceIdInfo } from '@/features/source/Source.types.ts';
|
||||
import { AppRoutes } from '@/features/core/AppRoute.constants.ts';
|
||||
|
||||
export const SearchLink = ({
|
||||
query,
|
||||
sourceId,
|
||||
mode,
|
||||
children,
|
||||
}: {
|
||||
query: string;
|
||||
sourceId: SourceIdInfo['id'] | undefined;
|
||||
mode: MangaLocationState['mode'] | 'source.global-search';
|
||||
children?: ReactNode;
|
||||
}) => {
|
||||
const link = (() => {
|
||||
const isSourceMode = mode === 'source' && sourceId !== undefined;
|
||||
if (isSourceMode) {
|
||||
return AppRoutes.sources.childRoutes.browse.path(sourceId, query);
|
||||
}
|
||||
|
||||
if (mode === 'source.global-search') {
|
||||
return AppRoutes.sources.childRoutes.searchAll.path(query);
|
||||
}
|
||||
|
||||
return AppRoutes.library.path(undefined, query);
|
||||
})();
|
||||
|
||||
return (
|
||||
<Link component={RouterLink} to={link} sx={{ textDecoration: 'none', color: 'inherit' }}>
|
||||
{children ?? query}
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
146
src/features/manga/components/details/Thumbnail.tsx
Normal file
146
src/features/manga/components/details/Thumbnail.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
/*
|
||||
* 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 { useTheme } from '@mui/material/styles';
|
||||
import { useLayoutEffect, useState } from 'react';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import OpenInFullIcon from '@mui/icons-material/OpenInFull';
|
||||
import Modal from '@mui/material/Modal';
|
||||
import { bindPopover, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
|
||||
import { Vibrant } from 'node-vibrant/browser';
|
||||
import { FastAverageColor } from 'fast-average-color';
|
||||
import { Mangas } from '@/features/manga/services/Mangas.ts';
|
||||
import { SpinnerImage } from '@/features/core/components/SpinnerImage.tsx';
|
||||
import { MANGA_COVER_ASPECT_RATIO } from '@/features/manga/Manga.constants.ts';
|
||||
import { MangaThumbnailInfo } from '@/features/manga/Manga.types.ts';
|
||||
import { TAppThemeContext, useAppThemeContext } from '@/features/theme/contexts/AppThemeContext.tsx';
|
||||
|
||||
export const Thumbnail = ({
|
||||
manga,
|
||||
mangaDynamicColorSchemes,
|
||||
}: {
|
||||
manga: Partial<MangaThumbnailInfo>;
|
||||
mangaDynamicColorSchemes: boolean;
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const { setDynamicColor } = useAppThemeContext();
|
||||
|
||||
const popupState = usePopupState({ variant: 'popover', popupId: 'manga-thumbnail-fullscreen' });
|
||||
|
||||
const [isImageReady, setIsImageReady] = useState(false);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (!mangaDynamicColorSchemes) {
|
||||
return () => {};
|
||||
}
|
||||
|
||||
const img = new Image();
|
||||
img.crossOrigin = 'anonymous';
|
||||
img.src = Mangas.getThumbnailUrl(manga);
|
||||
|
||||
img.onload = () => {
|
||||
const isLargeImage = img.width > 600 && img.height > 600;
|
||||
|
||||
Promise.all([
|
||||
Vibrant.from(img).getPalette(),
|
||||
new FastAverageColor().getColor(img, {
|
||||
algorithm: 'dominant',
|
||||
mode: isLargeImage ? 'speed' : 'precision',
|
||||
ignoredColor: [
|
||||
[255, 255, 255, 255, 75],
|
||||
[0, 0, 0, 255, 75],
|
||||
],
|
||||
}),
|
||||
]).then(([palette, averageColor]) => {
|
||||
if (
|
||||
!palette.Vibrant ||
|
||||
!palette.DarkVibrant ||
|
||||
!palette.LightVibrant ||
|
||||
!palette.LightMuted ||
|
||||
!palette.Muted ||
|
||||
!palette.DarkMuted
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
setDynamicColor({
|
||||
...palette,
|
||||
average: averageColor,
|
||||
} as TAppThemeContext['dynamicColor']);
|
||||
});
|
||||
};
|
||||
|
||||
return () => {
|
||||
setDynamicColor(null);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack
|
||||
sx={{
|
||||
position: 'relative',
|
||||
borderRadius: 1,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: 'background.paper',
|
||||
width: '150px',
|
||||
maxHeight: 'fit-content',
|
||||
aspectRatio: MANGA_COVER_ASPECT_RATIO,
|
||||
flexShrink: 0,
|
||||
flexGrow: 0,
|
||||
[theme.breakpoints.up('lg')]: {
|
||||
width: '200px',
|
||||
},
|
||||
[theme.breakpoints.up('xl')]: {
|
||||
width: '300px',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<SpinnerImage
|
||||
src={Mangas.getThumbnailUrl(manga)}
|
||||
alt="Manga Thumbnail"
|
||||
onLoad={() => setIsImageReady(true)}
|
||||
imgStyle={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
/>
|
||||
{isImageReady && (
|
||||
<Stack
|
||||
{...bindTrigger(popupState)}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
width: '100%',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
opacity: 0,
|
||||
'&:hover': {
|
||||
background: 'rgba(0, 0, 0, 0.4)',
|
||||
cursor: 'pointer',
|
||||
opacity: 1,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<OpenInFullIcon fontSize="large" color="primary" />
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
<Modal {...bindPopover(popupState)} sx={{ outline: 0 }}>
|
||||
<Stack
|
||||
onClick={() => popupState.close()}
|
||||
sx={{ height: '100vh', p: 2, outline: 0, justifyContent: 'center', alignItems: 'center' }}
|
||||
>
|
||||
<SpinnerImage
|
||||
src={Mangas.getThumbnailUrl(manga)}
|
||||
alt="Manga Thumbnail"
|
||||
imgStyle={{ height: '100%', width: '100%', objectFit: 'contain' }}
|
||||
/>
|
||||
</Stack>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user