- Reader -> Pager

- add cloneObject
- add missing copyright notices

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);
         }

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';

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';
 

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();

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: {

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();

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;
 

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,

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<T extends object>(obj: T) {
+    return JSON.parse(JSON.stringify(obj)) as T;
+}