feat: implement WebViewContainer with enhanced navigation and script injection capabilities

Author: afnx

src/features/browser/screens/BrowserScreen/WebViewComponent.tsx

@@ -0,0 +1,122 @@
+import { useScripts } from "@/src/features/scripts/hooks/useScripts";
+import { useCallback, useRef } from "react";
+import { StyleSheet, View, ViewProps } from "react-native";
+import {
+  WebView,
+  WebViewMessageEvent,
+  WebViewNavigation,
+} from "react-native-webview";
+import { useBrowser } from "../../hooks/useBrowser";
+import { normalizeUrl } from "../../utils/urlUtils";
+
+const SCROLL_DIRECTION_THRESHOLD = 8;
+
+function getInjectionScripts(
+  url: string,
+  runAt: "document-start" | "document-ready" | "document-end",
+  getScriptsByRunAt: any
+) {
+  return getScriptsByRunAt(url, runAt)
+    .map((script: any) => script.code)
+    .join("\n");
+}
+
+type WebViewContainerProps = {
+  bottomPadding?: number;
+  onScrollDirectionChange?: (direction: "up" | "down") => void;
+} & ViewProps;
+
+export default function WebViewContainer({
+  bottomPadding = 0,
+  style,
+  onScrollDirectionChange,
+  ...props
+}: WebViewContainerProps) {
+  const { activeTab, updateTabById } = useBrowser();
+  const { getScriptsByRunAt, logExecution } = useScripts();
+  const webviewRef = useRef<WebView>(null);
+
+  // Prepare URL
+  const url = activeTab?.url ? normalizeUrl(activeTab.url) : "about:blank";
+
+  // Inject scripts at different lifecycle points
+  const injectedJavaScriptBeforeContentLoaded = activeTab?.url
+    ? getInjectionScripts(url, "document-start", getScriptsByRunAt)
+    : "";
+  const injectedJavaScript = activeTab?.url
+    ? getInjectionScripts(url, "document-ready", getScriptsByRunAt)
+    : "";
+
+  // Handle navigation events
+  const onNavigationStateChange = useCallback(
+    (navState: WebViewNavigation) => {
+      if (!activeTab) return;
+      updateTabById(activeTab.id, {
+        url: navState.url,
+        title: navState.title ?? "",
+        canGoBack: navState.canGoBack,
+        canGoForward: navState.canGoForward,
+        isLoading: navState.loading,
+      });
+    },
+    [activeTab, updateTabById]
+  );
+
+  // Handle JS execution results
+  const onMessage = useCallback((event: WebViewMessageEvent) => {
+    // TODO: Log execution results
+  }, []);
+
+  // Inject CSS to add bottom padding to the body
+  const injectedCSS = `
+    const style = document.createElement('style');
+    style.innerHTML = 'body { padding-bottom: ${bottomPadding}px !important; box-sizing: border-box; }';
+    document.head.appendChild(style);
+  `;
+
+  const lastScrollY = useRef(0);
+  const lastDirection = useRef<"up" | "down" | null>(null); // pixels
+  const handleScroll = (event: any) => {
+    const currentY = event.nativeEvent.contentOffset?.y ?? 0;
+    const diff = currentY - lastScrollY.current;
+
+    if (Math.abs(diff) > SCROLL_DIRECTION_THRESHOLD) {
+      const newDirection = diff > 0 ? "down" : "up";
+      if (newDirection !== lastDirection.current) {
+        onScrollDirectionChange?.(newDirection);
+        lastDirection.current = newDirection;
+      }
+    }
+    lastScrollY.current = currentY;
+  };
+
+  return (
+    <View style={[styles.container, style]} {...props}>
+      <WebView
+        ref={webviewRef}
+        source={{ uri: url }}
+        injectedJavaScriptBeforeContentLoaded={
+          injectedJavaScriptBeforeContentLoaded
+        }
+        injectedJavaScript={injectedJavaScript}
+        onNavigationStateChange={onNavigationStateChange}
+        onMessage={onMessage}
+        startInLoadingState={true}
+        allowsInlineMediaPlayback
+        javaScriptEnabled
+        domStorageEnabled
+        setSupportMultipleWindows={false}
+        allowsBackForwardNavigationGestures
+        originWhitelist={["*"]}
+        onScroll={handleScroll}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#ecf0f1",
+  },
+});