fix chapter.page when containing special character (#1015 )

* fix page when containing special character * page always defaults to 1 * AND page = ?
Update plugin sanbox (#1014 )
2024-03-26 22:29:19 +07:00 · 2024-03-26 17:46:38 +07:00 · 2024-03-24 13:55:23 +07:00 · 2024-03-23 11:50:35 +07:00 · 2024-03-21 16:37:07 +07:00 · 2024-03-20 13:37:55 +07:00
273 changed files with 17718 additions and 13626 deletions
@@ -1,6 +1,6 @@
 module.exports = {
  root: true,
-  extends: '@react-native-community',
+  extends: '@react-native',
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  overrides: [
@@ -1,4 +1,4 @@
-name: CI
+name: Build
 on:
  push:
    branches:
@@ -1,4 +1,4 @@
-name: CI
+name: Lint
 on:
  push:
    branches:
@@ -1 +0,0 @@
-18
@@ -3,7 +3,7 @@ import { enableFreeze } from 'react-native-screens';

 enableFreeze(true);

-import React, { useEffect } from 'react';
+import React from 'react';
 import { StatusBar } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import LottieSplashScreen from 'react-native-lottie-splash-screen';
@@ -14,11 +14,10 @@ import BackgroundService from 'react-native-background-actions';

 import { createTables } from '@database/db';
 import AppErrorBoundary from '@components/AppErrorBoundary/AppErrorBoundary';
-import { collectPlugins } from '@plugins/pluginManager';
+import { deserializePlugins } from '@plugins/pluginManager';

 import Main from './src/navigators/Main';
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
-import { usePlugins } from '@hooks/persisted';
 import { MMKVStorage } from '@utils/mmkv/mmkv';
 import { BACKGROUND_ACTION } from '@services/constants';

@@ -32,17 +31,13 @@ Notifications.setNotificationHandler({
  },
 });

-const App = () => {
-  const { refreshPlugins } = usePlugins();
-  useEffect(() => {
-    createTables();
-    collectPlugins().then(() => LottieSplashScreen.hide());
-    refreshPlugins();
-    if (!BackgroundService.isRunning()) {
-      MMKVStorage.delete(BACKGROUND_ACTION);
-    }
-  }, []);
+createTables();
+deserializePlugins().then(() => LottieSplashScreen.hide());
+if (!BackgroundService.isRunning()) {
+  MMKVStorage.delete(BACKGROUND_ACTION);
+}

+const App = () => {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <AppErrorBoundary>
@@ -1,8 +1,6 @@
 apply plugin: "com.android.application"
 apply plugin: "com.facebook.react"

-import com.android.build.OutputFile
-
 /**
 * This is the configuration block to customize your React Native Android app.
 * By default you don't need to apply any configuration, just uncomment the lines you need.
@@ -13,8 +11,8 @@ react {
    // root = file("../")
    //   The folder where the react-native NPM package is. Default is ../node_modules/react-native
    // reactNativeDir = file("../node_modules/react-native")
-    //   The folder where the react-native Codegen package is. Default is ../node_modules/react-native-codegen
-    // codegenDir = file("../node_modules/react-native-codegen")
+    //   The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
+    // codegenDir = file("../node_modules/@react-native/codegen")
    //   The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
    // cliFile = file("../node_modules/react-native/cli.js")

@@ -52,14 +50,6 @@ react {
    // hermesFlags = ["-O", "-output-source-map"]
 }

-/**
- * Set this to true to create four separate APKs instead of one,
- * one for each native architecture. This is useful if you don't
- * use App Bundles (https://developer.android.com/guide/app-bundle/)
- * and want to have separate APKs to upload to the Play Store.
- */
-def enableSeparateBuildPerCPUArchitecture = false
-
 /**
 * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
 */
@@ -78,16 +68,6 @@ def enableProguardInReleaseBuilds = false
 */
 def jscFlavor = 'org.webkit:android-jsc:+'

-/**
- * Private function to get the list of Native Architectures you want to build.
- * This reads the value from reactNativeArchitectures in your gradle.properties
- * file and works together with the --active-arch-only flag of react-native run-android.
- */
-def reactNativeArchitectures() {
-    def value = project.getProperties().get("reactNativeArchitectures")
-    return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
-}
-
 ext {
    versionMajor = 2
    versionMinor = 0
@@ -107,14 +87,6 @@ android {
        versionCode ((((versionMajor << 10) | versionMinor) << 11) | versionPatch)
        versionName "$versionMajor.$versionMinor.$versionPatch"
    }
-    splits {
-        abi {
-            reset()
-            enable enableSeparateBuildPerCPUArchitecture
-            universalApk false  // If true, also generate a universal APK
-            include (*reactNativeArchitectures())
-        }
-    }
    signingConfigs {
        debug {
            storeFile file('debug.keystore')
@@ -135,21 +107,6 @@ android {
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
-
-    // applicationVariants are e.g. debug, release
-    applicationVariants.all { variant ->
-        variant.outputs.each { output ->
-            // For each separate APK per architecture, set a unique version code as described here:
-            // https://developer.android.com/studio/build/configure-apk-splits.html
-            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
-            def abi = output.getFilter(OutputFile.ABI)
-            if (abi != null) {  // null for the universal-debug, universal-release variants
-                output.versionCodeOverride =
-                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
-            }
-
-        }
-    }
 }

 dependencies {
@@ -157,11 +114,6 @@ dependencies {
    implementation("com.facebook.react:react-android")
    implementation 'com.facebook.soloader:soloader:0.10.5+'

-    implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0")
-
-    implementation project(':react-native-lottie-splash-screen')
-    implementation project(':react-native-fs')
-
    def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
    def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
    def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
@@ -1,20 +1,20 @@
 {
  "project_info": {
-    "project_number": "1093792259511",
-    "project_id": "lnreader-test",
-    "storage_bucket": "lnreader-test.appspot.com"
+    "project_number": "523872485654",
+    "project_id": "lnreader-backup",
+    "storage_bucket": "lnreader-backup.appspot.com"
  },
  "client": [
    {
      "client_info": {
-        "mobilesdk_app_id": "1:1093792259511:android:aab0078285720642369c32",
+        "mobilesdk_app_id": "1:523872485654:android:169cd062458db962ce1037",
        "android_client_info": {
          "package_name": "com.rajarsheechatterjee.LNReader"
        }
      },
      "oauth_client": [
        {
-          "client_id": "1093792259511-9kftu28l4ku1k3cco7pn83jbrlsc4fr5.apps.googleusercontent.com",
+          "client_id": "523872485654-14jtut8orr7dbrk2chea279d7k8889sr.apps.googleusercontent.com",
          "client_type": 1,
          "android_info": {
            "package_name": "com.rajarsheechatterjee.LNReader",
@@ -22,20 +22,20 @@
          }
        },
        {
-          "client_id": "1093792259511-ml5ko1gmnvihqb2j9nnteehoeom2umnt.apps.googleusercontent.com",
+          "client_id": "523872485654-liarmq8nl0g5an2cki3bpg9jc0d8a21j.apps.googleusercontent.com",
          "client_type": 3
        }
      ],
      "api_key": [
        {
-          "current_key": "AIzaSyDuumsGzm6iE4u7E8pkk8FcNH9wL5GzoI8"
+          "current_key": "AIzaSyBH_j-0Jyo9aFJ_KV8Nr3te2hs_L_ZYhrE"
        }
      ],
      "services": {
        "appinvite_service": {
          "other_platform_oauth_client": [
            {
-              "client_id": "1093792259511-ml5ko1gmnvihqb2j9nnteehoeom2umnt.apps.googleusercontent.com",
+              "client_id": "523872485654-liarmq8nl0g5an2cki3bpg9jc0d8a21j.apps.googleusercontent.com",
              "client_type": 3
            }
          ]
@@ -44,4 +44,4 @@
    }
  ],
  "configuration_version": "1"
-}
+}
@@ -14,13 +14,7 @@
 	<uses-permission android:name="android.permission.WAKE_LOCK" />


-	<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
-	<uses-permission android:name="android.permission.READ_PHONE_STATE" />
 	<uses-permission android:name="android.permission.VIBRATE" />
-	<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
-	<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
-	<uses-permission android:name="com.google.android.c2dm.permission.RECEIVE" />
-
 	<queries>
 		<intent>
 			<action android:name="android.intent.action.TTS_SERVICE" />
@@ -32,6 +26,7 @@
 		android:largeHeap="true"
 		android:label="@string/app_name"
 		android:icon="@mipmap/ic_launcher"
+		android:roundIcon="@mipmap/ic_launcher"
 		android:allowBackup="true"
 		android:theme="@style/AppTheme"
 		android:usesCleartextTraffic="true">
@@ -5,12 +5,23 @@ html {
    word-wrap: break-word;
 }

+::selection {
+    color: var(--theme-onSecondary);
+    background-color: var(--theme-secondary);
+}
+
+::-moz-selection {
+    color: var(--theme-onSecondary);
+    background-color: var(--theme-secondary);
+}
+
 body {
    padding-left: var(--readerSettings-padding);
    padding-right: var(--readerSettings-padding);
    padding-bottom: 40px;

    font-size: var(--readerSettings-textSize);
+    background-color: var(--readerSettings-theme);
    color: var(--readerSettings-textColor);
    text-align: var(--readerSettings-textAlign);
    line-height: var(--readerSettings-lineHeight);
@@ -37,6 +48,10 @@ img {
    max-width: 100%;
 }

+.hidden {
+    visibility: hidden;
+}
+
 .nextButton,
 .infoText {
    width: 100%;
@@ -47,6 +62,7 @@ img {
    font-family: var(--readerSettings-fontFamily);
    font-size: 16px;
    border-width: 0;
+    user-select: none;
 }

 .nextButton {
@@ -76,47 +92,99 @@ img {
    display: none;
 }

-#ScrollBar {
+#ToolWrapper {
    position: fixed;
+    top: 50%;
+    transform: translateY(-50%);
    right: 5vw;
-    top: 27.5vh;
-    height: 45vh;
+}
+
+#ToolWrapper.horizontal {
+    top: unset;
+    right: unset;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 120px;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+}
+
+@media only screen and (min-width: 500px) {
+  #ToolWrapper.horizontal {
+    bottom: 80px;
+  }
+}
+
+#ToolWrapper.hidden {
+    opacity: 0;
+    right: 0;
+}
+
+#ToolWrapper.hidden.horizontal {
+    opacity: 0;
+    bottom: 0;
+    right: unset;
+}
+
+#TTS-Controller {
+    display: block;
+}
+
+#ToolWrapper.horizontal > #TTS-Controller {
+    margin-left: 4px;
+}
+
+#TTS-Controller button{
+    background: var(--theme-surface-0-9);
+    border: 0;
+}
+
+#TTS-Controller svg {
+    fill: var(--theme-onSurface);
+}
+
+#ToolWrapper > #ScrollBar {
+    margin-top: 8px;
    width: 2.4rem;
+    height: 45vh;
+    min-height: 200px;
    border-radius: 1.2rem;
    background-color: var(--theme-surface-0-9);
    touch-action: none;
+    font-size: 16px;
+    user-select: none;
 }

-.scrollbar-item {
+#ScrollBar > .scrollbar-item {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--theme-onSurface);
 }

-.scrollbar-item.scrollbar-text {
+#ScrollBar > .scrollbar-item.scrollbar-text {
    height: 12.5%;
 }

-.scrollbar-item#scrollbar-slider {
+#ScrollBar > .scrollbar-item#scrollbar-slider {
    height: 75%;
    align-items: unset;
 }

-#scrollbar-track {
+#ScrollBar #scrollbar-track {
    width: 0.1rem;
    height: 100%;
    background-color: var(--theme-outline);
 }

-#scrollbar-progress {
-    width: 0.1rem;
+#ScrollBar #scrollbar-progress {
+    width: 100%;
    height: 0;
    background-color: var(--theme-primary);
-    transform: translateX(-0.1rem);
 }

-#scrollbar-thumb-wrapper {
+#ScrollBar #scrollbar-thumb-wrapper {
    position: relative;
    top: 100%;
    height: 2rem;
@@ -127,7 +195,7 @@ img {
    transform: translate(-0.95rem, -1rem);
 }

-#scrollbar-thumb {
+#ScrollBar #scrollbar-thumb {
    top: 100%;
    height: 1rem;
    width: 1rem;
@@ -135,21 +203,217 @@ img {
    background-color: var(--theme-primary);
 }

-#reader-percentage {
-    position: fixed;
-    padding-top: 0.5rem;
-    min-height: 2rem;
-    width: 100%;
-    background-color: var(--readerSettings-theme);
-    color: var(--readerSettings-textColor);
-    bottom: 0;
-    left: 0;
-    right: 0;
-    font-size: 1rem;
-    text-align: center;
+#ToolWrapper.horizontal > #ScrollBar{
+    display: flex;
+    width: 80vw;
+    height: 2.4rem;
+    min-height: unset;
+    align-items: center;
+    margin-top: unset;
 }

-t-t-s.tts-highlight {
+#ToolWrapper.horizontal > #ScrollBar > .scrollbar-item {
+    display: flex;
+    justify-content: center;
+    color: var(--theme-onSurface);
+}
+
+#ToolWrapper.horizontal > #ScrollBar > .scrollbar-item.scrollbar-text {
+    width: 12.5%;
+}
+
+#ToolWrapper.horizontal > #ScrollBar > .scrollbar-item#scrollbar-slider {
+    width: 75%;
+    align-items: center;
+}
+
+#ToolWrapper.horizontal > #ScrollBar #scrollbar-track {
+    height: 0.1rem;
+    width: 100%;
+    background-color: var(--theme-outline);
+}
+
+#ToolWrapper.horizontal > #ScrollBar #scrollbar-progress {
+    height: 100%;
+    width: 0;
+    background-color: var(--theme-primary);
+}
+
+#ToolWrapper.horizontal > #ScrollBar #scrollbar-thumb-wrapper {
+    position: relative;
+    left: 100%;
+    height: 2rem;
+    width: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform: translate(-0.95rem, -1rem);
+}
+
+#ToolWrapper.horizontal > #ScrollBar #scrollbar-thumb {
+    top: 100%;
+    height: 1rem;
+    width: 1rem;
+    border-radius: 100%;
+    background-color: var(--theme-primary);
+}
+
+#reader-footer-wrapper {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+}
+
+#reader-footer {
+    display: flex;
+    flex: 3;
+    padding: 0.2rem 2rem;
+    background-color: var(--readerSettings-theme);
+    color: var(--readerSettings-textColor);
+    font-size: 1rem;
+    text-align: center;
+    user-select: none;
+}
+
+.reader-footer-item {
+    flex: 1;
+}
+.reader-footer-item:first-child {
+    text-align: left;
+}
+.reader-footer-item:last-child {
+    text-align: right;
+}
+
+tts.highlight {
    color: var(--theme-onSecondary);
    background-color: var(--theme-secondary);
 }
+
+.contextMenu {
+    position: absolute;
+    height: 0;
+    overflow: hidden;
+    background: var(--theme-surface-0-9);
+    -webkit-backdrop-filter: blur(1px);
+    backdrop-filter: blur(1px);
+    position: fixed;
+    top: var(--top);
+    left: var(--left);
+    -webkit-animation: menuAnimation 0.4s 0s both;
+    animation: menuAnimation 0.4s 0s both;
+    transform-origin: left;
+    list-style: none;
+    margin: 4px;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    z-index: 999999999;
+}
+
+.contextMenu-item {
+    padding: 4px,
+}
+
+.contextMenu-button {
+    color: var(--theme-onSurface);
+    background: 0;
+    border: 0;
+    white-space: nowrap;
+    width: 100%;
+    border-radius: 4px;
+    padding: 6px 24px 6px 7px;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    width: 100%;
+    -webkit-animation: menuItemAnimation 0.2s 0s both;
+    animation: menuItemAnimation 0.2s 0s both;
+    font-family: var(--readerSettings-fontFamily);
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: var(--theme-rippleColor);
+}
+
+.contextMenu-button svg {
+    fill: var(--theme-onSurface);
+}
+.contextMenu-button span {
+    margin-left: 4px;
+}
+
+@-webkit-keyframes menuAnimation {
+    0% {
+        opacity: 0;
+        transform: scale(0.5);
+    }
+
+    100% {
+        height: var(--height);
+        opacity: 1;
+        border-radius: 8px;
+        transform: scale(1);
+    }
+}
+
+@keyframes menuAnimation {
+    0% {
+        opacity: 0;
+        transform: scale(0.5);
+    }
+
+    100% {
+        height: var(--height);
+        opacity: 1;
+        border-radius: 8px;
+        transform: scale(1);
+    }
+}
+
+@-webkit-keyframes menuItemAnimation {
+    0% {
+        opacity: 0;
+        transform: translateX(-10px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes menuItemAnimation {
+    0% {
+        opacity: 0;
+        transform: translateX(-10px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+#Image-Modal {
+    position: fixed;
+    left: 0;
+    top: 0;
+    user-select: none;
+}
+
+#Image-Modal.show {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    background-color: var(--theme-surface-0-9);
+    align-items: center;
+    justify-content: center;
+    overflow: scroll;
+}
+
+#Image img {
+    display: block;
+    width: 100%;
+}
@@ -1,13 +1,42 @@
+/**
+ * https://fonts.google.com/icons
+ * Filled
+ * other settings are default
+ */
+const copyIcon =
+  '<svg height="24" viewBox="0 -960 960 960" width="24"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Z"/></svg>';
+const volumeIcon =
+  '<svg height="24" viewBox="0 -960 960 960" width="24"><path d="M560-131v-82q90-26 145-100t55-168q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 127-78 224.5T560-131ZM120-360v-240h160l200-200v640L280-360H120Zm440 40v-322q47 22 73.5 66t26.5 96q0 51-26.5 94.5T560-320Z"/></svg>';
+const selectAllIcon =
+  '<svg height="24" viewBox="0 -960 960 960" width="24"><path d="M280-280v-400h400v400H280Zm80-80h240v-240H360v240ZM200-200v80q-33 0-56.5-23.5T120-200h80Zm-80-80v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm80-160h-80q0-33 23.5-56.5T200-840v80Zm80 640v-80h80v80h-80Zm0-640v-80h80v80h-80Zm160 640v-80h80v80h-80Zm0-640v-80h80v80h-80Zm160 640v-80h80v80h-80Zm0-640v-80h80v80h-80Zm160 640v-80h80q0 33-23.5 56.5T760-120Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80q33 0 56.5 23.5T840-760h-80Z"/></svg>';
+const translateIcon =
+  '<svg height="24" viewBox="0 -960 960 960" width="24"><path d="m476-80 182-480h84L924-80h-84l-43-122H603L560-80h-84ZM160-200l-56-56 202-202q-35-35-63.5-80T190-640h84q20 39 40 68t48 58q33-33 68.5-92.5T484-720H40v-80h280v-80h80v80h280v80H564q-21 72-63 148t-83 116l96 98-30 82-122-125-202 201Zm468-72h144l-72-204-72 204Z"/></svg>';
+const resumeIcon =
+  '<svg height="24" viewBox="0 -960 960 960" width="24"><path d="M240-240v-480h80v480h-80Zm160 0 400-240-400-240v480Z"/></svg>';
+const pauseIcon =
+  '<svg height="24" viewBox="0 -960 960 960" width="24"><path d="M560-200v-560h160v560H560Zm-320 0v-560h160v560H240Z"/></svg>';
+const stopIcon =
+  '<svg height="24" viewBox="0 -960 960 960" width="24"><path d="M320-320h320v-320H320v320ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>';
+const selectVolumeIcon =
+  '<svg height="24" viewBox="0 -960 960 960" width="24"><path d="M560-131v-82q90-26 145-100t55-168q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 127-78 224.5T560-131Zm-80-29L280-360H120v-240h160l200-200v640Zm80-160v-322q47 22 73.5 66t26.5 96q0 51-26.5 94.5T560-320ZM40-680v-240h240v80H120v160H40ZM680-40v-80h160v-160h80v240H680Z"/></svg>';
+/**
+ * @type {import("./type").Reader}
+ */
 class Reader {
  constructor() {
-    this.percentage =
-      showScrollPercentage && document.getElementById('reader-percentage');
+    this.selection = window.getSelection();
+    this.viewport = document.querySelector('meta[name=viewport]');
+    this.footerWrapper = document.getElementById('reader-footer-wrapper');
+    this.percentage = document.getElementById('reader-percentage');
+    this.battery = document.getElementById('reader-battery');
+    this.time = document.getElementById('reader-time');
    this.paddingTop = parseInt(
      getComputedStyle(document.querySelector('html')).getPropertyValue(
        'padding-top',
      ),
    );
    this.chapter = document.querySelector('chapter');
+    this.rawHTML = this.chapter.innerHTML;
    this.chapterHeight = this.chapter.scrollHeight + this.paddingTop;
    this.layoutHeight = window.innerHeight;
    this.pluginId = this.chapter.getAttribute('data-plugin-id');
@@ -17,38 +46,156 @@ class Reader {
      () =>
        this.post({
          type: 'save',
-          data: {
-            offsetY: window.scrollY,
-            percentage: parseInt(
-              ((window.scrollY + this.layoutHeight) / this.chapterHeight) * 100,
-            ),
-          },
+          data: parseInt(
+            ((window.scrollY + this.layoutHeight) / this.chapterHeight) * 100,
+          ),
        }),
      autoSaveInterval,
    );
+    this.time.innerText = new Date().toLocaleTimeString(undefined, {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false,
+    });
+    this.timeInterval = setInterval(() => {
+      this.time.innerText = new Date().toLocaleTimeString(undefined, {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false,
+      });
+    }, 60000);
+    this.updateBatteryLevel(batteryLevel);
+    this.updateGeneralSettings(initSettings);
  }

  refresh = () => {
    this.chapterHeight = this.chapter.scrollHeight + this.paddingTop;
  };
  post = obj => window.ReactNativeWebView.postMessage(JSON.stringify(obj));
+  updateReaderSettings = settings => {
+    document.documentElement.style.setProperty(
+      '--readerSettings-theme',
+      settings.theme,
+    );
+    document.documentElement.style.setProperty(
+      '--readerSettings-padding',
+      settings.padding + '%',
+    );
+    document.documentElement.style.setProperty(
+      '--readerSettings-textSize',
+      settings.textSize + 'px',
+    );
+    document.documentElement.style.setProperty(
+      '--readerSettings-textColor',
+      settings.textColor,
+    );
+    document.documentElement.style.setProperty(
+      '--readerSettings-textAlign',
+      settings.textAlign,
+    );
+    document.documentElement.style.setProperty(
+      '--readerSettings-lineHeight',
+      settings.lineHeight,
+    );
+    document.documentElement.style.setProperty(
+      '--readerSettings-fontFamily',
+      settings.fontFamily,
+    );
+    new FontFace(
+      settings.fontFamily,
+      'url("file:///android_asset/fonts/' + settings.fontFamily + '.ttf")',
+    )
+      .load()
+      .then(function (loadedFont) {
+        document.fonts.add(loadedFont);
+      });
+  };
+  updateGeneralSettings = settings => {
+    this.showScrollPercentage = settings.showScrollPercentage;
+    this.showBatteryAndTime = settings.showBatteryAndTime;
+    this.verticalSeekbar = settings.verticalSeekbar;
+    this.bionicReading = settings.bionicReading;
+    if (this.bionicReading) {
+      this.chapter.innerHTML = textVide.textVide(this.rawHTML);
+    } else {
+      this.chapter.innerHTML = this.rawHTML;
+    }
+    if (settings.swipeGestures) {
+      swipeHandler.enable();
+    } else {
+      swipeHandler.disable();
+    }
+    if (!this.showScrollPercentage && !this.showBatteryAndTime) {
+      this.footerWrapper.classList.add('d-none');
+    } else {
+      this.footerWrapper.classList.remove('d-none');
+      if (this.showScrollPercentage) {
+        this.percentage.classList.remove('hidden');
+      } else {
+        this.percentage.classList.add('hidden');
+      }
+      if (this.showBatteryAndTime) {
+        this.battery.classList.remove('hidden');
+        this.time.classList.remove('hidden');
+      } else {
+        this.battery.classList.add('hidden');
+        this.time.classList.add('hidden');
+      }
+    }
+    if (!this.verticalSeekbar) {
+      toolWrapper.$.classList.add('horizontal');
+    } else {
+      toolWrapper.$.classList.remove('horizontal');
+    }
+    if (scrollHandler) {
+      scrollHandler.refresh();
+      scrollHandler.update();
+    }
+  };
+  updateBatteryLevel = level => {
+    this.battery.innerText = Math.ceil(level * 100) + '%';
+  };
 }
+
+class ToolWrapper {
+  constructor() {
+    this.$ = document.getElementById('ToolWrapper');
+    this.$.onclick = e => {
+      e.stopPropagation();
+    };
+    this.tools = [];
+  }
+  hide = () => {
+    this.$.classList.add('hidden');
+    this.visible = false;
+  };
+  show = () => {
+    this.$.classList.remove('hidden');
+    this.visible = true;
+    for (const tool of this.tools) {
+      tool.onShow?.();
+    }
+  };
+}
+
 class ScrollHandler {
-  constructor(reader) {
+  constructor(reader, toolWrapper) {
    this.reader = reader;
+    this.toolWrapper = toolWrapper;
    this.$ = document.getElementById('ScrollBar');
    this.$.innerHTML = `
-        <div class="scrollbar-item scrollbar-text d-none" id="scrollbar-percentage">
+        <div class="scrollbar-item scrollbar-text" id="scrollbar-percentage">
          0
        </div>
        <div class="scrollbar-item" id="scrollbar-slider">
          <div id="scrollbar-track">
-          </div>
-          <div id="scrollbar-progress">
-            <div id="scrollbar-thumb-wrapper"> 
-              <div id="scrollbar-thumb"></div>
+            <div id="scrollbar-progress">
+              <div id="scrollbar-thumb-wrapper"> 
+                <div id="scrollbar-thumb"></div>
+              </div>
            </div>
          </div>
+          
        </div>
        <div class="scrollbar-item scrollbar-text">
          100
@@ -59,15 +206,18 @@ class ScrollHandler {
    this.thumb = this.$.querySelector('#scrollbar-thumb-wrapper');
    this.slider = this.$.querySelector('#scrollbar-slider');
    this.sliderHeight = this.slider.clientHeight;
-    this.sliderOffsetY = this.slider.offsetTop + this.$.offsetTop;
+    this.sliderOffsetY = this.slider.getBoundingClientRect().top;
    this.lock = false;
-    this.visible = false; // scrollbar
    window.onscroll = () => !this.lock && this.update();
    this.thumb.ontouchstart = () => (this.lock = true);
    this.thumb.ontouchend = () => (this.lock = false);
    this.thumb.ontouchmove = e => {
      const ratio =
-        (e.changedTouches[0].clientY - this.sliderOffsetY) / this.sliderHeight;
+        ((this.reader.verticalSeekbar
+          ? e.changedTouches[0].clientY
+          : e.changedTouches[0].clientX) -
+          this.sliderOffsetY) /
+        this.sliderHeight;
      this.update(ratio < 0 ? 0 : ratio);
    };
  }
@@ -80,8 +230,14 @@ class ScrollHandler {
      ratio = 1;
    }
    const percentage = parseInt(ratio * 100);
-    if (this.visible) {
-      this.progress.style.height = percentage + '%';
+    if (this.toolWrapper.visible) {
+      if (this.reader.verticalSeekbar) {
+        this.progress.style.height = percentage + '%';
+        this.progress.style.width = '100%';
+      } else {
+        this.progress.style.height = '100%';
+        this.progress.style.width = percentage + '%';
+      }
      this.percentage.innerText = percentage;
    }
    if (this.lock) {
@@ -95,30 +251,25 @@ class ScrollHandler {
    }
  };
  refresh = () => {
-    this.sliderHeight = this.slider.clientHeight;
-    this.sliderOffsetY = this.slider.offsetTop + this.$.offsetTop;
+    if (this.reader.verticalSeekbar) {
+      this.sliderHeight = this.slider.clientHeight;
+      this.sliderOffsetY = this.slider.getBoundingClientRect().top;
+    } else {
+      this.sliderHeight = this.slider.clientWidth;
+      this.sliderOffsetY = this.slider.getBoundingClientRect().left;
+    }
  };
-  hide = () => {
-    this.$.classList.add('d-none');
-    this.visible = false;
-  };
-  show = () => {
+  onShow = () => {
    this.reader.refresh();
-    this.visible = true;
-    this.$.classList.remove('d-none');
    this.refresh();
    this.update();
  };
 }

 class SwipeHandler {
-  constructor(reader) {
-    this.reader = reader;
+  constructor() {
    this.initialX = null;
    this.initialY = null;
-    if (swipeGestures) {
-      this.enable();
-    }
  }

  touchStartHandler = e => {
@@ -126,12 +277,26 @@ class SwipeHandler {
    this.initialY = e.changedTouches[0].screenY;
  };

+  /**
+   * @param {TouchEvent} e
+   */
  touchEndHandler = e => {
    let diffX = e.changedTouches[0].screenX - this.initialX;
    let diffY = e.changedTouches[0].screenY - this.initialY;
-    if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 10) {
-      e.preventDefault();
-      this.reader.post({ type: diffX < 0 ? 'next' : 'prev' });
+    if (
+      e.target.id?.startsWith('scrollbar') ||
+      e.target.id === 'Image-Modal-img'
+    ) {
+      return;
+    }
+    if (Math.abs(diffX) > Math.abs(diffY) * 2 && Math.abs(diffX) > 180) {
+      if (diffX < 0 && this.initialX >= window.innerWidth / 2) {
+        e.preventDefault();
+        reader.post({ type: 'next' });
+      } else if (diffX > 0 && this.initialX <= window.innerWidth / 2) {
+        e.preventDefault();
+        reader.post({ type: 'prev' });
+      }
    }
  };

@@ -146,36 +311,348 @@ class SwipeHandler {
  };
 }

+/**
+ * @type {import('./type').TextToSpeech}
+ */
 class TextToSpeech {
  constructor(reader) {
    this.reader = reader;
-    this.elements = this.reader.chapter.querySelectorAll('t-t-s');
-    this.previous = null;
-  }
-  play = index => {
-    if (index >= 0 && index < this.elements.length) {
-      if (this.previous !== null) {
-        this.unhighlight(this.previous);
+    (this.leaf = this.reader.chapter), (this.TTSWrapper = null); // swap these 2 elements
+    this.TTSEle = null;
+    this.reading = false;
+    this.$ = document.getElementById('TTS-Controller');
+    this.$.classList.add('d-none');
+    this.$.onclick = () => {
+      if (this.reading) {
+        this.pause();
+      } else {
+        this.resume();
      }
-      this.highlight(index);
-      this.previous = index;
+    };
+  }
+
+  start = () => {
+    this.$.innerHTML = `<button>${pauseIcon}</button>`;
+    this.$.classList.remove('d-none');
+    this.stop();
+    this.next();
+  };
+
+  startHere = () => {
+    this.$.innerHTML = `<button>${pauseIcon}</button>`;
+    this.$.classList.remove('d-none');
+    this.stop();
+    if (this.reader.selection.type === 'Range') {
+      if (this.leaf && this.TTSWrapper) {
+        this.TTSWrapper.replaceWith(this.leaf);
+      }
+      this.leaf = this.reader.selection.anchorNode;
+      this.makeLeafSpeakable();
+      this.speak();
+    } else {
+      this.next();
    }
  };

-  highlight = index => {
-    if (index >= 0 && index < this.elements.length) {
-      this.elements[index].classList.add('tts-highlight');
+  resume = () => {
+    this.$.innerHTML = `<button>${pauseIcon}</button>`;
+    this.next();
+  };
+
+  findLeaf() {
+    while (this.leaf.firstChild) {
+      this.leaf = this.leaf.firstChild;
+    }
+  }
+
+  findNextLeaf() {
+    if (this.reader.chapter.isSameNode(this.leaf)) {
+      this.findLeaf();
+    } else if (this.leaf.nextSibling) {
+      this.leaf = this.leaf.nextSibling;
+      this.findLeaf();
+    } else {
+      this.leaf = this.leaf.parentNode;
+      if (this.reader.chapter.isSameNode(this.leaf)) {
+        return;
+      }
+      this.findNextLeaf();
+    }
+  }
+
+  readable() {
+    return (
+      this.leaf.nodeName === '#text' && /[^\s\n,.?!;":“”]/.test(this.leaf.data)
+    );
+  }
+
+  findNextTextNode() {
+    if (this.leaf && this.TTSWrapper) {
+      this.TTSWrapper.replaceWith(this.leaf);
+      this.TTSWrapper = null;
+    }
+    do {
+      this.findNextLeaf();
+    } while (!this.readable() && !this.reader.chapter.isSameNode(this.leaf));
+    if (this.reader.chapter.isSameNode(this.leaf)) {
+      return;
+    }
+    this.makeLeafSpeakable();
+  }
+
+  makeLeafSpeakable() {
+    this.TTSWrapper = document.createElement('tts-wrapper');
+    this.TTSWrapper.innerHTML = this.leaf.data.replace(
+      /([^\n,.?!;":“”]+)/g,
+      matched => {
+        if (matched.trim().length) {
+          return `<tts>${matched}</tts>`;
+        }
+        return matched;
+      },
+    );
+    this.TTSEle = this.TTSWrapper.firstElementChild;
+    this.leaf.replaceWith(this.TTSWrapper);
+  }
+
+  next = () => {
+    try {
+      if (this.TTSEle) {
+        this.TTSEle.classList.remove('highlight');
+      }
+      if (this.reading) {
+        if (this.TTSEle && this.TTSEle.nextElementSibling) {
+          this.TTSEle = this.TTSEle.nextElementSibling;
+        } else {
+          this.findNextTextNode();
+        }
+      } else {
+        if (!this.TTSEle) {
+          this.findNextTextNode();
+        }
+      }
+      this.speak();
+    } catch (e) {
+      alert(e);
    }
  };

-  unhighlight = index => {
-    if (index >= 0 && index < this.elements.length) {
-      this.elements[index].classList.remove('tts-highlight');
+  stop = () => {
+    this.$.classList.add('d-none');
+    this.reading = false;
+    if (this.leaf && this.TTSWrapper) {
+      this.TTSWrapper.replaceWith(this.leaf);
+      this.TTSWrapper = null;
+      this.TTSEle = null;
+      this.leaf = this.reader.chapter;
    }
+    this.reader.post({ type: 'stop-speak' });
+  };
+
+  pause = () => {
+    this.$.innerHTML = `<button>${resumeIcon}</button>`;
+    this.reading = false;
+    this.reader.post({ type: 'stop-speak' });
+  };
+
+  started = () => this.TTSWrapper !== null;
+
+  speak = () => {
+    this.reading = true;
+    if (this.reader.chapter.isSameNode(this.leaf)) {
+      return;
+    }
+    this.TTSEle.classList.add('highlight');
+    this.reader.post({ type: 'speak', data: this.TTSEle?.innerText.trim() });
  };
 }

-const reader = new Reader();
-const scrollHandler = new ScrollHandler(reader);
-const swipeHandler = new SwipeHandler(reader);
-const tts = new TextToSpeech(reader);
+/**
+ * @type {import("./type").ContextMenu}
+ */
+class ContextMenu {
+  /**
+   * @param {import("./type").Reader} reader
+   */
+  constructor(reader) {
+    this.reader = reader;
+    this.items = {
+      START_READING: this.renderItem({
+        name: 'Start Reading',
+        icon: volumeIcon,
+        action: () => {
+          tts.start();
+          this.closeMenu();
+        },
+      }),
+      START_HERE: this.renderItem({
+        name: 'Start Here',
+        icon: selectVolumeIcon,
+        action: () => {
+          tts.startHere();
+          this.closeMenu();
+        },
+      }),
+      COPY: this.renderItem({
+        name: 'Copy',
+        icon: copyIcon,
+        action: () => {
+          this.reader.post({
+            type: 'copy',
+            data: this.reader.selection.toString(),
+          });
+        },
+      }),
+      SELECT_ALL: this.renderItem({
+        name: 'Select All',
+        icon: selectAllIcon,
+        action: () => {
+          const range = document.createRange();
+          range.selectNodeContents(this.reader.chapter);
+          this.reader.selection.removeAllRanges();
+          this.reader.selection.addRange(range);
+        },
+      }),
+    };
+    this.commonItems = [this.items.COPY, this.items.SELECT_ALL];
+    this.contextMenu = document.createElement('ul');
+    this.contextMenu.classList.add('contextMenu');
+    this.isOpened = false;
+  }
+
+  /**
+   * @param {{name: string, icon: string, action: () => void}} data
+   * @returns
+   */
+  renderItem(data) {
+    const item = document.createElement('li');
+    const button = document.createElement('button');
+    button.innerHTML = `${data.icon} <span>${data.name}</span>`;
+    button.classList.add('contextMenu-button');
+    item.classList.add('contextMenu-item');
+    item.appendChild(button);
+    button.addEventListener('click', event => {
+      event.stopPropagation();
+      data.action();
+    });
+    return item;
+  }
+
+  renderMenu(items) {
+    this.contextMenu.innerHTML = '';
+    items.concat(this.commonItems).forEach((item, index) => {
+      item.firstChild.setAttribute('style', `animation-delay: ${index * 0.1}s`);
+      this.contextMenu.appendChild(item);
+    });
+  }
+
+  closeMenu() {
+    if (this.isOpened) {
+      this.isOpened = false;
+      this.contextMenu.remove();
+    }
+  }
+
+  init() {
+    this.reader.chapter.addEventListener('click', () => {
+      this.closeMenu(this.contextMenu);
+    });
+    document.addEventListener('contextmenu', e => {
+      e.preventDefault();
+      if (e.target instanceof HTMLImageElement) {
+        if (imageModal.showing) {
+          imageModal.hide();
+        } else {
+          imageModal.show(e.target);
+        }
+        return;
+      }
+      this.isOpened = true;
+      if (this.reader.selection.type === 'Range') {
+        this.renderMenu([this.items.START_HERE, this.items.START_READING]);
+      } else {
+        this.renderMenu([this.items.START_READING]);
+      }
+      const { clientX, clientY } = e;
+      e.target.appendChild(this.contextMenu);
+      const positionY =
+        clientY + this.contextMenu.scrollHeight >= window.innerHeight
+          ? window.innerHeight - this.contextMenu.scrollHeight - 20
+          : clientY;
+      const positionX =
+        clientX + this.contextMenu.scrollWidth >= window.innerWidth
+          ? window.innerWidth - this.contextMenu.scrollWidth - 20
+          : clientX;
+      this.contextMenu.setAttribute(
+        'style',
+        `--width: ${this.contextMenu.scrollWidth}px;
+        --height: ${this.contextMenu.scrollHeight}px;
+        --top: ${positionY}px;
+        --left: ${positionX}px;`,
+      );
+    });
+  }
+}
+
+/**
+ * @type {import("./type").ImageModal}
+ */
+class ImageModal {
+  /**
+   * @param {import('./type').Reader} reader
+   */
+  constructor(reader) {
+    this.reader = reader;
+    this.$ = document.getElementById('Image-Modal');
+    this.img = this.$.querySelector('img');
+    this.showing = false;
+    this.$.onclick = e => {
+      if (e.target.id !== 'Image-Modal-img') {
+        e.stopPropagation();
+        this.hide();
+      }
+    };
+    this.$.ontouchmove = e => {
+      e.stopImmediatePropagation();
+    };
+  }
+
+  /**
+   *
+   * @param {HTMLImageElement} image
+   */
+  show(image) {
+    this.img.src = image.src;
+    this.img.alt = `Can not render image from ${image.src}`;
+    this.reader.viewport.setAttribute(
+      'content',
+      'width=device-width, initial-scale=1.0, maximum-scale=10',
+    );
+    this.$.classList.add('show');
+    this.showing = true;
+  }
+  hide() {
+    this.$.classList.remove('show');
+    this.showing = false;
+    this.img.src = '';
+    this.img.alt = '';
+    this.reader.viewport.setAttribute(
+      'content',
+      'width=device-width, initial-scale=1.0, maximum-scale=1.0',
+    );
+  }
+}
+
+try {
+  var swipeHandler = new SwipeHandler();
+  var toolWrapper = new ToolWrapper();
+  var reader = new Reader();
+  var scrollHandler = new ScrollHandler(reader, toolWrapper);
+  var tts = new TextToSpeech(reader);
+  toolWrapper.tools = [scrollHandler, tts];
+  imageModal = new ImageModal(reader);
+  const contextMenu = new ContextMenu(reader);
+  contextMenu.init();
+} catch (e) {
+  alert(e);
+}
@@ -0,0 +1,111 @@
+var textVide = (function (L) {
+  'use strict';
+  const f = t => t == null || t === '',
+    h = (t, n) =>
+      Object.keys(t).reduce((e, s) => (n(e[s]) && delete e[s], e), t),
+    I = (t, n) => ({ ...n, ...h(t, f) }),
+    _ = ['<b>', '</b>'],
+    y = t =>
+      I(t, {
+        sep: _,
+        fixationPoint: 1,
+        ignoreHtmlTag: !0,
+        ignoreHtmlEntity: !0,
+      }),
+    u = [
+      [0, 4, 12, 17, 24, 29, 35, 42, 48],
+      [1, 2, 7, 10, 13, 14, 19, 22, 25, 28, 31, 34, 37, 40, 43, 46, 49],
+      [
+        1, 2, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25, 27, 29, 31, 33, 35, 37,
+        39, 41, 43, 45, 47, 49,
+      ],
+      [
+        0, 2, 4, 5, 6, 8, 9, 11, 14, 15, 17, 18, 20, 0, 21, 23, 24, 26, 27, 29,
+        30, 32, 33, 35, 36, 38, 39, 41, 42, 44, 45, 47, 48,
+      ],
+      [
+        0, 2, 3, 5, 6, 7, 8, 10, 11, 12, 14, 15, 17, 19, 20, 21, 23, 24, 25, 26,
+        28, 29, 30, 32, 33, 34, 35, 37, 38, 39, 41, 42, 43, 44, 46, 47, 48,
+      ],
+    ],
+    A = (t, n) => {
+      const { length: i } = t,
+        e = u[n - 1] ?? u[0],
+        s = e.findIndex(c => i <= c);
+      let o = i - s;
+      return s === -1 && (o = i - e.length), Math.max(o, 0);
+    },
+    R = (t, n) =>
+      typeof n === 'string' ? `${n}${t}${n}` : `${n[0]}${t}${n[1]}`,
+    m = t =>
+      Array.from(t).map(n => {
+        const i = n.index,
+          [e] = n,
+          { length: s } = e;
+        return [i, i + s - 1];
+      }),
+    H = /(<!--[\s\S]*?-->)|(<[^>]*>)/g,
+    N = t => {
+      const n = t.matchAll(H),
+        e = m(n).reverse();
+      return s => {
+        const o = s.index,
+          c = e.find(([r]) => o > r);
+        if (!c) {
+          return !1;
+        }
+        const [, a] = c;
+        return o < a;
+      };
+    },
+    O = /(&[\w#]+;)/g,
+    M = t => {
+      const n = t.matchAll(O),
+        e = m(n).reverse();
+      return s => {
+        const o = s.index,
+          c = e.find(([r]) => o > r);
+        if (!c) {
+          return !1;
+        }
+        const [, a] = c;
+        return o < a;
+      };
+    },
+    x = /(\p{L}|\p{Nd})*\p{L}(\p{L}|\p{Nd})*/gu,
+    F = (t, n = {}) => {
+      if (!(t != null && t.length)) {
+        return '';
+      }
+      const {
+          fixationPoint: i,
+          sep: e,
+          ignoreHtmlTag: s,
+          ignoreHtmlEntity: o,
+        } = y(n),
+        c = Array.from(t.matchAll(x));
+      let a = '',
+        l = 0,
+        r;
+      s && (r = N(t));
+      let d;
+      o && (d = M(t));
+      for (const g of c) {
+        if ((r == null ? void 0 : r(g)) || (d == null ? void 0 : d(g))) {
+          continue;
+        }
+        const [D] = g,
+          T = g.index,
+          E = T + A(D, i),
+          U = t.slice(l, T);
+        (a += U), T !== E && (a += R(t.slice(T, E), e)), (l = E);
+      }
+      const G = t.slice(l);
+      return a + G;
+    };
+  return (
+    (L.textVide = F),
+    Object.defineProperty(L, Symbol.toStringTag, { value: 'Module' }),
+    L
+  );
+})({});
@@ -0,0 +1,70 @@
+import {
+  ChapterGeneralSettings,
+  ChapterReaderSettings,
+} from '@hooks/persisted/useSettings';
+import 'typescript';
+import 'typescript/lib/lib.dom';
+
+interface Reader {
+  selection: Selection;
+  viewport: HTMLMetaElement;
+  footerWrapper: HTMLDivElement;
+  percentage: HTMLDivElement;
+  battery: HTMLDivElement;
+  time: HTMLDivElement;
+  paddingTop: number;
+  chapter: HTMLElement;
+  chapterHeight: number;
+  layoutHeight: number;
+  pluginId: string;
+  novelId: string;
+  chapterId: string;
+  saveProgressInterval: NodeJS.Timeout;
+  timeInterval: NodeJS.Timeout;
+  refresh: () => void;
+  post: (message: { type: string; data?: any }) => void;
+  updateReaderSettings: (settings: ChapterReaderSettings) => void;
+  updateGeneralSettings: (settings: ChapterGeneralSettings) => void;
+  updateBatteryLevel: (level: number) => void;
+}
+
+interface TextToSpeech {
+  reader: Reader;
+  leaf: HTMLElement;
+  TTSWrapper: HTMLElement;
+  TTSEle: HTMLElement;
+  reading: boolean;
+  start: () => void;
+  startHere: () => void;
+  resume: () => void;
+  pause: () => void;
+  stop: () => void;
+  started: () => boolean;
+}
+
+export enum ContextMenuItem {
+  START_READING = 'START_READING',
+  START_HERE = 'START_HERE',
+  COPY = 'COPY',
+  SELECT_ALL = 'SELECT_ALL',
+}
+interface ContextMenu {
+  reader: Reader;
+  contextMenu: HTMLUListElement;
+  items: Record<ContextMenuItem, HTMLLIElement>;
+  renderItem: (data: {
+    name: string;
+    icon: string;
+    action: () => void;
+  }) => HTMLLIElement;
+  renderMenu: (items: HTMLLIElement[]) => void;
+  closeMenu: (menu: HTMLUListElement) => void;
+  init: () => void;
+}
+
+interface ImageModal {
+  reader: Reader;
+  showing: boolean;
+  show: (image: HTMLImageElement) => void;
+  hide: () => void;
+}
@@ -1,174 +0,0 @@
-package com.rajarsheechatterjee.EpubParser;
-
-import androidx.annotation.NonNull;
-
-import com.facebook.react.bridge.Promise;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReactContextBaseJavaModule;
-import com.facebook.react.bridge.ReactMethod;
-import com.facebook.react.bridge.ReadableArray;
-import com.facebook.react.bridge.ReadableMap;
-import com.facebook.react.bridge.WritableArray;
-import com.facebook.react.bridge.WritableMap;
-import com.facebook.react.bridge.WritableNativeArray;
-import com.facebook.react.bridge.WritableNativeMap;
-
-import org.w3c.dom.Document;
-import org.w3c.dom.Element;
-import org.w3c.dom.Node;
-import org.w3c.dom.NodeList;
-
-import java.io.File;
-import java.io.FileInputStream;
-import java.io.FileOutputStream;
-import java.util.regex.Pattern;
-import java.util.zip.ZipEntry;
-import java.util.zip.ZipInputStream;
-
-import javax.xml.parsers.DocumentBuilder;
-import javax.xml.parsers.DocumentBuilderFactory;
-import javax.xml.xpath.XPath;
-import javax.xml.xpath.XPathConstants;
-import javax.xml.xpath.XPathFactory;
-
-public class EpubParser extends ReactContextBaseJavaModule {
-    String rootPath;
-    String contentDirPath;
-    XPath xPath = XPathFactory.newInstance().newXPath();
-    DocumentBuilder db = DocumentBuilderFactory.newInstance().newDocumentBuilder();
-
-    EpubParser(ReactApplicationContext context) throws Exception {
-        super(context);
-    }
-
-    @NonNull
-    @Override
-    public String getName() {
-        return "EpubParser";
-    }
-
-    @ReactMethod
-    public void parse(String epubFilePath, String epubDirPath, Promise promise) {
-        try{
-            this.rootPath = epubDirPath;
-            String novelCover = this.unzip(epubFilePath, epubDirPath);
-            File contentFile = this.parseContainer(epubDirPath);
-            this.contentDirPath = contentFile.getParent();
-            WritableMap novel = (WritableMap) this.parseContent(contentFile);
-            if(novelCover != null){
-                novel.putString("cover", new File(epubDirPath, novelCover).getAbsolutePath());
-            }
-            promise.resolve(novel);
-        } catch (Exception e) {
-            promise.reject(e.getCause());
-        }
-    }
-
-    public File parseContainer(String epubDir) throws Exception {
-        Document doc = this.parserDocument(new File(epubDir, "META-INF/container.xml"));
-        return new File(this.rootPath,
-                ((Element) doc.getElementsByTagName("rootfile").item(0)).getAttribute("full-path"));
-    }
-
-    public ReadableMap parseContent(File contentFile) throws Exception {
-        Document content = this.parserDocument(contentFile);
-        WritableMap novel = new WritableNativeMap();
-        novel.putString("name", this.getFirstElementByTag(content, "dc:title").getTextContent().trim());
-        novel.putString("url", contentFile.getParent());
-        novel.putString("author", this.getFirstElementByTag(content, "dc:creator").getTextContent().trim());
-        novel.putArray("chapters", this.getChapters(content));
-        return novel;
-    }
-
-    public ReadableArray getChapters(Document doc) throws Exception {
-        WritableArray chapters = new WritableNativeArray();
-        Document toc = null;
-        if (this.getFirstElementByTag(doc, "spine").getAttribute("toc") != null) {
-            toc = this.parserDocument(new File(this.contentDirPath, "toc.ncx"));
-        }
-        NodeList itemrefs = this.getNodeListByTag(doc, "itemref");
-        for (int i = 0; i < itemrefs.getLength(); i++) {
-            WritableMap chapter = new WritableNativeMap();
-            Element itemref = (Element) itemrefs.item(i);
-            chapter.putString("name", itemref.getAttribute("idref"));
-            Element item = this.getElementById(doc, chapter.getString("name"));
-            chapter.putString("url", new File(this.contentDirPath, item.getAttribute("href")).getAbsolutePath());
-            if(toc != null){
-                chapter.putString("name", this.getChapterName(toc, item.getAttribute(("href"))));
-                if(chapter.getString("name") == null) continue;
-            }
-            chapters.pushMap(chapter);
-        }
-        return chapters;
-    }
-
-    public String getChapterName(Document doc, String href) throws Exception {
-        String path = String.format("//*[starts-with(@src,'%1$s')]", href);
-        Node node = ((NodeList) this.xPath.compile(path).evaluate(doc, XPathConstants.NODESET)).item(0);
-        if(node != null){
-            String text = node.getPreviousSibling().getTextContent().trim();
-            if(text.isEmpty()) text = node.getPreviousSibling().getPreviousSibling().getTextContent().trim();
-            return !text.isEmpty() ? text : null;
-        }
-        return null;
-    }
-
-    public Element getElementById(Document doc, String id) throws Exception {
-        return (Element) ((NodeList) this.xPath
-                .compile(String.format("//*[@id='%1$s']", id))
-                .evaluate(doc, XPathConstants.NODESET))
-                .item(0);
-    }
-
-    public NodeList getNodeListByTag(Document doc, String tag) throws Exception {
-        return (NodeList)
-                (
-                        this.xPath.compile(String.format("//*[contains(name(), '%1$s')]", tag))
-                                .evaluate(doc, XPathConstants.NODESET)
-                );
-    }
-
-    public Element getFirstElementByTag(Document doc, String tag) throws Exception {
-        return (Element) this.getNodeListByTag(doc, tag).item(0);
-    }
-
-    public Document parserDocument(File docFile) throws Exception {
-        Document doc = this.db.parse(docFile);
-        doc.getDocumentElement().normalize();
-        return doc;
-    }
-
-    public String escapeFilePath(String filePath){
-        return filePath.replaceAll(":", "\uA789");
-    }
-
-    public String unzip(String epubFilePath, String epubDirPath) throws Exception {
-        ZipInputStream zis = new ZipInputStream(new FileInputStream(epubFilePath));
-        ZipEntry zipEntry;
-        int len;
-        String novelCover = null;
-        byte[] buffer = new byte[4096];
-        while ((zipEntry = zis.getNextEntry()) != null) {
-            String escapedFilePath = escapeFilePath(zipEntry.getName());
-            if(Pattern.compile(".*cover.*\\.(png|jpeg|jpg)", Pattern.CASE_INSENSITIVE).matcher(escapedFilePath).matches()){
-                novelCover = escapedFilePath;
-            }
-            File newFile = new File(epubDirPath, escapedFilePath);
-            if(newFile.exists()) continue;
-            newFile.getParentFile().mkdirs();
-            FileOutputStream fos = new FileOutputStream(newFile);
-            int writeCount = 0;
-            while ((len = zis.read(buffer)) > 0) {
-                writeCount += 1;
-                fos.write(buffer, 0, len);
-            }
-            fos.close();
-            if(writeCount == 0){
-                newFile.delete();
-            }
-        }
-        zis.closeEntry();
-        zis.close();
-        return novelCover;
-    }
-}
@@ -0,0 +1,163 @@
+package com.rajarsheechatterjee.EpubUtil;
+
+import android.util.Xml;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.bridge.WritableArray;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.bridge.WritableNativeArray;
+import com.facebook.react.bridge.WritableNativeMap;
+
+import org.xmlpull.v1.XmlPullParser;
+import org.xmlpull.v1.XmlPullParserException;
+
+import java.io.File;
+import java.io.FileInputStream;
+import java.io.FileNotFoundException;
+import java.io.IOException;
+import java.util.HashMap;
+import java.util.Objects;
+
+public class EpubUtil extends ReactContextBaseJavaModule {
+    EpubUtil(ReactApplicationContext context){super(context);}
+
+    @NonNull
+    @Override
+    public String getName() {
+        return "EpubUtil";
+    }
+
+    private XmlPullParser initParse(File file) throws XmlPullParserException, IOException {
+        XmlPullParser parser = Xml.newPullParser();
+        parser.setFeature(XmlPullParser.FEATURE_PROCESS_NAMESPACES, true);
+        parser.setInput(new FileInputStream(file), null);
+        parser.nextTag();
+        return parser;
+    }
+
+    private String readText(XmlPullParser parser) throws IOException, XmlPullParserException {
+        String result = "";
+        if (parser.next() == XmlPullParser.TEXT) {
+            result = parser.getText();
+            parser.nextTag();
+        }
+        return result;
+    }
+
+    private String cleanUrl(String url){
+        if(url != null){
+            return url.replaceFirst("#[^.]+?$", "");
+        }
+        return null;
+    }
+
+    @ReactMethod
+    public void parseNovelAndChapters(String epubDirPath, Promise promise) {
+        try {
+            File containerFile = new File(epubDirPath, "META-INF/container.xml");
+            File contentMetaFile = new File(epubDirPath, getContentMetaFilePath(containerFile));
+            String contentDir = contentMetaFile.getParent();
+
+            ReadableMap novel = getNovelMetadata(contentMetaFile, contentDir);
+            promise.resolve(novel);
+        } catch (XmlPullParserException | IOException e) {
+            promise.reject(e.getCause());
+        }
+    }
+
+    private String getContentMetaFilePath(File file) throws XmlPullParserException, IOException {
+        XmlPullParser parser = initParse(file);
+        while (parser.next() != XmlPullParser.END_TAG){
+            @Nullable String tag = parser.getName();
+            if(tag != null && tag.equals("rootfile")) {
+                return parser.getAttributeValue(null, "full-path");
+            }
+        }
+        return "OEBPS/content.opf"; // default
+    }
+    private ReadableMap getNovelMetadata(File file, String contentDir) throws XmlPullParserException, IOException {
+        WritableMap novel = new WritableNativeMap();
+        WritableArray chapters = new WritableNativeArray();
+        XmlPullParser parser = initParse(file);
+        HashMap<String, String> refMap = new HashMap<>();
+        HashMap<String, String> tocMap = new HashMap<>();
+        File tocFile = new File(contentDir, "toc.ncx");
+        if(tocFile.exists()){
+            XmlPullParser tocParser = initParse(tocFile);
+            String label = null;
+            while (tocParser.next() != XmlPullParser.END_DOCUMENT){
+                String tag = tocParser.getName();
+                if(tag != null){
+                    if(tag.equals("text")){
+                        label = readText(tocParser);
+                    }else if(tag.equals("content")){
+                        String href = cleanUrl(tocParser.getAttributeValue(null, "src"));
+                        if(href != null){
+                            tocMap.put(href, label);
+                        }
+                    }
+                }
+            }
+        }
+        String cover = null;
+        while (parser.next() != XmlPullParser.END_DOCUMENT){
+            @Nullable String tag = parser.getName();
+            if(tag != null){
+                switch (tag) {
+                    case "item": {
+                        String id = parser.getAttributeValue(null, "id");
+                        String href = parser.getAttributeValue(null, "href");
+                        if (id != null) {
+                            refMap.put(id, href);
+                        }
+                        break;
+                    }
+                    case "itemref": {
+                        String idRef = parser.getAttributeValue(null, "idref");
+                        String href = refMap.get(idRef);
+                        if (href != null) {
+                            WritableMap chapter = new WritableNativeMap();
+                            chapter.putString("path", contentDir + "/" + href);
+                            String name = tocMap.get(href);
+                            chapter.putString("name", name == null ? href : name);
+                            chapters.pushMap(chapter);
+                        }
+                        break;
+                    }
+                    case "title":
+                        novel.putString("name", readText(parser));
+                        break;
+                    case "creator":
+                        novel.putString("author", readText(parser));
+                        break;
+                    case "contributor":
+                        novel.putString("artist", readText(parser));
+                        break;
+                    case "description":
+                        novel.putString("summary", readText(parser));
+                        break;
+                    case "meta":
+                        String metaName = parser.getAttributeValue(null, "name");
+                        if(metaName != null && metaName.equals("cover")){
+                            cover = parser.getAttributeValue(null, "content");
+                        }
+                        break;
+                }
+                parser.next();
+            }
+        }
+        if(cover != null){
+            String coverPath = contentDir + "/" + refMap.get(cover);
+            novel.putString("cover", coverPath);
+        }
+        novel.putArray("chapters", chapters);
+        return novel;
+    }
+}
@@ -0,0 +1,33 @@
+package com.rajarsheechatterjee.EpubUtil;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+import com.rajarsheechatterjee.ZipArchive.ZipArchive;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+public class EpubUtilPackage implements ReactPackage {
+    @NonNull
+    @Override
+    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactApplicationContext) {
+        List<NativeModule> modules = new ArrayList<>();
+        try {
+            modules.add(new EpubUtil(reactApplicationContext));
+        } catch (Exception e) {
+            throw new RuntimeException(e);
+        }
+        return modules;
+    }
+
+    @NonNull
+    @Override
+    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactApplicationContext) {
+        return Collections.emptyList();
+    }
+}
@@ -81,9 +81,7 @@ public class MainActivity extends ReactActivity {
            this,
            getMainComponentName(),
            // If you opted-in for the New Architecture, we enable the Fabric Renderer.
-            DefaultNewArchitectureEntryPoint.getFabricEnabled(), // fabricEnabled
-            // If you opted-in for the New Architecture, we enable Concurrent React (i.e. React 18).
-            DefaultNewArchitectureEntryPoint.getConcurrentReactEnabled() // concurrentRootEnabled
+            DefaultNewArchitectureEntryPoint.getFabricEnabled()
        ));
    }
 }
@@ -12,9 +12,11 @@ import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
 import com.facebook.react.defaults.DefaultReactNativeHost;
 import com.facebook.soloader.SoLoader;

+import com.rajarsheechatterjee.EpubUtil.EpubUtilPackage;
 import com.rajarsheechatterjee.NavigationBarColor.NavigationBarColorPackage;
+import com.rajarsheechatterjee.TextFile.TextFilePackage;
 import com.rajarsheechatterjee.VolumeButtonListener.VolumeButtonListenerPackage;
-import com.rajarsheechatterjee.EpubParser.EpubParserPackage;
+import com.rajarsheechatterjee.ZipArchive.ZipArchivePackage;

 import expo.modules.ApplicationLifecycleDispatcher;
 import expo.modules.ReactNativeHostWrapper;
@@ -35,7 +37,9 @@ public class MainApplication extends Application implements ReactApplication {
          List<ReactPackage> packages = new PackageList(this).getPackages();
          packages.add(new NavigationBarColorPackage());
          packages.add(new VolumeButtonListenerPackage());
-          packages.add(new EpubParserPackage());
+          packages.add(new ZipArchivePackage());
+          packages.add(new TextFilePackage());
+          packages.add(new EpubUtilPackage());
          return packages;
        }

@@ -23,9 +23,6 @@ public class NavigationBarColorModule extends ReactContextBaseJavaModule {
    public static final String REACT_CLASS = "NavigationBarColor";
    private static final String ERROR_NO_ACTIVITY = "E_NO_ACTIVITY";
    private static final String ERROR_NO_ACTIVITY_MESSAGE = "Tried to change the navigation bar while not attached to an Activity";
-    private static final String ERROR_API_LEVEL = "API_LEVEl";
-    private static final String ERROR_API_LEVEL_MESSAGE = "Only Android Oreo and above is supported";
-    private static ReactApplicationContext reactContext = null;
    private static final int UI_FLAG_HIDE_NAV_BAR = View.SYSTEM_UI_FLAG_LAYOUT_STABLE
            | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
            | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION // hide nav bar
@@ -33,7 +30,6 @@ public class NavigationBarColorModule extends ReactContextBaseJavaModule {

    public NavigationBarColorModule(ReactApplicationContext context) {
        super(context);
-        reactContext = context;
    }

    public void setNavigationBarTheme(Activity activity, Boolean light) {
@@ -66,61 +62,56 @@ public class NavigationBarColorModule extends ReactContextBaseJavaModule {
    @ReactMethod
    public void changeNavigationBarColor(final String color, final Boolean light, final Boolean animated, final Promise promise) {
        final WritableMap map = Arguments.createMap();
-        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
-            if (getCurrentActivity() != null) {
-                try {
-                    final Window window = getCurrentActivity().getWindow();
-                    runOnUiThread(new Runnable() {
-                        @Override
-                        public void run() {
-                            if (color.equals("transparent") || color.equals("translucent")) {
-                                window.clearFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
-                                window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
-                                if (color.equals("transparent")) {
-                                    window.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
-                                } else {
-                                    window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION, WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
-                                }
-                                setNavigationBarTheme(getCurrentActivity(), light);
-                                map.putBoolean("success", true);
-                                promise.resolve(map);
-                                return;
+        if (getCurrentActivity() != null) {
+            try {
+                final Window window = getCurrentActivity().getWindow();
+                runOnUiThread(new Runnable() {
+                    @Override
+                    public void run() {
+                        if (color.equals("transparent") || color.equals("translucent")) {
+                            window.clearFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
+                            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
+                            if (color.equals("transparent")) {
+                                window.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
                            } else {
-                                window.clearFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
-                                window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
-                            }
-                            if (animated) {
-                                Integer colorFrom = window.getNavigationBarColor();
-                                Integer colorTo = Color.parseColor(String.valueOf(color));
-                                //window.setNavigationBarColor(colorTo);
-                                ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo);
-                                colorAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
-                                    @Override
-                                    public void onAnimationUpdate(ValueAnimator animator) {
-                                        window.setNavigationBarColor((Integer) animator.getAnimatedValue());
-                                    }
-                                });
-                                colorAnimation.start();
-                            } else {
-                                window.setNavigationBarColor(Color.parseColor(String.valueOf(color)));
+                                window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION, WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
                            }
                            setNavigationBarTheme(getCurrentActivity(), light);
-                            WritableMap map = Arguments.createMap();
                            map.putBoolean("success", true);
                            promise.resolve(map);
+                            return;
+                        } else {
+                            window.clearFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
+                            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
                        }
-                    });
-                } catch (IllegalViewOperationException e) {
-                    map.putBoolean("success", false);
-                    promise.reject("error", e);
-                }
-
-            } else {
-                promise.reject(ERROR_NO_ACTIVITY, new Throwable(ERROR_NO_ACTIVITY_MESSAGE));
-
+                        if (animated) {
+                            Integer colorFrom = window.getNavigationBarColor();
+                            Integer colorTo = Color.parseColor(color);
+                            //window.setNavigationBarColor(colorTo);
+                            ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo);
+                            colorAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
+                                @Override
+                                public void onAnimationUpdate(ValueAnimator animator) {
+                                    window.setNavigationBarColor((Integer) animator.getAnimatedValue());
+                                }
+                            });
+                            colorAnimation.start();
+                        } else {
+                            window.setNavigationBarColor(Color.parseColor(color));
+                        }
+                        setNavigationBarTheme(getCurrentActivity(), light);
+                        WritableMap map = Arguments.createMap();
+                        map.putBoolean("success", true);
+                        promise.resolve(map);
+                    }
+                });
+            } catch (IllegalViewOperationException e) {
+                map.putBoolean("success", false);
+                promise.reject("error", e);
            }
+
        } else {
-            promise.reject(ERROR_API_LEVEL, new Throwable(ERROR_API_LEVEL_MESSAGE));
+            promise.reject(ERROR_NO_ACTIVITY, new Throwable(ERROR_NO_ACTIVITY_MESSAGE));
        }
    }

@@ -0,0 +1,53 @@
+package com.rajarsheechatterjee.TextFile;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+
+import java.io.BufferedReader;
+import java.io.BufferedWriter;
+import java.io.File;
+import java.io.FileNotFoundException;
+import java.io.FileOutputStream;
+import java.io.FileReader;
+import java.io.FileWriter;
+
+public class TextFile extends ReactContextBaseJavaModule {
+    TextFile(ReactApplicationContext context) {
+        super(context);
+    }
+
+    @NonNull
+    @Override
+    public String getName() {
+        return "TextFile";
+    }
+
+    @ReactMethod
+    public void writeFile(String path, String content, Promise promise) {
+        try {
+            FileWriter fw = new FileWriter(path);
+            fw.write(content);
+            fw.close();
+            promise.resolve(null);
+        } catch (Exception e) {
+            promise.reject(e);
+        }
+    }
+
+    @ReactMethod void readFile(String path, Promise promise) {
+        try {
+            StringBuilder sb = new StringBuilder();
+            BufferedReader br = new BufferedReader(new FileReader(path));
+            String line;
+            while ((line = br.readLine()) != null) sb.append(line).append('\n');
+            promise.resolve(sb.toString());
+        } catch (Exception e) {
+            promise.reject(e);
+        }
+
+    }
+}
@@ -0,0 +1,32 @@
+package com.rajarsheechatterjee.TextFile;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+public class TextFilePackage implements ReactPackage {
+    @NonNull
+    @Override
+    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactApplicationContext) {
+        List<NativeModule> modules = new ArrayList<>();
+        try {
+            modules.add(new TextFile(reactApplicationContext));
+        } catch (Exception e) {
+            throw new RuntimeException(e);
+        }
+        return modules;
+    }
+
+    @NonNull
+    @Override
+    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactApplicationContext) {
+        return Collections.emptyList();
+    }
+}
@@ -0,0 +1,169 @@
+package com.rajarsheechatterjee.ZipArchive;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.ReadableMap;
+
+import java.io.ByteArrayOutputStream;
+import java.io.File;
+import java.io.FileInputStream;
+import java.io.FileOutputStream;
+import java.io.InputStream;
+import java.net.HttpURLConnection;
+import java.net.URL;
+import java.util.ArrayList;
+import java.util.Iterator;
+import java.util.Map;
+import java.util.zip.ZipEntry;
+import java.util.zip.ZipInputStream;
+import java.util.zip.ZipOutputStream;
+
+public class ZipArchive extends ReactContextBaseJavaModule {
+    ZipArchive(ReactApplicationContext context) throws Exception {
+        super(context);
+    }
+
+    @NonNull
+    @Override
+    public String getName() {
+        return "ZipArchive";
+    }
+
+    private String escapeFilePath(String filePath){
+        return filePath.replaceAll(":", "\uA789");
+    }
+
+    private void unzipProcess(ZipInputStream zis, String distDirPath) throws Exception {
+        ZipEntry zipEntry;
+        int len;
+        byte[] buffer = new byte[4096];
+        while ((zipEntry = zis.getNextEntry()) != null) {
+            if(zipEntry.getName().endsWith("/")) continue;
+            String escapedFilePath = this.escapeFilePath(zipEntry.getName());
+            File newFile = new File(distDirPath, escapedFilePath);
+            newFile.getParentFile().mkdirs();
+            FileOutputStream fos = new FileOutputStream(newFile);
+            while ((len = zis.read(buffer)) > 0) fos.write(buffer, 0, len);
+            fos.close();
+        }
+        zis.closeEntry();
+    }
+    @ReactMethod
+    public void unzip(String sourceFilePath, String distDirPath, Promise promise) {
+        new Thread(new Runnable() {
+            @Override
+            public void run() {
+                try{
+                    ZipInputStream zis = new ZipInputStream(new FileInputStream(sourceFilePath));
+                    unzipProcess(zis, distDirPath);
+                    zis.close();
+                    promise.resolve(null);
+                } catch (Exception e) {
+                    promise.reject(e.getCause());
+                }
+            }
+        }).start();
+    }
+
+    @ReactMethod
+    public void remoteUnzip(String distDirPath, String _url, @Nullable ReadableMap headers, Promise promise){
+        new Thread(new Runnable() {
+            @Override
+            public void run() {
+                try {
+                    URL url = new URL(_url);
+                    HttpURLConnection connection = (HttpURLConnection) url.openConnection();
+                    connection.setRequestMethod("GET");
+                    if(headers != null){
+                        Iterator<Map.Entry<String, Object>> it = headers.getEntryIterator();
+                        while (it.hasNext()){
+                            Map.Entry<String, Object> entry = it.next();
+                            connection.setRequestProperty(entry.getKey(), entry.getValue().toString());
+                        }
+                    }
+                    ZipInputStream zis = new ZipInputStream(connection.getInputStream());
+                    unzipProcess(zis, distDirPath);
+                    connection.disconnect();
+                    promise.resolve(null);
+                }catch (Exception e){
+                    promise.reject(e.getCause());
+                }
+            }
+        }).start();
+    }
+
+    private ArrayList<String> walkDir(String path) {
+        ArrayList<String> res = new ArrayList<>();
+        File node = new File(path);
+        if(node.isFile()){
+            res.add(path);
+        }else{
+            String[] children = node.list();
+            if(children != null){
+                for(String filename: children){
+                    ArrayList<String> childPaths = walkDir(new File(path, filename).toString());
+                    res.addAll(childPaths);
+                }
+            }
+        }
+        return res;
+    }
+    private void zipProcess(String sourceDirPath, ZipOutputStream zos) throws Exception{
+        ArrayList<String> paths = walkDir(sourceDirPath);
+        byte[] buffer = new byte[4096];
+        int len;
+        for(String path: paths){
+            ZipEntry zipEntry = new ZipEntry(path.replace(sourceDirPath + "/", ""));
+            zos.putNextEntry(zipEntry);
+            try (FileInputStream fis = new FileInputStream(path)) {
+                while ((len = fis.read(buffer)) > 0) {
+                    zos.write(buffer, 0, len);
+                }
+            }
+            zos.closeEntry();
+        }
+        zos.close();
+    }
+    @ReactMethod
+    public void remoteZip(String sourceDirPath, String _url, @Nullable ReadableMap headers, Promise promise){
+        new Thread(new Runnable() {
+            @Override
+            public void run() {
+                try {
+                    URL url = new URL(_url);
+                    HttpURLConnection connection = (HttpURLConnection) url.openConnection();
+                    connection.setRequestMethod("POST");
+                    if(headers != null){
+                        Iterator<Map.Entry<String, Object>> it = headers.getEntryIterator();
+                        while (it.hasNext()){
+                            Map.Entry<String, Object> entry = it.next();
+                            connection.setRequestProperty(entry.getKey(), entry.getValue().toString());
+                        }
+                    }
+                    ZipOutputStream zos = new ZipOutputStream(connection.getOutputStream());
+                    zipProcess(sourceDirPath, zos);
+                    if(connection.getResponseCode() == 200){
+                        InputStream is = connection.getInputStream();
+                        ByteArrayOutputStream result = new ByteArrayOutputStream();
+                        byte[] buffer = new byte[1024];
+                        for (int length; (length = is.read(buffer)) != -1; ) {
+                            result.write(buffer, 0, length);
+                        }
+                        is.close();
+                        connection.disconnect();
+                        promise.resolve(result.toString());
+                    }else{
+                        throw new Exception("Network request failed");
+                    }
+                }catch (Exception e){
+                    promise.reject(e.getCause());
+                }
+            }
+        }).start();
+    }
+}
@@ -1,4 +1,4 @@
-package com.rajarsheechatterjee.EpubParser;
+package com.rajarsheechatterjee.ZipArchive;

 import androidx.annotation.NonNull;

@@ -11,13 +11,13 @@ import java.util.ArrayList;
 import java.util.Collections;
 import java.util.List;

-public class EpubParserPackage implements ReactPackage {
+public class ZipArchivePackage implements ReactPackage {
    @NonNull
    @Override
    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactApplicationContext) {
        List<NativeModule> modules = new ArrayList<>();
        try {
-            modules.add(new EpubParser(reactApplicationContext));
+            modules.add(new ZipArchive(reactApplicationContext));
        } catch (Exception e) {
            throw new RuntimeException(e);
        }
@@ -0,0 +1,93 @@
+<vector android:alpha="0" android:height="1dp"
+    android:viewportHeight="1024" android:viewportWidth="1024"
+    android:width="1dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillAlpha="0.994" android:fillColor="#132c33"
+        android:pathData="M479.5,-0.5C500.8,-0.5 522.2,-0.5 543.5,-0.5C704.4,13.5 832.9,84.8 929,213.5C985.1,293.3 1016.5,382 1023.5,479.5C1023.5,500.8 1023.5,522.2 1023.5,543.5C1009.2,709.4 934.5,840.2 799.5,936C722,987.8 636.6,1017 543.5,1023.5C522.2,1023.5 500.8,1023.5 479.5,1023.5C333.8,1011.4 213.3,950.4 118,840.5C47.3,754.3 7.8,655.3 -0.5,543.5C-0.5,522.2 -0.5,500.8 -0.5,479.5C13.5,318.6 84.8,190.1 213.5,94C293.3,37.9 382,6.4 479.5,-0.5Z" android:strokeAlpha="0.994"/>
+    <path android:fillColor="#106476" android:pathData="M870.5,325.5C876.8,340.6 882.7,355.9 888,371.5C889.7,373.2 891.1,375.2 892,377.5C895.1,386.3 897.4,395.3 899,404.5C900,406.7 901.5,408.4 903.5,409.5C903.5,410.2 903.5,410.8 903.5,411.5C907.2,436.2 910.8,460.8 914.5,485.5C915.4,500.5 915.7,515.5 915.5,530.5C911.7,612.8 885.4,686.8 836.5,752.5C836.5,750.7 837,749 838,747.5C894.4,667.2 918.8,577.8 911,479.5C899,365 848.5,271.8 759.5,200C652.9,120.8 534.9,97.5 405.5,130C299,161.6 218.1,225.4 163,321.5C108.7,424.4 99.1,531.4 134,642.5C147,680.2 165,715.2 188,747.5C189,749 189.5,750.7 189.5,752.5C141.4,688 115.1,615.3 110.5,534.5C110.3,518.5 110.5,502.5 111,486.5C112.8,477.3 113.8,467.9 114,458.5C119,435.8 124.4,413.1 130,390.5C140,359.6 153.3,330.6 170,303.5C184.2,283.1 199.4,263.5 215.5,244.5C231.1,229.1 246.7,213.9 262.5,199C273.8,191.7 285.1,184.4 296.5,177C297.3,175.5 298.3,174.2 299.5,173C303.2,172.6 306.5,171.3 309.5,169C313,166 316.3,162.9 319.5,159.5C330.1,155.2 340.1,149.9 349.5,143.5C360.1,142.3 370.1,139.2 379.5,134C385.7,132.1 392.1,130.5 398.5,129C400.5,128 402.5,127 404.5,126C452.1,113.9 500.4,109.7 549.5,113.5C567,115.2 584.3,117.7 601.5,121C620.6,126.7 639.8,132.6 659,138.5C668,141.9 676.8,145.8 685.5,150C695.4,156.1 705.8,161.5 716.5,166C717.2,167 717.8,168 718.5,169C733.7,175.2 747.1,184.2 758.5,196C764.2,199.9 769.5,204.2 774.5,209C776.6,210.8 778.9,212.1 781.5,213C785.3,218.2 789.8,222.7 795,226.5C797.1,228.3 798.4,230.7 799,233.5C807,241.6 815,249.6 823,257.5C823.3,258.8 823.7,260.2 824,261.5C828,266.5 832.4,271.2 837,275.5C841.8,284.4 847.1,293.1 853,301.5C858.3,307.4 862.6,314.1 866,321.5C867,323.4 868.5,324.7 870.5,325.5Z"/>
+    <path android:fillColor="#126e81" android:pathData="M836.5,752.5C791,813.4 733,858.3 662.5,887C545.5,931 431.5,924.3 320.5,867C268.3,838.7 224.7,800.5 189.5,752.5C189.5,750.7 189,749 188,747.5C165,715.2 147,680.2 134,642.5C99.1,531.4 108.7,424.4 163,321.5C218.1,225.4 299,161.6 405.5,130C534.9,97.5 652.9,120.8 759.5,200C848.5,271.8 899,365 911,479.5C918.8,577.8 894.4,667.2 838,747.5C837,749 836.5,750.7 836.5,752.5Z"/>
+    <path android:fillColor="#a1abaf" android:pathData="M660.5,203.5C657.7,203.4 655,202.8 652.5,201.5C641.6,195.4 629.9,191.5 617.5,190C609.7,188 602.4,185 595.5,181C580.9,179.2 566.6,176.6 552.5,173C521.2,169 490.2,169.9 459.5,175.5C447.6,178.3 435.6,180.5 423.5,182C418.2,183.8 412.9,185.3 407.5,186.5C388.5,192.1 370.1,199.6 352.5,209C351.2,209.5 349.9,209.7 348.5,209.5C423.4,170 502.4,159.1 585.5,177C611.8,182.6 636.8,191.4 660.5,203.5Z"/>
+    <path android:fillColor="#d7e2e6" android:pathData="M688.5,223.5C690.9,224.3 692.9,225.7 694.5,227.5C695.4,229.8 696.7,232 698.5,234C734,257.8 763.8,287.3 788,322.5C789.3,323.9 790.8,324.9 792.5,325.5C793.2,325.8 793.8,326.2 794.5,326.5C794.3,327.9 794.5,329.2 795,330.5C851.6,424.2 862.9,523.2 829,627.5C824.9,638.7 820.3,649.7 815,660.5C812.6,667.1 810.4,673.7 808.5,680.5C806.4,682.7 803.9,684.7 801,686.5C790.6,704.3 778.8,720.7 765.5,735.5C765.5,737.2 765.5,738.8 765.5,740.5C721,790.4 666.4,824.1 601.5,841.5C586.8,843.9 572.2,846.4 557.5,849C523.2,853.2 488.9,853.4 454.5,849.5C364.7,834.1 292.3,790.4 237.5,718.5C236.2,715.7 235.4,712.7 235,709.5C188.1,642.5 167.8,567.8 174,485.5C176.7,456.8 182.5,428.8 191.5,401.5C194.1,391.7 197.3,382 201,372.5C201.9,372 202.8,371.3 203.5,370.5C208.1,361.7 212.3,352.7 216,343.5C220.2,338.6 223.9,333.3 227,327.5C242.1,304 260,282.5 280.5,263C290.7,256.1 300.3,248.4 309.5,240C314.3,237.6 318.9,235.1 323.5,232.5C408.4,179.1 499.7,164.2 597.5,188C611.5,191.7 625.2,196.3 638.5,202C641.5,202.3 644.5,202.7 647.5,203C661.2,209.8 674.9,216.7 688.5,223.5Z"/>
+    <path android:fillColor="#cfdade" android:pathData="M556.5,177.5C577.5,179.3 597.9,184.2 617.5,192C621.3,192.3 624.9,192.9 628.5,194C636.6,198 645,201.2 653.5,203.5C663.6,208.4 673.6,213.6 683.5,219C685.6,220 687.3,221.5 688.5,223.5C674.9,216.7 661.2,209.8 647.5,203C644.5,202.7 641.5,202.3 638.5,202C625.2,196.3 611.5,191.7 597.5,188C499.7,164.2 408.4,179.1 323.5,232.5C330.8,226.2 338.8,220.9 347.5,216.5C348.5,215.1 349.5,213.8 350.5,212.5C363.9,207 377.2,201.1 390.5,195C402.2,191.3 413.8,187.7 425.5,184C448.7,180 472.1,177 495.5,175C505.5,174.3 515.5,174.3 525.5,175C535.8,176.1 546.2,176.9 556.5,177.5Z"/>
+    <path android:fillColor="#c4ced2" android:pathData="M556.5,177.5C546.2,176.9 535.8,176.1 525.5,175C515.5,174.3 505.5,174.3 495.5,175C472.1,177 448.7,180 425.5,184C413.8,187.7 402.2,191.3 390.5,195C377.2,201.1 363.9,207 350.5,212.5C368.9,202.5 387.9,193.8 407.5,186.5C412.9,185.3 418.2,183.8 423.5,182C435.6,180.5 447.6,178.3 459.5,175.5C491.2,171.4 522.9,171.5 554.5,176C555.4,176.3 556.1,176.8 556.5,177.5Z"/>
+    <path android:fillColor="#bac3c7" android:pathData="M652.5,201.5C652.8,202.2 653.2,202.8 653.5,203.5C645,201.2 636.6,198 628.5,194C624.9,192.9 621.3,192.3 617.5,192C597.9,184.2 577.5,179.3 556.5,177.5C556.1,176.8 555.4,176.3 554.5,176C522.9,171.5 491.2,171.4 459.5,175.5C490.2,169.9 521.2,169 552.5,173C566.6,176.6 580.9,179.2 595.5,181C602.4,185 609.7,188 617.5,190C629.9,191.5 641.6,195.4 652.5,201.5Z"/>
+    <path android:fillColor="#0e5565" android:pathData="M870.5,325.5C868.5,324.7 867,323.4 866,321.5C862.6,314.1 858.3,307.4 853,301.5C847.1,293.1 841.8,284.4 837,275.5C832.4,271.2 828,266.5 824,261.5C823.7,260.2 823.3,258.8 823,257.5C815,249.6 807,241.6 799,233.5C798.4,230.7 797.1,228.3 795,226.5C789.8,222.7 785.3,218.2 781.5,213C778.9,212.1 776.6,210.8 774.5,209C769.5,204.2 764.2,199.9 758.5,196C747.1,184.2 733.7,175.2 718.5,169C717.8,168 717.2,167 716.5,166C705.8,161.5 695.4,156.1 685.5,150C676.8,145.8 668,141.9 659,138.5C639.8,132.6 620.6,126.7 601.5,121C584.3,117.7 567,115.2 549.5,113.5C500.4,109.7 452.1,113.9 404.5,126C402.5,127 400.5,128 398.5,129C392.1,130.5 385.7,132.1 379.5,134C370.1,139.2 360.1,142.3 349.5,143.5C420.7,111.5 495,101.3 572.5,113C678.8,130.2 765.3,180.7 832,264.5C846.7,283.7 859.5,304 870.5,325.5Z"/>
+    <path android:fillColor="#a9b3b7" android:pathData="M652.5,201.5C655,202.8 657.7,203.4 660.5,203.5C704.9,224.6 742.6,254.2 773.5,292.5C765,283.5 756.4,274.7 747.5,266C744,263.6 741,260.8 738.5,257.5C733.8,254.1 729.1,250.8 724.5,247.5C722.4,245.3 720.1,243.3 717.5,241.5C709.8,236.7 702.1,232 694.5,227.5C692.9,225.7 690.9,224.3 688.5,223.5C687.3,221.5 685.6,220 683.5,219C673.6,213.6 663.6,208.4 653.5,203.5C653.2,202.8 652.8,202.2 652.5,201.5Z"/>
+    <path android:fillColor="#cfdadd" android:pathData="M694.5,227.5C702.1,232 709.8,236.7 717.5,241.5C720.1,243.3 722.4,245.3 724.5,247.5C740.5,264 756.6,280.3 773,296.5C779.5,304.9 785.8,313.3 792,321.5C792.5,322.8 792.7,324.1 792.5,325.5C790.8,324.9 789.3,323.9 788,322.5C763.8,287.3 734,257.8 698.5,234C696.7,232 695.4,229.8 694.5,227.5Z"/>
+    <path android:fillColor="#a8b3b6" android:pathData="M407.5,186.5C387.9,193.8 368.9,202.5 350.5,212.5C348.1,212.5 345.7,213 343.5,214C280.9,251.6 233.3,303.1 200.5,368.5C200,369.3 199.4,369.6 198.5,369.5C231,299.7 281,246.4 348.5,209.5C349.9,209.7 351.2,209.5 352.5,209C370.1,199.6 388.5,192.1 407.5,186.5Z"/>
+    <path android:fillColor="#c7d1d5" android:pathData="M350.5,212.5C349.5,213.8 348.5,215.1 347.5,216.5C338.8,220.9 330.8,226.2 323.5,232.5C318.9,235.1 314.3,237.6 309.5,240C300.3,248.4 290.7,256.1 280.5,263C260,282.5 242.1,304 227,327.5C223.9,333.3 220.2,338.6 216,343.5C212.3,352.7 208.1,361.7 203.5,370.5C202.8,371.3 201.9,372 201,372.5C197.3,382 194.1,391.7 191.5,401.5C187.7,410.3 184.4,419.3 181.5,428.5C183.2,412.5 188.1,397.5 196,383.5C196.7,378.7 197.5,374.1 198.5,369.5C199.4,369.6 200,369.3 200.5,368.5C233.3,303.1 280.9,251.6 343.5,214C345.7,213 348.1,212.5 350.5,212.5Z"/>
+    <path android:fillColor="#0f5969" android:pathData="M349.5,143.5C340.1,149.9 330.1,155.2 319.5,159.5C316.3,162.9 313,166 309.5,169C306.5,171.3 303.2,172.6 299.5,173C298.3,174.2 297.3,175.5 296.5,177C285.1,184.4 273.8,191.7 262.5,199C246.7,213.9 231.1,229.1 215.5,244.5C199.4,263.5 184.2,283.1 170,303.5C153.3,330.6 140,359.6 130,390.5C124.4,413.1 119,435.8 114,458.5C113.8,467.9 112.8,477.3 111,486.5C110.5,502.5 110.3,518.5 110.5,534.5C105.6,408 149,301.1 240.5,214C273,184.7 309.3,161.2 349.5,143.5Z"/>
+    <path android:fillColor="#b5bfc3" android:pathData="M724.5,247.5C729.1,250.8 733.8,254.1 738.5,257.5C741,260.8 744,263.6 747.5,266C756.4,274.7 765,283.5 773.5,292.5C804,327.4 825.6,367.4 838.5,412.5C837.5,412 836.7,411.4 836,410.5C833.5,403.3 831,396.2 828.5,389C820.3,372.7 812.4,356.2 805,339.5C803.9,338.7 802.7,338 801.5,337.5C799.9,333.3 797.6,329.6 794.5,326.5C793.8,326.2 793.2,325.8 792.5,325.5C792.7,324.1 792.5,322.8 792,321.5C785.8,313.3 779.5,304.9 773,296.5C756.6,280.3 740.5,264 724.5,247.5Z"/>
+    <path android:fillColor="#d0dade" android:pathData="M558.5,314.5C570.2,314.3 581.8,314.5 593.5,315C603.6,318.9 605.1,325 598,333.5C597.2,342.4 597.3,351.2 598.5,360C629.8,360.3 661.2,360.7 692.5,361C694.7,361.8 696.2,363.3 697,365.5C697.7,376.5 697.7,387.5 697,398.5C696.2,400 695,401.2 693.5,402C661.6,403.5 629.6,404 597.5,403.5C597.2,411.8 597.5,419.9 598.5,428C623.3,428 647.9,428.7 672.5,430C673.7,430.9 674.5,432.1 675,433.5C675.7,444.2 675.7,454.8 675,465.5C674.2,468.8 672,470.7 668.5,471C638.7,471.2 608.8,471.3 579,471.5C547.8,471.7 516.6,471.2 485.5,470C483.5,468.7 482.3,466.8 482,464.5C481.3,454.5 481.3,444.5 482,434.5C482.3,432.7 483.1,431.2 484.5,430C507.1,428.5 529.7,428 552.5,428.5C552.5,420.2 552.5,411.8 552.5,403.5C525.2,403.7 497.8,403.5 470.5,403C467.2,403.1 465.1,401.6 464,398.5C462,387.2 462,375.8 464,364.5C465.2,363 466.7,361.8 468.5,361C496.5,360.5 524.5,360.3 552.5,360.5C552.1,346.5 552.6,332.5 554,318.5C555.4,316.9 556.9,315.6 558.5,314.5Z"/>
+    <path android:fillColor="#849094" android:pathData="M591.5,317.5C580.5,317.5 569.5,317.5 558.5,317.5C558.8,332.7 558.5,347.7 557.5,362.5C557.5,347.2 557.5,331.8 557.5,316.5C569,316.2 580.3,316.5 591.5,317.5Z"/>
+    <path android:fillColor="#132c33" android:pathData="M591.5,317.5C599,318.8 599.5,321.8 593,326.5C592.5,338.5 592.3,350.5 592.5,362.5C625.8,362.5 659.2,362.5 692.5,362.5C692.5,373.2 692.5,383.8 692.5,394.5C658.8,394.5 625.2,394.5 591.5,394.5C591.2,406.7 591.5,418.7 592.5,430.5C618,431.5 643.7,431.8 669.5,431.5C669.5,441.8 669.5,452.2 669.5,462.5C608.8,462.5 548.2,462.5 487.5,462.5C487.5,451.8 487.5,441.2 487.5,430.5C510.2,430.5 532.8,430.5 555.5,430.5C556.2,430.5 556.8,430.5 557.5,430.5C558.5,418.7 558.8,406.7 558.5,394.5C528.5,394.5 498.5,394.5 468.5,394.5C468.5,383.8 468.5,373.2 468.5,362.5C498.2,362.5 527.8,362.5 557.5,362.5C558.5,347.7 558.8,332.7 558.5,317.5C569.5,317.5 580.5,317.5 591.5,317.5Z"/>
+    <path android:fillColor="#cfdade" android:pathData="M331.5,324.5C366.9,324 402.2,324.5 437.5,326C439.5,327.3 440.7,329.2 441,331.5C441.9,342.2 441.6,352.9 440,363.5C439,365.3 437.5,366.4 435.5,367C399.8,368 364.1,367.6 328.5,366C327.3,365.1 326.5,363.9 326,362.5C325.3,351.5 325.3,340.5 326,329.5C327.4,327.3 329.2,325.6 331.5,324.5Z"/>
+    <path android:fillColor="#b8c1c4" android:pathData="M330.5,331.5C330.2,341 330.5,350.3 331.5,359.5C331.6,360.1 331.9,360.6 332.5,361C349.3,361.2 366.2,361.3 383,361.5C400.2,361.5 417,360.8 433.5,359.5C434.2,359.5 434.8,359.5 435.5,359.5C435.8,359.5 436.2,359.5 436.5,359.5C436.4,361.4 435.4,362.6 433.5,363C399.2,363.7 364.8,363.7 330.5,363C329.9,362.3 329.4,361.4 329,360.5C328.3,351.2 328.3,341.8 329,332.5C329.4,331.9 329.9,331.6 330.5,331.5Z"/>
+    <path android:fillColor="#a3abaf" android:pathData="M331.5,359.5C365.5,359.5 399.5,359.5 433.5,359.5C417,360.8 400.2,361.5 383,361.5C366.2,361.3 349.3,361.2 332.5,361C331.9,360.6 331.6,360.1 331.5,359.5Z"/>
+    <path android:fillColor="#142d34" android:pathData="M330.5,327.5C365.5,327.5 400.5,327.5 435.5,327.5C435.5,338.2 435.5,348.8 435.5,359.5C434.8,359.5 434.2,359.5 433.5,359.5C399.5,359.5 365.5,359.5 331.5,359.5C330.5,350.3 330.2,341 330.5,331.5C330.5,330.2 330.5,328.8 330.5,327.5Z"/>
+    <path android:fillColor="#79868a" android:pathData="M330.5,327.5C365.7,326.5 401,326.2 436.5,326.5C436.5,337.5 436.5,348.5 436.5,359.5C436.2,359.5 435.8,359.5 435.5,359.5C435.5,348.8 435.5,338.2 435.5,327.5C400.5,327.5 365.5,327.5 330.5,327.5Z"/>
+    <path android:fillColor="#0f5a6b" android:pathData="M870.5,325.5C884.8,352.1 895.8,380.1 903.5,409.5C901.5,408.4 900,406.7 899,404.5C897.4,395.3 895.1,386.3 892,377.5C891.1,375.2 889.7,373.2 888,371.5C882.7,355.9 876.8,340.6 870.5,325.5Z"/>
+    <path android:fillColor="#8e979a" android:pathData="M468.5,394.5C498.5,394.5 528.5,394.5 558.5,394.5C558.8,406.7 558.5,418.7 557.5,430.5C558.1,419.1 557.5,407.9 555.5,397C528.2,396.7 500.8,396.3 473.5,396C471.6,395.8 470,395.3 468.5,394.5Z"/>
+    <path android:fillColor="#a6aeb1" android:pathData="M690.5,395.5C690.4,396.1 690.1,396.6 689.5,397C658.2,397.3 626.8,397.7 595.5,398C594.6,399 593.6,399.9 592.5,400.5C592.5,398.8 592.5,397.2 592.5,395.5C625.2,395.5 657.8,395.5 690.5,395.5Z"/>
+    <path android:fillColor="#b4bec1" android:pathData="M468.5,362.5C468.5,373.2 468.5,383.8 468.5,394.5C470,395.3 471.6,395.8 473.5,396C500.8,396.3 528.2,396.7 555.5,397C557.5,407.9 558.1,419.1 557.5,430.5C556.8,430.5 556.2,430.5 555.5,430.5C556.6,420.9 556.8,411.2 556,401.5C555.5,401 555,400.5 554.5,400C526.5,399.7 498.5,399.3 470.5,399C469.7,398.2 468.8,397.3 468,396.5C467.2,385 467.3,373.7 468.5,362.5Z"/>
+    <path android:fillColor="#b9c3c6" android:pathData="M690.5,395.5C691.2,395.5 691.8,395.5 692.5,395.5C691.9,396.5 691.2,397.5 690.5,398.5C658.8,399.3 627.2,399.8 595.5,400C595,400.5 594.5,401 594,401.5C593.2,411.2 593.4,420.9 594.5,430.5C593.8,430.5 593.2,430.5 592.5,430.5C592.5,420.5 592.5,410.5 592.5,400.5C593.6,399.9 594.6,399 595.5,398C626.8,397.7 658.2,397.3 689.5,397C690.1,396.6 690.4,396.1 690.5,395.5Z"/>
+    <path android:fillColor="#515f63" android:pathData="M692.5,394.5C692.5,394.8 692.5,395.2 692.5,395.5C691.8,395.5 691.2,395.5 690.5,395.5C657.8,395.5 625.2,395.5 592.5,395.5C592.5,397.2 592.5,398.8 592.5,400.5C592.5,410.5 592.5,420.5 592.5,430.5C591.5,418.7 591.2,406.7 591.5,394.5C625.2,394.5 658.8,394.5 692.5,394.5Z"/>
+    <path android:fillColor="#ced9dd" android:pathData="M191.5,401.5C182.5,428.8 176.7,456.8 174,485.5C167.8,567.8 188.1,642.5 235,709.5C235.4,712.7 236.2,715.7 237.5,718.5C214.2,688.9 196.9,655.9 185.5,619.5C182.6,606.1 179.5,592.8 176,579.5C174,566 171.8,552.6 169.5,539.5C167.9,501.8 171.9,464.8 181.5,428.5C184.4,419.3 187.7,410.3 191.5,401.5Z"/>
+    <path android:fillColor="#ced8dc" android:pathData="M313.5,384.5C359.2,384.3 404.8,384.5 450.5,385C452,386.2 453.2,387.7 454,389.5C454.7,400.5 454.7,411.5 454,422.5C451.8,425.8 448.6,427.3 444.5,427C400.5,428 356.5,427.6 312.5,426C311,424.8 309.8,423.3 309,421.5C308.3,410.8 308.3,400.2 309,389.5C310,387.3 311.5,385.6 313.5,384.5Z"/>
+    <path android:fillColor="#bbc4c8" android:pathData="M313.5,389.5C313.5,399.2 313.5,408.8 313.5,418.5C314.4,419.3 315.4,420.1 316.5,421C360.2,421.7 403.8,421.7 447.5,421C448.4,420.3 449,419.5 449.5,418.5C449.5,408.8 449.5,399.2 449.5,389.5C450.7,399.7 450.8,410 450,420.5C449.1,421.7 447.9,422.5 446.5,423C402.5,423.7 358.5,423.7 314.5,423C313.8,421.7 313,420.6 312,419.5C311.3,409.8 311.3,400.2 312,390.5C312.4,389.9 312.9,389.6 313.5,389.5Z"/>
+    <path android:fillColor="#9da6a9" android:pathData="M313.5,418.5C358.8,418.5 404.2,418.5 449.5,418.5C449,419.5 448.4,420.3 447.5,421C403.8,421.7 360.2,421.7 316.5,421C315.4,420.1 314.4,419.3 313.5,418.5Z"/>
+    <path android:fillColor="#132c33" android:pathData="M449.5,389.5C449.5,399.2 449.5,408.8 449.5,418.5C404.2,418.5 358.8,418.5 313.5,418.5C313.5,408.8 313.5,399.2 313.5,389.5C313.5,388.5 313.5,387.5 313.5,386.5C358.8,386.5 404.2,386.5 449.5,386.5C449.5,387.5 449.5,388.5 449.5,389.5Z"/>
+    <path android:fillColor="#273b41" android:pathData="M592.5,430.5C593.2,430.5 593.8,430.5 594.5,430.5C620.2,429.8 645.5,430.5 670.5,432.5C670.5,432.8 670.5,433.2 670.5,433.5C670.5,443.2 670.5,452.8 670.5,462.5C670.2,462.5 669.8,462.5 669.5,462.5C669.5,452.2 669.5,441.8 669.5,431.5C643.7,431.8 618,431.5 592.5,430.5Z"/>
+    <path android:fillColor="#b8c4c8" android:pathData="M198.5,369.5C197.5,374.1 196.7,378.7 196,383.5C188.1,397.5 183.2,412.5 181.5,428.5C171.9,464.8 167.9,501.8 169.5,539.5C163.8,480.3 173.5,423.6 198.5,369.5Z"/>
+    <path android:fillColor="#cfdadd" android:pathData="M330.5,445.5C365.8,445.3 401.2,445.5 436.5,446C439.1,447.3 440.6,449.5 441,452.5C441.9,463.2 441.6,473.9 440,484.5C439.2,485.3 438.3,486.2 437.5,487C401.5,487.7 365.5,487.7 329.5,487C327.3,486.3 326.1,484.8 326,482.5C325.3,471.8 325.3,461.2 326,450.5C327,448.3 328.5,446.6 330.5,445.5Z"/>
+    <path android:fillColor="#132c32" android:pathData="M435.5,448.5C435.5,458.8 435.5,469.2 435.5,479.5C400.8,479.5 366.2,479.5 331.5,479.5C331.5,469.2 331.5,458.8 331.5,448.5C366.2,448.5 400.8,448.5 435.5,448.5Z"/>
+    <path android:fillColor="#273b41" android:pathData="M435.5,447.5C435.5,447.8 435.5,448.2 435.5,448.5C400.8,448.5 366.2,448.5 331.5,448.5C331.5,458.8 331.5,469.2 331.5,479.5C330.5,470.7 330.2,461.7 330.5,452.5C330.5,450.8 330.5,449.2 330.5,447.5C365.5,447.5 400.5,447.5 435.5,447.5Z"/>
+    <path android:fillColor="#6b7679" android:pathData="M487.5,430.5C487.5,441.2 487.5,451.8 487.5,462.5C548.2,462.5 608.8,462.5 669.5,462.5C669.8,462.5 670.2,462.5 670.5,462.5C670.2,463.3 669.5,463.7 668.5,463.5C608.5,463.5 548.5,463.5 488.5,463.5C488.2,463.5 487.8,463.5 487.5,463.5C486.5,453 486.2,442.3 486.5,431.5C486.5,430.8 486.8,430.5 487.5,430.5Z"/>
+    <path android:fillColor="#c8d3d6" android:pathData="M486.5,431.5C486.2,442.3 486.5,453 487.5,463.5C487.8,465.8 489.1,466.9 491.5,467C550.8,467.7 610.2,467.7 669.5,467C670.9,465.8 671.7,464.3 672,462.5C672.7,453.2 672.7,443.8 672,434.5C671.6,433.9 671.1,433.6 670.5,433.5C670.5,433.2 670.5,432.8 670.5,432.5C672.4,432.6 673.6,433.6 674,435.5C674.7,445.2 674.7,454.8 674,464.5C672.6,466.1 671.1,467.6 669.5,469C608.8,469.7 548.2,469.7 487.5,469C486.2,467.6 485,466.1 484,464.5C483.3,454.2 483.3,443.8 484,433.5C484.7,432.6 485.5,432 486.5,431.5Z"/>
+    <path android:fillColor="#bac3c7" android:pathData="M670.5,433.5C671.1,433.6 671.6,433.9 672,434.5C672.7,443.8 672.7,453.2 672,462.5C671.7,464.3 670.9,465.8 669.5,467C610.2,467.7 550.8,467.7 491.5,467C489.1,466.9 487.8,465.8 487.5,463.5C487.8,463.5 488.2,463.5 488.5,463.5C488.6,464.1 488.9,464.6 489.5,465C548.8,465.7 608.2,465.7 667.5,465C668.1,464.6 668.4,464.1 668.5,463.5C669.5,463.7 670.2,463.3 670.5,462.5C670.5,452.8 670.5,443.2 670.5,433.5Z"/>
+    <path android:fillColor="#a6aeb1" android:pathData="M488.5,463.5C548.5,463.5 608.5,463.5 668.5,463.5C668.4,464.1 668.1,464.6 667.5,465C608.2,465.7 548.8,465.7 489.5,465C488.9,464.6 488.6,464.1 488.5,463.5Z"/>
+    <path android:fillColor="#0f5b6c" android:pathData="M903.5,411.5C914.1,450.5 918.1,490.2 915.5,530.5C915.7,515.5 915.4,500.5 914.5,485.5C910.8,460.8 907.2,436.2 903.5,411.5Z"/>
+    <path android:fillColor="#9fa8ab" android:pathData="M435.5,447.5C436.4,448.6 436.8,449.9 436.5,451.5C436.8,461.5 436.5,471.5 435.5,481.5C434.7,481.8 434,482.3 433.5,483C399.5,483.7 365.5,483.7 331.5,483C331,482.3 330.3,481.8 329.5,481.5C329.2,471.7 329.5,462 330.5,452.5C330.2,461.7 330.5,470.7 331.5,479.5C366.2,479.5 400.8,479.5 435.5,479.5C435.5,469.2 435.5,458.8 435.5,448.5C435.5,448.2 435.5,447.8 435.5,447.5Z"/>
+    <path android:fillColor="#c2ccd0" android:pathData="M436.5,451.5C437.1,451.6 437.6,451.9 438,452.5C438.7,462.2 438.7,471.8 438,481.5C437.6,482.4 437.1,483.3 436.5,484C418.2,485.1 399.9,485.6 381.5,485.5C364.5,485.2 347.5,484.8 330.5,484.5C329.9,483.6 329.5,482.6 329.5,481.5C330.3,481.8 331,482.3 331.5,483C365.5,483.7 399.5,483.7 433.5,483C434,482.3 434.7,481.8 435.5,481.5C436.5,471.5 436.8,461.5 436.5,451.5Z"/>
+    <path android:fillColor="#142c33" android:pathData="M459.5,485.5C538.8,485.5 618.2,485.5 697.5,485.5C697.5,509.5 697.5,533.5 697.5,557.5C686.2,557.5 674.8,557.5 663.5,557.5C663.5,545.8 663.5,534.2 663.5,522.5C663.5,521.8 663.5,521.2 663.5,520.5C663.5,519.5 663.5,518.5 663.5,517.5C606.8,517.5 550.2,517.5 493.5,517.5C493.5,531.5 493.5,545.5 493.5,559.5C482.2,559.5 470.8,559.5 459.5,559.5C459.5,536.5 459.5,513.5 459.5,490.5C459.5,489.2 459.5,487.8 459.5,486.5C459.5,486.2 459.5,485.8 459.5,485.5Z"/>
+    <path android:fillColor="#8f9a9e" android:pathData="M459.5,485.5C499.2,484.8 539,484.5 579,484.5C619.2,484.5 659,485.2 698.5,486.5C698.8,510.7 698.5,534.7 697.5,558.5C686,558.8 674.7,558.5 663.5,557.5C674.8,557.5 686.2,557.5 697.5,557.5C697.5,533.5 697.5,509.5 697.5,485.5C618.2,485.5 538.8,485.5 459.5,485.5Z"/>
+    <path android:fillColor="#bac6ca" android:pathData="M838.5,412.5C841.3,419.5 843.4,426.9 845,434.5C854.7,478.4 855.8,522.4 848.5,566.5C851.3,530.5 851.1,494.5 848,458.5C846.2,447.9 843.5,437.6 840,427.5C839.5,422.5 839,417.5 838.5,412.5Z"/>
+    <path android:fillColor="#132c32" android:pathData="M331.5,507.5C366.2,507.5 400.8,507.5 435.5,507.5C435.5,517.8 435.5,528.2 435.5,538.5C400.8,538.5 366.2,538.5 331.5,538.5C331.5,528.2 331.5,517.8 331.5,507.5Z"/>
+    <path android:fillColor="#cbd6d9" android:pathData="M459.5,486.5C459.5,487.8 459.5,489.2 459.5,490.5C458.3,514.3 458.2,538.3 459,562.5C459.5,563 460,563.5 460.5,564C471.2,564.7 481.8,564.7 492.5,564C493.3,563.7 494,563.2 494.5,562.5C495.3,549.9 495.8,537.2 496,524.5C496.9,523.3 498.1,522.5 499.5,522C553.2,521.3 606.8,521.3 660.5,522C661,522.5 661.5,523 662,523.5C662.3,535.5 662.7,547.5 663,559.5C663.8,560.3 664.7,561.2 665.5,562C675.2,562.7 684.8,562.7 694.5,562C695.7,561 696.7,559.8 697.5,558.5C698.5,534.7 698.8,510.7 698.5,486.5C699.5,487 700.3,487.6 701,488.5C701.7,511.8 701.7,535.2 701,558.5C700.3,561.3 698.4,562.8 695.5,563C684.5,563.7 673.5,563.7 662.5,563C662,562.5 661.5,562 661,561.5C659.9,549.4 659,537.2 658.5,525C605.2,524.5 551.8,524.3 498.5,524.5C498.7,537.5 498.5,550.5 498,563.5C496.2,566.3 493.7,567.8 490.5,568C479.8,568.9 469.1,568.5 458.5,567C456.3,565.4 454.9,563.2 454.5,560.5C455.3,537.2 455.8,513.9 456,490.5C456.7,488.7 457.8,487.3 459.5,486.5Z"/>
+    <path android:fillColor="#aab3b7" android:pathData="M663.5,520.5C663.5,521.2 663.5,521.8 663.5,522.5C662.7,522.2 662,521.7 661.5,521C605.8,520.2 550.1,520.3 494.5,521.5C494.9,520.1 495.9,519.2 497.5,519C552.2,518.3 606.8,518.3 661.5,519C662,519.7 662.7,520.2 663.5,520.5Z"/>
+    <path android:fillColor="#9ca4a7" android:pathData="M663.5,520.5C662.7,520.2 662,519.7 661.5,519C606.8,518.3 552.2,518.3 497.5,519C495.9,519.2 494.9,520.1 494.5,521.5C494.8,534.3 494.5,547 493.5,559.5C493.5,545.5 493.5,531.5 493.5,517.5C550.2,517.5 606.8,517.5 663.5,517.5C663.5,518.5 663.5,519.5 663.5,520.5Z"/>
+    <path android:fillColor="#132c33" android:pathData="M629.5,538.5C629.9,541.8 628.5,544.1 625.5,545.5C624.2,582 624.2,618.3 625.5,654.5C625.7,658.6 627.7,661.4 631.5,663C641.5,663.7 651.5,663.7 661.5,663C665.1,661.1 667.6,658.3 669,654.5C671.2,646.6 673,638.6 674.5,630.5C675,629.1 675.6,627.8 676.5,626.5C686.4,629.9 696.4,632.9 706.5,635.5C707.1,636.4 707.4,637.4 707.5,638.5C704.9,648.7 702.4,659 700,669.5C698.8,673.6 697.3,677.6 695.5,681.5C691.1,688.5 684.8,692.9 676.5,694.5C655.5,695.5 634.5,695.8 613.5,695.5C600.6,694.3 593.1,687.3 591,674.5C590.5,630.5 590.3,586.5 590.5,542.5C590.5,541.2 590.5,539.8 590.5,538.5C596.1,537.2 602.1,536.5 608.5,536.5C614.5,536.7 620.5,536.8 626.5,537C627.7,537.2 628.7,537.7 629.5,538.5Z"/>
+    <path android:fillColor="#2b3e44" android:pathData="M331.5,507.5C331.5,517.8 331.5,528.2 331.5,538.5C366.2,538.5 400.8,538.5 435.5,538.5C435.2,539.3 434.5,539.7 433.5,539.5C399.8,539.5 366.2,539.5 332.5,539.5C330.5,531.2 329.9,522.6 330.5,513.5C330.5,512.2 330.5,510.8 330.5,509.5C330.3,508.5 330.7,507.8 331.5,507.5Z"/>
+    <path android:fillColor="#b3bcbf" android:pathData="M435.5,507.5C436.2,508.8 437.1,510.1 438,511.5C438.7,521.2 438.7,530.8 438,540.5C437.6,542.4 436.4,543.4 434.5,543.5C400.5,543.7 366.5,543.5 332.5,543C331.7,542.2 330.8,541.3 330,540.5C329.2,531.3 329.3,522.3 330.5,513.5C329.9,522.6 330.5,531.2 332.5,539.5C332.8,540.2 333.1,540.8 333.5,541.5C366.5,542.7 399.5,542.8 432.5,542C433.3,541.3 433.6,540.5 433.5,539.5C434.5,539.7 435.2,539.3 435.5,538.5C435.5,528.2 435.5,517.8 435.5,507.5Z"/>
+    <path android:fillColor="#a5aeb1" android:pathData="M332.5,539.5C366.2,539.5 399.8,539.5 433.5,539.5C433.6,540.5 433.3,541.3 432.5,542C399.5,542.8 366.5,542.7 333.5,541.5C333.1,540.8 332.8,540.2 332.5,539.5Z"/>
+    <path android:fillColor="#c7d1d5" android:pathData="M330.5,509.5C330.5,510.8 330.5,512.2 330.5,513.5C329.3,522.3 329.2,531.3 330,540.5C330.8,541.3 331.7,542.2 332.5,543C366.5,543.5 400.5,543.7 434.5,543.5C417.5,544.8 400.2,545.5 382.5,545.5C365.2,545.3 347.8,545.2 330.5,545C330,544.1 329.3,543.2 328.5,542.5C327.3,532.2 327.2,521.8 328,511.5C328.7,510.6 329.5,510 330.5,509.5Z"/>
+    <path android:fillColor="#cdd8dc" android:pathData="M794.5,326.5C797.6,329.6 799.9,333.3 801.5,337.5C802.7,338 803.9,338.7 805,339.5C812.4,356.2 820.3,372.7 828.5,389C831,396.2 833.5,403.3 836,410.5C836.7,411.4 837.5,412 838.5,412.5C839,417.5 839.5,422.5 840,427.5C843.5,437.6 846.2,447.9 848,458.5C851.1,494.5 851.3,530.5 848.5,566.5C842.5,607.2 829.2,645.2 808.5,680.5C810.4,673.7 812.6,667.1 815,660.5C820.3,649.7 824.9,638.7 829,627.5C862.9,523.2 851.6,424.2 795,330.5C794.5,329.2 794.3,327.9 794.5,326.5Z"/>
+    <path android:fillColor="#b4bdc0" android:pathData="M459.5,490.5C459.5,513.5 459.5,536.5 459.5,559.5C470.8,559.5 482.2,559.5 493.5,559.5C494.5,547 494.8,534.3 494.5,521.5C550.1,520.3 605.8,520.2 661.5,521C662,521.7 662.7,522.2 663.5,522.5C663.5,534.2 663.5,545.8 663.5,557.5C674.7,558.5 686,558.8 697.5,558.5C696.7,559.8 695.7,561 694.5,562C684.8,562.7 675.2,562.7 665.5,562C664.7,561.2 663.8,560.3 663,559.5C662.7,547.5 662.3,535.5 662,523.5C661.5,523 661,522.5 660.5,522C606.8,521.3 553.2,521.3 499.5,522C498.1,522.5 496.9,523.3 496,524.5C495.8,537.2 495.3,549.9 494.5,562.5C494,563.2 493.3,563.7 492.5,564C481.8,564.7 471.2,564.7 460.5,564C460,563.5 459.5,563 459,562.5C458.2,538.3 458.3,514.3 459.5,490.5Z"/>
+    <path android:fillColor="#becacd" android:pathData="M169.5,539.5C171.8,552.6 174,566 176,579.5C179.5,592.8 182.6,606.1 185.5,619.5C176.5,593.7 171.1,567 169.5,539.5Z"/>
+    <path android:fillColor="#ccd7db" android:pathData="M674.5,630.5C673,638.6 671.2,646.6 669,654.5C667.6,658.3 665.1,661.1 661.5,663C651.5,663.7 641.5,663.7 631.5,663C627.7,661.4 625.7,658.6 625.5,654.5C625.3,619.5 625.5,584.5 626,549.5C630.1,546.6 631.3,542.9 629.5,538.5C628.7,537.7 627.7,537.2 626.5,537C620.5,536.8 614.5,536.7 608.5,536.5C602.1,536.5 596.1,537.2 590.5,538.5C589.8,538.8 589.2,539.1 588.5,539.5C587.3,586.2 587.2,632.8 588,679.5C588.6,683.6 590.1,687.2 592.5,690.5C593.3,691.4 594.3,691.7 595.5,691.5C599.4,695.2 604.1,697.7 609.5,699C631.2,699.7 652.8,699.7 674.5,699C678.4,697.5 682.4,696.4 686.5,695.5C691,693.2 694.3,689.7 696.5,685C697.8,684.7 698.9,684.2 700,683.5C702.3,679.1 703.9,674.4 705,669.5C705.5,659.1 706.3,648.7 707.5,638.5C707.4,637.4 707.1,636.4 706.5,635.5C708,636.2 708.9,637.6 709,639.5C710.4,656.8 707.1,673.1 699,688.5C693.4,696.1 685.9,701 676.5,703C653.8,703.7 631.2,703.7 608.5,703C595.4,699.9 587.9,691.8 586,678.5C585.3,631.8 585.3,585.2 586,538.5C587.1,536.2 588.9,534.7 591.5,534C602.5,533.3 613.5,533.3 624.5,534C630.5,534.3 633.8,537.3 634.5,543C633.9,546.9 632.4,550.4 630,553.5C629,588.5 629.4,623.5 631,658.5C632.5,660 634.3,660.8 636.5,661C644.6,661.9 652.6,661.6 660.5,660C667.7,652.6 671.7,643.8 672.5,633.5C672.6,632 673.3,631 674.5,630.5Z"/>
+    <path android:fillColor="#aeb7ba" android:pathData="M590.5,542.5C590.3,586.5 590.5,630.5 591,674.5C593.1,687.3 600.6,694.3 613.5,695.5C633.7,696.7 654,696.8 674.5,696C675.4,695.7 676.1,695.2 676.5,694.5C684.8,692.9 691.1,688.5 695.5,681.5C694,687.1 691,691.8 686.5,695.5C682.4,696.4 678.4,697.5 674.5,699C652.8,699.7 631.2,699.7 609.5,699C604.1,697.7 599.4,695.2 595.5,691.5C594.5,687.4 592.7,683.8 590,680.5C589.2,634.3 589.3,588.3 590.5,542.5Z"/>
+    <path android:fillColor="#838d90" android:pathData="M676.5,694.5C676.1,695.2 675.4,695.7 674.5,696C654,696.8 633.7,696.7 613.5,695.5C634.5,695.8 655.5,695.5 676.5,694.5Z"/>
+    <path android:fillColor="#bdc7ca" android:pathData="M707.5,638.5C706.3,648.7 705.5,659.1 705,669.5C703.9,674.4 702.3,679.1 700,683.5C698.9,684.2 697.8,684.7 696.5,685C694.3,689.7 691,693.2 686.5,695.5C691,691.8 694,687.1 695.5,681.5C697.3,677.6 698.8,673.6 700,669.5C702.4,659 704.9,648.7 707.5,638.5Z"/>
+    <path android:fillColor="#aeb7bb" android:pathData="M629.5,538.5C631.3,542.9 630.1,546.6 626,549.5C625.5,584.5 625.3,619.5 625.5,654.5C624.2,618.3 624.2,582 625.5,545.5C628.5,544.1 629.9,541.8 629.5,538.5Z"/>
+    <path android:fillColor="#c3cdd1" android:pathData="M590.5,538.5C590.5,539.8 590.5,541.2 590.5,542.5C589.3,588.3 589.2,634.3 590,680.5C592.7,683.8 594.5,687.4 595.5,691.5C594.3,691.7 593.3,691.4 592.5,690.5C590.1,687.2 588.6,683.6 588,679.5C587.2,632.8 587.3,586.2 588.5,539.5C589.2,539.1 589.8,538.8 590.5,538.5Z"/>
+    <path android:fillColor="#cad6db" android:pathData="M808.5,680.5C796.6,702.3 782.3,722.3 765.5,740.5C765.5,738.8 765.5,737.2 765.5,735.5C778.8,720.7 790.6,704.3 801,686.5C803.9,684.7 806.4,682.7 808.5,680.5Z"/>
+    <path android:fillColor="#d0dbdf" android:pathData="M474.5,666.5C466.2,669.7 457.6,671.4 448.5,671.5C447.8,671.9 447.3,672.6 447,673.5C446.7,673.2 446.3,672.8 446,672.5C445.7,640.8 445.3,609.2 445,577.5C444.8,576.3 444.3,575.3 443.5,574.5C443.5,572.8 443.5,571.2 443.5,569.5C403.3,569.2 363.3,569.5 323.5,570.5C323.5,571.5 323.5,572.5 323.5,573.5C322.9,573.6 322.4,573.9 322,574.5C321.3,619.5 321.3,664.5 322,709.5C322.8,710.3 323.7,711.2 324.5,712C333.8,714 343.2,714 352.5,712C353.9,710.8 354.7,709.3 355,707.5C355.3,703.8 355.7,700.2 356,696.5C356.4,695.6 356.9,694.8 357.5,694C374.2,693.3 390.8,693.3 407.5,694C408.4,694.4 409.3,694.9 410,695.5C409.7,700.1 411.2,703.9 414.5,707C423.2,707.7 431.8,707.7 440.5,707C442.3,706.2 443.8,705 445,703.5C446,697.9 446.9,692.2 447.5,686.5C448.7,687.3 449.7,688.3 450.5,689.5C452.8,693.9 454.6,698.5 456,703.5C459.1,710.8 464.6,713.3 472.5,711C481.2,708.8 489.2,705.3 496.5,700.5C502.5,698 507.8,694.5 512.5,690C513.8,689.5 515.1,689.3 516.5,689.5C518.3,688.9 519.9,688.1 521.5,687C527.7,679.8 534.2,673 541,666.5C552.5,646.5 558.9,624.8 560,601.5C560.3,584.5 560.7,567.5 561,550.5C563.7,548.3 564.8,545.5 564.5,542C564.4,540 563.8,538.5 562.5,537.5C560.9,537 559.2,536.6 557.5,536.5C546.3,535.5 535,535.2 523.5,535.5C523.5,536.5 523.5,537.5 523.5,538.5C522.2,539.1 521.4,540.1 521,541.5C520.8,565.5 520.2,589.5 519,613.5C517.2,619.1 515.7,624.8 514.5,630.5C508.7,644 499.4,654.3 486.5,661.5C486.6,660.5 486.3,659.7 485.5,659C499.8,650.4 509.3,637.9 514,621.5C515.8,614.9 517.2,608.3 518,601.5C518.3,582.2 518.7,562.8 519,543.5C518.8,538.6 521,535.5 525.5,534C536.5,533.3 547.5,533.3 558.5,534C569.5,537.3 571.3,543.5 564,552.5C563.9,572.5 563.2,592.5 562,612.5C554.2,670.8 521.4,705.1 463.5,715.5C461,715.2 458.8,714.2 457,712.5C454.1,706.2 451.5,699.9 449,693.5C448.2,697.1 447.6,700.8 447,704.5C445.2,707.3 442.7,708.8 439.5,709C430.4,709.8 421.4,709.5 412.5,708C411.7,707.2 410.8,706.3 410,705.5C409.8,702.2 409.3,699.1 408.5,696C391.8,695.3 375.2,695.3 358.5,696C357.7,701.1 357.2,706.3 357,711.5C356.5,713.3 355.3,714.5 353.5,715C343.5,715.7 333.5,715.7 323.5,715C322.1,714.5 320.9,713.7 320,712.5C318.3,666.3 318,619.9 319,573.5C319.9,570.2 322.1,568.4 325.5,568C365.2,567 404.9,567.4 444.5,569C445.7,569.9 446.5,571.1 447,572.5C447.5,605.2 447.7,637.8 447.5,670.5C456.5,669.2 465.5,667.8 474.5,666.5Z"/>
+    <path android:fillColor="#c5d0d3" android:pathData="M323.5,573.5C323.5,574.2 323.5,574.8 323.5,575.5C322.5,619.7 322.2,664 322.5,708.5C331.6,710.5 341,711 350.5,710C351.4,709.3 352,708.5 352.5,707.5C353.5,703 353.8,698.4 353.5,693.5C354.3,693.2 355,692.7 355.5,692C373.5,691.3 391.5,691.3 409.5,692C410,692.7 410.7,693.2 411.5,693.5C412.2,696.3 412.8,699 413.5,701.5C413.8,701.5 414.2,701.5 414.5,701.5C414.4,702.5 414.7,703.3 415.5,704C424.9,704.9 434.2,704.6 443.5,703C444.1,693.9 444.9,684.7 446,675.5C446.9,677.7 448,679.7 449.5,681.5C450.5,684.1 450.8,686.8 450.5,689.5C449.7,688.3 448.7,687.3 447.5,686.5C446.9,692.2 446,697.9 445,703.5C443.8,705 442.3,706.2 440.5,707C431.8,707.7 423.2,707.7 414.5,707C411.2,703.9 409.7,700.1 410,695.5C409.3,694.9 408.4,694.4 407.5,694C390.8,693.3 374.2,693.3 357.5,694C356.9,694.8 356.4,695.6 356,696.5C355.7,700.2 355.3,703.8 355,707.5C354.7,709.3 353.9,710.8 352.5,712C343.2,714 333.8,714 324.5,712C323.7,711.2 322.8,710.3 322,709.5C321.3,664.5 321.3,619.5 322,574.5C322.4,573.9 322.9,573.6 323.5,573.5Z"/>
+    <path android:fillColor="#737e82" android:pathData="M413.5,687.5C414.5,691.6 414.8,696 414.5,700.5C423.8,700.5 433.2,700.5 442.5,700.5C433.3,701.5 424,701.8 414.5,701.5C414.2,701.5 413.8,701.5 413.5,701.5C413.5,698.5 413.5,695.5 413.5,692.5C413.5,690.8 413.5,689.2 413.5,687.5Z"/>
+    <path android:fillColor="#b6bfc2" android:pathData="M413.5,692.5C413.5,695.5 413.5,698.5 413.5,701.5C412.8,699 412.2,696.3 411.5,693.5C410.7,693.2 410,692.7 409.5,692C391.5,691.3 373.5,691.3 355.5,692C355,692.7 354.3,693.2 353.5,693.5C353.5,692.2 353.5,690.8 353.5,689.5C372.2,689.3 390.8,689.5 409.5,690C411,690.7 412.3,691.5 413.5,692.5Z"/>
+    <path android:fillColor="#a2aaae" android:pathData="M413.5,687.5C413.5,689.2 413.5,690.8 413.5,692.5C412.3,691.5 411,690.7 409.5,690C390.8,689.5 372.2,689.3 353.5,689.5C353.5,690.8 353.5,692.2 353.5,693.5C353.8,698.4 353.5,703 352.5,707.5C352.5,700.8 352.5,694.2 352.5,687.5C372.8,687.5 393.2,687.5 413.5,687.5Z"/>
+    <path android:fillColor="#a5aeb1" android:pathData="M547.5,645.5C546.6,651.6 544.5,657.3 541,662.5C533.3,672 525.1,681 516.5,689.5C515.1,689.3 513.8,689.5 512.5,690C507.8,694.5 502.5,698 496.5,700.5C486.3,703.7 475.9,706.7 465.5,709.5C461.2,709.8 459.2,707.8 459.5,703.5C460.6,704.6 461.4,705.9 462,707.5C490.8,703.1 514.8,690.1 534,668.5C539.2,661.2 543.7,653.5 547.5,645.5Z"/>
+    <path android:fillColor="#b8c2c6" android:pathData="M562.5,537.5C563.8,538.5 564.4,540 564.5,542C564.8,545.5 563.7,548.3 561,550.5C560.7,567.5 560.3,584.5 560,601.5C558.9,624.8 552.5,646.5 541,666.5C534.2,673 527.7,679.8 521.5,687C519.9,688.1 518.3,688.9 516.5,689.5C525.1,681 533.3,672 541,662.5C544.5,657.3 546.6,651.6 547.5,645.5C553,630.3 556.5,614.6 558,598.5C558.3,580.8 558.7,563.2 559,545.5C562.5,543.6 563.7,540.9 562.5,537.5Z"/>
+    <path android:fillColor="#b4bdc0" android:pathData="M323.5,575.5C323.5,619.5 323.5,663.5 323.5,707.5C333.2,707.5 342.8,707.5 352.5,707.5C352,708.5 351.4,709.3 350.5,710C341,711 331.6,710.5 322.5,708.5C322.2,664 322.5,619.7 323.5,575.5Z"/>
+    <path android:fillColor="#bcc5c9" android:pathData="M443.5,574.5C444.3,575.3 444.8,576.3 445,577.5C445.3,609.2 445.7,640.8 446,672.5C446.3,672.8 446.7,673.2 447,673.5C447.3,672.6 447.8,671.9 448.5,671.5C452.2,682.2 455.8,692.8 459.5,703.5C459.2,707.8 461.2,709.8 465.5,709.5C475.9,706.7 486.3,703.7 496.5,700.5C489.2,705.3 481.2,708.8 472.5,711C464.6,713.3 459.1,710.8 456,703.5C454.6,698.5 452.8,693.9 450.5,689.5C450.8,686.8 450.5,684.1 449.5,681.5C448,679.7 446.9,677.7 446,675.5C444.9,684.7 444.1,693.9 443.5,703C434.2,704.6 424.9,704.9 415.5,704C414.7,703.3 414.4,702.5 414.5,701.5C424,701.8 433.3,701.5 442.5,700.5C443.5,658.7 443.8,616.7 443.5,574.5Z"/>
+    <path android:fillColor="#8e999d" android:pathData="M323.5,570.5C363.3,569.5 403.3,569.2 443.5,569.5C443.5,571.2 443.5,572.8 443.5,574.5C443.8,616.7 443.5,658.7 442.5,700.5C442.5,657.2 442.5,613.8 442.5,570.5C402.8,570.5 363.2,570.5 323.5,570.5Z"/>
+    <path android:fillColor="#142c33" android:pathData="M323.5,570.5C363.2,570.5 402.8,570.5 442.5,570.5C442.5,613.8 442.5,657.2 442.5,700.5C433.2,700.5 423.8,700.5 414.5,700.5C414.8,696 414.5,691.6 413.5,687.5C393.2,687.5 372.8,687.5 352.5,687.5C352.5,694.2 352.5,700.8 352.5,707.5C342.8,707.5 333.2,707.5 323.5,707.5C323.5,663.5 323.5,619.5 323.5,575.5C323.5,574.8 323.5,574.2 323.5,573.5C323.5,572.5 323.5,571.5 323.5,570.5Z"/>
+    <path android:fillColor="#728084" android:pathData="M413.5,597.5C414.5,618.3 414.8,639.3 414.5,660.5C393.7,660.8 373,660.5 352.5,659.5C352.8,659.5 353.2,659.5 353.5,659.5C354.2,659.5 354.8,659.5 355.5,659.5C374.5,659.5 393.5,659.5 412.5,659.5C413.5,640 413.8,620.3 413.5,600.5C413.5,599.5 413.5,598.5 413.5,597.5Z"/>
+    <path android:fillColor="#bcc6ca" android:pathData="M413.5,600.5C413.8,620.3 413.5,640 412.5,659.5C412.8,640.8 412.5,622.2 411.5,603.5C393.2,602.3 374.9,602.2 356.5,603C356,603.5 355.5,604 355,604.5C354.2,622.9 354.3,641.2 355.5,659.5C354.8,659.5 354.2,659.5 353.5,659.5C353.2,639.9 353.5,620.4 354.5,601C364.4,599.9 374.4,599.4 384.5,599.5C394.2,599.5 403.9,599.9 413.5,600.5Z"/>
+    <path android:fillColor="#cfdade" android:pathData="M412.5,659.5C393.5,659.5 374.5,659.5 355.5,659.5C354.3,641.2 354.2,622.9 355,604.5C355.5,604 356,603.5 356.5,603C374.9,602.2 393.2,602.3 411.5,603.5C412.5,622.2 412.8,640.8 412.5,659.5Z"/>
+    <path android:fillColor="#d7e2e6" android:pathData="M358.5,605.5C375.2,605.5 391.8,605.5 408.5,605.5C408.5,622.8 408.5,640.2 408.5,657.5C391.6,657.8 374.8,657.5 358,656.5C357.2,639.4 357.3,622.4 358.5,605.5Z"/>
+    <path android:fillColor="#a0a8ab" android:pathData="M413.5,597.5C413.5,598.5 413.5,599.5 413.5,600.5C403.9,599.9 394.2,599.5 384.5,599.5C374.4,599.4 364.4,599.9 354.5,601C353.5,620.4 353.2,639.9 353.5,659.5C353.2,659.5 352.8,659.5 352.5,659.5C352.5,638.8 352.5,618.2 352.5,597.5C372.8,597.5 393.2,597.5 413.5,597.5Z"/>
+    <path android:fillColor="#8e999d" android:pathData="M557.5,536.5C546.5,536.5 535.5,536.5 524.5,536.5C524.8,555 524.5,573.3 523.5,591.5C523.5,573.8 523.5,556.2 523.5,538.5C523.5,537.5 523.5,536.5 523.5,535.5C535,535.2 546.3,535.5 557.5,536.5Z"/>
+    <path android:fillColor="#c4ced2" android:pathData="M523.5,538.5C523.5,556.2 523.5,573.8 523.5,591.5C523.6,605.4 520.6,618.4 514.5,630.5C515.7,624.8 517.2,619.1 519,613.5C520.2,589.5 520.8,565.5 521,541.5C521.4,540.1 522.2,539.1 523.5,538.5Z"/>
+    <path android:fillColor="#142c33" android:pathData="M557.5,536.5C559.2,536.6 560.9,537 562.5,537.5C563.7,540.9 562.5,543.6 559,545.5C558.7,563.2 558.3,580.8 558,598.5C556.5,614.6 553,630.3 547.5,645.5C543.7,653.5 539.2,661.2 534,668.5C514.8,690.1 490.8,703.1 462,707.5C461.4,705.9 460.6,704.6 459.5,703.5C455.8,692.8 452.2,682.2 448.5,671.5C457.6,671.4 466.2,669.7 474.5,666.5C478.9,665.6 482.9,663.9 486.5,661.5C499.4,654.3 508.7,644 514.5,630.5C520.6,618.4 523.6,605.4 523.5,591.5C524.5,573.3 524.8,555 524.5,536.5C535.5,536.5 546.5,536.5 557.5,536.5Z"/>
+    <path android:fillColor="#cad8dc" android:pathData="M601.5,841.5C553.1,855.4 504.1,858.1 454.5,849.5C488.9,853.4 523.2,853.2 557.5,849C572.2,846.4 586.8,843.9 601.5,841.5Z"/>
+</vector>
@@ -5,21 +5,19 @@
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
-    android:background="@color/colorPrimaryDark"
+    android:background="@color/splashscreen_background"
    android:gravity="center"
    android:orientation="vertical"
    android:scaleType="centerCrop"
    android:navigationBarColor="#333333"
    tools:context=".MainActivity">
-
    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottie"
-        android:layout_width="200dp"
-        android:layout_height="200dp"
-        android:layout_gravity="center_horizontal"
-        android:orientation="horizontal"
-        android:paddingLeft="25dp"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_margin="130dp"
+        app:lottie_rawRes="@raw/loading"
        app:lottie_autoPlay="true"
        app:lottie_loop="false"
-        app:lottie_rawRes="@raw/loading" />
+        />
 </LinearLayout>
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@mipmap/ic_launcher_background" />
-    <foreground android:drawable="@mipmap/ic_launcher_foreground" />
-    <monochrome android:drawable="@mipmap/ic_launcher_monochrome" />
+    <background android:drawable="@mipmap/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+    <monochrome android:drawable="@mipmap/ic_launcher_foreground"/>
 </adaptive-icon>
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@mipmap/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>
@@ -1,10 +1,9 @@
 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <resources>
  <color name="iconBackground">#FFFFFF</color>
-  <color name="splashscreen_background">#202125</color>
+  <color name="splashscreen_background">#1F2024</color>
  <color name="colorPrimary">#023c69</color>
  <color name="colorPrimaryDark">#202125</color>
  <color name="navigationBarColor">#202125</color>
  <color name="notification_icon_color">#00adb5</color>
-  <color name="ic_launcher_background">#222831</color>
 </resources>
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#132C33</color>
+</resources>
@@ -3,7 +3,7 @@
  encoding="UTF-8"
  standalone="yes"
 ?>
-<resources>
+<resources xmlns:tools="http://schemas.android.com/tools">
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
@@ -11,7 +11,9 @@
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="android:navigationBarColor">@color/colorPrimaryDark</item>
    <item name="android:statusBarColor">@color/colorPrimaryDark</item>
+    <item name="colorControlActivated">#2596be</item> 
  </style>
+
  <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
    <item name="android:statusBarColor">@color/colorPrimaryDark</item>
    <item name="android:windowActionBar">false</item>
@@ -22,6 +24,9 @@
  <style name="Theme.App.SplashScreen" parent="AppTheme">
    <!-- Below line is handled by '@expo/configure-splash-screen' command and it's discouraged to modify it manually -->
    <!-- Customize your splash screen theme here -->
+    <item name="android:windowSplashScreenBackground" tools:targetApi="s">@color/colorPrimaryDark</item>
+    <item name="android:windowSplashScreenAnimatedIcon" tools:targetApi="s" >@drawable/invisible</item>
+    <item name="android:windowSplashScreenAnimationDuration" tools:targetApi="s">1000</item>
    <!-- <item name="icon">@drawable/no_icon</item> -->
    <item name="android:windowBackground">@drawable/splashscreen</item>
  </style>
@@ -8,7 +8,7 @@ buildscript {
        minSdkVersion = 21
        compileSdkVersion = 33
        targetSdkVersion = 33
-
+        kotlinVersion = "1.8.10"
        // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
        ndkVersion = "23.1.7779620"
    }
@@ -17,7 +17,7 @@ buildscript {
        mavenCentral()
    }
    dependencies {
-        classpath("com.android.tools.build:gradle:7.4.1")
+        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
    }
 }
@@ -1,5 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.1-all.zip
+networkTimeout=10000
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
@@ -55,7 +55,7 @@
 #       Darwin, MinGW, and NonStop.
 #
 #   (3) This script is generated from the Groovy template
-#       https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
 #       within the Gradle project.
 #
 #       You can find Gradle at https://github.com/gradle/gradle/.
@@ -80,10 +80,10 @@ do
    esac
 done

-APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
-
-APP_NAME="Gradle"
+# This is normally unused
+# shellcheck disable=SC2034
 APP_BASE_NAME=${0##*/}
+APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit

 # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
 DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
@@ -143,12 +143,16 @@ fi
 if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
    case $MAX_FD in #(
      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC3045 
        MAX_FD=$( ulimit -H -n ) ||
            warn "Could not query maximum file descriptor limit"
    esac
    case $MAX_FD in  #(
      '' | soft) :;; #(
      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC3045 
        ulimit -n "$MAX_FD" ||
            warn "Could not set maximum file descriptor limit to $MAX_FD"
    esac
@@ -205,6 +209,12 @@ set -- \
        org.gradle.wrapper.GradleWrapperMain \
        "$@"

+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
 # Use "xargs" to parse quoted args.
 #
 # With -n1 it outputs one arg per line, with the quotes and backslashes removed.
@@ -14,7 +14,7 @@
@rem limitations under the License.
@rem

-@if "%DEBUG%" == "" @echo off
+@if "%DEBUG%"=="" @echo off
@rem ##########################################################################
@rem
@rem  Gradle startup script for Windows
@@ -25,7 +25,8 @@
 if "%OS%"=="Windows_NT" setlocal

 set DIRNAME=%~dp0
-if "%DIRNAME%" == "" set DIRNAME=.
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
 set APP_BASE_NAME=%~n0
 set APP_HOME=%DIRNAME%

@@ -40,7 +41,7 @@ if defined JAVA_HOME goto findJavaFromJavaHome

 set JAVA_EXE=java.exe
 %JAVA_EXE% -version >NUL 2>&1
-if "%ERRORLEVEL%" == "0" goto execute
+if %ERRORLEVEL% equ 0 goto execute

 echo.
 echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
@@ -75,13 +76,15 @@ set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar

 :end
@rem End local scope for the variables with windows NT shell
-if "%ERRORLEVEL%"=="0" goto mainEnd
+if %ERRORLEVEL% equ 0 goto mainEnd

 :fail
 rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
 rem the _cmd.exe /c_ return code!
-if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
-exit /b 1
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%

 :mainEnd
 if "%OS%"=="Windows_NT" endlocal
@@ -3,13 +3,7 @@ rootProject.name = 'LNReader'
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)

 include ':app'
-includeBuild('../node_modules/react-native-gradle-plugin')
+includeBuild('../node_modules/@react-native/gradle-plugin')

 apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle")
 useExpoModules()
-
-include ':react-native-lottie-splash-screen'
-project(':react-native-lottie-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-lottie-splash-screen/android')
-
-include ':react-native-fs'
-project(':react-native-fs').projectDir = new File(settingsDir, '../node_modules/react-native-fs/android')
@@ -1,4 +1,44 @@
 // Learn more https://docs.expo.io/guides/customizing-metro
-const { getDefaultConfig } = require('expo/metro-config');
+const path = require('path');
+const fs = require('fs');
+const { mergeConfig } = require('metro-config');
+const { getDefaultConfig } = require('@react-native/metro-config');
+const defaultConfig = getDefaultConfig(__dirname);

-module.exports = getDefaultConfig(__dirname);
+const map = {
+  '.ico': 'image/x-icon',
+  '.html': 'text/html',
+  '.js': 'text/javascript',
+  '.json': 'application/json',
+  '.css': 'text/css',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+};
+const customConfig = {
+  server: {
+    port: 8081,
+    enhanceMiddleware: (metroMiddleware, metroServer) => {
+      return (request, res, next) => {
+        const filePath = path.join(
+          __dirname,
+          'android/app/src/main',
+          request._parsedUrl.path || '',
+        );
+        const ext = path.parse(filePath).ext;
+        if (fs.existsSync(filePath)) {
+          try {
+            const data = fs.readFileSync(filePath);
+            res.setHeader('Content-type', map[ext] || 'text/plain');
+            res.end(data);
+          } catch (err) {
+            res.statusCode = 500;
+            res.end(`Error getting the file: ${err}.`);
+          }
+        } else {
+          return metroMiddleware(request, res, next);
+        }
+      };
+    },
+  },
+};
+module.exports = mergeConfig(defaultConfig, customConfig);
@@ -16,58 +16,60 @@
  "dependencies": {
    "@gorhom/bottom-sheet": "^4.4.5",
    "@react-native-community/slider": "4.4.2",
+    "@react-native-cookies/cookies": "^6.2.1",
    "@react-native-google-signin/google-signin": "^11.0.0",
-    "@react-native-picker/picker": "2.4.8",
-    "@react-navigation/material-bottom-tabs": "^6.0.9",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/stack": "^6.0.11",
-    "@shopify/flash-list": "1.4.0",
-    "cheerio": "^1.0.0-rc.10",
+    "@shopify/flash-list": "1.4.3",
+    "cheerio": "^1.0.0-rc.12",
    "color": "^4.2.3",
-    "dayjs": "^1.11.4",
-    "expo": "^48.0.21",
-    "expo-clipboard": "~4.1.2",
-    "expo-document-picker": "~11.2.2",
-    "expo-file-system": "~15.2.2",
-    "expo-haptics": "~12.2.1",
-    "expo-keep-awake": "~12.0.1",
-    "expo-linear-gradient": "~12.1.2",
-    "expo-linking": "~4.0.1",
-    "expo-localization": "~14.1.1",
-    "expo-notifications": "~0.18.1",
-    "expo-speech": "~11.1.1",
-    "expo-sqlite": "~11.1.1",
-    "expo-web-browser": "~12.1.1",
+    "dayjs": "^1.11.10",
+    "expo": "^49.0.23",
+    "expo-clipboard": "~4.3.1",
+    "expo-document-picker": "~11.5.4",
+    "expo-file-system": "~15.4.5",
+    "expo-haptics": "~12.4.0",
+    "expo-keep-awake": "~12.3.0",
+    "expo-linear-gradient": "~12.3.0",
+    "expo-linking": "~5.0.2",
+    "expo-localization": "~14.3.0",
+    "expo-notifications": "~0.20.1",
+    "expo-speech": "~11.3.0",
+    "expo-sqlite": "~11.3.3",
+    "expo-web-browser": "~12.3.2",
+    "htmlparser2": "^9.1.0",
    "i18n-js": "^3.8.0",
    "lodash-es": "^4.17.21",
-    "qs": "^6.10.3",
+    "protobufjs": "^7.2.6",
+    "qs": "^6.11.2",
    "react": "18.2.0",
-    "react-native": "0.71.14",
+    "react-native": "0.72.10",
    "react-native-background-actions": "^3.0.1",
    "react-native-device-info": "^8.4.7",
-    "react-native-easing-gradient": "^1.0.0",
+    "react-native-drawer-layout": "^3.2.2",
    "react-native-error-boundary": "^1.1.16",
    "react-native-fs": "^2.20.0",
-    "react-native-gesture-handler": "~2.9.0",
+    "react-native-gesture-handler": "~2.12.0",
    "react-native-lottie-splash-screen": "^1.0.1",
    "react-native-mmkv": "^2.11.0",
-    "react-native-pager-view": "6.1.2",
+    "react-native-pager-view": "6.2.0",
    "react-native-paper": "^5.12.0",
-    "react-native-reanimated": "^2.17.0",
-    "react-native-safe-area-context": "4.5.0",
-    "react-native-screens": "~3.20.0",
+    "react-native-reanimated": "~3.3.0",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-screens": "~3.22.0",
    "react-native-shimmer-placeholder": "^2.0.9",
    "react-native-tab-view": "^3.5.2",
    "react-native-vector-icons": "^9.0.0",
-    "react-native-webview": "11.26.0",
+    "react-native-webview": "13.2.2",
    "sanitize-html": "^2.7.0",
    "urlencode": "^2.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/runtime": "^7.20.0",
-    "@react-native-community/eslint-config": "^3.2.0",
-    "@tsconfig/react-native": "^2.0.2",
+    "@react-native/eslint-config": "^0.72.2",
+    "@react-native/metro-config": "^0.72.12",
+    "@tsconfig/react-native": "^3.0.0",
    "@types/color": "^3.0.3",
    "@types/i18n-js": "^3.8.2",
    "@types/lodash-es": "^4.17.6",
@@ -81,10 +83,10 @@
    "eslint-plugin-react-native": "^4.1.0",
    "husky": "^7.0.4",
    "lint-staged": "^12.3.7",
-    "metro-react-native-babel-preset": "^0.73.10",
+    "metro-react-native-babel-preset": "^0.76.9",
    "prettier": "^2.4.1",
    "react-native-dotenv": "^3.4.9",
-    "typescript": "4.8.4"
+    "typescript": "^5.1.3"
  },
  "resolutions": {
    "@types/react": "^17"
@@ -94,5 +96,8 @@
      "eslint --fix",
      "prettier --check"
    ]
+  },
+  "engines": {
+    "node": ">=16"
  }
 }
@@ -1,5 +0,0 @@
-1. Create `index.html` with [template](./template.index.html) content in this folder/
-2. Replace `${hmtl}` by your chapter text.
-3. Edit files in `/android/app/src/main/assets` folder.
-4. Open index.html in browse for quick test.
-5. rebuild the app to test in real reader.
@@ -1,71 +0,0 @@
-<html>
-
-<head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-    <style>
-        :root {
-            --StatusBar-currentHeight: 30px;
-            --readerSettings-theme: #292832;
-            --readerSettings-padding: 2%;
-            --readerSettings-textSize: 16px;
-            --readerSettings-textColor: #CCCCCC;
-            --readerSettings-textAlign: left;
-            --readerSettings-lineHeight: 1.5;
-            --readerSettings-fontFamily: ;
-            --theme-primary: rgb(0, 87, 206);
-            --theme-onPrimary: rgb(255, 255, 255);
-            --theme-secondary: rgb(88, 94, 113);
-            --theme-onSecondary: rgb(255, 255, 255);
-            --theme-surface: rgb(254, 251, 255);
-            --theme-surface-0-9: rgba(254, 251, 255, 0.9);
-            --theme-onSurface: rgb(27, 27, 31);
-            --theme-outline: rgb(117, 119, 128);
-            --chapterCtn-height: 700px;
-        }
-        body {
-            background-color: var(--readerSettings-theme);
-        }
-        @font-face {
-            font-family: 'Lora';
-            src: url("../android/app/src/main/assets/fonts/lora.ttf");
-        }
-    </style>
-    <script>
-        let hidden = true;
-        window.ReactNativeWebView = {};
-        window.ReactNativeWebView.postMessage = (data) => {
-            const event = JSON.parse(data);
-            switch (event.type) {
-            case 'hide':
-                if(!hidden) {
-                    scrollHandler.hide()
-                }else{
-                    scrollHandler.show();
-                }
-                break;
-            default:
-                console.log('unsupported event', event.type);
-                break;
-            }
-        };
-    </script>
-    <link rel="stylesheet" href="../android/app/src/main/assets/css/index.css">
-    <script async>
-        var showScrollPercentage = true;
-        var swipeGestures = false;
-        var autoSaveInterval = 2222;
-    </script>
-    <script defer src="../android/app/src/main/assets/js/index.js"></script>
-</head>
-
-<body>
-    <div class="chapterCtn" onclick="reader.post({type:'hide'})">
-        <chapter data-plugin-id='pluginId' data-novel-id='novelId' data-chapter-id='chapterId'>
-            ${html}
-        </chapter>
-        <div class="d-none" id="ScrollBar"></div>
-        <div id="reader-percentage"></div>
-    </div>
-</body>
-</body>
-</html>
@@ -1,4 +1,4 @@
-import { create, download, getJson, list } from './request';
+import { create, list } from './request';
 import { DriveCreateRequestData, DriveFile } from './types';

 const LNREADER_DRIVE_MARK = '(Do not change this!) LNReader-Drive';
@@ -101,11 +101,3 @@ export const readDir = async (parentId: string, marked?: boolean) => {
  }
  return fileList;
 };
-
-export const readFile = async (file: DriveFile, type: 'json' | 'media') => {
-  if (type === 'json') {
-    return getJson(file.id);
-  } else {
-    return download(file);
-  }
-};
@@ -1,13 +1,12 @@
 import { GoogleSignin } from '@react-native-google-signin/google-signin';
-import { downloadFile, mkdir, exists } from 'react-native-fs';
 import {
  DriveCreateRequestData,
  DriveFile,
  DriveReponse,
  DriveRequestParams,
 } from './types';
-import { AppDownloadFolder } from '@utils/constants/download';
 import { PATH_SEPARATOR } from '@api/constants';
+import ZipArchive from '@native/ZipArchive';

 const BASE_URL = 'https://www.googleapis.com/drive/v3/files';
 const MEDIA_UPLOAD_URL = 'https://www.googleapis.com/upload/drive/v3/files';
@@ -83,35 +82,57 @@ export const create = async (
  }).then(res => res.json());
 };

-export const getJson = async (id: string) => {
+export const updateMetadata = async (
+  fileId: string,
+  fileMetaData: Partial<DriveFile>,
+  oldParent?: string,
+) => {
  const { accessToken } = await GoogleSignin.getTokens();
-  const url = BASE_URL + '/' + id + '?alt=media';
+  const url =
+    BASE_URL +
+    '/' +
+    fileId +
+    '?' +
+    buildParams({
+      addParents: fileMetaData.parents?.[0],
+      removeParents: oldParent,
+    });
  return fetch(url, {
+    method: 'PATCH',
    headers: {
      Authorization: `Bearer ${accessToken}`,
      Accept: 'application/json',
+      'Content-Type': 'application/json',
    },
-  }).then(res => res.json());
-};
-
-export const download = async (file: DriveFile) => {
-  const { accessToken } = await GoogleSignin.getTokens();
-  const url = BASE_URL + '/' + file.id + '?alt=media';
-  const regex = new RegExp(`${PATH_SEPARATOR}`, 'g');
-  const filePath = AppDownloadFolder + '/' + file.name.replace(regex, '/');
-  const dirPath = filePath.split('/').slice(0, -1).join('/');
-  return exists(filePath).then(existed => {
-    if (!existed) {
-      return mkdir(dirPath).then(() => {
-        return downloadFile({
-          fromUrl: url,
-          toFile: filePath,
-          headers: {
-            Authorization: `Bearer ${accessToken}`,
-            Accept: 'application/json',
-          },
-        });
-      });
-    }
+    body: JSON.stringify({
+      'name': fileMetaData.name,
+      'mimeType': fileMetaData.mimeType,
+    }),
+  });
+};
+
+export const uploadMedia = async (
+  sourceDirPath: string,
+): Promise<DriveFile> => {
+  const { accessToken } = await GoogleSignin.getTokens();
+
+  const params: DriveRequestParams = {
+    fields: 'id, parents',
+    uploadType: 'media',
+  };
+  const url = MEDIA_UPLOAD_URL + '?' + buildParams(params);
+  const response = await ZipArchive.remoteZip(sourceDirPath, url, {
+    Authorization: `Bearer ${accessToken}`,
+    Accept: 'application/json',
+  });
+  return JSON.parse(response);
+};
+
+export const download = async (file: DriveFile, distDirPath: string) => {
+  const { accessToken } = await GoogleSignin.getTokens();
+  const url = BASE_URL + '/' + file.id + '?alt=media';
+  return ZipArchive.remoteUnzip(distDirPath, url, {
+    Authorization: `Bearer ${accessToken}`,
+    Accept: 'application/json',
  });
 };
@@ -22,6 +22,8 @@ export interface DriveRequestParams {
  fields?: string;
  pageToken?: string;
  uploadType?: string; // only for upload
+  addParents?: string;
+  removeParents?: string;
 }

 export interface DriveCreateRequestData {
@@ -1,8 +1,6 @@
 import { PATH_SEPARATOR } from '@api/constants';
-import { BackupPackage } from '@services/backup/types';
-import { AppDownloadFolder } from '@utils/constants/download';
+import ZipArchive from '@native/ZipArchive';
 import { fetchTimeout } from '@utils/fetch/fetch';
-import { downloadFile, mkdir } from 'react-native-fs';

 const commonHeaders = {
  'Connection': 'keep-alive',
@@ -11,80 +9,27 @@ const commonHeaders = {
  'Accept-Encoding': 'gzip, deflate, br',
 };

-export const upload = (host: string, data: BackupPackage) => {
-  const url = host + '/' + 'upload';
-  const body = new FormData();
-  data.name = data.name.replace(/\//g, PATH_SEPARATOR);
-  body.append('metadata', JSON.stringify(data));
-  if (data.mimeType === 'application/json') {
-    body.append('media', {
-      string: data.content,
-      type: data.mimeType,
-    });
-  } else {
-    body.append('media', {
-      name: data.name,
-      uri: data.content,
-      type: data.mimeType,
-    });
-  }
-  return fetchTimeout(url, {
-    method: 'POST',
-    headers: commonHeaders,
-    body,
-  });
+export const upload = (
+  host: string,
+  backupFolder: string,
+  filename: string,
+  sourceDirPath: string,
+) => {
+  const url = `${host}/upload/${backupFolder}${PATH_SEPARATOR}${filename}`;
+  return ZipArchive.remoteZip(sourceDirPath, url, {});
 };

-export const list = (host: string, folderTree: string[]): Promise<string[]> => {
-  const url = host + '/' + 'list';
-  const body = new FormData();
-  body.append('metadata', JSON.stringify({ folderTree }));
-
-  return fetchTimeout(url, {
-    method: 'POST',
-    headers: commonHeaders,
-    body,
-  }).then(res => res.json());
-};
-
-export const getJson = (host: string, folderTree: string[], name: string) => {
-  const url = host + '/' + 'download' + '/' + folderTree.join('/') + '/' + name;
-  return fetchTimeout(url, {
-    headers: commonHeaders,
-  }).then(res => res.json());
+export const list = (host: string): Promise<string[]> => {
+  const url = host + '/list';
+  return fetchTimeout(url, { headers: commonHeaders }).then(res => res.json());
 };

 export const download = async (
  host: string,
-  folderTree: string[],
-  name: string,
+  backupFolder: string,
+  filename: string,
+  distDirPath: string,
 ) => {
-  const url = host + '/' + 'download' + '/' + folderTree.join('/') + '/' + name;
-  const regex = new RegExp(`${PATH_SEPARATOR}`, 'g');
-  const filePath = AppDownloadFolder + '/' + name.replace(regex, '/');
-  const dirPath = filePath.split('/').slice(0, -1).join('/');
-  await mkdir(dirPath).then(() => {
-    return downloadFile({
-      fromUrl: url,
-      toFile: filePath,
-      headers: commonHeaders,
-    }).promise;
-  });
-};
-
-export const exists = (
-  host: string,
-  folderTree: string[],
-  name: string,
-): Promise<boolean> => {
-  const url = host + '/' + 'exists';
-  const body = new FormData();
-  body.append('metadata', JSON.stringify({ folderTree, name }));
-  return fetchTimeout(url, {
-    method: 'POST',
-    headers: commonHeaders,
-    body,
-  })
-    .then(res => res.json())
-    .then(data => data.exists);
+  const url = `${host}/download/${backupFolder}${PATH_SEPARATOR}${filename}`;
+  return ZipArchive.remoteUnzip(distDirPath, url, {});
 };
@@ -59,20 +59,26 @@ export const Checkbox: React.FC<CheckboxProps> = ({
  </Pressable>
 );

-export const SortItem = ({ label, status, onPress, theme }) => (
+interface SortItemProps {
+  label: string;
+  status?: string;
+  onPress: () => void;
+  theme: ThemeColors;
+}
+export const SortItem = ({ label, status, onPress, theme }: SortItemProps) => (
  <Pressable
    android_ripple={{ color: theme.rippleColor }}
    style={[styles.pressable, { paddingVertical: 16, paddingLeft: 64 }]}
    onPress={onPress}
  >
-    {status && (
+    {status ? (
      <MaterialCommunityIcons
        name={status === 'asc' ? 'arrow-up' : 'arrow-down'}
        color={theme.primary}
        size={21}
        style={styles.icon}
      />
-    )}
+    ) : null}
    <Text style={{ color: theme.onSurface }}>{label}</Text>
  </Pressable>
 );
@@ -2,19 +2,47 @@ import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

 import { ThemeColors } from '../../theme/types';
+import { Button } from 'react-native-paper';

 interface EmptyViewProps {
  icon?: string;
  description: string;
  theme: ThemeColors;
+  actions?: Array<{
+    iconName: string;
+    title: string;
+    onPress: () => void;
+  }>;
 }

-const EmptyView: React.FC<EmptyViewProps> = ({ icon, description, theme }) => (
+const EmptyView: React.FC<EmptyViewProps> = ({
+  icon,
+  description,
+  theme,
+  actions,
+}) => (
  <View style={styles.container}>
    {icon ? (
      <Text style={[styles.icon, { color: theme.outline }]}>{icon}</Text>
    ) : null}
    <Text style={[styles.text, { color: theme.outline }]}>{description}</Text>
+    {actions?.length ? (
+      <View style={styles.actionsCtn}>
+        {actions.map(action => (
+          <View key={action.title} style={styles.buttonWrapper}>
+            <Button
+              rippleColor={theme.rippleColor}
+              onPress={action.onPress}
+              icon={action.iconName}
+              textColor={theme.outline}
+              mode="outlined"
+            >
+              {action.title}
+            </Button>
+          </View>
+        ))}
+      </View>
+    ) : null}
  </View>
 );

@@ -34,4 +62,12 @@ const styles = StyleSheet.create({
  text: {
    marginTop: 16,
  },
+  buttonWrapper: {
+    marginHorizontal: 4,
+    flexDirection: 'row',
+  },
+  actionsCtn: {
+    marginTop: 20,
+    flexDirection: 'row',
+  },
 });
@@ -1,21 +1,44 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTheme } from '@hooks/persisted';

 interface ErrorScreenProps {
  error: string;
-  onRetry?: () => void;
-  retryIconColor?: string;
+  actions?: Array<{
+    iconName: string;
+    title: string;
+    onPress: () => void;
+  }>;
 }

-const ErrorScreen: React.FC<ErrorScreenProps> = ({ error }) => {
+const ErrorScreen: React.FC<ErrorScreenProps> = ({ error, actions }) => {
  const theme = useTheme();

  return (
    <View style={styles.container}>
      <Text style={[styles.icon, { color: theme.outline }]}>ಥ_ಥ</Text>
      <Text style={[styles.error, { color: theme.outline }]}>{error}</Text>
+      {actions?.length ? (
+        <View style={styles.actionsCtn}>
+          {actions.map(action => (
+            <View key={action.title} style={styles.buttonWrapper}>
+              <Pressable
+                android_ripple={{ color: theme.rippleColor }}
+                onPress={action.onPress}
+                style={styles.buttonCtn}
+              >
+                <MaterialCommunityIcons
+                  name={action.iconName}
+                  size={24}
+                  color={theme.outline}
+                />
+                <Text style={{ color: theme.outline }}>{action.title}</Text>
+              </Pressable>
+            </View>
+          ))}
+        </View>
+      ) : null}
    </View>
  );
 };
@@ -36,4 +59,21 @@ const styles = StyleSheet.create({
    paddingHorizontal: 16,
    textAlign: 'center',
  },
+  buttonWrapper: {
+    overflow: 'hidden',
+    borderRadius: 50,
+    marginHorizontal: 4,
+    flexDirection: 'row',
+    flex: 1 / 3,
+  },
+  buttonCtn: {
+    flex: 1,
+    paddingVertical: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  actionsCtn: {
+    marginTop: 20,
+    flexDirection: 'row',
+  },
 });
@@ -44,9 +44,12 @@ const Item: React.FC<ListItemProps> = ({
    title={title}
    titleStyle={{ color: disabled ? theme.onSurfaceDisabled : theme.onSurface }}
    description={description}
-    descriptionStyle={{
-      color: disabled ? theme.onSurfaceDisabled : theme.onSurfaceVariant,
-    }}
+    descriptionStyle={[
+      styles.description,
+      {
+        color: disabled ? theme.onSurfaceDisabled : theme.onSurfaceVariant,
+      },
+    ]}
    left={
      icon
        ? () => (
@@ -168,4 +171,8 @@ const styles = StyleSheet.create({
  listItemCtn: {
    paddingVertical: 12,
  },
+  description: {
+    fontSize: 12,
+    lineHeight: 20,
+  },
 });
@@ -19,6 +19,7 @@ import { NovelItem } from '@plugins/types';
 import { ThemeColors } from '@theme/types';
 import { useLibrarySettings } from '@hooks/persisted';
 import { getUserAgent } from '@hooks/persisted/useUserAgent';
+import { getString } from '@strings/translations';

 interface UnreadBadgeProps {
  chaptersDownloaded: number;
@@ -102,22 +103,22 @@ function NovelCover<TNovel extends NovelItem | NovelInfo | LibraryNovelInfo>({
      >
        <View style={styles.badgeContainer}>
          {libraryStatus && <InLibraryBadge theme={theme} />}
-          {showDownloadBadges && item.chaptersDownloaded > 0 && (
+          {showDownloadBadges && item.chaptersDownloaded > 0 ? (
            <DownloadBadge
              showUnreadBadges={showUnreadBadges}
              chaptersDownloaded={item.chaptersDownloaded}
              chaptersUnread={item.chaptersUnread}
              theme={theme}
            />
-          )}
-          {showUnreadBadges && item.chaptersUnread > 0 && (
+          ) : null}
+          {showUnreadBadges && item.chaptersUnread > 0 ? (
            <UnreadBadge
              theme={theme}
              chaptersDownloaded={item.chaptersDownloaded}
              chaptersUnread={item.chaptersUnread}
              showDownloadBadges={showDownloadBadges}
            />
-          )}
+          ) : null}
        </View>
        <Image
          source={{ uri, headers: { 'User-Agent': getUserAgent() } }}
@@ -131,39 +132,37 @@ function NovelCover<TNovel extends NovelItem | NovelInfo | LibraryNovelInfo>({
          ]}
        />
        <View style={styles.compactTitleContainer}>
-          {displayMode === DisplayModes.Compact && (
+          {displayMode === DisplayModes.Compact ? (
            <CompactTitle novelName={item.name} />
-          )}
+          ) : null}
        </View>
-        {displayMode === DisplayModes.Comfortable && (
+        {displayMode === DisplayModes.Comfortable ? (
          <ComfortableTitle novelName={item.name} theme={theme} />
-        )}
+        ) : null}
      </Pressable>
    </View>
  ) : (
    <ListView
      item={item}
      downloadBadge={
-        showDownloadBadges &&
-        item.chaptersDownloaded && (
+        showDownloadBadges && item.chaptersDownloaded ? (
          <DownloadBadge
            theme={theme}
            showUnreadBadges={showUnreadBadges}
            chaptersDownloaded={item.chaptersDownloaded}
            chaptersUnread={item.chaptersUnread}
          />
-        )
+        ) : null
      }
      unreadBadge={
-        showUnreadBadges &&
-        item.chaptersUnread && (
+        showUnreadBadges && item.chaptersUnread ? (
          <UnreadBadge
            theme={theme}
            chaptersDownloaded={item.chaptersDownloaded}
            chaptersUnread={item.chaptersUnread}
            showDownloadBadges={showDownloadBadges}
          />
-        )
+        ) : null
      }
      inLibraryBadge={libraryStatus && <InLibraryBadge theme={theme} />}
      theme={theme}
@@ -234,7 +233,7 @@ const InLibraryBadge = ({ theme }: { theme: ThemeColors }) => (
      },
    ]}
  >
-    In library
+    {getString('novelScreen.inLibaray')}
  </Text>
 );

@@ -45,7 +45,7 @@ const NovelList: React.FC<
      ]}
      numColumns={numColumns}
      key={numColumns}
-      keyExtractor={item => item.url}
+      keyExtractor={(item, index) => index + '_' + item.path}
      {...props}
    />
  );
@@ -1,77 +1,124 @@
-import React from 'react';
-import { Pressable, StyleSheet, View, Text } from 'react-native';
-import { Switch, List } from 'react-native-paper';
+import {
+  StyleProp,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  ViewStyle,
+} from 'react-native';
+import React, { useEffect } from 'react';
+import Animated, {
+  interpolateColor,
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+  withTiming,
+  useDerivedValue,
+} from 'react-native-reanimated';
 import { ThemeColors } from '@theme/types';

 interface SwitchProps {
-  label: string;
-  description?: string;
-  onPress: () => void;
  theme: ThemeColors;
-  icon?: string;
  value: boolean;
+  onValueChange: () => void;
+  size?: number;
+  style?: StyleProp<ViewStyle>;
 }

-const SwitchSetting: React.FC<SwitchProps> = ({
-  label,
-  description,
-  onPress,
+const Switch = ({
  theme,
-  icon,
  value,
-}) => {
-  const styles = StyleSheet.create({
-    container: {
-      paddingHorizontal: 16,
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      paddingVertical: description ? 16 : 12,
-    },
-    row: {
-      flexDirection: 'row',
-      flex: 1,
-    },
-    icon: {
-      margin: 0,
-    },
-    textContainer: {
-      marginLeft: icon && 16,
-    },
-    text: {
-      fontSize: 16,
-      flex: 1,
-      textAlignVertical: 'center',
-    },
-    switch: { marginLeft: 8 },
+  size = 22,
+  onValueChange,
+  style,
+}: SwitchProps) => {
+  // value for Switch Animation
+  const switchTranslate = useSharedValue(value ? size : size / 6);
+  // state for activate Switch
+  // Progress Value
+  const progress = useDerivedValue(() => {
+    return withTiming(value ? size : 0);
+  });
+
+  // useEffect for change the switchTranslate Value
+  useEffect(() => {
+    if (value) {
+      switchTranslate.value = size;
+    } else {
+      switchTranslate.value = size / 6;
+    }
+  }, [value, switchTranslate, size]);
+
+  // Circle Animation
+  const customSpringStyles = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateX: withSpring(switchTranslate.value, {
+            mass: 1,
+            damping: 15,
+            stiffness: 120,
+            overshootClamping: false,
+            restSpeedThreshold: 0.001,
+            restDisplacementThreshold: 0.001,
+          }),
+        },
+      ],
+    };
+  });
+
+  // Background Color Animation
+  const backgroundColorStyle = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      progress.value,
+      [0, size],
+      [theme.outline, theme.primary],
+    );
+    return {
+      backgroundColor,
+    };
  });

  return (
-    <Pressable
-      android_ripple={{
-        color: theme.rippleColor,
-      }}
-      style={styles.container}
-      onPress={onPress}
-    >
-      <View style={styles.row}>
-        {icon && (
-          <List.Icon color={theme.primary} icon={icon} style={styles.icon} />
-        )}
-        <View style={styles.textContainer}>
-          <Text style={[styles.text, { color: theme.onSurface }]}>{label}</Text>
-          {description && (
-            <Text style={{ color: theme.onSurfaceVariant }}>{description}</Text>
-          )}
-        </View>
-      </View>
-      <Switch
-        value={value}
-        onValueChange={onPress}
-        color={theme.primary}
-        style={styles.switch}
-      />
-    </Pressable>
+    <TouchableWithoutFeedback onPress={onValueChange}>
+      <Animated.View
+        style={[
+          styles.container,
+          style,
+          {
+            width: size * 2 + size / 6,
+            height: size + size / 3,
+            borderRadius: size,
+          },
+          backgroundColorStyle,
+        ]}
+      >
+        <Animated.View
+          style={[
+            styles.circle,
+            customSpringStyles,
+            { height: size, width: size, borderRadius: size },
+          ]}
+        />
+      </Animated.View>
+    </TouchableWithoutFeedback>
  );
 };

-export default SwitchSetting;
+export default Switch;
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    backgroundColor: '#F2F5F7',
+  },
+  circle: {
+    backgroundColor: 'white',
+    shadowColor: 'black',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 2.5,
+    elevation: 4,
+  },
+});
@@ -1,7 +1,13 @@
 import React from 'react';
-import { Pressable, StyleSheet, View, Text } from 'react-native';
-
-import { Switch } from 'react-native-paper';
+import {
+  Pressable,
+  StyleSheet,
+  View,
+  Text,
+  ViewStyle,
+  StyleProp,
+} from 'react-native';
+import Switch from './Switch';
 import { ThemeColors } from '../../theme/types';

 interface SwitchItemProps {
@@ -10,6 +16,8 @@ interface SwitchItemProps {
  description?: string;
  onPress: () => void;
  theme: ThemeColors;
+  size?: number;
+  style?: StyleProp<ViewStyle>;
 }

 const SwitchItem: React.FC<SwitchItemProps> = ({
@@ -18,23 +26,28 @@ const SwitchItem: React.FC<SwitchItemProps> = ({
  onPress,
  theme,
  value,
+  size,
+  style,
 }) => (
  <Pressable
    android_ripple={{ color: theme.rippleColor }}
-    style={[styles.container]}
+    style={[styles.container, style]}
    onPress={onPress}
  >
    <View style={styles.labelContainer}>
      <Text style={[{ color: theme.onSurface }, styles.label]}>{label}</Text>
      {description ? (
-        <Text style={{ color: theme.onSurfaceVariant }}>{description}</Text>
+        <Text style={[styles.description, { color: theme.onSurfaceVariant }]}>
+          {description}
+        </Text>
      ) : null}
    </View>
    <Switch
      value={value}
      onValueChange={onPress}
-      color={theme.primary}
+      theme={theme}
      style={styles.switch}
+      size={size}
    />
  </Pressable>
 );
@@ -45,8 +58,8 @@ const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
-    paddingHorizontal: 16,
    paddingVertical: 12,
+    alignItems: 'center',
  },
  labelContainer: {
    flex: 1,
@@ -55,6 +68,10 @@ const styles = StyleSheet.create({
  label: {
    fontSize: 16,
  },
+  description: {
+    fontSize: 12,
+    lineHeight: 20,
+  },
  switch: {
    marginLeft: 8,
  },
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
K1ngfish3r	9ef8cab475	fix chapter.page when containing special character (#1015 ) * fix page when containing special character * page always defaults to 1 * AND page = ?	2024-03-26 22:29:19 +07:00
nyagami	7ea8ebacd1	Update plugin sanbox (#1014 ) * add htmlparser2 * fix typo * flatten plugins	2024-03-26 17:46:38 +07:00
nyagami	e171dfebc1	Update lastest chapter logic (#1011 ) update lastest chapter logic	2024-03-24 13:55:23 +07:00
nyagami	9f6ffc23bf	Fix bugs & Reader improvement (#1009 ) * fix: wrong chapter order * fix: reader footer styles * make swipe getures less sensitive * fix: update only ongoing novels option * synchonize update library * add horizontal scrollbar * update swipe gesture sensitive * no swipe when image modal is visible * add bionic reading * fix: import untitled epub	2024-03-23 11:50:35 +07:00
nyagami	8906253527	Feat: protobuf support (#1003 ) * feat: protobuf support * fix: spead operator is slower * fix: redundant JSON encoding * add fetchProto to plugin sandbox	2024-03-21 16:37:07 +07:00
nyagami	817e4dc9d1	Cheaper epub parsing (#1007 ) * cheaper epub parsing * cleaner process * no empty page list * more epub detail * fix nullable	2024-03-20 13:37:55 +07:00
nyagami	762945497b	Fixes & Features (#1002 ) * stop loading even no chapters * edit artist * more detail reader settings	2024-03-16 20:42:04 +07:00
nyagami	a7aa203c30	refactor: safe ternary operator rendering	2024-03-14 14:24:11 +07:00
nyagami	aeaecda0cd	Fix app logics (#1001 ) * fix: DocumentPicker apis * fix: retry on browse source screen * fix: set categories logic * fix: dont fire noti when pausing downloading	2024-03-14 00:28:23 +07:00
nyagami	a54ed6de0e	Fix: Novel Drawer & Navigation color (#999 ) * fix: replace DrawerLayoutAndroid with React Navigation DrawerLayout slower * fix: bottom navigation color * fix: drawer background * fix: theme dependency	2024-03-11 19:30:40 +07:00
nyagami	dde33a0576	Fix themes & Added Reader Image Modal (#997 ) * fix: annoying scroll on context menu * fix app theme * fix: android textselecthandle color * fix plugin render callback dependencies * add image modal for reader	2024-03-10 23:04:50 +07:00
nyagami	40b7542a78	Adjust UI for chilling (#995 ) * more screen * browse screen: reduce re-renders * fix description styles * browse screen tabs and swipe styles	2024-03-10 17:34:54 +07:00
Patrick Loser	88059fd6b9	Fix: Midnight Dusk Theme (#983 ) * fix midnight Dusk * added string	2024-03-10 17:34:35 +07:00
nyagami	0d5d7ad084	New Switch look (#994 ) * new Switch look * refactor: merge SwitchSetting to SwitchItem * fix: remove margin	2024-03-10 14:00:59 +07:00
nyagami	202feb1f41	Fix chapters logic & Rework Plugins management (UI) (#993 ) * fix: not download/remove local chapters * fix: deleteChapters callback * remove plugin id: no sense fot user * rework plugin management	2024-03-10 00:23:34 +07:00
nyagami	db478130e6	Fix Filter Sheet color & Reader Context menu (#991 ) * fix: initialize once * fix: filter sheet color * fix: jump to chapter modal * move volume button to context menu * rework TTS * fix: cleanup * minor fix	2024-03-08 18:51:39 +07:00
Justin COLLON	607941ea1b	Language: Add Thai (#989 ) * Add Thai * Thai in languagesMapping	2024-03-06 18:33:31 +07:00
nyagami	da1631ba38	Upgrade RN 0.72, Prettier FilterSheet (#985 ) * upgrade RN to 0.72, expo to 49 * prettier filter sheet * fix: use react-native activity indicator * uninstall @react-navigation/material-bottom-tabs * fix: plugin card loading size	2024-03-05 13:22:11 +07:00
nyagami	2eb6f96b8e	Fix: remove redundant install-time permissions	2024-03-03 00:25:07 +07:00
Patrick Loser	d244001a18	Fix: replaced animation (#982 ) * replaced animation * lint issue	2024-03-02 23:39:30 +07:00
nyagami	a25e8cb358	Add Polish	2024-03-01 19:57:31 +07:00
Patrick Loser	03b19479c9	Feat: new icons and splashscreen (#974 ) * new icons and splashscreen * removed playstore image * changed ic_stat_name to notification_icon * smaller splashscreen animation	2024-02-28 20:36:26 +07:00
Rider21	4f5451495f	Fix: Webview theme (#977 ) * fast fix * hotfix * fixed browser opening * rewritten * Update Appbar.tsx * Update Appbar.tsx * added BackHandler * Update Appbar.tsx * Update src/screens/WebviewScreen/components/Appbar.tsx Co-authored-by: nyagami <hoangquan05112002@gmail.com> * Update src/screens/WebviewScreen/components/Appbar.tsx Co-authored-by: nyagami <hoangquan05112002@gmail.com> --------- Co-authored-by: nyagami <hoangquan05112002@gmail.com>	2024-02-28 20:09:27 +07:00
Rider21	6510270037	Fix: webview improved (#975 ) * Update pluginManager.ts * test * fix * fix Share * add qs * test webview * Update WebviewScreen.tsx * Update WebviewScreen.tsx * webview * test * fix crash * react-native-cookies/cookies * Update SettingsAdvancedScreen.tsx * yes * Compact Co-authored-by: nyagami <hoangquan05112002@gmail.com> * expandURL -> resolveUrl * delete button * Update fetch.ts * test * fix crash * Update src/services/plugin/fetch.ts Co-authored-by: nyagami <hoangquan05112002@gmail.com> --------- Co-authored-by: nyagami <hoangquan05112002@gmail.com>	2024-02-26 20:33:50 +07:00
nyagami	0208b4265f	Fix: backup/restore covers \| clean build configs (#976 ) fix: backup/restore covers \| clean build configs	2024-02-26 11:35:18 +07:00
Rajarshee Chatterjee	334475431c	Sort Plugins by Name & Center Plugin's Spinner	2024-02-26 09:19:44 +05:30
nyagami	a2220cf3b8	Beta (#973 ) * revert: plugin host * fix: totalPages for legacy backup	2024-02-25 16:47:45 +07:00
nyagami	9c05266c3c	Feat: Add features from main and fixes (#972 ) * fix: download chapters filter * fix: deletechapters missing * fix: tweak chapter * optimise: chapters preprocess * fix: bookmark chapter * fix: not showToast when no network * fix: preprocess updates\|history\|download * fix: ScrollView for morescreen * feat: exclude download chapter filter * fix: show labels in nav by default	2024-02-25 13:30:59 +07:00
nyagami	21e46d5493	Fix: Bug fixes (#969 ) * fix: Range selection text * fix: backup novel transaction * fix: not show fetch plugins error * fix: Filter button color * adjust: plugin detail weight * minor: plugin tab bar ripple color * fix: category card buttons	2024-02-24 20:58:23 +07:00
nyagami	ca688bb294	Upgrade TTS (#968 ) * fix: plugins in/uninstall problem * fix: remove useCallback for plugin item * feat: implement new UI for TTS * magic TTS * fix: infinite loop * fix: safe epub path * magic: chose start point for TTS	2024-02-24 11:43:36 +07:00
nyagami	93f5871f1a	Optimizations and bug fixes (#964 ) * upgrade react-native-webview * optimise: no render reader content when change reader settings * optimise: no render reader content when change general settings * fix: missing page when open reader * fix: library only downloaded filter * fix: center reader footer * fix: reader footer padding * fix: stop loading after fetch chapters * showToast if cancel epub * optimise: plugin list * fix: remove LNReader path * optimise: replace RNFS utf-8 by native * fix: add description as epub summary * feat: hot reload for assets files (reader statics files)	2024-02-22 18:51:16 +07:00
nyagami	1bcc0e6664	LNReader beta version (#961 ) * beta host * Refactor: url -> path (#944) * refactor: url -> pathr * fix: pluginId * page support (#947) * add new fields * minor fix * pages for novel * render novel pages with drawer * support real paginated novels * descending novel chapter list * update when has new latest chapter * set hasUpdate for all pages after update * fix: insert pageIndex * fix: refreshChapters * minor refactor: pageIndex * fix: update page logic * fix: order by pageIndex * refactor: Chapter.pageindex -> index (position in page) * Revert "refactor: Chapter.pageindex -> index (position in page)" This reverts commit 109298e0ccfa4a0d3d369087e05cb6f307a786b4. * refactor: pageindex -> position * fix: reader drawer * temporary fix migration * fix: Serialize plugins into one file (#949) * serialize plugins into one file * fix typo * Fix: insertChapters (#950) * Fix: re-renders in novel screen(#951) * remove unnecessary wrap * fix: add local novel back to local category * fix: use variables for default states * fix: do not re-render when no FAB * close drawer if pages length = 1 * add Portal.Host * Cheaper useNovel hook (#952) * fix: using pure state for novel and chapters * fix: remove latestChapter mmkv hook * shorter key * fix: bookmark * fix: save chapter progress in db * minor refactor: chapterProgressElement * Fix: Error/Empty actions (#956) * fix: reader error handler * fix: opacity for novel summary * fix: library empty view * fix: upsert and pages logic * fix: update novel logic * fix: import epub * fix: plugin site in global search * fix: scrollbar font size * minor fix	2024-02-19 12:48:42 +07:00
nyagami	1b5e345236	more default headers (#942 ) more default headers	2024-02-07 18:53:52 +07:00
nyagami	e5a1753e52	Fix tabiew (#939 ) * fix: tabview look * fix: error when library is not fetched fully * fix: legacy backup * fix: handle error for plugin methods	2024-02-03 10:19:09 +07:00
uy/sun	4bf615477e	Fix update only when chapter info changed (#935 ) fix: update only when info changed	2024-02-01 12:04:09 +07:00
uy/sun	e0dbf87ca7	Fix chapters status lost problem (#934 ) * ci: rename workflows * chore: update translations * fix: use upsert	2024-02-01 09:44:57 +07:00
nyagami	ad2412eb62	Zip backup (#933 ) * add remote zip/unzip * reimplement: remote backup * fix: close backup request * get response for remote zip * add zip drive backup * add zip drive restore * fix: categories are not restored * change scope to drive.file * add description for backup action * refactor: Backup types	2024-01-31 19:19:30 +07:00
nyagami	6c20d1855d	Pre alpha patch 5 (#928 ) * fix: `default` category is added after id = 1 was deleted * add new fields for Novel and Chapter table	2024-01-31 14:30:27 +07:00
nyagami	3f59bcf751	fix: display native lang in plugin card	2024-01-29 18:15:46 +07:00
nyagami	aeafe9d1ca	minor: add NativeLanguage type	2024-01-29 18:06:48 +07:00
nyagami	2501e5a20e	Merge remote-tracking branch 'origin/update-drive-auth'	2024-01-29 17:16:57 +07:00
nyagami	bd3ccdbc07	Pre alpha patch 4 (#919 ) * update google-services.json * fix: wrong package name - ZipArchive	2024-01-28 19:55:23 +07:00
nyagami	8c70e39492	refactor: EpubParser -> ZipArchive	2024-01-28 18:45:52 +07:00
nyagami	58f6475749	update: use cheerio to parse local novel	2024-01-28 18:43:20 +07:00
nyagami	de9763e83e	update google-services	2024-01-27 12:22:00 +07:00
nyagami	fdc15a0936	Fix: pre-alpha-patch-3 (#914 ) * fix: not allow to delete local category * fix: throw github cache issue * refactor: use english key * minor: native language details * add translatable strings	2024-01-27 09:26:37 +07:00
uy/sun	0e633b42ba	chore: add more translatable strings (#908 ) * chore: strings in browseScreen * chore: update translations in strings.json * chore: translate MoreScreen and downloader.serviceRunning * chore: translate all things in moreScreen * feat: support passing options * chore: update more translations in settings * chore: translation in LibraryScreen * chore: add missing en translations * chore: rearrange strings path * chore: translate backupScreen * chore: translate SettingsReaderScreen * chore: translate statsScreen * chore: translate HistoryScreen * chore: translate NovelScreen * chore: translate remaining strings * chore: missing translations * chore: add missing and improve Chinese translation * chore: improve naming * chore: remove toast section and add more translations related to notifications * revert: status translations * chore: translate NovelStatus * chore: translate error messages I have encountered * chore: add more translations used in updateNotification * chore: update missing translations * chore: translate backup modal * chore: translate all taskTitle * chore: improve translations * chore: add common.example * chore: improve emptyChapterMessage * chore: rearrange backup strings * chore: flatten keys * chore: remove unused strings * chore: translate more stuff * chore: flatten aboutScreen * chore: flatten generalSettingsScreen * chore: flatten readerSettings * chore: flatten browseSettingsScreen * chore: flatten settingsScreen * chore: updated based on review * chore: translate DefaultCategory * chore: fix sources translation	2024-01-26 18:47:39 +07:00
nyagami	bf4d761c05	fix: not allow to delete local category	2024-01-26 16:18:39 +07:00
nyagami	09d51b26c6	update plugins host (#910 ) * update plugins host * fix: missing branch	2024-01-25 20:04:17 +07:00