From 769ff363525938c91631af19e2ba2aaf2fc0cc4c Mon Sep 17 00:00:00 2001
From: Nyagami <hoangquan05112002@gmail.com>
Date: Sat, 13 Jan 2024 22:02:30 +0700
Subject: [PATCH] custom js, css modal

---
 src/components/index.ts                       |   1 +
 .../Modals/CustomFileModal.tsx                | 130 +++++
 .../{ => Modals}/FontPickerModal.tsx          |   0
 .../Settings/CustomCSSSettings.tsx            | 110 +++++
 .../Settings/CustomJSSettings.tsx             |  93 ++++
 .../Settings/DisplaySettings.tsx              |  52 ++
 .../Settings/GeneralSettings.tsx              | 177 +++++++
 .../Settings/ReaderThemeSettings.tsx          | 174 +++++++
 .../SettingsReaderScreen.tsx                  | 466 ++----------------
 9 files changed, 783 insertions(+), 420 deletions(-)
 create mode 100644 src/screens/settings/SettingsReaderScreen/Modals/CustomFileModal.tsx
 rename src/screens/settings/SettingsReaderScreen/{ => Modals}/FontPickerModal.tsx (100%)
 create mode 100644 src/screens/settings/SettingsReaderScreen/Settings/CustomCSSSettings.tsx
 create mode 100644 src/screens/settings/SettingsReaderScreen/Settings/CustomJSSettings.tsx
 create mode 100644 src/screens/settings/SettingsReaderScreen/Settings/DisplaySettings.tsx
 create mode 100644 src/screens/settings/SettingsReaderScreen/Settings/GeneralSettings.tsx
 create mode 100644 src/screens/settings/SettingsReaderScreen/Settings/ReaderThemeSettings.tsx

diff --git a/src/components/index.ts b/src/components/index.ts
index 063eff7c..760fbb08 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -13,3 +13,4 @@ export { default as ColorPreferenceItem } from './ColorPreferenceItem/ColorPrefe
 export { default as LoadingMoreIndicator } from './LoadingMoreIndicator/LoadingMoreIndicator';
 export { Checkbox } from './Checkbox/Checkbox';
 export { RadioButton } from './RadioButton/RadioButton';
+export { default as ConfirmationDialog } from './ConfirmationDialog/ConfirmationDialog';
diff --git a/src/screens/settings/SettingsReaderScreen/Modals/CustomFileModal.tsx b/src/screens/settings/SettingsReaderScreen/Modals/CustomFileModal.tsx
new file mode 100644
index 00000000..a0d8d6f1
--- /dev/null
+++ b/src/screens/settings/SettingsReaderScreen/Modals/CustomFileModal.tsx
@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { Modal, overlay, TextInput } from 'react-native-paper';
+import { StorageAccessFramework } from 'expo-file-system';
+import * as DocumentPicker from 'expo-document-picker';
+
+import { Button } from '@components/index';
+
+import { showToast } from '@utils/showToast';
+import { useTheme } from '@hooks/persisted';
+import { getString } from '@strings/translations';
+
+interface CustomFileModal {
+  visible: boolean;
+  onDismiss: () => void;
+  defaultValue: string;
+  onSave: (val: string) => void;
+  title: string;
+  mimeType: 'text/css' | 'application/javascript';
+  openFileLabel: string;
+  placeholder?: string;
+  description?: string;
+}
+
+const CustomFileModal: React.FC<CustomFileModal> = ({
+  onDismiss,
+  visible,
+  defaultValue,
+  onSave,
+  title,
+  mimeType,
+  openFileLabel,
+  placeholder,
+  description,
+}) => {
+  const theme = useTheme();
+  const [text, setText] = useState('');
+
+  const openDocumentPicker = async () => {
+    try {
+      const file = await DocumentPicker.getDocumentAsync({
+        copyToCacheDirectory: false,
+        type: mimeType,
+      });
+
+      if (file.type === 'success') {
+        const content = await StorageAccessFramework.readAsStringAsync(
+          file.uri,
+        );
+
+        onSave(content.trim());
+        onDismiss();
+      }
+    } catch (error: any) {
+      showToast(error.message);
+    }
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      onDismiss={onDismiss}
+      contentContainerStyle={[
+        styles.modalContainer,
+        { backgroundColor: overlay(2, theme.surface) },
+      ]}
+    >
+      <Text style={[styles.modalTitle, { color: theme.onSurface }]}>
+        {title}
+      </Text>
+      <Text style={[{ color: theme.onSurfaceVariant }]}>{description}</Text>
+      <TextInput
+        multiline
+        mode="outlined"
+        defaultValue={defaultValue}
+        onChangeText={setText}
+        placeholder={placeholder}
+        placeholderTextColor={theme.onSurfaceVariant}
+        underlineColor={theme.outline}
+        style={[{ color: theme.onSurface }, styles.textInput]}
+        theme={{ colors: { ...theme } }}
+      />
+      <View style={styles.customCSSButtons}>
+        <Button
+          onPress={() => {
+            onSave(text.trim());
+            onDismiss();
+          }}
+          style={styles.button}
+          title={getString('common.save')}
+          mode="contained"
+        />
+        <Button
+          style={styles.button}
+          onPress={openDocumentPicker}
+          title={openFileLabel}
+        />
+      </View>
+    </Modal>
+  );
+};
+
+export default CustomFileModal;
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    margin: 30,
+    padding: 24,
+    borderRadius: 28,
+  },
+  textInput: {
+    height: 220,
+    borderRadius: 14,
+    marginTop: 16,
+    marginBottom: 8,
+    fontSize: 16,
+  },
+  modalTitle: {
+    fontSize: 24,
+    marginBottom: 16,
+  },
+  customCSSButtons: {
+    flexDirection: 'row-reverse',
+  },
+  button: {
+    marginTop: 16,
+    flex: 1,
+    marginHorizontal: 8,
+  },
+});
diff --git a/src/screens/settings/SettingsReaderScreen/FontPickerModal.tsx b/src/screens/settings/SettingsReaderScreen/Modals/FontPickerModal.tsx
similarity index 100%
rename from src/screens/settings/SettingsReaderScreen/FontPickerModal.tsx
rename to src/screens/settings/SettingsReaderScreen/Modals/FontPickerModal.tsx
diff --git a/src/screens/settings/SettingsReaderScreen/Settings/CustomCSSSettings.tsx b/src/screens/settings/SettingsReaderScreen/Settings/CustomCSSSettings.tsx
new file mode 100644
index 00000000..5d8696fa
--- /dev/null
+++ b/src/screens/settings/SettingsReaderScreen/Settings/CustomCSSSettings.tsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import { Portal } from 'react-native-paper';
+
+import { Button, List, ConfirmationDialog } from '@components';
+
+import { useBoolean } from '@hooks';
+import { useTheme, useChapterReaderSettings } from '@hooks/persisted';
+import { getString } from '@strings/translations';
+
+import CustomFileModal from '../Modals/CustomFileModal';
+
+const CustomCSSSettings = () => {
+  const theme = useTheme();
+  const { customCSS, setChapterReaderSettings } = useChapterReaderSettings();
+
+  const cssModal = useBoolean();
+  const clearCSSModal = useBoolean();
+
+  return (
+    <>
+      <View style={styles.header}>
+        <List.SubHeader theme={theme}>
+          {getString('moreScreen.settingsScreen.readerSettings.customCSS')}
+        </List.SubHeader>
+      </View>
+      <View style={styles.customCSSContainer}>
+        <Text numberOfLines={3} style={[{ color: theme.onSurface }]}>
+          {customCSS || 'Example: body {margin: 10px;}'}
+        </Text>
+        <View style={styles.customCSSButtons}>
+          <Button
+            onPress={cssModal.setTrue}
+            style={styles.marginLeftS}
+            title={getString('common.edit')}
+          />
+          <Button
+            onPress={clearCSSModal.setTrue}
+            title={getString('common.clear')}
+          />
+        </View>
+      </View>
+
+      {/* Modals */}
+      <Portal>
+        <CustomFileModal
+          visible={cssModal.value}
+          onDismiss={cssModal.setFalse}
+          defaultValue={customCSS}
+          mimeType="text/css"
+          title={getString(
+            'moreScreen.settingsScreen.readerSettings.customCSS',
+          )}
+          description={getString(
+            'moreScreen.settingsScreen.readerSettings.cssHint',
+          )}
+          placeholder="Example: body {margin: 10px;}"
+          openFileLabel={getString(
+            'moreScreen.settingsScreen.readerSettings.openCSSFile',
+          )}
+          onSave={text => setChapterReaderSettings({ customCSS: text })}
+        />
+        <ConfirmationDialog
+          title={getString(
+            'moreScreen.settingsScreen.readerSettings.clearCustomCSS',
+          )}
+          visible={clearCSSModal.value}
+          onSubmit={() => {
+            setChapterReaderSettings({ customCSS: '' });
+          }}
+          onDismiss={clearCSSModal.setFalse}
+          theme={theme}
+        />
+      </Portal>
+    </>
+  );
+};
+export default CustomCSSSettings;
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  bottomInset: {
+    paddingBottom: 40,
+  },
+  fontSizeL: {
+    fontSize: 16,
+  },
+  customCSSContainer: {
+    marginHorizontal: 16,
+    marginBottom: 8,
+  },
+  buttons: {
+    flex: 1,
+  },
+  marginLeftS: {
+    marginLeft: 8,
+  },
+  customCSSButtons: {
+    marginVertical: 8,
+    flex: 1,
+    flexDirection: 'row-reverse',
+  },
+  customThemeButton: {
+    marginHorizontal: 16,
+    marginBottom: 16,
+  },
+  header: { flexDirection: 'row', justifyContent: 'space-between' },
+});
diff --git a/src/screens/settings/SettingsReaderScreen/Settings/CustomJSSettings.tsx b/src/screens/settings/SettingsReaderScreen/Settings/CustomJSSettings.tsx
new file mode 100644
index 00000000..62a31631
--- /dev/null
+++ b/src/screens/settings/SettingsReaderScreen/Settings/CustomJSSettings.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { Portal } from 'react-native-paper';
+
+import { Button, List, ConfirmationDialog } from '@components/index';
+
+import { useBoolean } from '@hooks';
+import { useTheme, useChapterReaderSettings } from '@hooks/persisted';
+import { getString } from '@strings/translations';
+
+import CustomFileModal from '../Modals/CustomFileModal';
+
+const CustomJSSettings = () => {
+  const theme = useTheme();
+  const { customJS, setChapterReaderSettings } = useChapterReaderSettings();
+  const jsModal = useBoolean();
+  const clearJSModal = useBoolean();
+
+  return (
+    <>
+      <View style={styles.header}>
+        <List.SubHeader theme={theme}>
+          {getString('moreScreen.settingsScreen.readerSettings.customJS')}
+        </List.SubHeader>
+      </View>
+      <View style={styles.customJSContainer}>
+        <Text numberOfLines={3} style={[{ color: theme.onSurface }]}>
+          {customJS || 'Example: body {margin: 10px;}'}
+        </Text>
+        <View style={styles.customJSButtons}>
+          <Button
+            onPress={jsModal.setTrue}
+            style={styles.marginLeftS}
+            title={getString('common.edit')}
+          />
+          <Button
+            onPress={clearJSModal.setTrue}
+            title={getString('common.clear')}
+          />
+        </View>
+      </View>
+
+      {/* Modals */}
+      <Portal>
+        <CustomFileModal
+          visible={jsModal.value}
+          onDismiss={jsModal.setFalse}
+          defaultValue={customJS}
+          mimeType="application/javascript"
+          title={getString('moreScreen.settingsScreen.readerSettings.customJS')}
+          description={getString(
+            'moreScreen.settingsScreen.readerSettings.jsHint',
+          )}
+          placeholder="Example: document.getElementById('example');"
+          openFileLabel={getString(
+            'moreScreen.settingsScreen.readerSettings.openJSFile',
+          )}
+          onSave={text => setChapterReaderSettings({ customJS: text })}
+        />
+        <ConfirmationDialog
+          title={getString(
+            'moreScreen.settingsScreen.readerSettings.clearCustomJS',
+          )}
+          visible={clearJSModal.value}
+          onSubmit={() => {
+            setChapterReaderSettings({ customJS: '' });
+          }}
+          onDismiss={clearJSModal.setFalse}
+          theme={theme}
+        />
+      </Portal>
+    </>
+  );
+};
+export default CustomJSSettings;
+
+const styles = StyleSheet.create({
+  fontSizeL: {
+    fontSize: 16,
+  },
+  customJSContainer: {
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+  },
+  marginLeftS: {
+    marginLeft: 8,
+  },
+  customJSButtons: {
+    flex: 1,
+    flexDirection: 'row-reverse',
+  },
+  header: { flexDirection: 'row', justifyContent: 'space-between' },
+});
diff --git a/src/screens/settings/SettingsReaderScreen/Settings/DisplaySettings.tsx b/src/screens/settings/SettingsReaderScreen/Settings/DisplaySettings.tsx
new file mode 100644
index 00000000..424f1fc0
--- /dev/null
+++ b/src/screens/settings/SettingsReaderScreen/Settings/DisplaySettings.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { List, SwitchItem } from '@components/index';
+
+import { useChapterGeneralSettings, useTheme } from '@hooks/persisted';
+import { getString } from '@strings/translations';
+
+const DisplaySettings: React.FC = () => {
+  const theme = useTheme();
+
+  const {
+    fullScreenMode = true,
+    showScrollPercentage = true,
+    showBatteryAndTime = false,
+    setChapterGeneralSettings,
+  } = useChapterGeneralSettings();
+
+  return (
+    <>
+      <List.SubHeader theme={theme}>
+        {getString('novelScreen.bottomSheet.display')}
+      </List.SubHeader>
+      <SwitchItem
+        label={getString('readerScreen.bottomSheet.fullscreen')}
+        value={fullScreenMode}
+        onPress={() =>
+          setChapterGeneralSettings({ fullScreenMode: !fullScreenMode })
+        }
+        theme={theme}
+      />
+      <SwitchItem
+        label={getString('readerScreen.bottomSheet.showProgressPercentage')}
+        value={showScrollPercentage}
+        onPress={() =>
+          setChapterGeneralSettings({
+            showScrollPercentage: !showScrollPercentage,
+          })
+        }
+        theme={theme}
+      />
+      <SwitchItem
+        label={getString('readerScreen.bottomSheet.showBatteryAndTime')}
+        value={showBatteryAndTime}
+        onPress={() =>
+          setChapterGeneralSettings({ showBatteryAndTime: !showBatteryAndTime })
+        }
+        theme={theme}
+      />
+    </>
+  );
+};
+export default DisplaySettings;
diff --git a/src/screens/settings/SettingsReaderScreen/Settings/GeneralSettings.tsx b/src/screens/settings/SettingsReaderScreen/Settings/GeneralSettings.tsx
new file mode 100644
index 00000000..68f87dfa
--- /dev/null
+++ b/src/screens/settings/SettingsReaderScreen/Settings/GeneralSettings.tsx
@@ -0,0 +1,177 @@
+import {
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  useWindowDimensions,
+} from 'react-native';
+import React from 'react';
+
+import { defaultTo } from 'lodash-es';
+
+import { Button, List, SwitchItem } from '@components/index';
+
+import { useTheme, useChapterGeneralSettings } from '@hooks/persisted';
+import { getString } from '@strings/translations';
+
+const GeneralSettings: React.FC = () => {
+  const theme = useTheme();
+
+  const {
+    useVolumeButtons = false,
+    verticalSeekbar = true,
+    swipeGestures = false,
+    autoScroll = false,
+    autoScrollInterval = 10,
+    autoScrollOffset = null,
+    setChapterGeneralSettings,
+  } = useChapterGeneralSettings();
+
+  const areAutoScrollSettingsDefault =
+    autoScrollInterval === 10 && autoScrollOffset === null;
+
+  const { height: screenHeight } = useWindowDimensions();
+
+  const labelStyle = [styles.fontSizeL, { color: theme.onSurface }];
+  return (
+    <>
+      <List.SubHeader theme={theme}>
+        {getString('moreScreen.settingsScreen.generalSettings')}
+      </List.SubHeader>
+      <SwitchItem
+        label={getString('readerScreen.bottomSheet.verticalSeekbar')}
+        description={getString(
+          'moreScreen.settingsScreen.readerSettings.verticalSeekbarDesc',
+        )}
+        value={verticalSeekbar}
+        onPress={() =>
+          setChapterGeneralSettings({ verticalSeekbar: !verticalSeekbar })
+        }
+        theme={theme}
+      />
+      <SwitchItem
+        label={getString('readerScreen.bottomSheet.volumeButtonsScroll')}
+        value={useVolumeButtons}
+        onPress={() =>
+          setChapterGeneralSettings({ useVolumeButtons: !useVolumeButtons })
+        }
+        theme={theme}
+      />
+      <SwitchItem
+        label={getString('readerScreen.bottomSheet.swipeGestures')}
+        value={swipeGestures}
+        onPress={() =>
+          setChapterGeneralSettings({ swipeGestures: !swipeGestures })
+        }
+        theme={theme}
+      />
+      <SwitchItem
+        label={getString('readerScreen.bottomSheet.autoscroll')}
+        value={autoScroll}
+        onPress={() => setChapterGeneralSettings({ autoScroll: !autoScroll })}
+        theme={theme}
+      />
+      {autoScroll ? (
+        <>
+          <List.Divider theme={theme} />
+          <List.SubHeader theme={theme}>
+            {getString('readerScreen.bottomSheet.autoscroll')}
+          </List.SubHeader>
+          <View style={styles.autoScrollInterval}>
+            <Text style={[labelStyle, styles.paddingRightM]} numberOfLines={2}>
+              {getString(
+                'moreScreen.settingsScreen.readerSettings.autoScrollInterval',
+              )}
+            </Text>
+            <TextInput
+              style={labelStyle}
+              defaultValue={defaultTo(autoScrollInterval, 10).toString()}
+              keyboardType="numeric"
+              onChangeText={text => {
+                if (text) {
+                  setChapterGeneralSettings({
+                    autoScrollInterval: Number(text),
+                  });
+                }
+              }}
+            />
+          </View>
+          <View style={styles.autoScrollInterval}>
+            <Text style={[labelStyle, styles.paddingRightM]} numberOfLines={2}>
+              {getString(
+                'moreScreen.settingsScreen.readerSettings.autoScrollOffset',
+              )}
+            </Text>
+            <TextInput
+              style={labelStyle}
+              defaultValue={defaultTo(
+                autoScrollOffset,
+                Math.round(screenHeight),
+              ).toString()}
+              keyboardType="numeric"
+              onChangeText={text => {
+                if (text) {
+                  setChapterGeneralSettings({ autoScrollOffset: Number(text) });
+                }
+              }}
+            />
+          </View>
+          {!areAutoScrollSettingsDefault ? (
+            <View style={styles.customCSSButtons}>
+              <Button
+                style={styles.customThemeButton}
+                title={getString('common.reset')}
+                onPress={() => {
+                  setChapterGeneralSettings({ autoScrollInterval: 10 });
+                  setChapterGeneralSettings({ autoScrollOffset: null });
+                }}
+              />
+            </View>
+          ) : null}
+        </>
+      ) : null}
+    </>
+  );
+};
+export default GeneralSettings;
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  bottomInset: {
+    paddingBottom: 40,
+  },
+  fontSizeL: {
+    fontSize: 16,
+  },
+  autoScrollInterval: {
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  customThemeButton: {
+    marginHorizontal: 16,
+    marginBottom: 16,
+  },
+  customCSSContainer: {
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+  },
+  marginLeftS: {
+    marginLeft: 8,
+  },
+  customCSSButtons: {
+    flex: 1,
+    flexDirection: 'row-reverse',
+  },
+  paddingRightM: {
+    flex: 1,
+    paddingRight: 16,
+  },
+  label: {
+    fontSize: 16,
+  },
+});
diff --git a/src/screens/settings/SettingsReaderScreen/Settings/ReaderThemeSettings.tsx b/src/screens/settings/SettingsReaderScreen/Settings/ReaderThemeSettings.tsx
new file mode 100644
index 00000000..042156a0
--- /dev/null
+++ b/src/screens/settings/SettingsReaderScreen/Settings/ReaderThemeSettings.tsx
@@ -0,0 +1,174 @@
+import { StyleSheet, View } from 'react-native';
+import React from 'react';
+
+import { Button, ColorPreferenceItem, List } from '@components/index';
+
+import { useChapterReaderSettings, useTheme } from '@hooks/persisted';
+import { getString } from '@strings/translations';
+import ReaderTextAlignSelector from '@screens/reader/components/ReaderBottomSheet/ReaderTextAlignSelector';
+import ReaderTextSize from '../ReaderTextSize';
+import ReaderLineHeight from '@screens/reader/components/ReaderBottomSheet/ReaderLineHeight';
+import ReaderThemeSelector from '@screens/reader/components/ReaderBottomSheet/ReaderThemeSelector';
+import {
+  presetReaderThemes,
+  readerFonts,
+} from '@utils/constants/readerConstants';
+import { useBoolean } from '@hooks';
+import { Portal } from 'react-native-paper';
+import ColorPickerModal from '@components/ColorPickerModal/ColorPickerModal';
+import FontPickerModal from '../Modals/FontPickerModal';
+
+const ReaderThemeSettings = () => {
+  const theme = useTheme();
+  const readerSettings = useChapterReaderSettings();
+
+  const labelStyle = [styles.fontSizeL, { color: theme.onSurface }];
+  const readerFontPickerModal = useBoolean();
+  const readerBackgroundModal = useBoolean();
+  const readerTextColorModal = useBoolean();
+
+  const isCurrentThemeCustom = readerSettings.customThemes.some(
+    item =>
+      item.backgroundColor === readerSettings.theme &&
+      item.textColor === readerSettings.textColor,
+  );
+
+  const isCurrentThemePreset = presetReaderThemes.some(
+    item =>
+      item.backgroundColor === readerSettings.theme &&
+      item.textColor === readerSettings.textColor,
+  );
+
+  const currentFontName = readerFonts.find(
+    item => item.fontFamily === readerSettings.fontFamily,
+  )?.name;
+
+  return (
+    <>
+      <List.SubHeader theme={theme}>
+        {getString('moreScreen.settingsScreen.readerSettings.readerTheme')}
+      </List.SubHeader>
+      <ReaderThemeSelector
+        label={getString('moreScreen.settingsScreen.readerSettings.preset')}
+        labelStyle={labelStyle}
+      />
+      <ColorPreferenceItem
+        label={getString(
+          'moreScreen.settingsScreen.readerSettings.backgroundColor',
+        )}
+        description={readerSettings.theme}
+        onPress={readerBackgroundModal.setTrue}
+        theme={theme}
+      />
+      <ColorPreferenceItem
+        label={getString('moreScreen.settingsScreen.readerSettings.textColor')}
+        description={readerSettings.textColor}
+        onPress={readerTextColorModal.setTrue}
+        theme={theme}
+      />
+      {isCurrentThemeCustom ? (
+        <View style={styles.customCSSButtons}>
+          <Button
+            style={styles.customThemeButton}
+            title={getString(
+              'moreScreen.settingsScreen.readerSettings.deleteCustomTheme',
+            )}
+            onPress={() =>
+              readerSettings.deleteCustomReaderTheme({
+                backgroundColor: readerSettings.theme,
+                textColor: readerSettings.textColor,
+              })
+            }
+          />
+        </View>
+      ) : !isCurrentThemePreset ? (
+        <View style={styles.customCSSButtons}>
+          <Button
+            style={styles.customThemeButton}
+            title={getString(
+              'moreScreen.settingsScreen.readerSettings.saveCustomTheme',
+            )}
+            onPress={() =>
+              readerSettings.saveCustomReaderTheme({
+                backgroundColor: readerSettings.theme,
+                textColor: readerSettings.textColor,
+              })
+            }
+          />
+        </View>
+      ) : null}
+      <ReaderTextAlignSelector labelStyle={labelStyle} />
+      <ReaderTextSize labelStyle={labelStyle} />
+      <ReaderLineHeight labelStyle={labelStyle} />
+      <List.Item
+        title={getString('readerScreen.bottomSheet.fontStyle')}
+        description={currentFontName}
+        onPress={readerFontPickerModal.setTrue}
+        theme={theme}
+      />
+      {/*
+            Modals
+        */}
+      <Portal>
+        <ColorPickerModal
+          title={getString(
+            'moreScreen.settingsScreen.readerSettings.backgroundColor',
+          )}
+          visible={readerBackgroundModal.value}
+          color={readerSettings.theme}
+          closeModal={readerBackgroundModal.setFalse}
+          theme={theme}
+          onSubmit={color =>
+            readerSettings.setChapterReaderSettings({ theme: color })
+          }
+        />
+        <ColorPickerModal
+          title={getString(
+            'moreScreen.settingsScreen.readerSettings.textColor',
+          )}
+          visible={readerTextColorModal.value}
+          color={readerSettings.textColor}
+          closeModal={readerTextColorModal.setFalse}
+          theme={theme}
+          onSubmit={color =>
+            readerSettings.setChapterReaderSettings({ textColor: color })
+          }
+        />
+        <FontPickerModal
+          currentFont={readerSettings.fontFamily}
+          visible={readerFontPickerModal.value}
+          onDismiss={readerFontPickerModal.setFalse}
+        />
+      </Portal>
+    </>
+  );
+};
+export default ReaderThemeSettings;
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  bottomInset: {
+    paddingBottom: 40,
+  },
+  fontSizeL: {
+    fontSize: 16,
+  },
+  customCSSContainer: {
+    marginHorizontal: 16,
+    marginBottom: 8,
+  },
+  buttons: {
+    flex: 1,
+  },
+  customCSSButtons: {
+    marginVertical: 8,
+    flex: 1,
+    flexDirection: 'row-reverse',
+  },
+  customThemeButton: {
+    marginHorizontal: 16,
+    marginBottom: 16,
+  },
+});
diff --git a/src/screens/settings/SettingsReaderScreen/SettingsReaderScreen.tsx b/src/screens/settings/SettingsReaderScreen/SettingsReaderScreen.tsx
index 547ffaee..a92572f5 100644
--- a/src/screens/settings/SettingsReaderScreen/SettingsReaderScreen.tsx
+++ b/src/screens/settings/SettingsReaderScreen/SettingsReaderScreen.tsx
@@ -1,47 +1,21 @@
-import {
-  StyleSheet,
-  Text,
-  TextInput,
-  View,
-  ScrollView,
-  useWindowDimensions,
-} from 'react-native';
-import React, { useState } from 'react';
+import { View, ScrollView } from 'react-native';
+import React from 'react';
 
 import { useNavigation } from '@react-navigation/native';
-import { defaultTo } from 'lodash-es';
 import WebView from 'react-native-webview';
-import { Portal } from 'react-native-paper';
+import { dummyHTML } from './utils';
 
-import {
-  Appbar,
-  Button,
-  ColorPreferenceItem,
-  List,
-  SwitchItem,
-} from '@components/index';
-import ReaderThemeSelector from '@screens/reader/components/ReaderBottomSheet/ReaderThemeSelector';
-import ReaderTextAlignSelector from '@screens/reader/components/ReaderBottomSheet/ReaderTextAlignSelector';
-import ColorPickerModal from '@components/ColorPickerModal/ColorPickerModal';
-import FontPickerModal from './FontPickerModal';
-import ReaderLineHeight from '@screens/reader/components/ReaderBottomSheet/ReaderLineHeight';
-import ReaderTextSize from './ReaderTextSize';
+import { Appbar, List } from '@components/index';
 
-import {
-  useChapterGeneralSettings,
-  useChapterReaderSettings,
-  useTheme,
-} from '@hooks/persisted';
+import { useChapterReaderSettings, useTheme } from '@hooks/persisted';
 import { getString } from '@strings/translations';
 
-import { dummyHTML } from './utils';
-import { useBoolean } from '@hooks';
-import {
-  presetReaderThemes,
-  readerFonts,
-} from '@utils/constants/readerConstants';
-
-const READER_HEIGHT = 360;
+import GeneralSettings from './Settings/GeneralSettings';
+import CustomCSSSettings from './Settings/CustomCSSSettings';
+import CustomJSSettings from './Settings/CustomJSSettings';
+import DisplaySettings from './Settings/DisplaySettings';
+import ReaderThemeSettings from './Settings/ReaderThemeSettings';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export type TextAlignments =
   | 'left'
@@ -54,21 +28,17 @@ export type TextAlignments =
 const SettingsReaderScreen = () => {
   const theme = useTheme();
   const navigation = useNavigation();
+  const { bottom } = useSafeAreaInsets();
 
   const readerSettings = useChapterReaderSettings();
-  const {
-    useVolumeButtons,
-    verticalSeekbar,
-    swipeGestures,
-    autoScroll,
-    autoScrollInterval,
-    autoScrollOffset,
-    fullScreenMode,
-    showScrollPercentage,
-    showBatteryAndTime,
-    setChapterGeneralSettings,
-  } = useChapterGeneralSettings();
-
+  const READER_HEIGHT = 280;
+  const dummyChapterInfo = {
+    sourceId: 11,
+    chapterId: 99,
+    novelId: 20,
+    novelName: 'novel name',
+    chapterName: "chapter' name",
+  };
   const webViewCSS = `
   <style>
   body {
@@ -94,36 +64,6 @@ const SettingsReaderScreen = () => {
 
   const readerBackgroundColor = readerSettings.theme;
 
-  const readerBackgroundModal = useBoolean();
-  const readerTextColorModal = useBoolean();
-  const readerFontPickerModal = useBoolean();
-
-  const isCurrentThemeCustom = readerSettings.customThemes.some(
-    item =>
-      item.backgroundColor === readerSettings.theme &&
-      item.textColor === readerSettings.textColor,
-  );
-
-  const isCurrentThemePreset = presetReaderThemes.some(
-    item =>
-      item.backgroundColor === readerSettings.theme &&
-      item.textColor === readerSettings.textColor,
-  );
-
-  const currentFontName = readerFonts.find(
-    item => item.fontFamily === readerSettings.fontFamily,
-  )?.name;
-
-  const areAutoScrollSettingsDefault =
-    autoScrollInterval === 10 && autoScrollOffset === null;
-
-  const [customCSS, setcustomCSS] = useState(readerSettings.customCSS);
-  const [customJS, setcustomJS] = useState(readerSettings.customJS);
-
-  const { height: screenHeight } = useWindowDimensions();
-
-  const labelStyle = [styles.fontSizeL, { color: theme.onSurface }];
-
   return (
     <>
       <Appbar
@@ -146,13 +86,24 @@ const SettingsReaderScreen = () => {
                 ${webViewCSS}
               </head>
               <body>
-                <chapter>
+                <chapter 
+                  data-novel-id='${dummyChapterInfo.novelId}'
+                  data-chapter-id='${dummyChapterInfo.chapterId}'
+                >
                   ${dummyHTML}
-                  <script>
-                    async function fn(){${readerSettings.customJS}}
-                    document.addEventListener("DOMContentLoaded", fn);
-                  </script>
                 </chapter>
+                <script>
+                  async function fn(){
+                    let novelName = "${dummyChapterInfo.novelName}";
+                    let chapterName = "${dummyChapterInfo.chapterName}";
+                    let sourceId =${dummyChapterInfo.sourceId};
+                    let chapterId =${dummyChapterInfo.chapterId};
+                    let novelId =${dummyChapterInfo.novelId};
+                    let html = document.getElementsByTagName("chapter")[0].innerHTML;
+                    ${readerSettings.customJS}
+                  }
+                  document.addEventListener("DOMContentLoaded", fn);
+                </script>
               </body>
             </html>
             `,
@@ -160,346 +111,21 @@ const SettingsReaderScreen = () => {
         />
       </View>
 
-      <ScrollView
-        style={styles.flex}
-        contentContainerStyle={styles.bottomInset}
-      >
-        <SwitchItem
-          label={getString('readerScreen.bottomSheet.verticalSeekbar')}
-          description={getString(
-            'moreScreen.settingsScreen.readerSettings.verticalSeekbarDesc',
-          )}
-          value={verticalSeekbar}
-          onPress={() =>
-            setChapterGeneralSettings({ verticalSeekbar: !verticalSeekbar })
-          }
-          theme={theme}
-        />
-        <SwitchItem
-          label={getString('readerScreen.bottomSheet.volumeButtonsScroll')}
-          value={useVolumeButtons}
-          onPress={() =>
-            setChapterGeneralSettings({ useVolumeButtons: !useVolumeButtons })
-          }
-          theme={theme}
-        />
-        <SwitchItem
-          label={getString('readerScreen.bottomSheet.swipeGestures')}
-          value={swipeGestures}
-          onPress={() =>
-            setChapterGeneralSettings({ swipeGestures: !swipeGestures })
-          }
-          theme={theme}
-        />
-        <SwitchItem
-          label={getString('readerScreen.bottomSheet.autoscroll')}
-          value={autoScroll}
-          onPress={() => setChapterGeneralSettings({ autoScroll: !autoScroll })}
-          theme={theme}
-        />
-        {autoScroll ? (
-          <>
-            <List.Divider theme={theme} />
-            <List.SubHeader theme={theme}>
-              {getString('readerScreen.bottomSheet.autoscroll')}
-            </List.SubHeader>
-            <View style={styles.autoScrollInterval}>
-              <Text
-                style={[labelStyle, styles.paddingRightM]}
-                numberOfLines={2}
-              >
-                {getString(
-                  'moreScreen.settingsScreen.readerSettings.autoScrollInterval',
-                )}
-              </Text>
-              <TextInput
-                style={labelStyle}
-                defaultValue={defaultTo(autoScrollInterval, 10).toString()}
-                keyboardType="numeric"
-                onChangeText={text => {
-                  if (text) {
-                    setChapterGeneralSettings({
-                      autoScrollInterval: Number(text),
-                    });
-                  }
-                }}
-              />
-            </View>
-            <View style={styles.autoScrollInterval}>
-              <Text
-                style={[labelStyle, styles.paddingRightM]}
-                numberOfLines={2}
-              >
-                {getString(
-                  'moreScreen.settingsScreen.readerSettings.autoScrollOffset',
-                )}
-              </Text>
-              <TextInput
-                style={labelStyle}
-                defaultValue={defaultTo(
-                  autoScrollOffset,
-                  Math.round(screenHeight),
-                ).toString()}
-                keyboardType="numeric"
-                onChangeText={text => {
-                  if (text) {
-                    setChapterGeneralSettings({
-                      autoScrollOffset: Number(text),
-                    });
-                  }
-                }}
-              />
-            </View>
-            {!areAutoScrollSettingsDefault ? (
-              <View style={styles.customCSSButtons}>
-                <Button
-                  style={styles.customThemeButton}
-                  title={getString('common.reset')}
-                  onPress={() => {
-                    setChapterGeneralSettings({
-                      autoScrollInterval: 10,
-                      autoScrollOffset: null,
-                    });
-                  }}
-                />
-              </View>
-            ) : null}
-          </>
-        ) : null}
-        <>
+      <ScrollView>
+        <View style={{ paddingBottom: bottom }}>
+          <GeneralSettings />
           <List.Divider theme={theme} />
-          <List.SubHeader theme={theme}>
-            {getString('moreScreen.settingsScreen.readerSettings.customCSS')}
-          </List.SubHeader>
-          <View style={styles.customCSSContainer}>
-            <TextInput
-              style={[{ color: theme.onSurface }, styles.fontSizeL]}
-              value={customCSS}
-              onChangeText={text => setcustomCSS(text)}
-              placeholderTextColor={theme.onSurfaceVariant}
-              placeholder="Example: body { color: red; }"
-              multiline={true}
-            />
-            <View style={styles.customCSSButtons}>
-              <Button
-                onPress={() =>
-                  readerSettings.setChapterReaderSettings({
-                    customCSS: customCSS,
-                  })
-                }
-                style={styles.marginLeftS}
-                title={getString('common.save')}
-              />
-              <Button
-                onPress={() =>
-                  readerSettings.setChapterReaderSettings({ customCSS: '' })
-                }
-                title={getString('common.clear')}
-              />
-            </View>
-          </View>
-
+          <CustomCSSSettings />
           <List.Divider theme={theme} />
-          <List.SubHeader theme={theme}>
-            {/* {getString('moreScreen.settingsScreen.readerSettings.customJS')} */}
-            {'Custom JS'}
-          </List.SubHeader>
-          <View style={styles.customCSSContainer}>
-            <TextInput
-              style={[{ color: theme.onSurface }, styles.fontSizeL]}
-              value={customJS}
-              onChangeText={text => setcustomJS(text)}
-              placeholderTextColor={theme.onSurfaceVariant}
-              placeholder="Example: document.getElementById('example');"
-              multiline={true}
-            />
-            <View style={styles.customCSSButtons}>
-              <Button
-                onPress={() =>
-                  readerSettings.setChapterReaderSettings({
-                    customJS: customJS,
-                  })
-                }
-                style={styles.marginLeftS}
-                title={getString('common.save')}
-              />
-              <Button
-                onPress={() =>
-                  readerSettings.setChapterReaderSettings({ customJS: '' })
-                }
-                title={getString('common.clear')}
-              />
-            </View>
-          </View>
-        </>
-        <List.Divider theme={theme} />
-        <List.SubHeader theme={theme}>
-          {getString('novelScreen.bottomSheet.display')}
-        </List.SubHeader>
-        <SwitchItem
-          label={getString('readerScreen.bottomSheet.fullscreen')}
-          value={fullScreenMode}
-          onPress={() =>
-            setChapterGeneralSettings({ fullScreenMode: !fullScreenMode })
-          }
-          theme={theme}
-        />
-        <SwitchItem
-          label={getString('readerScreen.bottomSheet.showProgressPercentage')}
-          value={showScrollPercentage}
-          onPress={() =>
-            setChapterGeneralSettings({
-              showScrollPercentage: !showScrollPercentage,
-            })
-          }
-          theme={theme}
-        />
-        <SwitchItem
-          label={getString('readerScreen.bottomSheet.showBatteryAndTime')}
-          value={showBatteryAndTime}
-          onPress={() =>
-            setChapterGeneralSettings({
-              showBatteryAndTime: !showBatteryAndTime,
-            })
-          }
-          theme={theme}
-        />
-        <List.Divider theme={theme} />
-        <List.SubHeader theme={theme}>
-          {getString('moreScreen.settingsScreen.readerSettings.readerTheme')}
-        </List.SubHeader>
-        <ReaderThemeSelector
-          label={getString('moreScreen.settingsScreen.readerSettings.preset')}
-          labelStyle={labelStyle}
-        />
-        <ColorPreferenceItem
-          label={getString(
-            'moreScreen.settingsScreen.readerSettings.backgroundColor',
-          )}
-          description={readerSettings.theme}
-          onPress={readerBackgroundModal.setTrue}
-          theme={theme}
-        />
-        <ColorPreferenceItem
-          label={getString(
-            'moreScreen.settingsScreen.readerSettings.textColor',
-          )}
-          description={readerSettings.textColor}
-          onPress={readerTextColorModal.setTrue}
-          theme={theme}
-        />
-        {isCurrentThemeCustom ? (
-          <View style={styles.customCSSButtons}>
-            <Button
-              style={styles.customThemeButton}
-              title={getString(
-                'moreScreen.settingsScreen.readerSettings.deleteCustomTheme',
-              )}
-              onPress={() =>
-                readerSettings.deleteCustomReaderTheme({
-                  backgroundColor: readerSettings.theme,
-                  textColor: readerSettings.textColor,
-                })
-              }
-            />
-          </View>
-        ) : !isCurrentThemePreset ? (
-          <View style={styles.customCSSButtons}>
-            <Button
-              style={styles.customThemeButton}
-              title={getString(
-                'moreScreen.settingsScreen.readerSettings.saveCustomTheme',
-              )}
-              onPress={() =>
-                readerSettings.saveCustomReaderTheme({
-                  backgroundColor: readerSettings.theme,
-                  textColor: readerSettings.textColor,
-                })
-              }
-            />
-          </View>
-        ) : null}
-        <ReaderTextAlignSelector labelStyle={labelStyle} />
-        <ReaderTextSize labelStyle={labelStyle} />
-        <ReaderLineHeight labelStyle={labelStyle} />
-        <List.Item
-          title={getString('readerScreen.bottomSheet.fontStyle')}
-          description={currentFontName}
-          onPress={readerFontPickerModal.setTrue}
-          theme={theme}
-        />
+          <CustomJSSettings />
+          <List.Divider theme={theme} />
+          <DisplaySettings />
+          <List.Divider theme={theme} />
+          <ReaderThemeSettings />
+        </View>
       </ScrollView>
-      <Portal>
-        <ColorPickerModal
-          title={getString(
-            'moreScreen.settingsScreen.readerSettings.backgroundColor',
-          )}
-          visible={readerBackgroundModal.value}
-          color={readerSettings.theme}
-          closeModal={readerBackgroundModal.setFalse}
-          theme={theme}
-          onSubmit={color =>
-            readerSettings.setChapterReaderSettings({ theme: color })
-          }
-        />
-        <ColorPickerModal
-          title={getString(
-            'moreScreen.settingsScreen.readerSettings.textColor',
-          )}
-          visible={readerTextColorModal.value}
-          color={readerSettings.textColor}
-          closeModal={readerTextColorModal.setFalse}
-          theme={theme}
-          onSubmit={color =>
-            readerSettings.setChapterReaderSettings({ textColor: color })
-          }
-        />
-        <FontPickerModal
-          currentFont={readerSettings.fontFamily}
-          visible={readerFontPickerModal.value}
-          onDismiss={readerFontPickerModal.setFalse}
-        />
-      </Portal>
     </>
   );
 };
 
 export default SettingsReaderScreen;
-
-const styles = StyleSheet.create({
-  flex: {
-    flex: 1,
-  },
-  bottomInset: {
-    paddingBottom: 40,
-  },
-  fontSizeL: {
-    fontSize: 16,
-  },
-  autoScrollInterval: {
-    paddingHorizontal: 16,
-    paddingBottom: 8,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  customThemeButton: {
-    marginHorizontal: 16,
-    marginBottom: 16,
-  },
-  customCSSContainer: {
-    paddingHorizontal: 16,
-    paddingBottom: 8,
-  },
-  marginLeftS: {
-    marginLeft: 8,
-  },
-  customCSSButtons: {
-    flex: 1,
-    flexDirection: 'row-reverse',
-  },
-  paddingRightM: {
-    flex: 1,
-    paddingRight: 16,
-  },
-});