Skip to content

Commit

Permalink
Optimizations and bug fixes (#964)
Browse files Browse the repository at this point in the history
* 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)
  • Loading branch information
nyagami authored Feb 22, 2024
1 parent 1bcc0e6 commit 93f5871
Show file tree
Hide file tree
Showing 25 changed files with 521 additions and 353 deletions.
26 changes: 20 additions & 6 deletions android/app/src/main/assets/css/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -76,6 +77,10 @@ img {
display: none;
}

.hidden {
visibility: hidden;
}

#ScrollBar {
position: fixed;
right: 5vw;
Expand Down Expand Up @@ -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);
Expand Down
95 changes: 86 additions & 9 deletions android/app/src/main/assets/js/index.js
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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) {
Expand Down Expand Up @@ -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 => {
Expand All @@ -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' });
}
};

Expand Down Expand Up @@ -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);
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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;
}

Expand Down
Original file line number Diff line number Diff line change
@@ -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);
}

}
}
Original file line number Diff line number Diff line change
@@ -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();
}
}
42 changes: 41 additions & 1 deletion metro.config.js
Original file line number Diff line number Diff line change
@@ -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);
8 changes: 4 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
5 changes: 0 additions & 5 deletions reader_playground/README.md

This file was deleted.

Loading

0 comments on commit 93f5871

Please sign in to comment.