test

Rider21 · Mar 7, 2024 · f2dbf34 · f2dbf34
1 parent 04c04d9
commit f2dbf34
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 99 deletions.
diff --git a/src/screens/WebviewScreen/WebviewScreen.tsx b/src/screens/WebviewScreen/WebviewScreen.tsx
@@ -22,6 +22,7 @@ const WebviewScreen = ({ route, navigation }: WebviewScreenProps) => {
   const theme = useTheme();
   const webViewRef = useRef<WebView | null>(null);
 
+  const [loading, setLoading] = useState(true);
   const [progress, setProgress] = useState(0);
   const [title, setTitle] = useState(name || '');
   const [currentUrl, setCurrentUrl] = useState(uri);
@@ -33,6 +34,7 @@ const WebviewScreen = ({ route, navigation }: WebviewScreenProps) => {
     if (!e.loading) {
       setTitle(e.title);
     }
+    setLoading(e.loading);
     setCurrentUrl(e.url);
     setCanGoBack(e.canGoBack);
     setCanGoForward(e.canGoForward);
@@ -68,6 +70,7 @@ const WebviewScreen = ({ route, navigation }: WebviewScreenProps) => {
       <Appbar
         title={title}
         theme={theme}
+        loading={loading}
         currentUrl={currentUrl}
         canGoBack={canGoBack}
         canGoForward={canGoForward}
@@ -80,7 +83,7 @@ const WebviewScreen = ({ route, navigation }: WebviewScreenProps) => {
       <ProgressBar
         color={theme.primary}
         progress={progress}
-        visible={progress !== 1}
+        visible={loading}
       />
       <WebView
         userAgent={getUserAgent()}

diff --git a/src/screens/WebviewScreen/components/Appbar.tsx b/src/screens/WebviewScreen/components/Appbar.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Modal, Pressable, View, Text } from 'react-native';
+import { Pressable, View, Text } from 'react-native';
 import { IconButton } from 'react-native-paper';
 import TextTicker from 'react-native-text-ticker';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -10,6 +10,7 @@ import { ThemeColors } from '@theme/types';
 interface AppbarProps {
   title: string;
   theme: ThemeColors;
+  loading: boolean;
   currentUrl: string;
   canGoBack: boolean;
   canGoForward: boolean;
@@ -20,6 +21,7 @@ interface AppbarProps {
 const Appbar: React.FC<AppbarProps> = ({
   title,
   theme,
+  loading,
   currentUrl,
   canGoBack,
   canGoForward,
@@ -44,28 +46,28 @@ const Appbar: React.FC<AppbarProps> = ({
         theme={{ colors: { ...theme } }}
       />
 
-      <View style={{ flex: 1, justifyContent: 'center' }}>
-        <Text
-          style={{
-            paddingLeft: 3,
-            color: theme.onSurface,
-            fontSize: 18,
-          }}
-          numberOfLines={1}
-        >
-          {title}
-        </Text>
-        <TextTicker
-          style={{ color: theme.outline, fontSize: 16 }}
-          loop
-          bounce={false}
-          scrollSpeed={200}
-          marqueeDelay={2000}
-          isInteraction={false}
-        >
-          {currentUrl}
-        </TextTicker>
-      </View>
+      <Text
+        style={{
+          paddingLeft: 2,
+          color: theme.onSurface,
+          fontSize: 18,
+        }}
+        numberOfLines={1}
+      >
+        {title}
+      </Text>
+      <TextTicker
+        style={{ color: theme.outline, fontSize: 16 }}
+        loop
+        animationType={'scroll'}
+        bounce={false}
+        scrollSpeed={350}
+        marqueeDelay={1000}
+        isInteraction={false}
+        disabled={loading}
+      >
+        {currentUrl}
+      </TextTicker>
 
       <View
         style={{
@@ -95,31 +97,15 @@ const Appbar: React.FC<AppbarProps> = ({
           onPress={() => setMenuVisible(true)}
           theme={{ colors: { ...theme } }}
         />
-        <Modal
-          animationType="fade"
-          transparent={true}
-          visible={menuVisible}
-          onRequestClose={() => setMenuVisible(false)}
-        >
-          <Pressable
-            onPress={() => setMenuVisible(false)}
-            style={{
-              flex: 1,
-              width: '100%',
-              height: '100%',
-              flexDirection: 'column',
-              justifyContent: 'center',
-              alignItems: 'center',
-            }}
-          >
-            <Menu
-              theme={theme}
-              currentUrl={currentUrl}
-              webView={webView}
-              setMenuVisible={setMenuVisible}
-            />
-          </Pressable>
-        </Modal>
+        {menuVisible ? (
+          <Menu
+            theme={theme}
+            currentUrl={currentUrl}
+            webView={webView}
+            setMenuVisible={setMenuVisible}
+            menuVisible={menuVisible}
+          />
+        ) : null}
       </View>
     </View>
   );

diff --git a/src/screens/WebviewScreen/components/Menu.tsx b/src/screens/WebviewScreen/components/Menu.tsx
@@ -1,80 +1,100 @@
 import React from 'react';
 import { Pressable, Share, View, Text } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { WebView } from 'react-native-webview';
 import * as Linking from 'expo-linking';
 
 import { getString } from '@strings/translations';
 import { ThemeColors } from '@theme/types';
+import { useBackHandler } from '@hooks';
 import { showToast } from '@utils/showToast';
 
 interface MenuProps {
   theme: ThemeColors;
   currentUrl: string;
   webView: RefObject<WebView>;
+  menuVisible: boolean;
   setMenuVisible: () => void;
 }
 
 const Menu: React.FC<MenuProps> = ({
   theme,
   currentUrl,
   webView,
+  menuVisible,
   setMenuVisible,
 }) => {
-  const { top } = useSafeAreaInsets();
+  useBackHandler(() => {
+    if (menuVisible) {
+      setMenuVisible(false);
+      return true;
+    }
+    return false;
+  });
 
   return (
-    <View style={{ position: 'absolute', right: 0, top }}>
-      <Pressable
-        style={{ backgroundColor: theme.surface2, padding: 25, margin: 5 }}
-        onPress={() => {
-          setMenuVisible(false);
-          webView.current?.reload();
-        }}
-      >
-        <Text style={{ color: theme.onSurface }}>
-          {getString('webview.refresh')}
-        </Text>
-      </Pressable>
+    <Pressable
+      onPress={() => setMenuVisible(false)}
+      style={{
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+      }}
+    >
+      <View style={{ position: 'absolute', right: 0 }}>
+        <Pressable
+          style={{ backgroundColor: theme.surface2, padding: 15 }}
+          onPress={() => {
+            setMenuVisible(false);
+            webView.current?.reload();
+          }}
+        >
+          <Text style={{ color: theme.onSurface }}>
+            {getString('webview.refresh')}
+          </Text>
+        </Pressable>
 
-      <Pressable
-        style={{ backgroundColor: theme.surface2, padding: 25, margin: 5 }}
-        onPress={() => {
-          setMenuVisible(false);
-          Share.share({ message: currentUrl });
-        }}
-      >
-        <Text style={{ color: theme.onSurface }}>
-          {getString('webview.share')}
-        </Text>
-      </Pressable>
+        <Pressable
+          style={{ backgroundColor: theme.surface2, padding: 15 }}
+          onPress={() => {
+            setMenuVisible(false);
+            Share.share({ message: currentUrl });
+          }}
+        >
+          <Text style={{ color: theme.onSurface }}>
+            {getString('webview.share')}
+          </Text>
+        </Pressable>
 
-      <Pressable
-        style={{ backgroundColor: theme.surface2, padding: 25, margin: 5 }}
-        onPress={() => {
-          setMenuVisible(false);
-          Linking.openURL(currentUrl);
-        }}
-      >
-        <Text style={{ color: theme.onSurface }}>
-          {getString('webview.openInBrowser')}
-        </Text>
-      </Pressable>
+        <Pressable
+          style={{ backgroundColor: theme.surface2, padding: 15 }}
+          onPress={() => {
+            setMenuVisible(false);
+            Linking.openURL(currentUrl);
+          }}
+        >
+          <Text style={{ color: theme.onSurface }}>
+            {getString('webview.openInBrowser')}
+          </Text>
+        </Pressable>
 
-      <Pressable
-        style={{ backgroundColor: theme.surface2, padding: 25, margin: 5 }}
-        onPress={() => {
-          setMenuVisible(false);
-          webView.current?.clearCache?.(true);
-          webView.current?.reload();
-          showToast(getString('webview.dataDeleted'));
-        }}
-      >
-        <Text style={{ color: theme.onSurface }}>
-          {getString('webview.clearData')}
-        </Text>
-      </Pressable>
-    </View>
+        <Pressable
+          style={{ backgroundColor: theme.surface2, padding: 15 }}
+          onPress={() => {
+            setMenuVisible(false);
+            webView.current?.clearCache?.(true);
+            webView.current?.reload();
+            showToast(getString('webview.dataDeleted'));
+          }}
+        >
+          <Text style={{ color: theme.onSurface }}>
+            {getString('webview.clearData')}
+          </Text>
+        </Pressable>
+      </View>
+    </Pressable>
   );
 };