From 46ac5d5531f11c6f21b851487e0007a715193fbb Mon Sep 17 00:00:00 2001 From: Daniel <50052685+schroda@users.noreply.github.com> Date: Fri, 6 Jan 2023 17:15:29 +0100 Subject: [PATCH] Save reader settings per manga in Meta (#216) * [#213] Add missing "meta" property - IManga - IMangaCard (optional) - IChapter - ICategory * [#213] Add util functions for handling metadata - global server - manga - chapter - category * [#213] Use "ReaderSettings" from the manga metadata - get ReaderSettings from manga metadata - remove unnecessary check "make sure settings has all the keys" in case the stored settings in the metadata are outdated they will be filled with default values * [#213] Reload manga only in case "mangaId" changed In case the chapter is still from the same manga, a reload is unnecessary * [#213] Only update the changed reader setting Otherwise the app has to send patch requests to the server for every setting even if it didn't change * [#213] Hide "openButton" on first render in case "navBar" is shown The "openButton" was always set to be visible event in case the navBar was shown on the first render * [#213] Open the "ReaderNavBar" if needed after receiving new settings Otherwise, the drawer won't open in case the "navBar" was hidden on the first render since the default state in that case was set to false * [#213] Update "ReaderSettings" after receiving the manga response Otherwise, the default settings aren't getting removed * [#213] Hide/Show "OpenButton" when opening/closing the drawer Otherwise, the button stays hidden until it gets updated due to scrolling * [#213] Keep "ReaderNavBar" state when opening prev/next chapter In case the navBar wasn't sticky but opened, it got closed when the prev/next chapter got opened * [#213] Prevent "ReaderNavBar" from closing when changing "staticNav" setting --- src/components/navbar/ReaderNavBar.tsx | 132 ++++++++++++++++------- src/screens/Reader.tsx | 32 +++--- src/typings.d.ts | 22 +++- src/util/metadata.ts | 142 +++++++++++++++++++++++++ 4 files changed, 268 insertions(+), 60 deletions(-) create mode 100644 src/util/metadata.ts diff --git a/src/components/navbar/ReaderNavBar.tsx b/src/components/navbar/ReaderNavBar.tsx index 1e197a76..20600754 100644 --- a/src/components/navbar/ReaderNavBar.tsx +++ b/src/components/navbar/ReaderNavBar.tsx @@ -13,7 +13,7 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; import React, { useEffect, useState } from 'react'; import Typography from '@mui/material/Typography'; -import { useHistory, Link } from 'react-router-dom'; +import { useHistory, Link, useLocation } from 'react-router-dom'; import Slide from '@mui/material/Slide'; import Fade from '@mui/material/Fade'; import Zoom from '@mui/material/Zoom'; @@ -28,6 +28,7 @@ import Collapse from '@mui/material/Collapse'; import Button from '@mui/material/Button'; import { styled } from '@mui/system'; import useBackTo from 'util/useBackTo'; +import { getMetadataFrom } from 'util/metadata'; const Root = styled('div')(({ theme }) => ({ top: 0, @@ -105,7 +106,7 @@ const OpenDrawerButton = styled(IconButton)(({ theme }) => ({ }, })); -export const defaultReaderSettings = () => ({ +const defaultReaderSettings = () => ({ staticNav: false, showPageNumber: true, continuesPageGap: false, @@ -113,9 +114,22 @@ export const defaultReaderSettings = () => ({ readerType: 'ContinuesVertical', } as IReaderSettings); +const getReaderSettingsFromMetadata = ( + meta?: IMetadata, +): IReaderSettings => ({ + ...getMetadataFrom( + { meta }, + Object.entries(defaultReaderSettings()) as MetadataKeyValuePair[], + ) as unknown as IReaderSettings, +}); + +export const getReaderSettingsFor = ( + { meta }: IMangaCard | IManga, +): IReaderSettings => getReaderSettingsFromMetadata(meta); + interface IProps { settings: IReaderSettings - setSettings: React.Dispatch> + setSettingValue: (key: keyof IReaderSettings, value: string | boolean) => void manga: IManga | IMangaCard chapter: IChapter curPage: number @@ -124,17 +138,37 @@ interface IProps { export default function ReaderNavBar(props: IProps) { const history = useHistory(); const backTo = useBackTo(); + const location = useLocation<{ + prevDrawerOpen?: boolean, + prevSettingsCollapseOpen?: boolean + }>(); + const { + prevDrawerOpen, + prevSettingsCollapseOpen, + } = location.state ?? {}; const { - settings, setSettings, manga, chapter, curPage, + settings, setSettingValue, manga, chapter, curPage, } = props; - const [drawerOpen, setDrawerOpen] = useState(false || settings.staticNav); - const [hideOpenButton, setHideOpenButton] = useState(false); + const [drawerOpen, setDrawerOpen] = useState(settings.staticNav || prevDrawerOpen); + const [updateDrawerOnRender, setUpdateDrawerOnRender] = useState(true); + const [hideOpenButton, setHideOpenButton] = useState(settings.staticNav || prevDrawerOpen); const [prevScrollPos, setPrevScrollPos] = useState(0); - const [settingsCollapseOpen, setSettingsCollapseOpen] = useState(true); + const [settingsCollapseOpen, setSettingsCollapseOpen] = useState( + prevSettingsCollapseOpen ?? true, + ); - const setSettingValue = (key: string, value: any) => setSettings({ ...settings, [key]: value }); + const updateSettingValue = (key: keyof IReaderSettings, value: string | boolean) => { + // prevent closing the navBar when updating the "staticNav" setting + setUpdateDrawerOnRender(key !== 'staticNav'); + setSettingValue(key, value); + }; + + const updateDrawer = (open: boolean) => { + setDrawerOpen(open); + setHideOpenButton(open); + }; const handleScroll = () => { const currentScrollPos = window.pageYOffset; @@ -145,6 +179,12 @@ export default function ReaderNavBar(props: IProps) { } }; + useEffect(() => { + if (updateDrawerOnRender) { + updateDrawer(settings.staticNav); + } + }, [settings.staticNav]); + useEffect(() => { window.addEventListener('scroll', handleScroll); @@ -190,7 +230,7 @@ export default function ReaderNavBar(props: IProps) { color="inherit" aria-label="menu" disableRipple - onClick={() => setDrawerOpen(false)} + onClick={() => updateDrawer(false)} size="large" > @@ -243,7 +283,7 @@ export default function ReaderNavBar(props: IProps) { setSettingValue('staticNav', e.target.checked)} + onChange={(e) => updateSettingValue('staticNav', e.target.checked)} /> @@ -253,7 +293,7 @@ export default function ReaderNavBar(props: IProps) { setSettingValue('showPageNumber', e.target.checked)} + onChange={(e) => updateSettingValue('showPageNumber', e.target.checked)} /> @@ -263,7 +303,7 @@ export default function ReaderNavBar(props: IProps) { setSettingValue('loadNextonEnding', e.target.checked)} + onChange={(e) => updateSettingValue('loadNextonEnding', e.target.checked)} /> @@ -272,7 +312,7 @@ export default function ReaderNavBar(props: IProps) {