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; shouldDecode?: boolean;
useFetchApi?: boolean; useFetchApi?: boolean;
priority?: Priority;
} }
export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTMLImageElement | null>) => { export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTMLImageElement | null>) => {
@@ -41,6 +43,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
onImageLoad, onImageLoad,
spinnerStyle: { small, ...spinnerStyle } = {}, spinnerStyle: { small, ...spinnerStyle } = {},
imgStyle, imgStyle,
priority,
} = props; } = props;
const { t } = useTranslation(); const { t } = useTranslation();
@@ -66,7 +69,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
return () => {}; return () => {};
} }
const imageRequest = requestManager.requestImage(src, { priority: Priority.HIGH, shouldDecode, useFetchApi }); const imageRequest = requestManager.requestImage(src, { priority, shouldDecode, useFetchApi });
let cacheTimeout: NodeJS.Timeout; let cacheTimeout: NodeJS.Timeout;
const fetchImage = async () => { 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 { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx'; import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
import { IReaderSettings, ReaderType } from '@/modules/reader/Reader.types.ts'; import { IReaderSettings, ReaderType } from '@/modules/reader/Reader.types.ts';
import { Priority } from '@/lib/Queue.ts';
export const isHorizontalReaderType = (readerType: ReaderType): boolean => export const isHorizontalReaderType = (readerType: ReaderType): boolean =>
['ContinuesHorizontalLTR', 'ContinuesHorizontalRTL'].includes(readerType); ['ContinuesHorizontalLTR', 'ContinuesHorizontalRTL'].includes(readerType);
@@ -68,10 +69,11 @@ interface IProps {
onImageLoad: () => void; onImageLoad: () => void;
settings: IReaderSettings; settings: IReaderSettings;
display?: boolean; display?: boolean;
priority?: Priority;
} }
export const Page = forwardRef((props: IProps, ref: any) => { 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 theme = useTheme();
const isMobileWidth = useMediaQuery(theme.breakpoints.down('md')); const isMobileWidth = useMediaQuery(theme.breakpoints.down('md'));
@@ -89,6 +91,7 @@ export const Page = forwardRef((props: IProps, ref: any) => {
}} }}
> >
<SpinnerImage <SpinnerImage
priority={priority}
src={src} src={src}
onImageLoad={onImageLoad} onImageLoad={onImageLoad}
alt={`Page #${index}`} 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 Box from '@mui/material/Box';
import { Page } from '@/modules/reader/components/page/Page.tsx'; import { Page } from '@/modules/reader/components/page/Page.tsx';
import { IReaderProps } from '@/modules/reader/Reader.types.ts'; import { IReaderProps } from '@/modules/reader/Reader.types.ts';
import { Priority } from '@/lib/Queue.ts';
const isSpreadPage = (image: HTMLImageElement): boolean => { const isSpreadPage = (image: HTMLImageElement): boolean => {
const aspectRatio = image.height / image.width; const aspectRatio = image.height / image.width;
@@ -208,6 +209,7 @@ export function DoublePagedPager(props: IReaderProps) {
}} }}
settings={settings} settings={settings}
display={displayPage} 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 { Page } from '@/modules/reader/components/page/Page.tsx';
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx'; import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
import { IReaderProps } from '@/modules/reader/Reader.types.ts'; import { IReaderProps } from '@/modules/reader/Reader.types.ts';
import { Priority } from '@/lib/Queue.ts';
const findCurrentPageIndex = (wrapper: HTMLDivElement): number => { const findCurrentPageIndex = (wrapper: HTMLDivElement): number => {
for (let i = 0; i < wrapper.children.length; i++) { for (let i = 0; i < wrapper.children.length; i++) {
@@ -199,6 +200,7 @@ export function HorizontalPager(props: IReaderProps) {
ref={(e: HTMLDivElement) => { ref={(e: HTMLDivElement) => {
pagesRef.current[page.index] = e; pagesRef.current[page.index] = e;
}} }}
priority={page.index === curPage ? Priority.HIGH : undefined}
/> />
))} ))}
</Box> </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 Box from '@mui/material/Box';
import { Page } from '@/modules/reader/components/page/Page.tsx'; import { Page } from '@/modules/reader/components/page/Page.tsx';
import { IReaderProps } from '@/modules/reader/Reader.types.ts'; import { IReaderProps } from '@/modules/reader/Reader.types.ts';
import { Priority } from '@/lib/Queue.ts';
export function PagedPager(props: IReaderProps) { export function PagedPager(props: IReaderProps) {
const { pages, settings, setCurPage, initialPage, curPage, nextChapter, prevChapter } = props; const { pages, settings, setCurPage, initialPage, curPage, nextChapter, prevChapter } = props;
@@ -114,6 +115,7 @@ export function PagedPager(props: IReaderProps) {
src={src} src={src}
settings={settings} settings={settings}
display={index === curPage} display={index === curPage}
priority={index === curPage ? Priority.HIGH : undefined}
/> />
))} ))}
</Box> </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 { Page } from '@/modules/reader/components/page/Page.tsx';
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx'; import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
import { IReaderProps } from '@/modules/reader/Reader.types.ts'; import { IReaderProps } from '@/modules/reader/Reader.types.ts';
import { Priority } from '@/lib/Queue.ts';
const findCurrentPageIndex = (wrapper: HTMLDivElement): number => { const findCurrentPageIndex = (wrapper: HTMLDivElement): number => {
for (let i = 0; i < wrapper.children.length; i++) { for (let i = 0; i < wrapper.children.length; i++) {
@@ -38,7 +39,7 @@ const isAtBottom = () => {
const isAtTop = () => window.scrollY <= 0; const isAtTop = () => window.scrollY <= 0;
export function VerticalPager(props: IReaderProps) { 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 currentPageRef = useRef(initialPage);
const selfRef = useRef<HTMLDivElement>(null); const selfRef = useRef<HTMLDivElement>(null);
@@ -212,6 +213,7 @@ export function VerticalPager(props: IReaderProps) {
ref={(e: HTMLDivElement) => { ref={(e: HTMLDivElement) => {
pagesRef.current[page.index] = e; pagesRef.current[page.index] = e;
}} }}
priority={page.index === curPage ? Priority.HIGH : undefined}
/> />
))} ))}
</Box> </Box>