diff --git a/public/locales/en.json b/public/locales/en.json index 17b0e27f..d32d346a 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -392,7 +392,7 @@ "browse": "Browse", "client": "Client", "close": "Close", - "copied": "Copied", + "copied_clipboard": "Copied to clipboard", "default": "Default", "disabled": "Disabled", "discord": "Discord", @@ -413,6 +413,7 @@ "password": "Password", "placeholder": "Placeholder", "previous": "Previous", + "share": "Share", "sort": "Sort", "started": "Started", "type": "Type", diff --git a/src/modules/manga/components/MangaDetails.tsx b/src/modules/manga/components/MangaDetails.tsx index e06316ce..f2f5b798 100644 --- a/src/modules/manga/components/MangaDetails.tsx +++ b/src/modules/manga/components/MangaDetails.tsx @@ -301,7 +301,7 @@ export const MangaDetails = ({ const copyTitle = async () => { try { await navigator.clipboard.writeText(manga.title); - makeToast(t('global.label.copied'), 'info'); + makeToast(t('global.label.copied_clipboard'), 'info'); } catch (e) { defaultPromiseErrorHandler('MangaDetails::copyTitleLongPress')(e); } diff --git a/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx b/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx new file mode 100644 index 00000000..7ccbaca7 --- /dev/null +++ b/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx @@ -0,0 +1,128 @@ +/* + * 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 Stack from '@mui/material/Stack'; +import ArrowBack from '@mui/icons-material/ArrowBack'; +import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; +import BookmarkIcon from '@mui/icons-material/Bookmark'; +import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder'; +import MoreVertIcon from '@mui/icons-material/MoreVert'; +import { bindMenu, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks'; +import MenuItem from '@mui/material/MenuItem'; +import { useTranslation } from 'react-i18next'; +import Menu from '@mui/material/Menu'; +import Link from '@mui/material/Link'; +import { Link as RouterLink } from 'react-router-dom'; +import { alpha } from '@mui/material/styles'; +import Tooltip from '@mui/material/Tooltip'; +import Slide from '@mui/material/Slide'; +import { useGetOptionForDirection } from '@/theme.tsx'; +import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx'; +import { actionToTranslationKey, ChapterAction, Chapters } from '@/modules/chapter/services/Chapters.ts'; +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 { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx'; +import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx'; +import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx'; +import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder'; + +const DEFAULT_MANGA = { id: -1, title: '' }; +const DEFAULT_CHAPTER = { id: -1, name: '', realUrl: '', isBookmarked: false }; + +export const ReaderOverlayHeaderMobile = ({ isVisible }: MobileHeaderProps) => { + const { t } = useTranslation(); + const { manga } = useReaderStateMangaContext(); + const { currentChapter } = useReaderStateChaptersContext(); + const getOptionForDirection = useGetOptionForDirection(); + const { scrollbarYSize } = useReaderScrollbarContext(); + const handleBack = useBackButton(); + const popupState = usePopupState({ popupId: 'reader-overlay-more-menu', variant: 'popover' }); + + const { id: mangaId, title } = manga ?? DEFAULT_MANGA; + const { id: chapterId, name, realUrl, isBookmarked } = currentChapter ?? DEFAULT_CHAPTER; + + const bookmarkAction: Extract = currentChapter?.isBookmarked + ? 'unbookmark' + : 'bookmark'; + + return ( + + alpha(theme.palette.background.paper, 0.95), + pointerEvents: 'all', + }} + > + + + {getOptionForDirection(, )} + + + + {manga && currentChapter ? ( + <> + + + + {title} + + + + + {name} + + + ) : ( + + )} + + + Chapters.performAction(bookmarkAction, [chapterId], {})} color="inherit"> + {isBookmarked ? : } + + + + + + + + {t('chapter.action.label.open_on_source')} + + { + await navigator.clipboard.writeText(title); + makeToast(t('global.label.copied_clipboard'), 'info'); + }} + > + {t('global.label.share')} + + + + + ); +}; diff --git a/src/modules/reader/types/ReaderOverlay.types.ts b/src/modules/reader/types/ReaderOverlay.types.ts new file mode 100644 index 00000000..47a91fae --- /dev/null +++ b/src/modules/reader/types/ReaderOverlay.types.ts @@ -0,0 +1,11 @@ +/* + * 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/. + */ + +export interface MobileHeaderProps { + isVisible: boolean; +}