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

Optionally show preview or "reading mode" and "tap zone overlay"

Browse Source 
Shows a preview when opening the reader or when the values change
This commit is contained in:
schroda
2024-12-30 16:51:39 +01:00
parent f3962646e6
commit 45f46a05d0
7 changed files with 135 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
public/locales/en.json
View File

@@ -922,6 +922,16 @@
"title": "Scale type",
"width": "Fit width"
},
"preview": {
"reading_mode": {
"description": "Briefly show current mode when reader is opened or mode got changed",
"title": "Show reading mode"
},
"tap_zones": {
"description": "Briefly show tap zone layout preview when reader is opened or layout got changed",
"title": "Show tap zones overlay"
}
},
"progress_bar": {
"position": "Progress bar position",
"size": "Progress bar size",

2
src/modules/metadata/Metadata.constants.ts
View File

@@ -71,6 +71,8 @@ const APP_METADATA_OBJECT: Record<AppMetadataKeys, undefined> = {
imagePreLoadAmount: undefined,
shouldUseAutoWebtoonMode: undefined,
autoScroll: undefined,
shouldShowReadingModePreview: undefined,
shouldShowTapZoneLayoutPreview: undefined,
};
export const VALID_APP_METADATA_KEYS = Object.keys(APP_METADATA_OBJECT);

24
src/modules/reader/components/settings/behaviour/ReaderBehaviourSettings.tsx
View File

@@ -49,6 +49,30 @@ export const ReaderBehaviourSettings = ({
onChange={(_, checked) => updateSetting('shouldOffsetDoubleSpreads', checked)}
/>
)}
<CheckboxInput
label={
<Box>
<Typography>{t('reader.settings.preview.reading_mode.title')}</Typography>
<Typography variant="body2" color="textDisabled">
{t('reader.settings.preview.reading_mode.description')}
</Typography>
</Box>
}
checked={settings.shouldShowReadingModePreview}
onChange={(_, checked) => updateSetting('shouldShowReadingModePreview', checked)}
/>
<CheckboxInput
label={
<Box>
<Typography>{t('reader.settings.preview.tap_zones.title')}</Typography>
<Typography variant="body2" color="textDisabled">
{t('reader.settings.preview.tap_zones.description')}
</Typography>
</Box>
}
checked={settings.shouldShowTapZoneLayoutPreview}
onChange={(_, checked) => updateSetting('shouldShowTapZoneLayoutPreview', checked)}
/>
<CheckboxInput
label={
<Box>

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

@@ -53,6 +53,8 @@ import {
useReaderHideOverlayOnUserScroll,
useReaderHorizontalModeInvertXYScrolling,
} from '@/modules/reader/utils/Reader.utils.ts';
import { TReaderTapZoneContext } from '@/modules/reader/types/TapZoneLayout.types.ts';
import { useReaderTapZoneContext } from '@/modules/reader/contexts/ReaderTapZoneContext.tsx';
const READING_MODE_TO_IN_VIEWPORT_TYPE: Record<ReadingMode, PageInViewportType> = {
[ReadingMode.SINGLE_PAGE]: PageInViewportType.X,
@@ -84,6 +86,8 @@ const BaseReaderViewer = forwardRef(
isVisible: isOverlayVisible,
setIsVisible: setIsOverlayVisible,
updateCurrentPageIndex,
showPreview,
setShowPreview,
}: Pick<
ReaderStatePages,
| 'currentPageIndex'
@@ -100,7 +104,8 @@ const BaseReaderViewer = forwardRef(
> &
Pick<IReaderSettings, 'readingMode' | 'shouldOffsetDoubleSpreads' | 'readingDirection'> &
Pick<TReaderScrollbarContext, 'setScrollbarXSize' | 'setScrollbarYSize'> &
Pick<TReaderOverlayContext, 'isVisible' | 'setIsVisible'> & {
Pick<TReaderOverlayContext, 'isVisible' | 'setIsVisible'> &
TReaderTapZoneContext & {
updateCurrentPageIndex: ReturnType<typeof ReaderControls.useUpdateCurrentPageIndex>;
},
@@ -202,7 +207,13 @@ const BaseReaderViewer = forwardRef(
);
useReaderHideCursorOnInactivity(scrollElementRef);
useReaderHorizontalModeInvertXYScrolling(readingMode, readingDirection, scrollElementRef);
useReaderHideOverlayOnUserScroll(isOverlayVisible, setIsOverlayVisible, scrollElementRef);
useReaderHideOverlayOnUserScroll(
isOverlayVisible,
setIsOverlayVisible,
showPreview,
setShowPreview,
scrollElementRef,
);
useReaderAutoScroll(isOverlayVisible, automaticScrolling);
return (
@@ -249,6 +260,7 @@ export const ReaderViewer = withPropsFrom(
useReaderScrollbarContext,
useReaderOverlayContext,
() => ({ updateCurrentPageIndex: ReaderControls.useUpdateCurrentPageIndex() }),
useReaderTapZoneContext,
],
[
'currentPageIndex',
@@ -270,5 +282,7 @@ export const ReaderViewer = withPropsFrom(
'isVisible',
'setIsVisible',
'updateCurrentPageIndex',
'showPreview',
'setShowPreview',
],
);

4
src/modules/reader/constants/ReaderSettings.constants.tsx
View File

@@ -57,6 +57,8 @@ const GLOBAL_READER_SETTING_OBJECT: Record<keyof IReaderSettingsGlobal, undefine
imagePreLoadAmount: undefined,
shouldUseAutoWebtoonMode: undefined,
autoScroll: undefined,
shouldShowReadingModePreview: undefined,
shouldShowTapZoneLayoutPreview: undefined,
};
export const GLOBAL_READER_SETTING_KEYS = Object.keys(GLOBAL_READER_SETTING_OBJECT);
@@ -133,6 +135,8 @@ export const DEFAULT_READER_SETTINGS: IReaderSettings = {
value: 5,
smooth: true,
},
shouldShowReadingModePreview: true,
shouldShowTapZoneLayoutPreview: true,
};
export const READER_PROGRESS_BAR_POSITION_TO_PLACEMENT: Record<ProgressBarPosition, TooltipProps['placement']> = {

83
src/modules/reader/screens/Reader.tsx
View File

@@ -26,7 +26,7 @@ import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'
import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
import { GET_CHAPTERS_READER } from '@/lib/graphql/queries/ChapterQuery.ts';
import { Chapters } from '@/modules/chapter/services/Chapters.ts';
import { DirectionOffset } from '@/Base.types.ts';
import { DirectionOffset, TranslationKey } from '@/Base.types.ts';
import { TapZoneLayout } from '@/modules/reader/components/TapZoneLayout.tsx';
import { useReaderOverlayContext } from '@/modules/reader/contexts/ReaderOverlayContext.tsx';
import { ReaderRGBAFilter } from '@/modules/reader/components/ReaderRGBAFilter.tsx';
@@ -34,11 +34,15 @@ import { useReaderStateSettingsContext } from '@/modules/reader/contexts/state/R
import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
import { ReaderViewer } from '@/modules/reader/components/viewer/ReaderViewer.tsx';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { READER_BACKGROUND_TO_COLOR } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
import {
READER_BACKGROUND_TO_COLOR,
READING_MODE_VALUE_TO_DISPLAY_DATA,
} from '@/modules/reader/constants/ReaderSettings.constants.tsx';
import { createPageData, createPagesData } from '@/modules/reader/utils/ReaderPager.utils.tsx';
import { ReaderHotkeys } from '@/modules/reader/components/ReaderHotkeys.tsx';
import {
IReaderSettings,
IReaderSettingsWithDefaultFlag,
ReaderResumeMode,
ReaderStateChapters,
ReaderTransitionPageMode,
@@ -56,6 +60,9 @@ import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
import { isAutoWebtoonMode } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
import { useReaderAutoScrollContext } from '@/modules/reader/contexts/ReaderAutoScrollContext.tsx';
import { makeToast } from '@/modules/core/utils/Toast.ts';
import { TReaderTapZoneContext } from '@/modules/reader/types/TapZoneLayout.types.ts';
import { useReaderTapZoneContext } from '@/modules/reader/contexts/ReaderTapZoneContext.tsx';
const BaseReader = ({
setTitle,
@@ -67,6 +74,11 @@ const BaseReader = ({
setManga,
shouldSkipDupChapters,
backgroundColor,
readingMode,
tapZoneLayout,
tapZoneInvertMode,
shouldShowReadingModePreview,
shouldShowTapZoneLayoutPreview,
setSettings,
initialChapter,
currentChapter,
@@ -82,11 +94,16 @@ const BaseReader = ({
setPageLoadStates,
setTransitionPageMode,
cancelAutoScroll,
setShowPreview,
}: Pick<NavbarContextType, 'setTitle' | 'setOverride' | 'readerNavBarWidth'> &
Pick<TReaderOverlayContext, 'isVisible' | 'setIsVisible'> &
Pick<TReaderStateMangaContext, 'manga' | 'setManga'> &
Pick<TReaderStateSettingsContext, 'setSettings'> &
Pick<IReaderSettings, 'shouldSkipDupChapters' | 'backgroundColor'> &
Pick<
IReaderSettings,
'shouldSkipDupChapters' | 'backgroundColor' | 'shouldShowReadingModePreview' | 'shouldShowTapZoneLayoutPreview'
> &
Pick<IReaderSettingsWithDefaultFlag, 'readingMode' | 'tapZoneLayout' | 'tapZoneInvertMode'> &
Pick<ReaderStateChapters, 'initialChapter' | 'currentChapter' | 'chapters' | 'setReaderStateChapters'> &
Pick<
ReaderStatePages,
@@ -98,7 +115,8 @@ const BaseReader = ({
| 'setPageUrls'
| 'setPageLoadStates'
| 'setTransitionPageMode'
> & {
> &
Pick<TReaderTapZoneContext, 'setShowPreview'> & {
firstPageUrl?: string;
cancelAutoScroll: TReaderAutoScrollContext['cancel'];
}) => {
@@ -257,9 +275,38 @@ const BaseReader = ({
profile,
);
setSettings(getReaderSettingsFor(mangaFromResponse, profileSettings));
const finalSettings = getReaderSettingsFor(mangaFromResponse, profileSettings);
setSettings(finalSettings);
}, [mangaResponse.data?.manga, defaultSettings]);
// show setting previews on change or when open reader
const previousReadingMode = useRef<IReaderSettingsWithDefaultFlag['readingMode']>();
const previousTapZoneLayout = useRef<IReaderSettingsWithDefaultFlag['tapZoneLayout']>();
const previousTapZoneInvertMode = useRef<IReaderSettingsWithDefaultFlag['tapZoneInvertMode']>();
useEffect(() => {
const mangaFromResponse = mangaResponse.data?.manga;
if (!mangaFromResponse || defaultSettingsResponse.loading || defaultSettingsResponse.error) {
return;
}
const didReadingModeChange = JSON.stringify(readingMode) !== JSON.stringify(previousReadingMode.current);
const showReadingModePreview = shouldShowReadingModePreview && didReadingModeChange;
if (showReadingModePreview) {
previousReadingMode.current = readingMode;
makeToast(t(READING_MODE_VALUE_TO_DISPLAY_DATA[readingMode.value].title as TranslationKey));
}
const didTapZoneLayoutChange =
JSON.stringify(tapZoneLayout.value) !== JSON.stringify(previousTapZoneLayout.current) ||
JSON.stringify(tapZoneInvertMode.value) !== JSON.stringify(previousTapZoneInvertMode.current);
const showTapZoneLayoutPreview = shouldShowTapZoneLayoutPreview && didTapZoneLayoutChange;
if (showTapZoneLayoutPreview) {
previousTapZoneLayout.current = tapZoneLayout;
previousTapZoneInvertMode.current = tapZoneInvertMode;
setShowPreview(true);
}
}, [readingMode, tapZoneInvertMode, shouldShowReadingModePreview, shouldShowTapZoneLayoutPreview]);
// set chapters state
useEffect(() => {
const newMangaChapters = chaptersResponse.data?.chapters.nodes;
@@ -412,12 +459,30 @@ export const Reader = withPropsFrom(
useReaderStateMangaContext,
useReaderStateChaptersContext,
useReaderStateSettingsContext,
ReaderService.useSettingsWithoutDefaultFlag,
() => {
const {
shouldSkipDupChapters,
backgroundColor,
shouldShowReadingModePreview,
shouldShowTapZoneLayoutPreview,
} = ReaderService.useSettingsWithoutDefaultFlag();
return {
shouldSkipDupChapters,
backgroundColor,
shouldShowReadingModePreview,
shouldShowTapZoneLayoutPreview,
};
},
() => {
const { readingMode, tapZoneLayout, tapZoneInvertMode } = ReaderService.useSettings();
return { readingMode, tapZoneLayout, tapZoneInvertMode };
},
userReaderStatePagesContext,
() => ({
firstPageUrl: userReaderStatePagesContext().pages[0].primary.url,
}),
() => ({ cancelAutoScroll: useReaderAutoScrollContext().cancel }),
useReaderTapZoneContext,
],
[
'setTitle',
@@ -429,6 +494,11 @@ export const Reader = withPropsFrom(
'setManga',
'shouldSkipDupChapters',
'backgroundColor',
'readingMode',
'tapZoneLayout',
'tapZoneInvertMode',
'shouldShowReadingModePreview',
'shouldShowTapZoneLayoutPreview',
'setSettings',
'initialChapter',
'currentChapter',
@@ -444,5 +514,6 @@ export const Reader = withPropsFrom(
'setPageLoadStates',
'setTransitionPageMode',
'cancelAutoScroll',
'setShowPreview',
],
);

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

@@ -132,6 +132,8 @@ export interface IReaderSettingsGlobal {
value: number;
smooth: boolean;
};
shouldShowReadingModePreview: boolean;
shouldShowTapZoneLayoutPreview: boolean;
}
export interface IReaderSettingsManga {