Show manga image fullscreen button only on successful load
In case the image load failed, the fullscreen button made the image retry button unclickable
This commit is contained in:
@@ -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,6 +141,7 @@ const Thumbnail = ({ manga }: { manga: Partial<MangaThumbnailInfo> }) => {
|
|||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
{isImageReady && (
|
||||||
<Stack
|
<Stack
|
||||||
{...bindTrigger(popupState)}
|
{...bindTrigger(popupState)}
|
||||||
sx={{
|
sx={{
|
||||||
@@ -158,6 +161,7 @@ const Thumbnail = ({ manga }: { manga: Partial<MangaThumbnailInfo> }) => {
|
|||||||
>
|
>
|
||||||
<OpenInFullIcon fontSize="large" color="primary" />
|
<OpenInFullIcon fontSize="large" color="primary" />
|
||||||
</Stack>
|
</Stack>
|
||||||
|
)}
|
||||||
</Stack>
|
</Stack>
|
||||||
<Modal {...bindPopover(popupState)} sx={{ outline: 0 }}>
|
<Modal {...bindPopover(popupState)} sx={{ outline: 0 }}>
|
||||||
<Stack
|
<Stack
|
||||||
|
|||||||
Reference in New Issue
Block a user