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

Prioritize current reader page request

Browse Source
This commit is contained in:
schroda
2024-11-13 14:32:41 +01:00
parent 87ee1330d4
commit 1d50edf1a1
6 changed files with 17 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,6 +30,8 @@ interface IProps {
shouldDecode?: boolean;
useFetchApi?: boolean;
priority?: Priority;
}
export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTMLImageElement | null>) => {
@@ -41,6 +43,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
onImageLoad,
spinnerStyle: { small, ...spinnerStyle } = {},
imgStyle,
priority,
} = props;
const { t } = useTranslation();
@@ -66,7 +69,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
return () => {};
}
const imageRequest = requestManager.requestImage(src, { priority: Priority.HIGH, shouldDecode, useFetchApi });
const imageRequest = requestManager.requestImage(src, { priority, shouldDecode, useFetchApi });
let cacheTimeout: NodeJS.Timeout;
const fetchImage = async () => {

5
src/modules/reader/components/page/Page.tsx
View File

@@ -13,6 +13,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
import { IReaderSettings, ReaderType } from '@/modules/reader/Reader.types.ts';
import { Priority } from '@/lib/Queue.ts';
export const isHorizontalReaderType = (readerType: ReaderType): boolean =>
['ContinuesHorizontalLTR', 'ContinuesHorizontalRTL'].includes(readerType);
@@ -68,10 +69,11 @@ interface IProps {
onImageLoad: () => void;
settings: IReaderSettings;
display?: boolean;
priority?: Priority;
}
export const Page = forwardRef((props: IProps, ref: any) => {
const { src, index, onImageLoad, settings, display = true } = props;
const { src, index, onImageLoad, settings, display = true, priority } = props;
const theme = useTheme();
const isMobileWidth = useMediaQuery(theme.breakpoints.down('md'));
@@ -89,6 +91,7 @@ export const Page = forwardRef((props: IProps, ref: any) => {
}}
>
<SpinnerImage
priority={priority}
src={src}
onImageLoad={onImageLoad}
alt={`Page #${index}`}

2
src/modules/reader/components/pager/DoublePagedPager.tsx
View File

@@ -10,6 +10,7 @@ import { MouseEvent, useEffect, useMemo, useRef, useState } from 'react';
import Box from '@mui/material/Box';
import { Page } from '@/modules/reader/components/page/Page.tsx';
import { IReaderProps } from '@/modules/reader/Reader.types.ts';
import { Priority } from '@/lib/Queue.ts';
const isSpreadPage = (image: HTMLImageElement): boolean => {
const aspectRatio = image.height / image.width;
@@ -208,6 +209,7 @@ export function DoublePagedPager(props: IReaderProps) {
}}
settings={settings}
display={displayPage}
priority={displayPage ? Priority.HIGH : undefined}
/>
);
})}

2
src/modules/reader/components/pager/HorizontalPager.tsx
View File

@@ -11,6 +11,7 @@ import Box from '@mui/material/Box';
import { Page } from '@/modules/reader/components/page/Page.tsx';
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
import { IReaderProps } from '@/modules/reader/Reader.types.ts';
import { Priority } from '@/lib/Queue.ts';
const findCurrentPageIndex = (wrapper: HTMLDivElement): number => {
for (let i = 0; i < wrapper.children.length; i++) {
@@ -199,6 +200,7 @@ export function HorizontalPager(props: IReaderProps) {
ref={(e: HTMLDivElement) => {
pagesRef.current[page.index] = e;
}}
priority={page.index === curPage ? Priority.HIGH : undefined}
/>
))}
</Box>

2
src/modules/reader/components/pager/PagedPager.tsx
View File

@@ -10,6 +10,7 @@ import { MouseEvent, useEffect, useRef } from 'react';
import Box from '@mui/material/Box';
import { Page } from '@/modules/reader/components/page/Page.tsx';
import { IReaderProps } from '@/modules/reader/Reader.types.ts';
import { Priority } from '@/lib/Queue.ts';
export function PagedPager(props: IReaderProps) {
const { pages, settings, setCurPage, initialPage, curPage, nextChapter, prevChapter } = props;
@@ -114,6 +115,7 @@ export function PagedPager(props: IReaderProps) {
src={src}
settings={settings}
display={index === curPage}
priority={index === curPage ? Priority.HIGH : undefined}
/>
))}
</Box>

4
src/modules/reader/components/pager/VerticalPager.tsx
View File

@@ -11,6 +11,7 @@ import Box from '@mui/material/Box';
import { Page } from '@/modules/reader/components/page/Page.tsx';
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
import { IReaderProps } from '@/modules/reader/Reader.types.ts';
import { Priority } from '@/lib/Queue.ts';
const findCurrentPageIndex = (wrapper: HTMLDivElement): number => {
for (let i = 0; i < wrapper.children.length; i++) {
@@ -38,7 +39,7 @@ const isAtBottom = () => {
const isAtTop = () => window.scrollY <= 0;
export function VerticalPager(props: IReaderProps) {
const { pages, settings, setCurPage, initialPage, nextChapter, prevChapter } = props;
const { curPage, pages, settings, setCurPage, initialPage, nextChapter, prevChapter } = props;
const currentPageRef = useRef(initialPage);
const selfRef = useRef<HTMLDivElement>(null);
@@ -212,6 +213,7 @@ export function VerticalPager(props: IReaderProps) {
ref={(e: HTMLDivElement) => {
pagesRef.current[page.index] = e;
}}
priority={page.index === curPage ? Priority.HIGH : undefined}
/>
))}
</Box>