feat: Enable remote input functionality and enhance settings management for remote control

app/search.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
-import { View, TextInput, StyleSheet, FlatList, ActivityIndicator, Text, Keyboard } from "react-native";
+import { View, TextInput, StyleSheet, FlatList, ActivityIndicator, Alert, Keyboard } from "react-native";
 import { ThemedView } from "@/components/ThemedView";
 import { ThemedText } from "@/components/ThemedText";
 import VideoCard from "@/components/VideoCard.tv";
@@ -8,6 +8,8 @@ import { Search, QrCode } from "lucide-react-native";
 import { StyledButton } from "@/components/StyledButton";
 import { useRemoteControlStore } from "@/stores/remoteControlStore";
 import { RemoteControlModal } from "@/components/RemoteControlModal";
+import { useSettingsStore } from "@/stores/settingsStore";
+import { useRouter } from "expo-router";
 
 export default function SearchScreen() {
   const [keyword, setKeyword] = useState("");
@@ -18,13 +20,17 @@ export default function SearchScreen() {
   const colorScheme = "dark"; // Replace with useColorScheme() if needed
   const [isInputFocused, setIsInputFocused] = useState(false);
   const { showModal: showRemoteModal, lastMessage } = useRemoteControlStore();
+  const { remoteInputEnabled } = useSettingsStore();
+  const router = useRouter();
 
   useEffect(() => {
     if (lastMessage) {
+      console.log("Received remote input:", lastMessage);
       const realMessage = lastMessage.split("_")[0];
       setKeyword(realMessage);
       handleSearch(realMessage);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [lastMessage]);
 
   useEffect(() => {
@@ -61,6 +67,17 @@ export default function SearchScreen() {
 
   const onSearchPress = () => handleSearch();
 
+  const handleQrPress = () => {
+    if (!remoteInputEnabled) {
+      Alert.alert("远程输入未启用", "请先在设置页面中启用远程输入功能", [
+        { text: "取消", style: "cancel" },
+        { text: "去设置", onPress: () => router.push("/settings") },
+      ]);
+      return;
+    }
+    showRemoteModal();
+  };
+
   const renderItem = ({ item }: { item: SearchResult }) => (
     <VideoCard
       id={item.id.toString()}
@@ -98,7 +115,7 @@ export default function SearchScreen() {
         <StyledButton style={styles.searchButton} onPress={onSearchPress}>
           <Search size={24} color={colorScheme === "dark" ? "white" : "black"} />
         </StyledButton>
-        <StyledButton style={styles.qrButton} onPress={showRemoteModal}>
+        <StyledButton style={styles.qrButton} onPress={handleQrPress}>
           <QrCode size={24} color={colorScheme === "dark" ? "white" : "black"} />
         </StyledButton>
       </View>

app/settings.tsx

@@ -6,13 +6,15 @@ import { ThemedView } from "@/components/ThemedView";
 import { StyledButton } from "@/components/StyledButton";
 import { useThemeColor } from "@/hooks/useThemeColor";
 import { useSettingsStore } from "@/stores/settingsStore";
+import { useRemoteControlStore } from "@/stores/remoteControlStore";
 import { APIConfigSection } from "@/components/settings/APIConfigSection";
 import { LiveStreamSection } from "@/components/settings/LiveStreamSection";
 import { RemoteInputSection } from "@/components/settings/RemoteInputSection";
 import { VideoSourceSection } from "@/components/settings/VideoSourceSection";
 
 export default function SettingsScreen() {
-  const { loadSettings, saveSettings } = useSettingsStore();
+  const { loadSettings, saveSettings, setApiBaseUrl, setM3uUrl } = useSettingsStore();
+  const { lastMessage } = useRemoteControlStore();
   const backgroundColor = useThemeColor({}, "background");
 
   const [hasChanges, setHasChanges] = useState(false);
@@ -20,11 +22,32 @@ export default function SettingsScreen() {
   const [currentFocusIndex, setCurrentFocusIndex] = useState(0);
 
   const saveButtonRef = useRef<any>(null);
+  const apiSectionRef = useRef<any>(null);
+  const liveStreamSectionRef = useRef<any>(null);
 
   useEffect(() => {
     loadSettings();
   }, [loadSettings]);
 
+  useEffect(() => {
+    if (lastMessage) {
+      const realMessage = lastMessage.split("_")[0];
+      handleRemoteInput(realMessage);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lastMessage]);
+
+  const handleRemoteInput = (message: string) => {
+    // Handle remote input based on currently focused section
+    if (currentFocusIndex === 1 && apiSectionRef.current) {
+      // API Config Section
+      setApiBaseUrl(message);
+    } else if (currentFocusIndex === 2 && liveStreamSectionRef.current) {
+      // Live Stream Section
+      setM3uUrl(message);
+    }
+  };
+
   const handleSave = async () => {
     setIsLoading(true);
     try {
@@ -47,11 +70,19 @@ export default function SettingsScreen() {
       key: "remote",
     },
     {
-      component: <APIConfigSection onChanged={markAsChanged} onFocus={() => setCurrentFocusIndex(1)} />,
+      component: (
+        <APIConfigSection ref={apiSectionRef} onChanged={markAsChanged} onFocus={() => setCurrentFocusIndex(1)} />
+      ),
       key: "api",
     },
     {
-      component: <LiveStreamSection onChanged={markAsChanged} onFocus={() => setCurrentFocusIndex(2)} />,
+      component: (
+        <LiveStreamSection
+          ref={liveStreamSectionRef}
+          onChanged={markAsChanged}
+          onFocus={() => setCurrentFocusIndex(2)}
+        />
+      ),
       key: "livestream",
     },
     {