switched from px lineheight and textsize to rem for better epub compa…

…tability
LNReader · CD-Z · Jul 14, 2024 · Jul 14, 2024 · Jul 14, 2024 · Jul 14, 2024
commit 6b5663654f16e1bc9a4cd55aa064c47cf9f50f3a
diff --git a/android/app/src/main/assets/js/index.js b/android/app/src/main/assets/js/index.js
@@ -96,7 +96,7 @@ class Reader {
     );
     document.documentElement.style.setProperty(
       '--readerSettings-textSize',
-      settings.textSize + 'px',
+      settings.textSize + 'rem',
     );
     document.documentElement.style.setProperty(
       '--readerSettings-textColor',
@@ -108,7 +108,7 @@ class Reader {
     );
     document.documentElement.style.setProperty(
       '--readerSettings-lineHeight',
-      settings.lineHeight,
+      settings.lineHeight+"rem",
     );
     document.documentElement.style.setProperty(
       '--readerSettings-fontFamily',

diff --git a/src/screens/reader/ChapterLoadingScreen/ChapterLoadingScreen.tsx b/src/screens/reader/ChapterLoadingScreen/ChapterLoadingScreen.tsx
@@ -5,7 +5,7 @@ import color from 'color';
 import SkeletonLines from '../components/SkeletonLines';
 import { useChapterReaderSettings } from '@hooks/persisted';
 
-const ChapterLoadingScreen = () => {
+const ChapterLoadingScreen = ({ onPress }: { onPress: () => void }) => {
   const {
     theme: backgroundColor,
     padding,
@@ -14,9 +14,9 @@ const ChapterLoadingScreen = () => {
   } = useChapterReaderSettings();
 
   return (
-    <View style={{ backgroundColor }}>
+    <View style={{ backgroundColor }} >>
       <SkeletonLines
-        containerMargin={padding + '%'}
+        containerMargin={`${padding}%`}
         containerHeight={'100%'}
         containerWidth={'100%'}
         color={

diff --git a/src/screens/reader/ReaderScreen.tsx b/src/screens/reader/ReaderScreen.tsx
@@ -114,19 +114,18 @@ export const ChapterContent = ({
   return (
     <>
       {keepScreenOn ? <KeepScreenAwake /> : null}
-      {loading ? (
-        <ChapterLoadingScreen />
-      ) : (
-        <WebViewReader
-          html={chapterText}
-          nextChapter={nextChapter}
-          webViewRef={webViewRef}
-          pageReader={pageReader}
-          saveProgress={saveProgress}
-          >
-          navigateChapter={navigateChapter}
-        />
-      )}
+
+      <WebViewReader
+        html={chapterText}
+        nextChapter={nextChapter}
+        webViewRef={webViewRef}
+        pageReader={pageReader}
+        loading={loading}
+        saveProgress={saveProgress}
+        >
+        navigateChapter={navigateChapter}
+      />
+
       <ReaderBottomSheetV2 bottomSheetRef={readerSheetRef} />
       {!hidden ? (
         <>

diff --git a/src/screens/reader/components/ReaderBottomSheet/TextSizeSlider.tsx b/src/screens/reader/components/ReaderBottomSheet/TextSizeSlider.tsx
@@ -11,6 +11,7 @@ const TextSizeSlider: React.FC = () => {
   const theme = useTheme();
 
   const { textSize, setChapterReaderSettings } = useChapterReaderSettings();
+  console.log(textSize);
 
   return (
     <View style={styles.container}>
@@ -20,9 +21,9 @@ const TextSizeSlider: React.FC = () => {
       <Slider
         style={styles.slider}
         value={textSize}
-        minimumValue={12}
-        maximumValue={20}
-        step={1}
+        minimumValue={0.2}
+        maximumValue={3}
+        step={0.1}
         minimumTrackTintColor={theme.primary}
         maximumTrackTintColor={TRACK_TINT_COLOR}
         thumbTintColor={theme.primary}

diff --git a/src/screens/reader/components/SkeletonLines.tsx b/src/screens/reader/components/SkeletonLines.tsx
@@ -16,9 +16,9 @@ const SkeletonLines = ({
   width?: string | number;
   lineHeight: number;
   textSize: number;
-  containerWidth: string | number;
-  containerHeight: string | number;
-  containerMargin?: string | number;
+  containerWidth: `${number}%` | number;
+  containerHeight: `${number}%` | number;
+  containerMargin?: `${number}%` | number;
   color?: string;
   highlightColor?: string;
 }) => {
@@ -30,12 +30,19 @@ const SkeletonLines = ({
     lineHeight,
     textSize,
   );
+  console.log(
+    containerWidth,
+    containerHeight,
+    containerMargin === undefined ? 0 : containerMargin,
+    lineHeight,
+    textSize,
+  );
 
   const createLines = () => {
     let availableHeight: number = percentToNumberV(containerHeight) - 10;
     let res: boolean[] = [];
     let numberOfLongLines = 0;
-    const height = textSize * lineHeight;
+    const height = lineHeight * 10;
 
     while (availableHeight > height) {
       if (Math.random() * 4 > 1 && numberOfLongLines <= 5) {
@@ -56,7 +63,9 @@ const SkeletonLines = ({
     const skeletonWidth: number = width
       ? Number(width)
       : percentToNumberH('90%');
-    const skeletonHeight = textSize;
+    console.log(textSize);
+
+    const skeletonHeight = 1.5 * 15;
     if (typeof color !== 'string') {
       color = '#ebebeb';
     }
@@ -122,9 +131,9 @@ const percentToNumberH = (number: number | string): number => {
 };
 
 const createStyleSheet = (
-  containerWidth: number | string,
-  containerHeight: number | string,
-  containerMargin: number | string,
+  containerWidth: number | `${number}%`,
+  containerHeight: number | `${number}%`,
+  containerMargin: number | `${number}%`,
   lineHeight: number,
   textSize: number,
 ) => {
@@ -135,15 +144,16 @@ const createStyleSheet = (
       height: containerHeight,
       backgroundColor: 'transparent',
       margin: containerMargin,
+      marginTop: '6%',
     },
     lineDefault: {
       marginLeft: 0,
       marginRight: 0,
       borderRadius: 8,
-      marginBottom: textSize * (lineHeight - 1),
+      marginBottom: lineHeight * 10,
     },
     gap: {
-      height: textSize * (lineHeight - 1),
+      height: lineHeight * 10,
       margin: 8,
     },
   });

diff --git a/src/screens/reader/components/WebViewReader.tsx b/src/screens/reader/components/WebViewReader.tsx
@@ -28,6 +28,7 @@ import * as Clipboard from 'expo-clipboard';
 import { showToast } from '@utils/showToast';
 import { PLUGIN_STORAGE } from '@utils/Storages';
 import { useChapterContext } from '../ChapterContext';
+import ChapterLoadingScreen from '../ChapterLoadingScreen/ChapterLoadingScreen';
 
 type WebViewPostEvent = {
   type: string;
@@ -38,6 +39,7 @@ type WebViewReaderProps = {
   html: string;
   nextChapter: ChapterInfo;
   webViewRef: React.RefObject<WebView>;
+  loading: boolean;
   saveProgress(percentage: number): void;
   onPress(): void;
   navigateChapter(position: 'NEXT' | 'PREV'): void;
@@ -62,6 +64,7 @@ const WebViewReader: React.FC<WebViewReaderProps> = props => {
     nextChapter,
     webViewRef,
     pageReader,
+    loading,
     saveProgress,
     onPress,
     navigateChapter,
@@ -132,6 +135,11 @@ const WebViewReader: React.FC<WebViewReaderProps> = props => {
       mmkvListener.remove();
     };
   }, []);
+  console.log(readerSettings.textSize);
+  if (loading) {
+    return <ChapterLoadingScreen  />;
+  }
+
   const debugging = `
      // Debug
      console = new Object();
@@ -214,9 +222,7 @@ const WebViewReader: React.FC<WebViewReaderProps> = props => {
                       --StatusBar-currentHeight: ${StatusBar.currentHeight};
                       --readerSettings-theme: ${readerSettings.theme};
                       --readerSettings-padding: ${readerSettings.padding}%;
-                      --readerSettings-textSize: ${
-                        readerSettings.textSize / 10
-                      }rem;
+                      --readerSettings-textSize: ${readerSettings.textSize}rem;
                       --readerSettings-textColor: ${readerSettings.textColor};
                       --readerSettings-textAlign: ${readerSettings.textAlign};
                       --readerSettings-lineHeight: ${readerSettings.lineHeight};