From ed74f7c851451e65b153875ed44ad37ca9311666 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Fri, 8 Mar 2024 00:24:01 +0100 Subject: [PATCH] Make remaining image requests abortable (#645) --- src/components/ExtensionCard.tsx | 12 +++++++-- src/components/MangaCard.tsx | 40 ++++++++++++++-------------- src/components/MigrationCard.tsx | 13 ++++++--- src/components/SourceCard.tsx | 12 +++++++-- src/components/reader/DoublePage.tsx | 6 ++--- src/components/reader/Page.tsx | 12 ++++----- src/components/util/SpinnerImage.tsx | 10 +++---- src/lib/requests/RequestManager.ts | 2 +- src/screens/Updates.tsx | 18 ++++++++++--- 9 files changed, 80 insertions(+), 45 deletions(-) diff --git a/src/components/ExtensionCard.tsx b/src/components/ExtensionCard.tsx index 208b2cc0..80319990 100644 --- a/src/components/ExtensionCard.tsx +++ b/src/components/ExtensionCard.tsx @@ -18,6 +18,7 @@ import { PartialExtension, TranslationKey } from '@/typings'; import { requestManager } from '@/lib/requests/RequestManager.ts'; import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts'; import { makeToast } from '@/components/util/Toast.tsx'; +import { SpinnerImage } from '@/components/util/SpinnerImage.tsx'; interface IProps { extension: PartialExtension; @@ -170,10 +171,17 @@ export function ExtensionCard(props: IProps) { height: 56, flex: '0 0 auto', mr: 2, + background: 'transparent', }} alt={name} - src={requestManager.getValidImgUrlFor(iconUrl)} - /> + > + + {name} diff --git a/src/components/MangaCard.tsx b/src/components/MangaCard.tsx index 801feb01..fe05bd3d 100644 --- a/src/components/MangaCard.tsx +++ b/src/components/MangaCard.tsx @@ -347,26 +347,26 @@ export const MangaCard = (props: MangaCardProps) => { > + sx={{ + width: 56, + height: 56, + flex: '0 0 auto', + marginRight: 2, + }} + > + + & { mangaCount: number; @@ -40,10 +41,16 @@ export const MigrationCard = ({ id, name, lang, iconUrl, mangaCount }: TMigratab height: 56, flex: '0 0 auto', mr: 2, + background: 'transparent', }} - alt={name} - src={requestManager.getValidImgUrlFor(iconUrl)} - /> + > + + {name} diff --git a/src/components/SourceCard.tsx b/src/components/SourceCard.tsx index c0a63d15..cc1f56ef 100644 --- a/src/components/SourceCard.tsx +++ b/src/components/SourceCard.tsx @@ -19,6 +19,7 @@ import { TPartialSource } from '@/typings'; import { requestManager } from '@/lib/requests/RequestManager.ts'; import { translateExtensionLanguage } from '@/screens/util/Extensions'; import { SourceContentType } from '@/screens/SourceMangas'; +import { SpinnerImage } from '@/components/util/SpinnerImage.tsx'; const MobileWidthButtons = styled('div')(({ theme }) => ({ display: 'flex', @@ -88,9 +89,16 @@ export const SourceCard: React.FC = (props: IProps) => { height: 56, flex: '0 0 auto', mr: 2, + background: 'transparent', }} - src={requestManager.getValidImgUrlFor(iconUrl)} - /> + > + + { maxWidth: settings.fitPageToWindow ? `calc(${baseImgStyle.maxWidth} * 0.5)` : baseImgStyle.maxWidth, }; - const spinnerStyle: SxProps = { + const spinnerStyle: CSSProperties = { ...imgStyle, height: '100vh', width: '50%', diff --git a/src/components/reader/Page.tsx b/src/components/reader/Page.tsx index ae757a41..3713680e 100644 --- a/src/components/reader/Page.tsx +++ b/src/components/reader/Page.tsx @@ -6,7 +6,7 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import { forwardRef } from 'react'; +import { CSSProperties, forwardRef } from 'react'; import Box from '@mui/material/Box'; import { useTheme } from '@mui/material/styles'; import { useMediaQuery } from '@mui/material'; @@ -16,20 +16,20 @@ import { SpinnerImage } from '@/components/util/SpinnerImage'; export const isHorizontalReaderType = (readerType: ReaderType): boolean => ['ContinuesHorizontalLTR', 'ContinuesHorizontalRTL'].includes(readerType); -export function imageStyle(settings: IReaderSettings): any { +export function imageStyle(settings: IReaderSettings): CSSProperties { const isVertical = settings.readerType === 'ContinuesVertical'; const isHorizontal = isHorizontalReaderType(settings.readerType); - const baseStyling = { + const baseStyling: CSSProperties = { margin: 0, width: `${settings.readerWidth}%`, objectFit: 'contain', }; - const continuesVerticalStyling = { + const continuesVerticalStyling: CSSProperties = { marginBottom: '15px', }; - const continuesHorizontalStyling = { + const continuesHorizontalStyling: CSSProperties = { width: undefined, minHeight: '100vh', maxHeight: '100vh', @@ -37,7 +37,7 @@ export function imageStyle(settings: IReaderSettings): any { marginRight: '7px', }; - const fitToPageStyling = { + const fitToPageStyling: CSSProperties = { width: undefined, height: undefined, minWidth: settings.scalePage ? 'calc(100vw - (100vw - 100%))' : undefined, diff --git a/src/components/util/SpinnerImage.tsx b/src/components/util/SpinnerImage.tsx index eb17e207..65e70754 100644 --- a/src/components/util/SpinnerImage.tsx +++ b/src/components/util/SpinnerImage.tsx @@ -21,14 +21,14 @@ interface IProps { src: string; alt: string; - spinnerStyle?: SxProps; + spinnerStyle?: SxProps & { small?: boolean }; imgStyle?: CSSProperties; onImageLoad?: () => void; } export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef) => { - const { src, alt, onImageLoad, spinnerStyle, imgStyle } = props; + const { src, alt, onImageLoad, spinnerStyle: { small, ...spinnerStyle } = {}, imgStyle } = props; const { t } = useTranslation(); @@ -96,15 +96,15 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef )} diff --git a/src/lib/requests/RequestManager.ts b/src/lib/requests/RequestManager.ts index facd3a3d..67000472 100644 --- a/src/lib/requests/RequestManager.ts +++ b/src/lib/requests/RequestManager.ts @@ -745,7 +745,7 @@ export class RequestManager { public getValidImgUrlFor(imageUrl: string, apiVersion: string = ''): string { // server provided image urls already contain the api version - return `${this.getValidUrlFor(imageUrl, apiVersion)}`; + return `${this.getValidUrlFor(imageUrl, apiVersion)}`.replace('45670', '45669'); } /** diff --git a/src/screens/Updates.tsx b/src/screens/Updates.tsx index 4f4544cd..94c056ff 100644 --- a/src/screens/Updates.tsx +++ b/src/screens/Updates.tsx @@ -29,6 +29,7 @@ import { StyledGroupedVirtuoso } from '@/components/virtuoso/StyledGroupedVirtuo import { StyledGroupHeader } from '@/components/virtuoso/StyledGroupHeader.tsx'; import { StyledGroupItemWrapper } from '@/components/virtuoso/StyledGroupItemWrapper.tsx'; import { Mangas } from '@/lib/data/Mangas.ts'; +import { SpinnerImage } from '@/components/util/SpinnerImage.tsx'; function epochToDate(epoch: number) { const date = new Date(0); // The 0 there is the key, which sets the date to the epoch @@ -199,10 +200,21 @@ export const Updates: React.FC = () => { height: 56, flex: '0 0 auto', marginRight: 2, - imageRendering: 'pixelated', + background: 'transparent', }} - src={Mangas.getThumbnailUrl(manga)} - /> + > + + {manga.title}