Merge pull request #1 from CD-Z/feature/export_to_epub_version_bump

Feature/export to epub version bump

android/app/src/main/assets/js/index.js

@@ -96,7 +96,7 @@ class Reader {
     );
     document.documentElement.style.setProperty(
       '--readerSettings-textSize',
-      settings.textSize + 'px',
+      settings.textSize + 'rem',
     );
     document.documentElement.style.setProperty(
       '--readerSettings-textColor',
@@ -108,7 +108,7 @@ class Reader {
     );
     document.documentElement.style.setProperty(
       '--readerSettings-lineHeight',
-      settings.lineHeight,
+      settings.lineHeight+"rem",
     );
     document.documentElement.style.setProperty(
       '--readerSettings-fontFamily',

package.json

@@ -9,13 +9,15 @@
     "start": "react-native start",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "prettier": "prettier --write \"./src/**/*.{js,jsx,ts,tsx}\" ./scripts",
-    "buildRelease": "node scripts/setEnvFile.cjs Release && cd android && ./gradlew clean && ./gradlew assembleRelease",
+    "buildRelease": "node scripts/convertCssToJs.cjs && node scripts/setEnvFile.cjs Release && cd android && ./gradlew clean && ./gradlew assembleRelease",
     "open": "open ./android/app/build/outputs/apk/release/",
     "strings": "node scripts/stringTypes.cjs",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "cssToJs": "node scripts/convertCssToJs.cjs"
   },
   "dependencies": {
-    "@cd-z/react-native-epub-creator": "^2.0.4",
+    "@cd-z/epub-constructor": "^3.0.1",
+    "@cd-z/react-native-epub-creator": "^3.0.0",
     "@gorhom/bottom-sheet": "^4.4.5",
     "@react-native-community/slider": "^4.4.2",
     "@react-native-cookies/cookies": "^6.2.1",
@@ -51,6 +53,7 @@
     "react-native-device-info": "^8.4.7",
     "react-native-drawer-layout": "^3.2.2",
     "react-native-error-boundary": "^1.1.16",
+    "react-native-file-access": "^3.1.0",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-lottie-splash-screen": "^1.0.1",
     "react-native-mmkv": "^2.11.0",

scripts/convertCssToJs.cjs

@@ -0,0 +1,29 @@
+const fs = require('fs');
+const path = require('path');
+
+const cssFilePath = path.resolve(
+  __dirname + '/../android/app/src/main/assets/css/',
+  'index.css',
+);
+const jsFilePath = path.resolve(
+  __dirname + '/../android/app/src/main/assets/css/',
+  'index.js',
+);
+
+fs.readFile(cssFilePath, 'utf8', (err, data) => {
+  if (err) {
+    console.error('Error reading CSS file:', err);
+    return;
+  }
+
+  const jsContent = `export default \`\n${data}\n\`;`;
+
+  fs.writeFile(jsFilePath, jsContent, 'utf8', err => {
+    if (err) {
+      console.error('Error writing JS file:', err);
+      return;
+    }
+
+    console.info('CSS file successfully converted to JS module.');
+  });
+});

src/components/List/List.tsx

@@ -87,13 +87,21 @@ const InfoItem = ({
   title,
   icon = 'information-outline',
   theme,
+  paddingHorizontal = 16,
 }: {
   title: string;
   icon?: string;
   theme: ThemeColors;
+  paddingHorizontal?: number;
 }) => (
-  <View style={styles.infoCtn}>
-    <MaterialIcon size={20} color={theme.onSurfaceVariant} name={icon} />
+  <View style={[styles.infoCtn, { paddingHorizontal }]}>
+    <MaterialIcon
+      size={20}
+      color={theme.onSurfaceVariant}
+      name={icon}
+      style={{ width: 20 }}
+    />
+
     <Text style={[styles.infoMsg, { color: theme.onSurfaceVariant }]}>
       {title}
     </Text>
@@ -159,10 +167,13 @@ const styles = StyleSheet.create({
   },
   infoCtn: {
     paddingVertical: 12,
-    paddingHorizontal: 16,
+    // paddingHorizontal: 16,
+    display: 'flex',
+    flexDirection: 'row',
   },
   infoMsg: {
-    marginTop: 12,
+    marginLeft: 6,
+    verticalAlign: 'middle',
     fontSize: 12,
   },
   iconCtn: {

src/screens/novel/components/ChooseEpubLocationModal.tsx → src/screens/novel/components/ExportToEpub/ChooseEpubLocationModal.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { Modal, TextInput, Text } from 'react-native-paper';
+import { Modal, TextInput, Text } from 'react-native-paper'; //@ts-ignore
 import { openDocumentTree } from 'react-native-saf-x';
 
 import { Button, List, SwitchItem } from '@components';
@@ -99,12 +99,14 @@ const ChooseEpubLocationModal: React.FC<ChooseEpubLocationModalProps> = ({
           value={useAppTheme.value}
           onPress={useAppTheme.toggle}
           theme={theme}
+          style={styles.switch}
         />
         <SwitchItem
           label={getString('novelScreen.convertToEpubModal.useCustomCSS')}
           value={useCustomCSS.value}
           onPress={useCustomCSS.toggle}
           theme={theme}
+          style={styles.switch}
         />
         <SwitchItem
           label={getString('novelScreen.convertToEpubModal.useCustomJS')}
@@ -114,11 +116,13 @@ const ChooseEpubLocationModal: React.FC<ChooseEpubLocationModalProps> = ({
           value={useCustomJS.value}
           onPress={useCustomJS.toggle}
           theme={theme}
+          style={styles.switch}
         />
       </View>
       <List.InfoItem
         title={getString('novelScreen.convertToEpubModal.chaptersWarning')}
         theme={theme}
+        paddingHorizontal={20}
       />
       <View style={styles.modalFooterCtn}>
         <Button title={getString('common.submit')} onPress={onSubmit} />
@@ -136,19 +140,18 @@ const styles = StyleSheet.create({
     borderRadius: 32,
   },
   settings: {
-    marginTop: 12,
-    padding: 24,
+    paddingBottom: 24,
+  },
+  switch: {
+    paddingHorizontal: 20,
   },
   modalHeaderCtn: {
     padding: 20,
-    paddingTop: 32,
-    paddingBottom: 0,
   },
   modalFooterCtn: {
     flexDirection: 'row-reverse',
-    paddingHorizontal: 20,
+    padding: 20,
     paddingTop: 8,
-    paddingBottom: 20,
   },
   modalTitle: {
     fontSize: 24,