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

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',
],
);