feat: custom UserAgent

src/screens/settings/SettingsAdvancedScreen.tsx

@@ -1,8 +1,15 @@
 import React, { useState } from 'react';
 
-import { Dialog, Portal } from 'react-native-paper';
+import {
+  Dialog,
+  Modal,
+  Portal,
+  Text,
+  TextInput,
+  overlay,
+} from 'react-native-paper';
 
-import { useTheme } from '@hooks/persisted';
+import { useTheme, useUserAgent } from '@hooks/persisted';
 import { showToast } from '@utils/showToast';
 
 import { deleteCachedNovels } from '@database/queries/NovelQueries';
@@ -19,10 +26,13 @@ import { importEpub } from '@services/epub/import';
 import { AdvancedSettingsScreenProps } from '@navigators/types';
 import { useMMKVString } from 'react-native-mmkv';
 import { BACKGROUND_ACTION } from '@services/constants';
+import { StyleSheet, View } from 'react-native';
+import { getUserAgentSync } from 'react-native-device-info';
 
 const AdvancedSettings = ({ navigation }: AdvancedSettingsScreenProps) => {
   const theme = useTheme();
-
+  const { userAgent, setUserAgent } = useUserAgent();
+  const [userAgentInput, setUserAgentInput] = useState(userAgent);
   /**
    * Confirm Clear Database Dialog
    */
@@ -40,6 +50,12 @@ const AdvancedSettings = ({ navigation }: AdvancedSettingsScreenProps) => {
     setFalse: hideDeleteReadChaptersDialog,
   } = useBoolean();
 
+  const {
+    value: userAgentModalVisible,
+    setTrue: showUserAgentModal,
+    setFalse: hideUserAgentModal,
+  } = useBoolean();
+
   const [hasAction] = useMMKVString(BACKGROUND_ACTION);
 
   return (
@@ -74,6 +90,12 @@ const AdvancedSettings = ({ navigation }: AdvancedSettingsScreenProps) => {
           theme={theme}
           disabled={Boolean(hasAction)}
         />
+        <List.Item
+          title="User Agent"
+          description={userAgent}
+          onPress={showUserAgentModal}
+          theme={theme}
+        />
       </List.Section>
       <Portal>
         <ConfirmationDialog
@@ -147,9 +169,78 @@ const AdvancedSettings = ({ navigation }: AdvancedSettingsScreenProps) => {
             </Button>
           </Dialog.Actions>
         </Dialog>
+        <Modal
+          visible={userAgentModalVisible}
+          onDismiss={hideUserAgentModal}
+          contentContainerStyle={[
+            styles.modalContainer,
+            { backgroundColor: overlay(2, theme.surface) },
+          ]}
+        >
+          <Text style={[styles.modalTitle, { color: theme.onSurface }]}>
+            User Agent
+          </Text>
+          <Text style={[{ color: theme.onSurfaceVariant }]}>{userAgent}</Text>
+          <TextInput
+            multiline
+            mode="outlined"
+            defaultValue={userAgent}
+            onChangeText={text => setUserAgentInput(text.trim())}
+            placeholderTextColor={theme.onSurfaceDisabled}
+            underlineColor={theme.outline}
+            style={[{ color: theme.onSurface }, styles.textInput]}
+            theme={{ colors: { ...theme } }}
+          />
+          <View style={styles.buttonGroup}>
+            <Button
+              onPress={() => {
+                setUserAgent(userAgentInput);
+                hideUserAgentModal();
+              }}
+              style={styles.button}
+              title={getString('common.save')}
+              mode="contained"
+            />
+            <Button
+              style={styles.button}
+              onPress={() => {
+                setUserAgent(getUserAgentSync());
+                hideUserAgentModal();
+              }}
+              title={getString('common.reset')}
+            />
+          </View>
+        </Modal>
       </Portal>
     </>
   );
 };
 
 export default AdvancedSettings;
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    margin: 30,
+    padding: 24,
+    borderRadius: 28,
+  },
+  textInput: {
+    height: 120,
+    borderRadius: 14,
+    marginTop: 16,
+    marginBottom: 8,
+    fontSize: 12,
+  },
+  modalTitle: {
+    fontSize: 24,
+    marginBottom: 16,
+  },
+  buttonGroup: {
+    flexDirection: 'row-reverse',
+  },
+  button: {
+    marginTop: 16,
+    flex: 1,
+    marginHorizontal: 8,
+  },
+});