Feature/settings add flaresolverr (#568)

* [Codegen] Update to server changes * Set "dialogTitle" by default to "settingTitle" for "NumberSetting" * Add FlareSolverr to settings * [VersionMapping] Require server version "r1477" for preview * Replace static strings with translation keys
Suwayomi · Jan 26, 2024 · 18ca66c · 18ca66c
1 parent 771d6be
commit 18ca66c
Show file tree

Hide file tree

Showing 13 changed files with 152 additions and 22 deletions.
diff --git a/src/components/reader/ReaderSettingsOptions.tsx b/src/components/reader/ReaderSettingsOptions.tsx
@@ -88,7 +88,6 @@ export function ReaderSettingsOptions({
             {fitPageToWindowEligible && !fitPageToWindow && (
                 <NumberSetting
                     settingTitle={t('reader.settings.label.reader_width')}
-                    dialogTitle={t('reader.settings.label.reader_width')}
                     settingValue={`${readerWidth}%`}
                     value={readerWidth}
                     minValue={10}

diff --git a/src/components/settings/NumberSetting.tsx b/src/components/settings/NumberSetting.tsx
@@ -31,7 +31,7 @@ type BaseProps = {
     minValue?: number;
     maxValue?: number;
     stepSize?: number;
-    dialogTitle: string;
+    dialogTitle?: string;
     dialogDescription?: string;
     dialogDisclaimer?: string;
     valueUnit: string;
@@ -57,7 +57,7 @@ export const NumberSetting = ({
     minValue,
     maxValue,
     stepSize,
-    dialogTitle,
+    dialogTitle = settingTitle,
     valueUnit,
     handleUpdate,
     showSlider,

diff --git a/src/components/settings/downloads/DownloadAheadSetting.tsx b/src/components/settings/downloads/DownloadAheadSetting.tsx
@@ -67,7 +67,6 @@ export const DownloadAheadSetting = () => {
                 maxValue={MAX_LIMIT}
                 defaultValue={DEFAULT_LIMIT}
                 showSlider
-                dialogTitle={t('download.settings.download_ahead.label.unread_chapters_to_download')}
                 dialogDescription={t('download.settings.download_ahead.label.description')}
                 dialogDisclaimer={t('download.settings.download_ahead.label.disclaimer')}
                 valueUnit={t('chapter.title')}

diff --git a/src/components/settings/globalUpdate/GlobalUpdateSettingsInterval.tsx b/src/components/settings/globalUpdate/GlobalUpdateSettingsInterval.tsx
@@ -66,7 +66,6 @@ export const GlobalUpdateSettingsInterval = () => {
                 maxValue={MAX_INTERVAL_HOURS}
                 defaultValue={DEFAULT_INTERVAL_HOURS}
                 showSlider
-                dialogTitle={t('library.settings.global_update.auto_update.interval.label.title')}
                 valueUnit={t('global.time.hour_short')}
                 handleUpdate={updateSetting}
                 disabled={!doAutoUpdates}

diff --git a/src/components/settings/webUI/WebUIUpdateIntervalSetting.tsx b/src/components/settings/webUI/WebUIUpdateIntervalSetting.tsx
@@ -71,7 +71,6 @@ export const WebUIUpdateIntervalSetting = ({ disabled = false }: { disabled?: bo
                 maxValue={MAX_VALUE}
                 defaultValue={DEFAULT_VALUE}
                 showSlider
-                dialogTitle={t('settings.webui.auto_update.label.interval')}
                 valueUnit={t('global.time.hour_short')}
                 handleUpdate={updateSetting}
                 disabled={disabled || !shouldAutoUpdate}

diff --git a/src/i18n/locale/en.json b/src/i18n/locale/en.json
@@ -392,7 +392,17 @@
       }
     },
     "time": {
-      "hour_short": "h"
+      "hour_short": "h",
+      "minutes": {
+        "minute_one": "Minute",
+        "minute_other": "Minutes",
+        "value": "{{count}} $t(global.time.minutes.minute, lowercase)"
+      },
+      "seconds": {
+        "second_one": "Second",
+        "second_other": "Seconds",
+        "value": "{{count}} $t(global.time.seconds.second, lowercase)"
+      }
     },
     "update": {
       "label": {
@@ -792,6 +802,42 @@
         },
         "title": "Authentication"
       },
+      "cloudflare": {
+        "flaresolverr": {
+          "enabled": {
+            "label": {
+              "description": "See <2>FlareSolverr</2> for information on how to set it up",
+              "title": "FlareSolverr enabled"
+            }
+          },
+          "session": {
+            "name": {
+              "label": {
+                "title": "FlareSolverr session name"
+              }
+            },
+            "ttl": {
+              "label": {
+                "description": "FlareSolverr will automatically rotate expired sessions based on the TTL provided in minutes",
+                "title": "FlareSolverr session TTL"
+              }
+            }
+          },
+          "timeout": {
+            "label": {
+              "description": "How much time FlareSolverr has to handle the request",
+              "title": "FlareSolverr request timeout"
+            }
+          },
+          "url": {
+            "label": {
+              "description": "The address of the FlareSolverr server",
+              "title": "FlareSolverr server url"
+            }
+          }
+        },
+        "title": "Cloudflare bypass"
+      },
       "local_source": {
         "path": {
           "label": {

diff --git a/src/lib/graphql/Fragments.ts b/src/lib/graphql/Fragments.ts
@@ -522,5 +522,12 @@ export const SERVER_SETTINGS = gql`
 
         # local source
         localSourcePath
+
+        # Cloudflare bypass
+        flareSolverrEnabled
+        flareSolverrUrl
+        flareSolverrTimeout
+        flareSolverrSessionName
+        flareSolverrSessionTtl
     }
 `;
diff --git a/src/lib/graphql/generated/graphql.ts b/src/lib/graphql/generated/graphql.ts
diff --git a/src/screens/Settings.tsx b/src/screens/Settings.tsx
@@ -115,7 +115,6 @@ export function Settings() {
                 minValue={100}
                 maxValue={1000}
                 stepSize={10}
-                dialogTitle={t('settings.label.manga_item_width')}
                 valueUnit="px"
                 showSlider
                 handleUpdate={setItemWidth}

diff --git a/src/screens/settings/Backup.tsx b/src/screens/settings/Backup.tsx
@@ -281,8 +281,7 @@ export function Backup() {
                         minValue={1}
                         maxValue={31}
                         stepSize={1}
-                        dialogTitle="Interval"
-                        valueUnit="Day"
+                        valueUnit={t('global.date.label.day')}
                         showSlider
                         handleUpdate={(interval: number) => updateSetting('backupInterval', interval)}
                     />
@@ -294,8 +293,7 @@ export function Backup() {
                         minValue={0}
                         maxValue={1000}
                         stepSize={1}
-                        dialogTitle="Cleanup"
-                        valueUnit="Day"
+                        valueUnit={t('global.date.label.day')}
                         showSlider
                         handleUpdate={(ttl: number) => updateSetting('backupTTL', ttl)}
                     />

diff --git a/src/screens/settings/ExtensionSettings.tsx b/src/screens/settings/ExtensionSettings.tsx
@@ -74,7 +74,6 @@ export const ExtensionSettings = () => {
                 maxValue={20}
                 showSlider
                 stepSize={1}
-                dialogTitle={t('settings.server.requests.sources.parallel.label.title')}
                 handleUpdate={(parallelSources) => updateSetting('maxSourcesInParallel', parallelSources)}
             />
             <MutableListSetting

diff --git a/src/screens/settings/ServerSettings.tsx b/src/screens/settings/ServerSettings.tsx
@@ -6,9 +6,9 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation, Trans } from 'react-i18next';
 import { useContext, useEffect } from 'react';
-import { List, ListItem, ListItemText, Switch } from '@mui/material';
+import { Link, List, ListItem, ListItemText, Switch } from '@mui/material';
 import ListSubheader from '@mui/material/ListSubheader';
 import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
@@ -30,6 +30,11 @@ type ServerSettingsType = Pick<
     | 'basicAuthEnabled'
     | 'basicAuthUsername'
     | 'basicAuthPassword'
+    | 'flareSolverrEnabled'
+    | 'flareSolverrTimeout'
+    | 'flareSolverrUrl'
+    | 'flareSolverrSessionName'
+    | 'flareSolverrSessionTtl'
 >;
 
 const extractServerSettings = (settings: GqlServerSettings): ServerSettingsType => ({
@@ -44,6 +49,11 @@ const extractServerSettings = (settings: GqlServerSettings): ServerSettingsType
     basicAuthEnabled: settings.basicAuthEnabled,
     basicAuthUsername: settings.basicAuthUsername,
     basicAuthPassword: settings.basicAuthPassword,
+    flareSolverrEnabled: settings.flareSolverrEnabled,
+    flareSolverrTimeout: settings.flareSolverrTimeout,
+    flareSolverrUrl: settings.flareSolverrUrl,
+    flareSolverrSessionName: settings.flareSolverrSessionName,
+    flareSolverrSessionTtl: settings.flareSolverrSessionTtl,
 });
 
 export const ServerSettings = () => {
@@ -113,7 +123,6 @@ export const ServerSettings = () => {
                 <NumberSetting
                     settingTitle={t('settings.server.address.server.label.port')}
                     settingValue={serverSettings?.port.toString()}
-                    dialogTitle={t('settings.server.address.server.label.port')}
                     handleUpdate={(port) => updateSetting('port', port)}
                     value={serverSettings?.port ?? 4567}
                     defaultValue={4567}
@@ -177,6 +186,82 @@ export const ServerSettings = () => {
                     disabled={!serverSettings?.basicAuthEnabled}
                 />
             </List>
+            <List
+                subheader={
+                    <ListSubheader component="div" id="server-settings-clouadflare-bypass">
+                        {t('settings.server.cloudflare.title')}
+                    </ListSubheader>
+                }
+            >
+                <ListItem>
+                    <ListItemText
+                        primary={t('settings.server.cloudflare.flaresolverr.enabled.label.title')}
+                        secondary={
+                            <Trans i18nKey="settings.server.cloudflare.flaresolverr.enabled.label.description">
+                                See{' '}
+                                <Link
+                                    href="https://github.com/FlareSolverr/FlareSolverr?tab=readme-ov-file#installation"
+                                    target="_blank"
+                                    rel="noreferrer"
+                                >
+                                    FlareSolverr
+                                </Link>{' '}
+                                for information on how to set it up
+                            </Trans>
+                        }
+                    />
+                    <Switch
+                        edge="end"
+                        checked={!!serverSettings?.flareSolverrEnabled}
+                        onChange={(e) => updateSetting('flareSolverrEnabled', e.target.checked)}
+                    />
+                </ListItem>
+                <TextSetting
+                    settingName={t('settings.server.cloudflare.flaresolverr.url.label.title')}
+                    dialogDescription={t('settings.server.cloudflare.flaresolverr.url.label.description')}
+                    value={serverSettings?.flareSolverrUrl}
+                    handleChange={(url) => updateSetting('flareSolverrUrl', url)}
+                />
+                <NumberSetting
+                    settingTitle={t('settings.server.cloudflare.flaresolverr.timeout.label.title')}
+                    settingValue={
+                        serverSettings?.flareSolverrTimeout !== undefined
+                            ? t('global.time.seconds.value', { count: serverSettings.flareSolverrTimeout })
+                            : undefined
+                    }
+                    dialogDescription={t('settings.server.cloudflare.flaresolverr.timeout.label.description')}
+                    value={serverSettings?.flareSolverrTimeout ?? 60}
+                    defaultValue={60}
+                    minValue={20}
+                    maxValue={60 * 5}
+                    stepSize={1}
+                    showSlider
+                    valueUnit={t('global.time.seconds.second_other')}
+                    handleUpdate={(timeout) => updateSetting('flareSolverrTimeout', timeout)}
+                />
+                <TextSetting
+                    settingName={t('settings.server.cloudflare.flaresolverr.session.name.label.title')}
+                    value={serverSettings?.flareSolverrSessionName}
+                    handleChange={(sessionName) => updateSetting('flareSolverrSessionName', sessionName)}
+                />
+                <NumberSetting
+                    settingTitle={t('settings.server.cloudflare.flaresolverr.session.ttl.label.title')}
+                    settingValue={
+                        serverSettings?.flareSolverrTimeout !== undefined
+                            ? t('global.time.minutes.value', { count: serverSettings.flareSolverrSessionTtl })
+                            : undefined
+                    }
+                    dialogDescription={t('settings.server.cloudflare.flaresolverr.session.ttl.label.description')}
+                    value={serverSettings?.flareSolverrSessionTtl ?? 15}
+                    defaultValue={15}
+                    minValue={1}
+                    maxValue={60}
+                    stepSize={1}
+                    showSlider
+                    valueUnit={t('global.time.minutes.minute_other')}
+                    handleUpdate={(sessionTTL) => updateSetting('flareSolverrSessionTtl', sessionTTL)}
+                />
+            </List>
             <List
                 subheader={
                     <ListSubheader component="div" id="server-settings-misc">

diff --git a/versionToServerVersionMapping.json b/versionToServerVersionMapping.json
@@ -1,6 +1,6 @@
 [
   {
     "uiVersion": "PREVIEW",
-    "serverVersion": "r1462"
+    "serverVersion": "r1477"
   }
 ]