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

Read chapter download status from cache

Browse Source 
Instead of getting the whole download status, which contains all queued/active downloads, the download status should be read from the cache for only the required chapters
This commit is contained in:
schroda
2025-01-12 14:09:10 +01:00
parent abc3908b1e
commit 57f73636a0
9 changed files with 46 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@@ -87,6 +87,8 @@ const ScrollToTop = () => {
* and thus, data of existing chapters/mangas in the cache get outdated
*/
const BackgroundSubscriptions = () => {
// load the full download status once on startup to fill the cache
requestManager.useGetDownloadStatus({ nextFetchPolicy: 'standby' });
requestManager.useDownloadSubscription();
requestManager.useUpdaterSubscription();
requestManager.useWebUIUpdateSubscription();

2
src/lib/graphql/fragments/DownloadFragments.ts
View File

@@ -8,7 +8,7 @@
import gql from 'graphql-tag';
const DOWNLOAD_TYPE_FIELDS = gql`
export const DOWNLOAD_TYPE_FIELDS = gql`
fragment DOWNLOAD_TYPE_FIELDS on DownloadType {
chapter {
id

8
src/modules/chapter/components/ChapterList.tsx
View File

@@ -100,8 +100,7 @@ export const ChapterList = ({
const scrollbarWidth = MediaQuery.useGetScrollbarSize('width');
const { data: downloaderData } = requestManager.useGetDownloadStatus();
const queue = downloaderData?.downloadStatus.queue ?? [];
const downloadSubscription = requestManager.useDownloadSubscription();
const [options, dispatch] = useChapterOptions(manga.id);
const {
@@ -132,15 +131,14 @@ export const ChapterList = ({
const chaptersWithMeta: IChapterWithMeta[] = useMemo(
() =>
visibleChapters.map((chapter) => {
const downloadChapter = queue?.find((cd) => cd.chapter.id === chapter.id);
const selected = !areNoItemsSelected ? selectedItemIds.includes(chapter.id) : null;
return {
chapter,
downloadChapter,
downloadChapter: Chapters.getDownloadStatusFromCache(chapter.id),
selected,
};
}),
[queue, selectedItemIds, visibleChapters],
[downloadSubscription.data?.downloadStatusChanged, selectedItemIds, visibleChapters],
);
const chapterListFAB = useMemo(() => {

5
src/modules/chapter/components/cards/ChapterCard.tsx
View File

@@ -31,7 +31,6 @@ import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines
import {
ChapterBookmarkInfo,
ChapterDownloadInfo,
ChapterDownloadStatus,
ChapterIdInfo,
ChapterMangaInfo,
ChapterNumberInfo,
@@ -39,7 +38,7 @@ import {
Chapters,
ChapterScanlatorInfo,
} from '@/modules/chapter/services/Chapters.ts';
import { ChaptersWithMeta } from '@/modules/chapter/services/ChaptersWithMeta.ts';
import { ChaptersWithMeta, ChapterWithMetaType } from '@/modules/chapter/services/ChaptersWithMeta.ts';
type TChapter = ChapterIdInfo &
ChapterMangaInfo &
@@ -54,7 +53,7 @@ interface IProps {
mode?: 'manga.page' | 'reader';
chapter: TChapter;
allChapters: TChapter[];
downloadChapter: ChapterDownloadStatus | undefined;
downloadChapter: ChapterWithMetaType['downloadChapter'];
showChapterNumber: boolean;
onSelect: (selected: boolean, isShiftKey?: boolean) => void;
selected: boolean | null;

19
src/modules/chapter/services/Chapters.ts
View File

@@ -16,6 +16,7 @@ import {
ChapterListFieldsFragment,
ChapterType,
DownloadStatusFieldsFragment,
DownloadTypeFieldsFragment,
} from '@/lib/graphql/generated/graphql.ts';
import { CHAPTER_LIST_FIELDS } from '@/lib/graphql/fragments/ChapterFragments.ts';
@@ -24,6 +25,7 @@ import { MangaIdInfo } from '@/modules/manga/Manga.types.ts';
import { ReaderResumeMode } from '@/modules/reader/types/Reader.types.ts';
import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
import { DOWNLOAD_TYPE_FIELDS } from '@/lib/graphql/fragments/DownloadFragments.ts';
export type ChapterAction = 'download' | 'delete' | 'bookmark' | 'unbookmark' | 'mark_as_read' | 'mark_as_unread';
@@ -119,6 +121,23 @@ export class Chapters {
});
}
static getDownloadStatusFromCache<T = DownloadTypeFieldsFragment>(
id: number,
fragment: DocumentNode = DOWNLOAD_TYPE_FIELDS,
fragmentName: string = 'DOWNLOAD_TYPE_FIELDS',
): Unmasked<T> | null {
return requestManager.graphQLClient.client.cache.readFragment<T>({
id: requestManager.graphQLClient.client.cache.identify({
__typename: 'DownloadType',
chapter: {
__ref: requestManager.graphQLClient.client.cache.identify({ __typename: 'ChapterType', id }),
},
}),
fragment,
fragmentName,
});
}
static getReaderUrl<Chapter extends ChapterMangaInfo & ChapterSourceOrderInfo>(chapter: Chapter): string {
return AppRoutes.reader.path(chapter.mangaId, chapter.sourceOrder);
}

2
src/modules/chapter/services/ChaptersWithMeta.ts
View File

@@ -21,7 +21,7 @@ export type ChapterWithMetaType<
ChapterBookmarkInfo,
> = {
chapter: Chapter;
downloadChapter: ChapterDownloadStatus | undefined;
downloadChapter: ChapterDownloadStatus | undefined | null;
};
export class ChaptersWithMeta {

8
src/modules/reader/components/overlay/navigation/ReaderChapterList.tsx
View File

@@ -12,14 +12,14 @@ import { IChapterWithMeta } from '@/modules/chapter/components/ChapterList.tsx';
import { ChapterCard } from '@/modules/chapter/components/cards/ChapterCard.tsx';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
import { Chapters } from '@/modules/chapter/services/Chapters';
export const ReaderChapterList = ({
currentChapter,
chapters,
style,
}: Pick<ReaderStateChapters, 'chapters' | 'currentChapter'> & Pick<VirtuosoProps<any, any>, 'style'>) => {
const { data: downloaderData } = requestManager.useGetDownloadStatus();
const queue = downloaderData?.downloadStatus.queue ?? [];
const downloadSubscription = requestManager.useDownloadSubscription();
const currentChapterIndex = useMemo(
() => currentChapter && chapters.findIndex((chapter) => chapter.id === currentChapter.id),
@@ -29,7 +29,7 @@ export const ReaderChapterList = ({
const chaptersWithMeta: IChapterWithMeta[] = useMemo(
() =>
chapters.map((chapter) => {
const downloadChapter = queue?.find((cd) => cd.chapter.id === chapter.id);
const downloadChapter = Chapters.getDownloadStatusFromCache(chapter.id);
return {
chapter,
@@ -37,7 +37,7 @@ export const ReaderChapterList = ({
selected: null,
};
}),
[queue, chapters],
[downloadSubscription.data?.downloadStatusChanged, chapters],
);
return (

20
src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopActions.tsx
View File

@@ -21,18 +21,16 @@ import { actionToTranslationKey, ChapterAction, Chapters } from '@/modules/chapt
import { ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
import { DownloadStatusFieldsFragment } from '@/lib/graphql/generated/graphql.ts';
import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
import { ChapterWithMetaType } from '@/modules/chapter/services/ChaptersWithMeta.ts';
const DownloadButton = ({
currentChapter,
downloadChapter,
}: Required<Pick<ReaderStateChapters, 'currentChapter'>> & {
downloadChapter?: DownloadStatusFieldsFragment['queue'][number];
}) => {
}: Required<Pick<ReaderStateChapters, 'currentChapter'>> & Pick<ChapterWithMetaType, 'downloadChapter'>) => {
const { t } = useTranslation();
if (currentChapter && Chapters.isDownloaded(currentChapter)) {
@@ -76,13 +74,15 @@ const BaseReaderNavBarDesktopActions = memo(
const pageRetryKeyPrefix = useRef<number>(0);
const { data: downloaderData } = requestManager.useGetDownloadStatus();
const queue = downloaderData?.downloadStatus.queue ?? [];
const downloadSubscription = requestManager.useDownloadSubscription();
const downloadChapter = useMemo(
() => queue.find((queueItem) => queueItem.chapter.id === currentChapter?.id),
[queue, id],
);
const downloadChapter = useMemo(() => {
if (!currentChapter) {
return null;
}
return Chapters.getDownloadStatusFromCache(currentChapter?.id);
}, [downloadSubscription.data?.downloadStatusChanged, id]);
const haveSomePagesFailedToLoad = useMemo(
() => pageLoadStates.some((pageLoadState) => pageLoadState.error),

13
src/modules/updates/screens/Updates.tsx
View File

@@ -34,7 +34,7 @@ import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
import { dateTimeFormatter, epochToDate, getDateString } from '@/util/DateHelper.ts';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
import { ChapterIdInfo, ChapterMangaInfo } from '@/modules/chapter/services/Chapters.ts';
import { ChapterIdInfo, Chapters } from '@/modules/chapter/services/Chapters.ts';
import { makeToast } from '@/modules/core/utils/Toast.ts';
import { VirtuosoUtil } from '@/lib/virtuoso/Virtuoso.util.tsx';
import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
@@ -74,8 +74,8 @@ export const Updates: React.FC = () => {
const updateEntries = chapterUpdateData?.chapters.nodes ?? [];
const groupedUpdates = useMemo(() => groupByDate(updateEntries), [updateEntries]);
const groupCounts: number[] = useMemo(() => groupedUpdates.map((group) => group[1]), [groupedUpdates]);
const { data: downloaderData } = requestManager.useGetDownloadStatus();
const queue = downloaderData?.downloadStatus.queue ?? [];
requestManager.useDownloadSubscription();
const computeItemKey = VirtuosoUtil.useCreateGroupedComputeItemKey(
groupCounts,
@@ -107,11 +107,6 @@ export const Updates: React.FC = () => {
};
}, [t, lastUpdateTimestamp]);
const downloadForChapter = (chapter: Pick<ChapterType, 'sourceOrder'> & ChapterMangaInfo) => {
const { sourceOrder, mangaId } = chapter;
return queue.find((q) => sourceOrder === q.chapter.sourceOrder && mangaId === q.manga.id);
};
const handleRetry = async (chapter: ChapterIdInfo) => {
try {
await requestManager.addChapterToDownloadQueue(chapter.id).response;
@@ -186,7 +181,7 @@ export const Updates: React.FC = () => {
itemContent={(index) => {
const chapter = updateEntries[index];
const { manga } = chapter;
const download = downloadForChapter(chapter);
const download = Chapters.getDownloadStatusFromCache(chapter.id);
return (
<StyledGroupItemWrapper>