From 0b79f1f82aae1e02a76522af179cab77db4ef96c Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Mon, 17 Feb 2025 03:56:40 +0100 Subject: [PATCH] Extract reader exit button --- .../overlay/ReaderOverlayHeaderMobile.tsx | 13 ++----- .../overlay/navigation/ReaderExitButton.tsx | 36 +++++++++++++++++++ .../desktop/ReaderNavBarDesktop.tsx | 29 +++------------ 3 files changed, 42 insertions(+), 36 deletions(-) create mode 100644 src/modules/reader/components/overlay/navigation/ReaderExitButton.tsx diff --git a/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx b/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx index 0cd5ac2e..d2f4e128 100644 --- a/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx +++ b/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx @@ -8,8 +8,6 @@ import IconButton from '@mui/material/IconButton'; import Stack from '@mui/material/Stack'; -import ArrowBack from '@mui/icons-material/ArrowBack'; -import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; import MoreVertIcon from '@mui/icons-material/MoreVert'; import { bindMenu, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks'; import MenuItem from '@mui/material/MenuItem'; @@ -21,9 +19,7 @@ import { alpha } from '@mui/material/styles'; import Slide from '@mui/material/Slide'; import { forwardRef, memo } from 'react'; import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx'; -import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts'; import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx'; -import { useBackButton } from '@/modules/core/hooks/useBackButton.ts'; import { makeToast } from '@/modules/core/utils/Toast.ts'; import { MobileHeaderProps } from '@/modules/reader/types/ReaderOverlay.types.ts'; import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder'; @@ -41,6 +37,7 @@ import { ReaderLibraryButton } from '@/modules/reader/components/overlay/navigat import { ReaderBookmarkButton } from '@/modules/reader/components/overlay/navigation/ReaderBookmarkButton.tsx'; import { FALLBACK_CHAPTER } from '@/modules/chapter/Chapter.constants.ts'; import { FALLBACK_MANGA } from '@/modules/manga/Manga.constants.ts'; +import { ReaderExitButton } from '@/modules/reader/components/overlay/navigation/ReaderExitButton.tsx'; const DEFAULT_MANGA = { ...FALLBACK_MANGA, title: '' }; @@ -52,8 +49,6 @@ const BaseReaderOverlayHeaderMobile = forwardRef< Pick >(({ isVisible, manga, currentChapter, scrollbarYSize }, ref) => { const { t } = useTranslation(); - const getOptionForDirection = useGetOptionForDirection(); - const handleBack = useBackButton(); const popupState = usePopupState({ popupId: 'reader-overlay-more-menu', variant: 'popover' }); const { id: mangaId, title } = manga ?? DEFAULT_MANGA; @@ -76,11 +71,7 @@ const BaseReaderOverlayHeaderMobile = forwardRef< boxShadow: 2, }} > - - - {getOptionForDirection(, )} - - + {manga && currentChapter ? ( <> diff --git a/src/modules/reader/components/overlay/navigation/ReaderExitButton.tsx b/src/modules/reader/components/overlay/navigation/ReaderExitButton.tsx new file mode 100644 index 00000000..341ced0f --- /dev/null +++ b/src/modules/reader/components/overlay/navigation/ReaderExitButton.tsx @@ -0,0 +1,36 @@ +/* + * Copyright (C) Contributors to the Suwayomi project + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at https://mozilla.org/MPL/2.0/. + */ + +import IconButton from '@mui/material/IconButton'; +import { useTranslation } from 'react-i18next'; +import ArrowBack from '@mui/icons-material/ArrowBack'; +import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; +import { memo } from 'react'; +import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx'; +import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts'; +import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx'; +import { ReaderService } from '@/modules/reader/services/ReaderService.ts'; + +const BaseReaderExitButton = ({ exit }: { exit: ReturnType }) => { + const { t } = useTranslation(); + const getOptionForDirection = useGetOptionForDirection(); + + return ( + + + {getOptionForDirection(, )} + + + ); +}; + +export const ReaderExitButton = withPropsFrom( + memo(BaseReaderExitButton), + [() => ({ exit: ReaderService.useExit() })], + ['exit'], +); diff --git a/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx b/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx index 5f429818..9cdc4f22 100644 --- a/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx +++ b/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx @@ -9,15 +9,12 @@ import Stack from '@mui/material/Stack'; import { useTranslation } from 'react-i18next'; import IconButton from '@mui/material/IconButton'; -import ArrowBack from '@mui/icons-material/ArrowBack'; -import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; import PushPinIcon from '@mui/icons-material/PushPin'; import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined'; import Divider from '@mui/material/Divider'; import { memo, useCallback, useLayoutEffect, useRef, useState } from 'react'; import Drawer from '@mui/material/Drawer'; import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx'; -import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts'; import { ReaderNavBarDesktopProps } from '@/modules/reader/types/ReaderOverlay.types.ts'; import { ReaderNavContainer } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavContainer.tsx'; import { ReaderNavBarDesktopMetadata } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopMetadata.tsx'; @@ -36,6 +33,7 @@ import { NavbarContextType } from '@/modules/navigation-bar/NavigationBar.types. import { IReaderSettings, ReaderStateChapters, TReaderStateMangaContext } from '@/modules/reader/types/Reader.types.ts'; import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx'; import { FALLBACK_MANGA } from '@/modules/manga/Manga.constants.ts'; +import { ReaderExitButton } from '@/modules/reader/components/overlay/navigation/ReaderExitButton.tsx'; const useGetPreviousNavBarStaticValue = (isVisible: boolean, isStaticNav: boolean) => { const wasNavBarStaticRef = useRef(isStaticNav); @@ -65,18 +63,13 @@ const BaseReaderNavBarDesktop = ({ previousChapter, nextChapter, isStaticNav, - exit, }: ReaderNavBarDesktopProps & Pick & Pick & Pick & - Pick & { - exit: ReturnType; - }) => { + Pick) => { const { t } = useTranslation(); - const getOptionForDirection = useGetOptionForDirection(); - const updateReaderSettings = ReaderService.useCreateUpdateSetting(manga ?? FALLBACK_MANGA); const [navBarElement, setNavBarElement] = useState(); @@ -111,11 +104,7 @@ const BaseReaderNavBarDesktop = ({ - - - {getOptionForDirection(, )} - - + { @@ -168,16 +157,6 @@ export const ReaderNavBarDesktop = withPropsFrom( useReaderStateChaptersContext, userReaderStatePagesContext, ReaderService.useSettingsWithoutDefaultFlag, - () => ({ exit: ReaderService.useExit() }), - ], - [ - 'setReaderNavBarWidth', - 'manga', - 'chapters', - 'currentChapter', - 'previousChapter', - 'nextChapter', - 'isStaticNav', - 'exit', ], + ['setReaderNavBarWidth', 'manga', 'chapters', 'currentChapter', 'previousChapter', 'nextChapter', 'isStaticNav'], );