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

Add option to use img tag to fetch images

Browse Source 
MangaUpdates covers could not be fetched via the fetch api because there were cors issues
This commit is contained in:
schroda
2024-03-28 22:40:55 +01:00
parent 816cbee145
commit 74cf4b7c50
3 changed files with 62 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/tracker/TrackerMangaCard.tsx
View File

@@ -145,6 +145,7 @@ export const TrackerMangaCard = ({
>
<TrackerMangaCardLink url={manga.trackingUrl}>
<SpinnerImage
useFetchApi={false}
alt={manga.title}
src={manga.coverUrl}
spinnerStyle={{ width: '100%', height: '100%' }}

12
src/components/util/SpinnerImage.tsx
View File

@@ -27,10 +27,12 @@ interface IProps {
imgStyle?: CSSProperties;
onImageLoad?: () => void;
useFetchApi?: boolean;
}
export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTMLImageElement | null>) => {
const { src, alt, onImageLoad, spinnerStyle: { small, ...spinnerStyle } = {}, imgStyle } = props;
const { useFetchApi, src, alt, onImageLoad, spinnerStyle: { small, ...spinnerStyle } = {}, imgStyle } = props;
const { t } = useTranslation();
@@ -55,8 +57,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
return () => {};
}
let tmpImageSourceUrl: string;
const imageRequest = requestManager.requestImage(src, Priority.HIGH);
const imageRequest = requestManager.requestImage(src, Priority.HIGH, useFetchApi);
let cacheTimeout: NodeJS.Timeout;
const fetchImage = async () => {
@@ -66,7 +67,6 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
updateImageState(false);
setImageSourceUrl(image);
tmpImageSourceUrl = image;
};
const checkCache = await Promise.race([
@@ -94,9 +94,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
fetchImage().catch(defaultPromiseErrorHandler);
return () => {
if (tmpImageSourceUrl) {
URL.revokeObjectURL(tmpImageSourceUrl);
}
imageRequest.cleanup();
clearTimeout(cacheTimeout);
imageRequest.abortRequest(new Error('Component was unmounted'));
};