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 <[email protected]> * expandURL -> resolveUrl * delete button * Update fetch.ts * test * fix crash * Update src/services/plugin/fetch.ts Co-authored-by: nyagami <[email protected]> --------- Co-authored-by: nyagami <[email protected]>
LNReader · Feb 26, 2024 · 6510270 · 6510270
1 parent 0208b42
commit 6510270
Show file tree

Hide file tree

Showing 18 changed files with 257 additions and 73 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,15 +16,16 @@
   "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",
+    "cheerio": "^1.0.0-rc.12",
     "color": "^4.2.3",
-    "dayjs": "^1.11.4",
+    "dayjs": "^1.11.10",
     "expo": "^48.0.21",
     "expo-clipboard": "~4.1.2",
     "expo-document-picker": "~11.2.2",
@@ -40,7 +41,7 @@
     "expo-web-browser": "~12.1.1",
     "i18n-js": "^3.8.0",
     "lodash-es": "^4.17.21",
-    "qs": "^6.10.3",
+    "qs": "^6.11.2",
     "react": "18.2.0",
     "react-native": "0.71.14",
     "react-native-background-actions": "^3.0.1",

diff --git a/src/navigators/types/index.ts b/src/navigators/types/index.ts
@@ -31,6 +31,7 @@ export type RootStackParamList = {
     name: string;
     url: string;
     pluginId?: string;
+    isNovel?: boolean;
   };
 };
 

diff --git a/src/plugins/helpers/parseDate.js b/src/plugins/helpers/parseDate.js
diff --git a/src/plugins/pluginManager.ts b/src/plugins/pluginManager.ts
@@ -6,6 +6,7 @@ import { Language } from '@utils/constants/languages';
 // packages for plugins
 import { load } from 'cheerio';
 import dayjs from 'dayjs';
+import qs from 'qs';
 import { NovelStatus, Plugin, PluginItem } from './types';
 import { FilterTypes } from './types/filterTypes';
 import { isUrlAbsolute } from './helpers/isAbsoluteUrl';
@@ -19,6 +20,7 @@ const pluginsFilePath = PluginDownloadFolder + '/plugins.json';
 const packages: Record<string, any> = {
   'cheerio': { load },
   'dayjs': dayjs,
+  'qs': qs,
   'urlencode': { encode, decode },
   '@libs/novelStatus': { NovelStatus },
   '@libs/fetch': { fetchApi, fetchFile, fetchText },

diff --git a/src/plugins/types/index.ts b/src/plugins/types/index.ts
@@ -68,4 +68,5 @@ export interface Plugin extends PluginItem {
   parseChapter: (chapterPath: string) => Promise<string>;
   searchNovels: (searchTerm: string, pageNo: number) => Promise<NovelItem[]>;
   fetchImage: (url: string) => Promise<string>;
+  resolveUrl?: (path: string, isNovel?: boolean) => string;
 }
diff --git a/src/screens/WebviewScreen/WebviewScreen.tsx b/src/screens/WebviewScreen/WebviewScreen.tsx
@@ -1,35 +1,60 @@
-import React from 'react';
-import WebView from 'react-native-webview';
+import React, { useRef, useState } from 'react';
+import WebView, { WebViewNavigation } from 'react-native-webview';
+import { ProgressBar } from 'react-native-paper';
 
-import { Appbar } from '@components';
 import { useTheme } from '@hooks/persisted';
 import { WebviewScreenProps } from '@navigators/types';
 import { getUserAgent } from '@hooks/persisted/useUserAgent';
-import { isUrlAbsolute } from '@plugins/helpers/isAbsoluteUrl';
-import { getPlugin } from '@plugins/pluginManager';
+import { resolveUrl } from '@services/plugin/fetch';
+import Appbar from './components/Appbar';
 
 const WebviewScreen = ({ route, navigation }: WebviewScreenProps) => {
+  const { name, url, pluginId, isNovel } = route.params;
+  const uri = pluginId ? resolveUrl(pluginId, url, isNovel) : url;
+
   const theme = useTheme();
+  const webViewRef = useRef<WebView | null>(null);
+
+  const [progress, setProgress] = useState(0);
+  const [title, setTitle] = useState(name || '');
+  const [currentUrl, setCurrentUrl] = useState(uri);
+  const [canGoBack, setCanGoBack] = useState(false);
+  const [canGoForward, setCanGoForward] = useState(false);
 
-  const { name, url, pluginId } = route.params;
+  const handleNavigation = (e: WebViewNavigation) => {
+    setCurrentUrl(e.url);
+    setCanGoBack(e.canGoBack);
+    setCanGoForward(e.canGoForward);
+  };
 
   return (
     <>
       <Appbar
-        mode="small"
-        title={name}
-        handleGoBack={() => navigation.goBack()}
+        title={title}
         theme={theme}
+        currentUrl={currentUrl}
+        canGoBack={canGoBack}
+        canGoForward={canGoForward}
+        webView={webViewRef}
+        navigation={navigation}
+      />
+      <ProgressBar
+        color={theme.primary}
+        progress={progress}
+        visible={progress !== 1}
       />
       <WebView
         startInLoadingState
         userAgent={getUserAgent()}
-        source={{
-          uri:
-            pluginId && !isUrlAbsolute(url)
-              ? getPlugin(pluginId)?.site + url
-              : url,
+        ref={webViewRef}
+        source={{ uri }}
+        onLoadProgress={({ nativeEvent }) => {
+          setProgress(nativeEvent.progress);
+        }}
+        onLoadEnd={({ nativeEvent }) => {
+          setTitle(nativeEvent.title);
         }}
+        onNavigationStateChange={handleNavigation}
       />
     </>
   );

diff --git a/src/screens/WebviewScreen/components/Appbar.tsx b/src/screens/WebviewScreen/components/Appbar.tsx
@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import { Share } from 'react-native';
+import WebView from 'react-native-webview';
+import { Appbar as PaperAppbar, Menu } from 'react-native-paper';
+import * as WebBrowser from 'expo-web-browser';
+
+import { WebviewScreenProps } from '@navigators/types';
+import { getString } from '@strings/translations';
+import { ThemeColors } from '@theme/types';
+import { showToast } from '@utils/showToast';
+
+interface AppbarProps {
+  title: string;
+  theme: ThemeColors;
+  currentUrl: string;
+  canGoBack: Boolean;
+  canGoForward: Boolean;
+  webView: WebView;
+  navigation: WebviewScreenProps['navigation'];
+}
+
+const Appbar: React.FC<AppbarProps> = ({
+  title,
+  theme,
+  currentUrl,
+  canGoBack,
+  canGoForward,
+  webView,
+  navigation,
+}) => {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <PaperAppbar.Header style={{ backgroundColor: theme.surface }}>
+      <PaperAppbar.BackAction
+        icon="close"
+        iconColor={theme.onSurface}
+        onPress={() => navigation.goBack()}
+      />
+      <PaperAppbar.Content title={title} />
+      <PaperAppbar.Action
+        icon="arrow-left"
+        iconColor={theme.onSurface}
+        disabled={!canGoBack}
+        onPress={() => webView.current?.goBack()}
+      />
+      <PaperAppbar.Action
+        icon="arrow-right"
+        iconColor={theme.onSurface}
+        disabled={!canGoForward}
+        onPress={() => webView.current?.goForward()}
+      />
+      <Menu
+        visible={visible}
+        onDismiss={() => setVisible(false)}
+        anchor={
+          <PaperAppbar.Action
+            icon="dots-vertical"
+            iconColor={theme.onSurface}
+            onPress={() => setVisible(true)}
+          />
+        }
+      >
+        <Menu.Item
+          title={getString('webview.refresh')}
+          titleStyle={{ color: theme.onSurface }}
+          onPress={() => webView.current?.reload()}
+        />
+        <Menu.Item
+          title={getString('webview.share')}
+          titleStyle={{ color: theme.onSurface }}
+          onPress={() => Share.share({ message: currentUrl })}
+        />
+        <Menu.Item
+          title={getString('webview.openInBrowser')}
+          titleStyle={{ color: theme.onSurface }}
+          onPress={() => WebBrowser.openBrowserAsync(currentUrl)}
+        />
+        <Menu.Item
+          title={getString('webview.clearData')}
+          titleStyle={{ color: theme.onSurface }}
+          onPress={() => {
+            webView.current?.clearCache(true);
+            showToast(getString('webview.dataDeleted'));
+          }}
+        />
+      </Menu>
+    </PaperAppbar.Header>
+  );
+};
+
+export default Appbar;
diff --git a/src/screens/novel/NovelScreen.tsx b/src/screens/novel/NovelScreen.tsx
@@ -48,6 +48,7 @@ import { getString } from '@strings/translations';
 import NovelDrawer from './components/NovelDrawer';
 import { updateNovel } from '@services/updates/LibraryUpdateQueries';
 import { useFocusEffect } from '@react-navigation/native';
+import { resolveUrl } from '@services/plugin/fetch';
 
 const Novel = ({ route, navigation }: NovelScreenProps) => {
   const { name, path, pluginId } = route.params;
@@ -343,19 +344,21 @@ const Novel = ({ route, navigation }: NovelScreenProps) => {
                   onPress={() => navigation.goBack()}
                 />
                 <Row>
-                  <IconButton
-                    icon="share-variant"
-                    iconColor={theme.onBackground}
-                    size={21}
-                    style={{
-                      marginTop: (StatusBar.currentHeight || 0) + 8,
-                    }}
-                    onPress={() =>
-                      Share.share({
-                        message: novel.pluginId + '|' + novel.path,
-                      })
-                    }
-                  />
+                  {!novel.isLocal && (
+                    <IconButton
+                      icon="share-variant"
+                      iconColor={theme.onBackground}
+                      size={21}
+                      style={{
+                        marginTop: (StatusBar.currentHeight || 0) + 8,
+                      }}
+                      onPress={() =>
+                        Share.share({
+                          message: resolveUrl(novel.pluginId, novel.path, true),
+                        })
+                      }
+                    />
+                  )}
                   <IconButton
                     icon="text-box-search-outline"
                     iconColor={theme.onBackground}

diff --git a/src/screens/novel/components/NovelScreenButtonGroup/NovelScreenButtonGroup.tsx b/src/screens/novel/components/NovelScreenButtonGroup/NovelScreenButtonGroup.tsx
@@ -37,6 +37,7 @@ const NovelScreenButtonGroup: React.FC<NovelScreenButtonGroupProps> = ({
       name: novel.pluginId,
       url: novel.path,
       pluginId: novel.pluginId,
+      isNovel: true,
     });
   };
   const handleMigrateNovel = () =>

diff --git a/src/screens/reader/ReaderScreen.tsx b/src/screens/reader/ReaderScreen.tsx
@@ -366,12 +366,14 @@ export const ChapterContent = ({
           />
           <ReaderFooter
             theme={theme}
-            chapterUrl={chapter.path}
+            chapter={chapter}
+            novel={novel}
             nextChapter={nextChapter}
             prevChapter={prevChapter}
             readerSheetRef={readerSheetRef}
             scrollTo={scrollTo}
             navigateToChapterBySwipe={navigateToChapterBySwipe}
+            navigation={navigation}
             openDrawer={openDrawer}
           />
         </>