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

Reader page rendering

Browse Source
This commit is contained in:
schroda
2024-11-06 13:00:36 +01:00
parent 0b1c67ce9f
commit 7cf78e771a
28 changed files with 1243 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/modules/core/components/SpinnerImage.tsx
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useState, CSSProperties, useEffect, forwardRef, ForwardedRef } from 'react';
import { useState, useEffect, forwardRef, ForwardedRef } from 'react';
import CircularProgress from '@mui/material/CircularProgress';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
@@ -18,15 +18,18 @@ import ImageIcon from '@mui/icons-material/Image';
import { SxProps, Theme } from '@mui/material/styles';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { Priority } from '@/lib/Queue.ts';
import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
interface IProps {
shouldLoad?: boolean;
src: string;
alt: string;
spinnerStyle?: SxProps<Theme> & { small?: boolean };
imgStyle?: CSSProperties;
imgStyle?: SxProps<Theme>;
onImageLoad?: () => void;
onLoad?: () => void;
shouldDecode?: boolean;
useFetchApi?: boolean;
@@ -36,11 +39,12 @@ interface IProps {
export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTMLImageElement | null>) => {
const {
shouldLoad = true,
shouldDecode,
useFetchApi,
src,
alt,
onImageLoad,
onLoad,
spinnerStyle: { small, ...spinnerStyle } = {},
imgStyle,
priority,
@@ -60,12 +64,12 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
setHasError(error);
if (!loading && !error && !aborted) {
onImageLoad?.();
onLoad?.();
}
};
useEffect(() => {
if (showMissingImageIcon) {
if (showMissingImageIcon || !shouldLoad) {
return () => {};
}
@@ -110,12 +114,51 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
clearTimeout(cacheTimeout);
imageRequest.abortRequest(new Error('Component was unmounted'));
};
}, [src, imgLoadRetryKey]);
}, [src, imgLoadRetryKey, showMissingImageIcon, shouldLoad]);
return (
<>
{(isLoading || hasError) && (
<Box sx={{ height: '100%', ...spinnerStyle }}>
{showMissingImageIcon ? (
<Stack
ref={imgRef}
sx={{
height: '100%',
alignItems: 'center',
justifyContent: 'center',
background: (theme) => theme.palette.background.default,
...spinnerStyle,
}}
>
<ImageIcon fontSize="large" />
</Stack>
) : (
<Box
component="img"
key={`${src}_${imgLoadRetryKey}`}
sx={[
...(Array.isArray(imgStyle) ? (imgStyle ?? []) : [imgStyle]),
applyStyles(!imageSourceUrl || isLoading || hasError, {
visibility: 'hidden',
minWidth: 0,
minHeight: 0,
width: 0,
height: 0,
}),
]}
ref={imgRef}
src={imageSourceUrl}
alt={alt}
draggable={false}
/>
)}
{(isLoading || (src && !imageSourceUrl) || hasError) && (
<Box
sx={{
height: '100%',
...spinnerStyle,
}}
>
<Stack
sx={{
height: '100%',
@@ -123,7 +166,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
justifyContent: 'center',
}}
>
{isLoading && <CircularProgress thickness={5} />}
{(isLoading || (src && !imageSourceUrl && !hasError)) && <CircularProgress thickness={5} />}
{hasError && isLoading === false && (
<>
<BrokenImageIcon />
@@ -143,32 +186,6 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
</Stack>
</Box>
)}
{showMissingImageIcon ? (
<Stack
sx={{
height: '100%',
alignItems: 'center',
justifyContent: 'center',
background: (theme) => theme.palette.background.default,
...spinnerStyle,
}}
>
<ImageIcon fontSize="large" />
</Stack>
) : (
<img
key={`${src}_${imgLoadRetryKey}`}
style={{
...imgStyle,
display: !imageSourceUrl || isLoading || hasError ? 'none' : imgStyle?.display,
}}
ref={imgRef}
src={imageSourceUrl}
alt={alt}
draggable={false}
/>
)}
</>
);
});