fix(remote-input): resolve cross-page interference between settings and search pages

- Add targetPage field to remoteControlStore for message routing
- Update settings page to filter messages by target page
- Update search page to filter messages and pass target context
- Add clearMessage method to prevent duplicate message handling
- Ensure remote input only affects intended target page

app/search.tsx

@@ -26,7 +26,7 @@ export default function SearchScreen() {
   const [error, setError] = useState<string | null>(null);
   const textInputRef = useRef<TextInput>(null);
   const [isInputFocused, setIsInputFocused] = useState(false);
-  const { showModal: showRemoteModal, lastMessage } = useRemoteControlStore();
+  const { showModal: showRemoteModal, lastMessage, targetPage, clearMessage } = useRemoteControlStore();
   const { remoteInputEnabled } = useSettingsStore();
   const router = useRouter();
 
@@ -36,14 +36,15 @@ export default function SearchScreen() {
   const { deviceType, spacing } = responsiveConfig;
 
   useEffect(() => {
-    if (lastMessage) {
+    if (lastMessage && targetPage === 'search') {
       console.log("Received remote input:", lastMessage);
       const realMessage = lastMessage.split("_")[0];
       setKeyword(realMessage);
       handleSearch(realMessage);
+      clearMessage(); // Clear the message after processing
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [lastMessage]);
+  }, [lastMessage, targetPage]);
 
   // useEffect(() => {
   //   // Focus the text input when the screen loads
@@ -87,10 +88,10 @@ export default function SearchScreen() {
       ]);
       return;
     }
-    showRemoteModal();
+    showRemoteModal('search');
   };
 
-  const renderItem = ({ item, index }: { item: SearchResult; index: number }) => (
+  const renderItem = ({ item }: { item: SearchResult; index: number }) => (
     <VideoCard
       id={item.id.toString()}
       source={item.source}

app/settings.tsx

@@ -22,7 +22,7 @@ import { DeviceUtils } from "@/utils/DeviceUtils";
 
 export default function SettingsScreen() {
   const { loadSettings, saveSettings, setApiBaseUrl, setM3uUrl } = useSettingsStore();
-  const { lastMessage } = useRemoteControlStore();
+  const { lastMessage, targetPage, clearMessage } = useRemoteControlStore();
   const backgroundColor = useThemeColor({}, "background");
 
   // 响应式布局配置
@@ -44,12 +44,13 @@ export default function SettingsScreen() {
   }, [loadSettings]);
 
   useEffect(() => {
-    if (lastMessage) {
+    if (lastMessage && !targetPage) {
       const realMessage = lastMessage.split("_")[0];
       handleRemoteInput(realMessage);
+      clearMessage(); // Clear the message after processing
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [lastMessage]);
+  }, [lastMessage, targetPage]);
 
   const handleRemoteInput = (message: string) => {
     // Handle remote input based on currently focused section

stores/remoteControlStore.ts

@@ -8,10 +8,12 @@ interface RemoteControlState {
   startServer: () => Promise<void>;
   stopServer: () => void;
   isModalVisible: boolean;
-  showModal: () => void;
+  showModal: (targetPage?: string) => void;
   hideModal: () => void;
   lastMessage: string | null;
-  setMessage: (message: string) => void;
+  targetPage: string | null;
+  setMessage: (message: string, targetPage?: string) => void;
+  clearMessage: () => void;
 }
 
 export const useRemoteControlStore = create<RemoteControlState>((set, get) => ({
@@ -20,6 +22,7 @@ export const useRemoteControlStore = create<RemoteControlState>((set, get) => ({
   error: null,
   isModalVisible: false,
   lastMessage: null,
+  targetPage: null,
 
   startServer: async () => {
     if (get().isServerRunning) {
@@ -28,7 +31,9 @@ export const useRemoteControlStore = create<RemoteControlState>((set, get) => ({
     remoteControlService.init({
       onMessage: (message: string) => {
         console.log('[RemoteControlStore] Received message:', message);
-        set({ lastMessage: message });
+        const currentState = get();
+        // Use the current targetPage from the store
+        set({ lastMessage: message, targetPage: currentState.targetPage });
       },
       onHandshake: () => {
         console.log('[RemoteControlStore] Handshake successful');
@@ -53,10 +58,14 @@ export const useRemoteControlStore = create<RemoteControlState>((set, get) => ({
     }
   },
 
-  showModal: () => set({ isModalVisible: true }),
+  showModal: (targetPage?: string) => set({ isModalVisible: true, targetPage }),
-  hideModal: () => set({ isModalVisible: false }),
+  hideModal: () => set({ isModalVisible: false, targetPage: null }),
 
-  setMessage: (message: string) => {
+  setMessage: (message: string, targetPage?: string) => {
-    set({ lastMessage: `${message}_${Date.now()}` });
+    set({ lastMessage: `${message}_${Date.now()}`, targetPage });
+  },
+
+  clearMessage: () => {
+    set({ lastMessage: null, targetPage: null });
   },
 }));