diff --git a/webUI/react/src/components/ExtensionLangSelect.tsx b/webUI/react/src/components/ExtensionLangSelect.tsx index 95382ac..78dba3c 100644 --- a/webUI/react/src/components/ExtensionLangSelect.tsx +++ b/webUI/react/src/components/ExtensionLangSelect.tsx @@ -18,6 +18,7 @@ import FilterListIcon from '@material-ui/icons/FilterList'; import { List, ListItemSecondaryAction, ListItemText } from '@material-ui/core'; import ListItem from '@material-ui/core/ListItem'; import { langCodeToName } from '../util/language'; +import cloneObject from '../util/cloneObject'; const useStyles = makeStyles(() => createStyles({ paper: { @@ -54,7 +55,7 @@ export default function ExtensionLangSelect(props: IProps) { if (checked) { setMShownLangs([...mShownLangs, lang]); } else { - const clone = JSON.parse(JSON.stringify(mShownLangs)); + const clone = cloneObject(mShownLangs); clone.splice(clone.indexOf(lang), 1); setMShownLangs(clone); } diff --git a/webUI/react/src/components/Toast.tsx b/webUI/react/src/components/Toast.tsx index 9946753..6d7dc64 100644 --- a/webUI/react/src/components/Toast.tsx +++ b/webUI/react/src/components/Toast.tsx @@ -1,4 +1,11 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ +/* + * 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 ReactDOM from 'react-dom'; import React from 'react'; import Slide, { SlideProps } from '@material-ui/core/Slide'; diff --git a/webUI/react/src/components/reader/PageNumber.tsx b/webUI/react/src/components/reader/PageNumber.tsx index 7bf79c8..7a918dc 100644 --- a/webUI/react/src/components/reader/PageNumber.tsx +++ b/webUI/react/src/components/reader/PageNumber.tsx @@ -1,3 +1,10 @@ +/* + * 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 { makeStyles } from '@material-ui/core/styles'; import React from 'react'; diff --git a/webUI/react/src/components/reader/HorizontalReader.tsx b/webUI/react/src/components/reader/pager/HorizontalPager.tsx similarity index 74% rename from webUI/react/src/components/reader/HorizontalReader.tsx rename to webUI/react/src/components/reader/pager/HorizontalPager.tsx index 0c16d11..49a0be0 100644 --- a/webUI/react/src/components/reader/HorizontalReader.tsx +++ b/webUI/react/src/components/reader/pager/HorizontalPager.tsx @@ -1,7 +1,14 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ +/* + * 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 { makeStyles } from '@material-ui/core/styles'; import React from 'react'; -import Page from './Page'; +import Page from '../Page'; const useStyles = makeStyles({ reader: { @@ -21,7 +28,7 @@ interface IProps { settings: IReaderSettings } -export default function HorizontalReader(props: IProps) { +export default function HorizontalPager(props: IProps) { const { pages, settings, setCurPage } = props; const classes = useStyles(); diff --git a/webUI/react/src/components/reader/PagedReader.tsx b/webUI/react/src/components/reader/pager/PagedPager.tsx similarity index 86% rename from webUI/react/src/components/reader/PagedReader.tsx rename to webUI/react/src/components/reader/pager/PagedPager.tsx index 3b8f039..baf3cfb 100644 --- a/webUI/react/src/components/reader/PagedReader.tsx +++ b/webUI/react/src/components/reader/pager/PagedPager.tsx @@ -1,7 +1,14 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ +/* + * 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 { makeStyles } from '@material-ui/core/styles'; import React, { useEffect } from 'react'; -import Page from './Page'; +import Page from '../Page'; const useStyles = makeStyles({ reader: { diff --git a/webUI/react/src/components/reader/VerticalReader.tsx b/webUI/react/src/components/reader/pager/VerticalPager.tsx similarity index 70% rename from webUI/react/src/components/reader/VerticalReader.tsx rename to webUI/react/src/components/reader/pager/VerticalPager.tsx index f63bc06..1d680d3 100644 --- a/webUI/react/src/components/reader/VerticalReader.tsx +++ b/webUI/react/src/components/reader/pager/VerticalPager.tsx @@ -1,7 +1,14 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ +/* + * 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 { makeStyles } from '@material-ui/core/styles'; import React from 'react'; -import Page from './Page'; +import Page from '../Page'; const useStyles = makeStyles({ reader: { @@ -13,7 +20,7 @@ const useStyles = makeStyles({ }, }); -export default function VerticalReader(props: IReaderProps) { +export default function VerticalPager(props: IReaderProps) { const { pages, settings, setCurPage } = props; const classes = useStyles(); diff --git a/webUI/react/src/screens/Library.tsx b/webUI/react/src/screens/Library.tsx index f14206b..c55c305 100644 --- a/webUI/react/src/screens/Library.tsx +++ b/webUI/react/src/screens/Library.tsx @@ -10,6 +10,7 @@ import React, { useContext, useEffect, useState } from 'react'; import MangaGrid from '../components/MangaGrid'; import NavbarContext from '../context/NavbarContext'; import client from '../util/client'; +import cloneObject from '../util/cloneObject'; interface IMangaCategory { category: ICategory @@ -98,7 +99,7 @@ export default function Library() { client.get(`/api/v1/category/${tab.category.id}`) .then((response) => response.data) .then((data: IManga[]) => { - const tabsClone = JSON.parse(JSON.stringify(tabs)); + const tabsClone = cloneObject(tabs); tabsClone[index].mangas = data; tabsClone[index].isFetched = true; diff --git a/webUI/react/src/screens/Reader.tsx b/webUI/react/src/screens/Reader.tsx index 57d22b3..f1e62f2 100644 --- a/webUI/react/src/screens/Reader.tsx +++ b/webUI/react/src/screens/Reader.tsx @@ -10,15 +10,16 @@ import CircularProgress from '@material-ui/core/CircularProgress'; import { makeStyles } from '@material-ui/core/styles'; import React, { useContext, useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; -import HorizontalReader from '../components/reader/HorizontalReader'; +import HorizontalPager from '../components/reader/pager/HorizontalPager'; import Page from '../components/reader/Page'; import PageNumber from '../components/reader/PageNumber'; -import PagedReader from '../components/reader/PagedReader'; -import VerticalReader from '../components/reader/VerticalReader'; -import ReaderNavBar, { defaultReaderSettings } from '../components/ReaderNavBar'; +import WebtoonPager from '../components/reader/pager/PagedPager'; +import VerticalPager from '../components/reader/pager/VerticalPager'; +import ReaderNavBar, { defaultReaderSettings } from '../components/navbar/ReaderNavBar'; import NavbarContext from '../context/NavbarContext'; import client from '../util/client'; import useLocalStorage from '../util/useLocalStorage'; +import cloneObject from '../util/cloneObject'; const useStyles = (settings: IReaderSettings) => makeStyles({ root: { @@ -33,24 +34,24 @@ const useStyles = (settings: IReaderSettings) => makeStyles({ const getReaderComponent = (readerType: ReaderType) => { switch (readerType) { case 'ContinuesVertical': - return VerticalReader; + return VerticalPager; break; case 'Webtoon': - return VerticalReader; + return VerticalPager; break; case 'SingleVertical': - return PagedReader; + return WebtoonPager; break; case 'SingleRTL': - return PagedReader; + return WebtoonPager; break; case 'SingleLTR': - return PagedReader; + return WebtoonPager; break; case 'ContinuesHorizontal': - return HorizontalReader; + return HorizontalPager; default: - return VerticalReader; + return VerticalPager; break; } }; @@ -72,6 +73,20 @@ export default function Reader() { const { setOverride, setTitle } = useContext(NavbarContext); useEffect(() => { + // make sure settings has all the keys + const settingsClone = cloneObject(settings) as any; + const defualtSettings = defaultReaderSettings(); + let shouldUpdateSettings = false; + Object.keys(defualtSettings).forEach((key) => { + const keyOf = key as keyof IReaderSettings; + if (settings[keyOf] === undefined) { + settingsClone[keyOf] = defualtSettings[keyOf]; + shouldUpdateSettings = true; + } + }); + if (shouldUpdateSettings) { setSettings(settingsClone); } + + // set the custom navbar setOverride( { status: true, diff --git a/webUI/react/src/util/cloneObject.tsx b/webUI/react/src/util/cloneObject.tsx new file mode 100644 index 0000000..0460e95 --- /dev/null +++ b/webUI/react/src/util/cloneObject.tsx @@ -0,0 +1,10 @@ +/* + * 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 default function cloneObject(obj: T) { + return JSON.parse(JSON.stringify(obj)) as T; +}