make default reader settings changeable (#217)

* [#214] Move "reader settings" util functions into new file

* [#214] Extract "options" of "ReaderSettings" to new component

* [#214] Add component for changing the default reader settings

* [#214] Add default "ReaderSettings" to "Settings"

* [#214] Use default "ReaderSettings" stored on the server

Wait for both "manga" and "defaultSettings" to be loaded.
Otherwise, by the time the "manga" response was received, the "defaultSettings" might be still loading and thus, the local fallback "default" settings will get used as the "default settings"

* [#214] Save and update "ReaderSettings" options in case they are missing

- Manga gets read the first time => save settings in metadata
- Default settings get opened the first time => save settings in global metadata

src/screens/Reader.tsx

@@ -15,12 +15,17 @@ import PageNumber from 'components/reader/PageNumber';
 import PagedPager from 'components/reader/pager/PagedPager';
 import DoublePagedPager from 'components/reader/pager/DoublePagedPager';
 import VerticalPager from 'components/reader/pager/VerticalPager';
-import ReaderNavBar, { getReaderSettingsFor } from 'components/navbar/ReaderNavBar';
+import ReaderNavBar from 'components/navbar/ReaderNavBar';
 import NavbarContext from 'components/context/NavbarContext';
 import client from 'util/client';
 import useLocalStorage from 'util/useLocalStorage';
 import { Box } from '@mui/system';
 import { requestUpdateMangaMetadata } from 'util/metadata';
+import {
+    checkAndHandleMissingStoredReaderSettings,
+    getReaderSettingsFor,
+    useDefaultReaderSettings,
+} from 'util/readerSettings';
 import makeToast from '../components/util/Toast';
 
 const getReaderComponent = (readerType: ReaderType) => {
@@ -68,13 +73,25 @@ export default function Reader() {
     const [curPage, setCurPage] = useState<number>(0);
     const { setOverride, setTitle } = useContext(NavbarContext);
 
-    const [settings, setSettings] = useState(getReaderSettingsFor(manga));
+    const {
+        settings: defaultSettings,
+        loading: areDefaultSettingsLoading,
+    } = useDefaultReaderSettings();
+    const [settings, setSettings] = useState(getReaderSettingsFor(manga, defaultSettings));
+    const [isMangaLoading, setIsMangaLoading] = useState(true);
 
     const setSettingValue = (key: keyof IReaderSettings, value: string | boolean) => {
         setSettings({ ...settings, [key]: value });
         requestUpdateMangaMetadata(manga, [[key, value]]).catch(() => makeToast('Failed to save the reader settings to the server', 'warning'));
     };
 
+    useEffect(() => {
+        if (!areDefaultSettingsLoading && !isMangaLoading) {
+            checkAndHandleMissingStoredReaderSettings(manga, 'manga', defaultSettings).catch(() => {});
+            setSettings(getReaderSettingsFor(manga, defaultSettings));
+        }
+    }, [areDefaultSettingsLoading, isMangaLoading]);
+
     useEffect(() => {
         // set the custom navbar
         setOverride(
@@ -97,13 +114,14 @@ export default function Reader() {
     }, [manga, chapter, settings, curPage, chapterIndex]);
 
     useEffect(() => {
+        setIsMangaLoading(true);
         setTitle('Reader');
         client.get(`/api/v1/manga/${mangaId}/`)
             .then((response) => response.data)
             .then((data: IManga) => {
                 setManga(data);
                 setTitle(data.title);
-                setSettings(getReaderSettingsFor(data));
+                setIsMangaLoading(false);
             });
     }, [mangaId]);
 

src/screens/Settings.tsx

@@ -6,6 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React, { useContext, useEffect, useState } from 'react';
+import AutoStoriesIcon from '@mui/icons-material/AutoStories';
 import List from '@mui/material/List';
 import ListAltIcon from '@mui/icons-material/ListAlt';
 import BackupIcon from '@mui/icons-material/Backup';
@@ -96,6 +97,12 @@ export default function Settings() {
                     </ListItemIcon>
                     <ListItemText primary="Categories" />
                 </ListItemLink>
+                <ListItemLink to="/settings/defaultReaderSettings">
+                    <ListItemIcon>
+                        <AutoStoriesIcon />
+                    </ListItemIcon>
+                    <ListItemText primary="Default Reader Settings" />
+                </ListItemLink>
                 <ListItemLink to="/settings/backup">
                     <ListItemIcon>
                         <BackupIcon />

src/screens/settings/DefaultReaderSettings.tsx

@@ -0,0 +1,60 @@
+/* eslint-disable @typescript-eslint/no-shadow */
+/* eslint-disable react/destructuring-assignment */
+/*
+ * 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 React, { useContext, useEffect } from 'react';
+import NavbarContext from 'components/context/NavbarContext';
+import { Box } from '@mui/system';
+import CircularProgress from '@mui/material/CircularProgress';
+import { requestUpdateServerMetadata } from 'util/metadata';
+import makeToast from 'components/util/Toast';
+import {
+    checkAndHandleMissingStoredReaderSettings,
+    getDefaultSettings,
+    useDefaultReaderSettings,
+} from 'util/readerSettings';
+import ReaderSettingsOptions from 'components/reader/ReaderSettingsOptions';
+
+export default function DefaultReaderSettings() {
+    const { setTitle, setAction } = useContext(NavbarContext);
+    useEffect(() => {
+        setTitle('Default Reader Settings');
+        setAction(<></>);
+    }, []);
+
+    const { metadata, settings, loading } = useDefaultReaderSettings();
+
+    const setSettingValue = (key: keyof IReaderSettings, value: string | boolean) => {
+        requestUpdateServerMetadata(metadata ?? {}, [[key, value]]).catch(() => makeToast('Failed to save the default reader settings to the server', 'warning'));
+    };
+
+    if (loading) {
+        return (
+            <Box sx={{
+                height: '100vh', width: '100vw', display: 'grid', placeItems: 'center',
+            }}
+            >
+                <CircularProgress thickness={5} />
+            </Box>
+        );
+    }
+
+    checkAndHandleMissingStoredReaderSettings({ meta: metadata }, 'server', getDefaultSettings())
+        .catch(() => {});
+
+    return (
+        <ReaderSettingsOptions
+            setSettingValue={setSettingValue}
+            staticNav={settings.staticNav}
+            showPageNumber={settings.showPageNumber}
+            loadNextonEnding={settings.loadNextonEnding}
+            readerType={settings.readerType}
+        />
+    );
+}