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

Update chapter

Browse Source
This commit is contained in:
schroda
2024-12-07 03:43:18 +01:00
parent 916abd3bb1
commit 965aa7215c
9 changed files with 365 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/modules/reader/components/viewer/ReaderViewer.tsx
View File

@@ -28,7 +28,7 @@ import { createPagesData, getDoublePageModePages, isSpreadPage } from '@/modules
import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx';
import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts';
import { getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
import { getNextIndexFromPage, getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
import { isContinuousReadingMode } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
import { useMouseDragScroll } from '@/modules/core/hooks/useMouseDragScroll.tsx';
@@ -42,7 +42,6 @@ const READING_MODE_TO_IN_VIEWPORT_TYPE: Record<ReadingMode, PageInViewportType>
export const ReaderViewer = forwardRef((_, ref: ForwardedRef<HTMLDivElement | null>) => {
const {
currentPageIndex,
setCurrentPageIndex,
pageToScrollToIndex,
pages,
setPages,
@@ -53,6 +52,7 @@ export const ReaderViewer = forwardRef((_, ref: ForwardedRef<HTMLDivElement | nu
} = userReaderStatePagesContext();
const { readingMode, shouldOffsetDoubleSpreads, readingDirection } = ReaderService.useSettings();
const { setScrollbarXSize, setScrollbarYSize } = useReaderScrollbarContext();
const updateCurrentPageIndex = ReaderControls.useUpdateCurrentPageIndex();
const scrollElementRef = useRef<HTMLDivElement | null>(null);
useImperativeHandle(ref, () => scrollElementRef.current!);
@@ -143,7 +143,10 @@ export const ReaderViewer = forwardRef((_, ref: ForwardedRef<HTMLDivElement | nu
});
}
setCurrentPageIndex(pageToScrollTo.primary.index);
const newPageIndex = getNextIndexFromPage(pageToScrollTo);
const isLastPage = newPageIndex === totalPages - 1;
updateCurrentPageIndex(newPageIndex, !isLastPage);
}, [pageToScrollToIndex]);
// invert x and y scrolling for the continuous horizontal reading mode
@@ -183,9 +186,10 @@ export const ReaderViewer = forwardRef((_, ref: ForwardedRef<HTMLDivElement | nu
onScroll={() =>
ReaderControls.updateCurrentPageOnScroll(
imageRefs,
currentPageIndex,
setCurrentPageIndex,
totalPages - 1,
updateCurrentPageIndex,
inViewportType,
readingDirection.value,
)
}
>

1
src/modules/reader/contexts/state/ReaderStateChaptersContext.tsx
View File

@@ -10,6 +10,7 @@ import { createContext, useContext } from 'react';
import { ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
export const ReaderStateChaptersContext = createContext<ReaderStateChapters>({
mangaChapters: [],
chapters: [],
setReaderStateChapters: () => {},
});

2
src/modules/reader/contexts/state/ReaderStateChaptersContextProvider.tsx
View File

@@ -12,7 +12,7 @@ import { ReaderStateChaptersContext } from '@/modules/reader/contexts/state/Read
type TContext = ContextType<typeof ReaderStateChaptersContext>;
export const ReaderStateChaptersContextProvider = ({ children }: { children: ReactNode }) => {
const [state, setState] = useState<Omit<TContext, 'setReaderStateChapters'>>({ chapters: [] });
const [state, setState] = useState<Omit<TContext, 'setReaderStateChapters'>>({ mangaChapters: [], chapters: [] });
const value = useMemo(
() => ({

102
src/modules/reader/services/ReaderControls.ts
View File

@@ -9,7 +9,7 @@
import { MutableRefObject, useCallback, useMemo } from 'react';
import { Direction } from '@mui/material/styles';
import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
import { getNextPageIndex, getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
import { getNextIndexFromPage, getNextPageIndex, getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
import { getOptionForDirection } from '@/theme.tsx';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
@@ -22,12 +22,16 @@ import {
} from '@/modules/reader/types/Reader.types.ts';
import { ScrollDirection, ScrollOffset } from '@/modules/core/Core.types.ts';
import { ReaderScrollAmount } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
import { isPageInViewport } from '@/modules/reader/utils/ReaderPager.utils.tsx';
import { isEndOfPageInViewport, isPageInViewport } from '@/modules/reader/utils/ReaderPager.utils.tsx';
import { useReaderOverlayContext } from '@/modules/reader/contexts/ReaderOverlayContext.tsx';
import { useReaderTapZoneContext } from '@/modules/reader/contexts/ReaderTapZoneContext.tsx';
import { TapZoneRegionType } from '@/modules/reader/types/TapZoneLayout.types.ts';
import { ReaderTapZoneService } from '@/modules/reader/services/ReaderTapZoneService.ts';
import { isContinuousReadingMode } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
import { getReaderChapterFromCache } from '@/modules/reader/utils/Reader.utils.ts';
import { Chapters } from '@/modules/chapter/services/Chapters.ts';
import { DirectionOffset } from '@/Base.types.ts';
import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
const READING_DIRECTION_TO_DIRECTION: Record<ReadingDirection, Direction> = {
[ReadingDirection.LTR]: 'ltr',
@@ -46,6 +50,8 @@ const SCROLL_DIRECTION_BY_SCROLL_OFFSET_BY_READING_DIRECTION: Record<ReadingDire
};
export class ReaderControls {
private static updateCurrentPageTimeout: NodeJS.Timeout;
static scroll(
offset: ScrollOffset,
direction: ScrollDirection,
@@ -152,10 +158,11 @@ export class ReaderControls {
() => getNextPageIndex('next', currentPage.pagesIndex, pages),
[currentPage, pages],
);
const indexOfLastPage = getNextIndexFromPage(pages[pages.length - 1]);
const direction = READING_DIRECTION_TO_DIRECTION[readingDirection.value];
const isFirstPage = currentPageIndex === 0;
const isLastPage = currentPageIndex === pages[pages.length - 1].primary.index;
const isLastPage = currentPageIndex === indexOfLastPage;
const isATransitionPageVisible = transitionPageMode !== ReaderTransitionPageMode.NONE;
const isContinuousReadingModeActive = isContinuousReadingMode(readingMode.value);
@@ -225,6 +232,7 @@ export class ReaderControls {
direction,
previousPageIndex,
nextPageIndex,
indexOfLastPage,
isATransitionPageVisible,
isContinuousReadingModeActive,
isFirstPage,
@@ -236,16 +244,96 @@ export class ReaderControls {
);
}
static useUpdateCurrentPageIndex(): (
pageIndex: number,
debounceChapterUpdate?: boolean,
endReached?: boolean,
) => void {
const { currentPageIndex, setCurrentPageIndex } = userReaderStatePagesContext();
const { initialChapter, currentChapter, nextChapter, mangaChapters } = useReaderStateChaptersContext();
const updateChapter = ReaderService.useUpdateChapter();
const { shouldSkipDupChapters } = ReaderService.useSettings();
const {
settings: { downloadAheadLimit },
} = useMetadataServerSettings();
const nextChapters = useMemo(() => {
if (!initialChapter || !currentChapter) {
return [];
}
return Chapters.getNextChapters(currentChapter, mangaChapters, {
offset: DirectionOffset.NEXT,
skipDupe: shouldSkipDupChapters,
skipDupeChapter: initialChapter,
});
}, [initialChapter?.id, currentChapter?.id, mangaChapters, shouldSkipDupChapters]);
return useCallback(
(pageIndex, debounceChapterUpdate = true, endReached = false) => {
setCurrentPageIndex(pageIndex);
if (!currentChapter) {
return;
}
const hasPageIndexChanged = pageIndex !== currentPageIndex;
if (!hasPageIndexChanged) {
return;
}
ReaderService.downloadAhead(currentChapter, nextChapter, nextChapters, pageIndex, downloadAheadLimit);
const handleCurrentPageIndexChange = () => {
const currentChapterUpToDate = getReaderChapterFromCache(currentChapter.id);
if (!currentChapterUpToDate) {
return;
}
const hasLastPageReadChanged = pageIndex !== currentChapterUpToDate.lastPageRead;
const isLasPage = endReached || pageIndex === currentChapterUpToDate.pageCount - 1;
const shouldUpdateChapter = hasLastPageReadChanged || isLasPage;
if (!shouldUpdateChapter) {
return;
}
updateChapter({
lastPageRead: hasLastPageReadChanged ? pageIndex : undefined,
isRead: isLasPage ? true : undefined,
});
};
clearTimeout(this.updateCurrentPageTimeout);
if (debounceChapterUpdate) {
this.updateCurrentPageTimeout = setTimeout(handleCurrentPageIndexChange, 1000);
return;
}
handleCurrentPageIndexChange();
},
[currentChapter?.id, nextChapter?.id, nextChapters, currentPageIndex, downloadAheadLimit],
);
}
static updateCurrentPageOnScroll(
imageRefs: MutableRefObject<(HTMLElement | null)[]>,
currentPageIndex: number,
setCurrentPageIndex: (index: number) => void,
lastPageIndex: number,
updateCurrentPageIndex: ReturnType<typeof ReaderControls.useUpdateCurrentPageIndex>,
type: PageInViewportType,
readingDirection: ReadingDirection,
) {
const firstVisibleImageIndex = imageRefs.current.findIndex((image) => image && isPageInViewport(image, type));
const lastPage = imageRefs.current?.[imageRefs.current.length - 1];
const isEndReached = lastPage && isEndOfPageInViewport(lastPage, type, readingDirection);
if (firstVisibleImageIndex !== -1 && firstVisibleImageIndex !== currentPageIndex) {
setCurrentPageIndex(firstVisibleImageIndex);
// handle cases where the last page is too small to ever be the "firstVisibleImageIndex"
if (isEndReached) {
updateCurrentPageIndex(lastPageIndex, false);
return;
}
if (firstVisibleImageIndex !== -1) {
updateCurrentPageIndex(firstVisibleImageIndex, firstVisibleImageIndex !== lastPageIndex);
}
}

111
src/modules/reader/services/ReaderService.ts
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useCallback } from 'react';
import { useCallback, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { Direction, useTheme } from '@mui/material/styles';
import { t as translate } from 'i18next';
@@ -33,6 +33,16 @@ import { updateMetadataList } from '@/modules/metadata/services/MetadataApolloCa
import { useBackButton } from '@/modules/core/hooks/useBackButton.ts';
import { GLOBAL_READER_SETTING_KEYS } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
import { useReaderStateSettingsContext } from '@/modules/reader/contexts/state/ReaderStateSettingsContext.tsx';
import { UpdateChapterPatchInput } from '@/lib/graphql/generated/graphql.ts';
import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { DirectionOffset } from '@/Base.types.ts';
import {
getChapterIdsForDownloadAhead,
getChapterIdsToDeleteForChapterUpdate,
} from '@/modules/reader/utils/Reader.utils.ts';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { Queue } from '@/lib/Queue.ts';
const DIRECTION_TO_INVERTED: Record<Direction, Direction> = {
ltr: 'rtl',
@@ -45,6 +55,8 @@ const DIRECTION_TO_READING_DIRECTION: Record<Direction, ReadingDirection> = {
};
export class ReaderService {
private static downloadAheadQueue: Queue = new Queue(1);
static useNavigateToChapter(chapter?: TChapterReader, resumeMode?: ReaderResumeMode): () => void {
const navigate = useNavigate();
return useCallback(
@@ -60,6 +72,103 @@ export class ReaderService {
);
}
static downloadAhead(
currentChapter: TChapterReader,
nextChapter: TChapterReader | undefined,
nextChapters: TChapterReader[],
pageIndex: number,
downloadAheadLimit: number,
): void {
const key = `${currentChapter.id}_${nextChapter?.id}_${pageIndex}_${downloadAheadLimit}`;
this.downloadAheadQueue.enqueue(key, async () => {
const chapterIdsForDownloadAhead = getChapterIdsForDownloadAhead(
currentChapter,
nextChapter,
nextChapters,
pageIndex,
downloadAheadLimit,
);
if (!chapterIdsForDownloadAhead.length) {
return;
}
try {
await Chapters.download(chapterIdsForDownloadAhead);
} catch (e) {
defaultPromiseErrorHandler('ReaderService::useUpdateCurrentPageIndex: download ahead');
}
});
}
static useUpdateChapter(): (patch: UpdateChapterPatchInput) => void {
const { manga } = useReaderStateMangaContext();
const { initialChapter, currentChapter, mangaChapters } = useReaderStateChaptersContext();
const { shouldSkipDupChapters } = this.useSettings();
const {
settings: { deleteChaptersWhileReading, deleteChaptersWithBookmark, updateProgressAfterReading },
} = useMetadataServerSettings();
const previousChapters = useMemo(() => {
if (!initialChapter || !currentChapter) {
return [];
}
return Chapters.getNextChapters(currentChapter, mangaChapters, {
offset: DirectionOffset.PREVIOUS,
skipDupe: shouldSkipDupChapters,
skipDupeChapter: initialChapter,
});
}, [initialChapter?.id, currentChapter?.id, mangaChapters, shouldSkipDupChapters]);
return useCallback(
(patch) => {
if (!manga || !currentChapter) {
return;
}
const chapterIdsToUpdate = Chapters.getIds(
shouldSkipDupChapters ? Chapters.addDuplicates([currentChapter], mangaChapters) : [currentChapter],
);
const chapterIdsToDelete = getChapterIdsToDeleteForChapterUpdate(
currentChapter,
mangaChapters,
previousChapters,
patch,
deleteChaptersWhileReading,
deleteChaptersWithBookmark,
shouldSkipDupChapters,
);
requestManager
.updateChapters(
chapterIdsToUpdate,
{
...patch,
chapterIdsToDelete,
trackProgressMangaId:
updateProgressAfterReading && patch.isRead && manga.trackRecords.totalCount
? manga.id
: undefined,
},
{ errorPolicy: 'all' },
)
.response.catch(defaultPromiseErrorHandler('ReaderService::useUpdateChapter'));
},
[
manga?.id,
currentChapter?.id,
mangaChapters,
previousChapters,
shouldSkipDupChapters,
deleteChaptersWhileReading,
deleteChaptersWithBookmark,
updateProgressAfterReading,
],
);
}
static useSettings(): IReaderSettingsWithDefaultFlag {
return useReaderStateSettingsContext().settings;
}

11
src/modules/reader/types/Reader.types.ts
View File

@@ -154,7 +154,18 @@ export interface IReaderSettingsWithDefaultFlag
TransformRecordToWithDefaultFlag<IReaderSettingsManga> {}
export interface ReaderStateChapters {
/**
* all chapters of the manga
*/
mangaChapters: TChapterReader[];
/**
* actual chapters that have been filtered
*
* optional filters:
* - removed duplicate chapters
*/
chapters: TChapterReader[];
initialChapter?: TChapterReader | null;
currentChapter?: TChapterReader | null;
nextChapter?: TChapterReader;
previousChapter?: TChapterReader;

81
src/modules/reader/utils/Reader.utils.ts
View File

@@ -7,6 +7,10 @@
*/
import { ReaderResumeMode } from '@/modules/reader/types/Reader.types.ts';
import { UpdateChapterPatchInput } from '@/lib/graphql/generated/graphql.ts';
import { TChapterReader } from '@/modules/chapter/Chapter.types.ts';
import { ChapterIdInfo, Chapters } from '@/modules/chapter/services/Chapters.ts';
import { CHAPTER_READER_FIELDS } from '@/lib/graphql/fragments/ChapterFragments.ts';
export const getInitialReaderPageIndex = (
resumeMode: ReaderResumeMode,
@@ -23,3 +27,80 @@ export const getInitialReaderPageIndex = (
return Math.max(0, Math.min(lastPageIndex, lastReadPageIndex));
};
export const getReaderChapterFromCache = (id: ChapterIdInfo['id']): TChapterReader | null =>
Chapters.getFromCache<TChapterReader>(id, CHAPTER_READER_FIELDS, 'CHAPTER_READER_FIELDS')!;
export const getChapterIdsToDeleteForChapterUpdate = (
chapter: TChapterReader,
chapters: TChapterReader[],
previousChapters: TChapterReader[],
patch: UpdateChapterPatchInput,
deleteChaptersWhileReading: number,
deleteChaptersWithBookmark: boolean,
shouldSkipDupChapters: boolean,
): TChapterReader['id'][] => {
const isAutoDeletionEnabled = !!patch.isRead && !!deleteChaptersWhileReading;
if (!isAutoDeletionEnabled) {
return [];
}
const chapterToDelete = [chapter, ...previousChapters][deleteChaptersWhileReading - 1];
if (!chapterToDelete) {
return [];
}
const chapterToDeleteUpToDateData = getReaderChapterFromCache(chapterToDelete.id);
if (!chapterToDeleteUpToDateData) {
return [];
}
const shouldDeleteChapter =
chapterToDeleteUpToDateData.isRead &&
Chapters.isDeletable(chapterToDeleteUpToDateData, deleteChaptersWithBookmark);
if (!shouldDeleteChapter) {
return [];
}
if (!shouldSkipDupChapters) {
return Chapters.getIds([chapterToDelete]);
}
return Chapters.getIds(Chapters.addDuplicates([chapterToDelete], chapters));
};
export const getChapterIdsForDownloadAhead = (
chapter: TChapterReader,
nextChapter: TChapterReader | undefined,
nextChapters: TChapterReader[],
currentPageIndex: number,
downloadAheadLimit: number,
): TChapterReader['id'][] => {
const chapterUpToDateData = getReaderChapterFromCache(chapter.id);
if (!chapterUpToDateData || !nextChapter) {
return [];
}
const isDownloadAheadEnabled = !!downloadAheadLimit;
const inDownloadRange = currentPageIndex / chapterUpToDateData.pageCount > 0.25;
const shouldCheckDownloadAhead = isDownloadAheadEnabled && chapterUpToDateData.isDownloaded && inDownloadRange;
if (!shouldCheckDownloadAhead) {
return [];
}
const nextChapterUpToDateData = getReaderChapterFromCache(nextChapter.id);
if (!nextChapterUpToDateData?.isDownloaded) {
return [];
}
const unreadNextChaptersUpToDateData = Chapters.getNonRead(nextChapters)
.map((unreadNextChapter) => getReaderChapterFromCache(unreadNextChapter.id))
.filter((unreadNextChapterUpToDateData) => !!unreadNextChapterUpToDateData);
return unreadNextChaptersUpToDateData
.slice(-downloadAheadLimit)
.filter((unreadNextChapter) => !unreadNextChapter.isDownloaded)
.map((unreadUnDownloadedNextChapter) => unreadUnDownloadedNextChapter.id)
.filter((id) => !Chapters.isDownloading(id));
};

50
src/modules/reader/utils/ReaderPager.utils.tsx
View File

@@ -12,8 +12,8 @@ import {
IReaderSettings,
PageInViewportType,
ReaderPageScaleMode,
ReadingDirection,
ReaderTransitionPageMode,
ReadingDirection,
ReadingMode,
} from '@/modules/reader/types/Reader.types.ts';
import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
@@ -224,7 +224,16 @@ export const createReaderPage = (
/>
);
export const isPageInViewport = (element: HTMLElement, type: PageInViewportType): boolean => {
const getIsPageInViewportInfo = (
element: HTMLElement,
): {
isLeftInViewport: boolean;
isRightInViewport: boolean;
isFillingWidthViewportCompletely: boolean;
isTopInViewport: boolean;
isBottomInViewport: boolean;
isFillingHeightViewportCompletely: boolean;
} => {
const { top, bottom, left, right } = element.getBoundingClientRect();
// for some reason using "scrollIntoView" to scroll a page into view does not always result in the page to be at top,
@@ -239,6 +248,26 @@ export const isPageInViewport = (element: HTMLElement, type: PageInViewportType)
const isBottomInViewport = bottom >= MIN_VISIBLE_PX && bottom <= window.innerHeight;
const isFillingHeightViewportCompletely = top <= MIN_VISIBLE_PX && bottom >= window.innerHeight;
return {
isLeftInViewport,
isRightInViewport,
isFillingWidthViewportCompletely,
isTopInViewport,
isBottomInViewport,
isFillingHeightViewportCompletely,
};
};
export const isPageInViewport = (element: HTMLElement, type: PageInViewportType): boolean => {
const {
isLeftInViewport,
isRightInViewport,
isFillingWidthViewportCompletely,
isTopInViewport,
isBottomInViewport,
isFillingHeightViewportCompletely,
} = getIsPageInViewportInfo(element);
const isInViewportX = isLeftInViewport || isRightInViewport || isFillingWidthViewportCompletely;
const isInViewportY = isTopInViewport || isBottomInViewport || isFillingHeightViewportCompletely;
@@ -252,6 +281,23 @@ export const isPageInViewport = (element: HTMLElement, type: PageInViewportType)
}
};
export const isEndOfPageInViewport = (
element: HTMLElement,
type: PageInViewportType,
direction: ReadingDirection,
): boolean => {
const { isLeftInViewport, isRightInViewport, isBottomInViewport } = getIsPageInViewportInfo(element);
switch (type) {
case PageInViewportType.X:
return direction === ReadingDirection.LTR ? isRightInViewport : isLeftInViewport;
case PageInViewportType.Y:
return isBottomInViewport;
default:
throw new Error(`unexpected "type" (${type})`);
}
};
export const getDoublePageModePages = (
pageUrls: ReaderStatePages['pageUrls'],
pagesToSpreadState: boolean[],

11
src/modules/reader/utils/ReaderProgressBar.utils.tsx
View File

@@ -23,6 +23,13 @@ export const getPage = (pageIndex: number, pages: ReaderProgressBarProps['pages'
};
};
/**
* for the double page mode the secondary page index has to be used to be able to correctly detect if the last page is visible
*
*/
export const getNextIndexFromPage = (page: ReaderProgressBarProps['pages'][number]) =>
page.secondary?.index ?? page.primary.index;
export const getNextPageIndex = (
offset: 'previous' | 'next',
pagesIndex: number,
@@ -30,9 +37,9 @@ export const getNextPageIndex = (
): number => {
switch (offset) {
case 'previous':
return pages[Math.max(0, pagesIndex - 1)].primary.index;
return getNextIndexFromPage(pages[Math.max(0, pagesIndex - 1)]);
case 'next':
return pages[Math.min(pages.length - 1, pagesIndex + 1)].primary.index;
return getNextIndexFromPage(pages[Math.min(pages.length - 1, pagesIndex + 1)]);
default:
throw new Error(`Unexpected offset "${offset}"`);
}