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

Show manga image fullscreen button only on successful load

Browse Source 
In case the image load failed, the fullscreen button made the image retry button unclickable
This commit is contained in:
schroda
2024-09-09 15:35:19 +02:00
parent 3b20d64062
commit 9d06503048
1 changed files with 24 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,7 +9,7 @@
import FavoriteIcon from '@mui/icons-material/Favorite'; import FavoriteIcon from '@mui/icons-material/Favorite';
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder'; import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
import { styled, useTheme } from '@mui/material/styles'; import { styled, useTheme } from '@mui/material/styles';
import { ComponentProps, useEffect, useMemo } from 'react'; import { ComponentProps, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { t as translate } from 'i18next'; import { t as translate } from 'i18next';
import Link from '@mui/material/Link'; import Link from '@mui/material/Link';
@@ -103,6 +103,7 @@ const Thumbnail = ({ manga }: { manga: Partial<MangaThumbnailInfo> }) => {
const theme = useTheme(); const theme = useTheme();
const popupState = usePopupState({ variant: 'popover', popupId: 'manga-thumbnail-fullscreen' }); const popupState = usePopupState({ variant: 'popover', popupId: 'manga-thumbnail-fullscreen' });
const [isImageReady, setIsImageReady] = useState(false);
return ( return (
<> <>
@@ -125,6 +126,7 @@ const Thumbnail = ({ manga }: { manga: Partial<MangaThumbnailInfo> }) => {
<SpinnerImage <SpinnerImage
src={Mangas.getThumbnailUrl(manga)} src={Mangas.getThumbnailUrl(manga)}
alt="Manga Thumbnail" alt="Manga Thumbnail"
onImageLoad={() => setIsImageReady(true)}
spinnerStyle={{ spinnerStyle={{
borderRadius: 0.5, borderRadius: 0.5,
width: '150px', width: '150px',
@@ -139,25 +141,27 @@ const Thumbnail = ({ manga }: { manga: Partial<MangaThumbnailInfo> }) => {
}, },
}} }}
/> />
<Stack {isImageReady && (
{...bindTrigger(popupState)} <Stack
sx={{ {...bindTrigger(popupState)}
position: 'absolute', sx={{
top: 0, position: 'absolute',
bottom: 0, top: 0,
width: '100%', bottom: 0,
justifyContent: 'center', width: '100%',
alignItems: 'center', justifyContent: 'center',
opacity: 0, alignItems: 'center',
'&:hover': { opacity: 0,
background: 'rgba(0, 0, 0, 0.4)', '&:hover': {
cursor: 'pointer', background: 'rgba(0, 0, 0, 0.4)',
opacity: 1, cursor: 'pointer',
}, opacity: 1,
}} },
> }}
<OpenInFullIcon fontSize="large" color="primary" /> >
</Stack> <OpenInFullIcon fontSize="large" color="primary" />
</Stack>
)}
</Stack> </Stack>
<Modal {...bindPopover(popupState)} sx={{ outline: 0 }}> <Modal {...bindPopover(popupState)} sx={{ outline: 0 }}>
<Stack <Stack