diff --git a/src/modules/core/components/SpinnerImage.tsx b/src/modules/core/components/SpinnerImage.tsx index 5c75ce6f..e5b42205 100644 --- a/src/modules/core/components/SpinnerImage.tsx +++ b/src/modules/core/components/SpinnerImage.tsx @@ -30,6 +30,8 @@ interface IProps { shouldDecode?: boolean; useFetchApi?: boolean; + + priority?: Priority; } export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef) => { @@ -41,6 +43,7 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef {}; } - 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 () => { diff --git a/src/modules/reader/components/page/Page.tsx b/src/modules/reader/components/page/Page.tsx index 1f7397c8..ecc2ccf9 100644 --- a/src/modules/reader/components/page/Page.tsx +++ b/src/modules/reader/components/page/Page.tsx @@ -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) => { }} > { const aspectRatio = image.height / image.width; @@ -208,6 +209,7 @@ export function DoublePagedPager(props: IReaderProps) { }} settings={settings} display={displayPage} + priority={displayPage ? Priority.HIGH : undefined} /> ); })} diff --git a/src/modules/reader/components/pager/HorizontalPager.tsx b/src/modules/reader/components/pager/HorizontalPager.tsx index 0e149bed..0b82829f 100644 --- a/src/modules/reader/components/pager/HorizontalPager.tsx +++ b/src/modules/reader/components/pager/HorizontalPager.tsx @@ -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} /> ))} diff --git a/src/modules/reader/components/pager/PagedPager.tsx b/src/modules/reader/components/pager/PagedPager.tsx index 50e484a1..a2418cc0 100644 --- a/src/modules/reader/components/pager/PagedPager.tsx +++ b/src/modules/reader/components/pager/PagedPager.tsx @@ -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} /> ))} diff --git a/src/modules/reader/components/pager/VerticalPager.tsx b/src/modules/reader/components/pager/VerticalPager.tsx index a131e6e3..f5264861 100644 --- a/src/modules/reader/components/pager/VerticalPager.tsx +++ b/src/modules/reader/components/pager/VerticalPager.tsx @@ -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(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} /> ))}