Fixes & Features (#1002)

* stop loading even no chapters * edit artist * more detail reader settings
LNReader · Mar 16, 2024 · 7629454 · 7629454
1 parent a7aa203
commit 7629454
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 25 deletions.
diff --git a/android/app/src/main/assets/css/index.css b/android/app/src/main/assets/css/index.css
@@ -48,6 +48,10 @@ img {
     max-width: 100%;
 }
 
+.hidden {
+    visibility: hidden;
+}
+
 .nextButton,
 .infoText {
     width: 100%;
@@ -90,7 +94,8 @@ img {
 
 #ToolWrapper {
     position: fixed;
-    top: 25vh;
+    top: 50%;
+    transform: translateY(-50%);
     right: 5vw;
     transition: 150ms;
 }
@@ -117,6 +122,7 @@ img {
     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;
@@ -316,10 +322,9 @@ tts.highlight {
     display: flex;
     height: 100%;
     width: 100%;
-    max-width: max-content;
-    max-height: max-content;
     background-color: var(--theme-surface-0-9);
     align-items: center;
+    justify-content: center;
     overflow: scroll;
 }
 

diff --git a/src/hooks/persisted/useNovel.ts b/src/hooks/persisted/useNovel.ts
@@ -401,10 +401,8 @@ export const useNovel = (novelPath: string, pluginId: string) => {
         );
       }
       setChapters(chapters);
-      if (loading) {
-        setLoading(false);
-      }
     }
+    setLoading(false);
   }, [novel, novelSettings, pageIndex]);
   useEffect(() => {
     getNovel();

diff --git a/src/screens/novel/components/EditInfoModal.tsx b/src/screens/novel/components/EditInfoModal.tsx
@@ -130,6 +130,15 @@ const EditInfoModal = ({
           onChangeText={text => setNovel({ ...novel, author: text })}
           dense
         />
+        <TextInput
+          placeholder={'Artist: ' + novel.artist}
+          style={{ fontSize: 14 }}
+          numberOfLines={1}
+          mode="outlined"
+          theme={{ colors: { ...theme } }}
+          onChangeText={text => setNovel({ ...novel, artist: text })}
+          dense
+        />
         <TextInput
           placeholder={getString('novelScreen.edit.summary', {
             summary: novel.summary?.substring(0, 16),

diff --git a/src/screens/settings/SettingsReaderScreen/SettingsReaderScreen.tsx b/src/screens/settings/SettingsReaderScreen/SettingsReaderScreen.tsx
@@ -1,13 +1,17 @@
-import { View, ScrollView } from 'react-native';
-import React from 'react';
+import { View, ScrollView, StatusBar, Dimensions } from 'react-native';
+import React, { useMemo, useRef, useState } from 'react';
 
 import { useNavigation } from '@react-navigation/native';
 import WebView from 'react-native-webview';
 import { dummyHTML } from './utils';
 
 import { Appbar, List } from '@components/index';
 
-import { useChapterReaderSettings, useTheme } from '@hooks/persisted';
+import {
+  useChapterGeneralSettings,
+  useChapterReaderSettings,
+  useTheme,
+} from '@hooks/persisted';
 import { getString } from '@strings/translations';
 
 import GeneralSettings from './Settings/GeneralSettings';
@@ -16,6 +20,11 @@ import CustomJSSettings from './Settings/CustomJSSettings';
 import DisplaySettings from './Settings/DisplaySettings';
 import ReaderThemeSettings from './Settings/ReaderThemeSettings';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import color from 'color';
+import { useBatteryLevel } from 'react-native-device-info';
+import * as Speech from 'expo-speech';
+import * as Clipboard from 'expo-clipboard';
+import { showToast } from '@utils/showToast';
 
 export type TextAlignments =
   | 'left'
@@ -25,13 +34,27 @@ export type TextAlignments =
   | 'justify'
   | undefined;
 
+type WebViewPostEvent = {
+  type: string;
+  data?: { [key: string]: string | number };
+};
+
 const SettingsReaderScreen = () => {
   const theme = useTheme();
   const navigation = useNavigation();
+  const webViewRef = useRef<WebView>(null);
   const { bottom } = useSafeAreaInsets();
-
+  const [hidden, setHidden] = useState(true);
+  const layoutHeight = Dimensions.get('window').height;
+  const batteryLevel = useBatteryLevel();
   const readerSettings = useChapterReaderSettings();
+  const { showScrollPercentage, showBatteryAndTime } =
+    useChapterGeneralSettings();
   const READER_HEIGHT = 280;
+  const assetsUriPrefix = useMemo(
+    () => (__DEV__ ? 'http://localhost:8081/assets' : 'file:///android_asset'),
+    [],
+  );
   const dummyChapterInfo = {
     sourceId: 11,
     chapterId: 99,
@@ -41,24 +64,38 @@ const SettingsReaderScreen = () => {
   };
   const webViewCSS = `
   <style>
-  body {
-    color: ${readerSettings.textColor};
-    text-align: ${readerSettings.textAlign};
-    line-height: ${readerSettings.lineHeight};
-    font-size: ${readerSettings.textSize}px;
-    padding-top: 8px;
-    padding-bottom: 8px;
-    padding-left: ${readerSettings.padding}%;
-    padding-right: ${readerSettings.padding}%;
-    font-family: ${readerSettings.fontFamily}; 
-  }
-  </style>
-  <style>
-    ${readerSettings.customCSS}
+    :root {
+      --StatusBar-currentHeight: ${StatusBar.currentHeight};
+      --readerSettings-theme: ${readerSettings.theme};
+      --readerSettings-padding: ${readerSettings.padding}%;
+      --readerSettings-textSize: ${readerSettings.textSize}px;
+      --readerSettings-textColor: ${readerSettings.textColor};
+      --readerSettings-textAlign: ${readerSettings.textAlign};
+      --readerSettings-lineHeight: ${readerSettings.lineHeight};
+      --readerSettings-fontFamily: ${readerSettings.fontFamily};
+      --theme-primary: ${theme.primary};
+      --theme-onPrimary: ${theme.onPrimary};
+      --theme-secondary: ${theme.secondary};
+      --theme-tertiary: ${theme.tertiary};
+      --theme-onTertiary: ${theme.onTertiary};
+      --theme-onSecondary: ${theme.onSecondary};
+      --theme-surface: ${theme.surface};
+      --theme-surface-0-9: ${color(theme.surface).alpha(0.9).toString()};
+      --theme-onSurface: ${theme.onSurface};
+      --theme-surfaceVariant: ${theme.surfaceVariant};
+      --theme-onSurfaceVariant: ${theme.onSurfaceVariant};
+      --theme-outline: ${theme.outline};
+      --theme-rippleColor: ${theme.rippleColor};
+      --chapterCtn-height: ${layoutHeight - 140};
+    }
     @font-face {
       font-family: ${readerSettings.fontFamily};
       src: url("file:///android_asset/fonts/${readerSettings.fontFamily}.ttf");
     }
+    </style>
+    <link rel="stylesheet" href="${assetsUriPrefix}/css/index.css">
+    <style>
+    ${readerSettings.customCSS}
   </style>
   `;
 
@@ -75,23 +112,88 @@ const SettingsReaderScreen = () => {
 
       <View style={{ height: READER_HEIGHT }}>
         <WebView
+          ref={webViewRef}
           originWhitelist={['*']}
+          allowFileAccess={true}
+          scalesPageToFit={true}
+          showsVerticalScrollIndicator={false}
+          javaScriptEnabled={true}
           style={{ backgroundColor: readerBackgroundColor }}
           nestedScrollEnabled={true}
+          onMessage={ev => {
+            const event: WebViewPostEvent = JSON.parse(ev.nativeEvent.data);
+            switch (event.type) {
+              case 'hide':
+                if (hidden) {
+                  webViewRef.current?.injectJavaScript('toolWrapper.show()');
+                } else {
+                  webViewRef.current?.injectJavaScript('toolWrapper.hide()');
+                }
+                setHidden(!hidden);
+                break;
+              case 'speak':
+                if (event.data && typeof event.data === 'string') {
+                  Speech.speak(event.data, {
+                    onDone() {
+                      webViewRef.current?.injectJavaScript('tts.next?.()');
+                    },
+                  });
+                }
+                break;
+              case 'stop-speak':
+                Speech.stop();
+                break;
+              case 'copy':
+                if (event.data && typeof event.data === 'string') {
+                  Clipboard.setStringAsync(event.data).then(() => {
+                    showToast(
+                      getString('common.copiedToClipboard', { name: '' }),
+                    );
+                  });
+                }
+                break;
+            }
+          }}
           source={{
             html: `
             <html>
               <head>
                 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
                 ${webViewCSS}
+                <script async>
+                  var initSettings = {
+                    showScrollPercentage: ${showScrollPercentage},
+                    swipeGestures: false,
+                    showBatteryAndTime: ${showBatteryAndTime},
+                  }
+                  var batteryLevel = ${batteryLevel};
+                  var autoSaveInterval = 2222;
+                </script>
               </head>
               <body>
                 <chapter 
                   data-novel-id='${dummyChapterInfo.novelId}'
                   data-chapter-id='${dummyChapterInfo.chapterId}'
+                  onclick="reader.post({type:'hide'})"
                 >
                   ${dummyHTML}
                 </chapter>
+                <div class="hidden" id="ToolWrapper">
+                    <div id="TTS-Controller"></div>
+                    <div id="ScrollBar"></div>
+                </div>
+                <div id="Image-Modal">
+                  <img id="Image-Modal-img">
+                </div>
+                <div id="reader-footer-wrapper">
+                    <div id="reader-footer">
+                        <div id="reader-battery" class="reader-footer-item"></div>
+                        <div id="reader-percentage" class="reader-footer-item"></div>
+                        <div id="reader-time" class="reader-footer-item"></div>
+                    </div>
+                </div>
+                </body>
+                <script src="${assetsUriPrefix}/js/index.js"></script>
                 <script>
                   async function fn(){
                     let novelName = "${dummyChapterInfo.novelName}";
@@ -104,7 +206,6 @@ const SettingsReaderScreen = () => {
                   }
                   document.addEventListener("DOMContentLoaded", fn);
                 </script>
-              </body>
             </html>
             `,
           }}

diff --git a/src/screens/settings/SettingsReaderScreen/utils.ts b/src/screens/settings/SettingsReaderScreen/utils.ts
@@ -1,6 +1,7 @@
 export const dummyHTML = `
 <h1>Lorem ipsum dolor sit amet consectetuer adipiscing 
 elit</h1>
+<img src="data:image/webp;base64,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"/>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
 elit. Aenean commodo ligula eget dolor. Aenean massa 
 <strong>strong</strong>. Cum sociis natoque penatibus