Optimizations and bug fixes

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

@@ -11,6 +11,7 @@ body {
     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);
@@ -76,6 +77,10 @@ img {
     display: none;
 }
 
+.hidden {
+    visibility: hidden;
+}
+
 #ScrollBar {
     position: fixed;
     right: 5vw;
@@ -136,20 +141,29 @@ img {
     background-color: var(--theme-primary);
 }
 
-#reader-percentage {
+#reader-footer-wrapper {
     position: fixed;
-    padding-top: 0.5rem;
-    min-height: 2rem;
+    bottom: 0;
+    left: 0;
     width: 100%;
+}
+
+#reader-footer {
+    display: flex;
+    flex: 1;
+    justify-content: space-between;
+    min-height: 2rem;
+    padding: 0.5rem 2rem 0 2rem;
     background-color: var(--readerSettings-theme);
     color: var(--readerSettings-textColor);
-    bottom: 0;
-    left: 0;
-    right: 0;
     font-size: 1rem;
     text-align: center;
 }
 
+.reader-footer-item{
+    display: flex;
+}
+
 t-t-s.tts-highlight {
     color: var(--theme-onSecondary);
     background-color: var(--theme-secondary);

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

@@ -1,7 +1,9 @@
 class Reader {
   constructor() {
-    this.percentage =
-      showScrollPercentage && document.getElementById('reader-percentage');
+    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',
@@ -23,12 +25,91 @@ class Reader {
         }),
       autoSaveInterval,
     );
+    this.time.innerText = new Date().toLocaleTimeString(undefined, {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+    this.timeInterval = setInterval(() => {
+      this.time.innerText = new Date().toLocaleTimeString(undefined, {
+        hour: '2-digit',
+        minute: '2-digit',
+      });
+    }, 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;
+    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');
+      }
+    }
+  };
+  updateBatteryLevel = level => {
+    this.battery.innerText = Math.ceil(level * 100) + '%';
+  };
 }
 class ScrollHandler {
   constructor(reader) {
@@ -109,13 +190,9 @@ class ScrollHandler {
 }
 
 class SwipeHandler {
-  constructor(reader) {
-    this.reader = reader;
+  constructor() {
     this.initialX = null;
     this.initialY = null;
-    if (swipeGestures) {
-      this.enable();
-    }
   }
 
   touchStartHandler = e => {
@@ -128,7 +205,7 @@ class SwipeHandler {
     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' });
+      reader.post({ type: diffX < 0 ? 'next' : 'prev' });
     }
   };
 
@@ -172,7 +249,7 @@ class TextToSpeech {
   };
 }
 
+var swipeHandler = new SwipeHandler();
 var reader = new Reader();
 var scrollHandler = new ScrollHandler(reader);
-var swipeHandler = new SwipeHandler(reader);
 var tts = new TextToSpeech(reader);

android/app/src/main/java/com/rajarsheechatterjee/LNReader/MainApplication.java

@@ -13,6 +13,7 @@
 import com.facebook.soloader.SoLoader;
 
 import com.rajarsheechatterjee.NavigationBarColor.NavigationBarColorPackage;
+import com.rajarsheechatterjee.TextFile.TextFilePackage;
 import com.rajarsheechatterjee.VolumeButtonListener.VolumeButtonListenerPackage;
 import com.rajarsheechatterjee.ZipArchive.ZipArchivePackage;
 
@@ -36,6 +37,7 @@ protected List<ReactPackage> getPackages() {
           packages.add(new NavigationBarColorPackage());
           packages.add(new VolumeButtonListenerPackage());
           packages.add(new ZipArchivePackage());
+          packages.add(new TextFilePackage());
           return packages;
         }
 

android/app/src/main/java/com/rajarsheechatterjee/TextFile/TextFile.java

@@ -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);
+        }
+
+    }
+}

android/app/src/main/java/com/rajarsheechatterjee/TextFile/TextFilePackage.java

@@ -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();
+    }
+}

metro.config.js

@@ -1,4 +1,44 @@
 // Learn more https://docs.expo.io/guides/customizing-metro
+const path = require('path');
+const fs = require('fs');
+const { mergeConfig } = require('metro-config');
 const { getDefaultConfig } = require('expo/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);

package.json

@@ -59,7 +59,7 @@
     "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.8.1",
     "sanitize-html": "^2.7.0",
     "urlencode": "^2.0.0"
   },