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

2026-02-04 03:36:29 +08:00 · 2025-07-11 18:13:06 +08:00
parent bda7329c1a
commit 5f92f76f4b
6 changed files with 245 additions and 123 deletions
--- a/app/search.tsx
+++ b/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>
--- a/app/settings.tsx
+++ b/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",
    },
    {
--- a/components/settings/APIConfigSection.tsx
+++ b/components/settings/APIConfigSection.tsx
@@ -1,9 +1,10 @@
-import React, { useState, useRef } from "react";
-import { View, TextInput, StyleSheet, Pressable, Animated } from "react-native";
+import React, { useState, useRef, useImperativeHandle, forwardRef } from "react";
+import { View, TextInput, StyleSheet, Animated } from "react-native";
 import { useTVEventHandler } from "react-native";
 import { ThemedText } from "@/components/ThemedText";
 import { SettingsSection } from "./SettingsSection";
 import { useSettingsStore } from "@/stores/settingsStore";
+import { useRemoteControlStore } from "@/stores/remoteControlStore";
 import { useButtonAnimation } from "@/hooks/useAnimation";

 interface APIConfigSectionProps {
@@ -12,68 +13,99 @@ interface APIConfigSectionProps {
  onBlur?: () => void;
 }

-export const APIConfigSection: React.FC<APIConfigSectionProps> = ({ onChanged, onFocus, onBlur }) => {
-  const { apiBaseUrl, setApiBaseUrl } = useSettingsStore();
-  const [isInputFocused, setIsInputFocused] = useState(false);
-  const [isSectionFocused, setIsSectionFocused] = useState(false);
-  const inputRef = useRef<TextInput>(null);
-  const inputAnimationStyle = useButtonAnimation(isSectionFocused, 1.01);
+export interface APIConfigSectionRef {
+  setInputValue: (value: string) => void;
+}

-  const handleUrlChange = (url: string) => {
-    setApiBaseUrl(url);
-    onChanged();
-  };
+export const APIConfigSection = forwardRef<APIConfigSectionRef, APIConfigSectionProps>(
+  ({ onChanged, onFocus, onBlur }, ref) => {
+    const { apiBaseUrl, setApiBaseUrl, remoteInputEnabled } = useSettingsStore();
+    const { serverUrl } = useRemoteControlStore();
+    const [isInputFocused, setIsInputFocused] = useState(false);
+    const [isSectionFocused, setIsSectionFocused] = useState(false);
+    const inputRef = useRef<TextInput>(null);
+    const inputAnimationStyle = useButtonAnimation(isSectionFocused, 1.01);

-  const handleSectionFocus = () => {
-    setIsSectionFocused(true);
-    onFocus?.();
-  };
+    const handleUrlChange = (url: string) => {
+      setApiBaseUrl(url);
+      onChanged();
+    };

-  const handleSectionBlur = () => {
-    setIsSectionFocused(false);
-    onBlur?.();
-  };
+    useImperativeHandle(ref, () => ({
+      setInputValue: (value: string) => {
+        setApiBaseUrl(value);
+        onChanged();
+      },
+    }));

-  // TV遥控器事件处理
-  const handleTVEvent = React.useCallback(
-    (event: any) => {
-      if (isSectionFocused && event.eventType === "select") {
-        inputRef.current?.focus();
-      }
-    },
-    [isSectionFocused]
-  );
+    const handleSectionFocus = () => {
+      setIsSectionFocused(true);
+      onFocus?.();
+    };

-  useTVEventHandler(handleTVEvent);
+    const handleSectionBlur = () => {
+      setIsSectionFocused(false);
+      onBlur?.();
+    };

-  return (
-    <SettingsSection focusable onFocus={handleSectionFocus} onBlur={handleSectionBlur}>
-      <View style={styles.inputContainer}>
-        <ThemedText style={styles.sectionTitle}>API 地址</ThemedText>
-        <Animated.View style={inputAnimationStyle}>
-          <TextInput
-            ref={inputRef}
-            style={[styles.input, isInputFocused && styles.inputFocused]}
-            value={apiBaseUrl}
-            onChangeText={handleUrlChange}
-            placeholder="输入 API 地址"
-            placeholderTextColor="#888"
-            autoCapitalize="none"
-            autoCorrect={false}
-            onFocus={() => setIsInputFocused(true)}
-            onBlur={() => setIsInputFocused(false)}
-          />
-        </Animated.View>
-      </View>
-    </SettingsSection>
-  );
-};
+    // TV遥控器事件处理
+    const handleTVEvent = React.useCallback(
+      (event: any) => {
+        if (isSectionFocused && event.eventType === "select") {
+          inputRef.current?.focus();
+        }
+      },
+      [isSectionFocused]
+    );
+
+    useTVEventHandler(handleTVEvent);
+
+    return (
+      <SettingsSection focusable onFocus={handleSectionFocus} onBlur={handleSectionBlur}>
+        <View style={styles.inputContainer}>
+          <View style={styles.titleContainer}>
+            <ThemedText style={styles.sectionTitle}>API 地址</ThemedText>
+            {remoteInputEnabled && serverUrl && (
+              <ThemedText style={styles.subtitle}>用手机访问 {serverUrl}，可远程输入</ThemedText>
+            )}
+          </View>
+          <Animated.View style={inputAnimationStyle}>
+            <TextInput
+              ref={inputRef}
+              style={[styles.input, isInputFocused && styles.inputFocused]}
+              value={apiBaseUrl}
+              onChangeText={handleUrlChange}
+              placeholder="输入 API 地址"
+              placeholderTextColor="#888"
+              autoCapitalize="none"
+              autoCorrect={false}
+              onFocus={() => setIsInputFocused(true)}
+              onBlur={() => setIsInputFocused(false)}
+            />
+          </Animated.View>
+        </View>
+      </SettingsSection>
+    );
+  }
+);
+
+APIConfigSection.displayName = "APIConfigSection";

 const styles = StyleSheet.create({
+  titleContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 8,
+  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: "bold",
-    marginBottom: 8,
+    marginRight: 12,
+  },
+  subtitle: {
+    fontSize: 12,
+    color: "#888",
+    fontStyle: "italic",
  },
  inputContainer: {
    marginBottom: 12,
--- a/components/settings/LiveStreamSection.tsx
+++ b/components/settings/LiveStreamSection.tsx
@@ -1,10 +1,11 @@
-import React, { useState, useRef } from 'react';
-import { View, TextInput, StyleSheet, Animated } from 'react-native';
-import { useTVEventHandler } from 'react-native';
-import { ThemedText } from '@/components/ThemedText';
-import { SettingsSection } from './SettingsSection';
-import { useSettingsStore } from '@/stores/settingsStore';
-import { useButtonAnimation } from '@/hooks/useAnimation';
+import React, { useState, useRef, useImperativeHandle, forwardRef } from "react";
+import { View, TextInput, StyleSheet, Animated } from "react-native";
+import { useTVEventHandler } from "react-native";
+import { ThemedText } from "@/components/ThemedText";
+import { SettingsSection } from "./SettingsSection";
+import { useSettingsStore } from "@/stores/settingsStore";
+import { useRemoteControlStore } from "@/stores/remoteControlStore";
+import { useButtonAnimation } from "@/hooks/useAnimation";

 interface LiveStreamSectionProps {
  onChanged: () => void;
@@ -12,67 +13,98 @@ interface LiveStreamSectionProps {
  onBlur?: () => void;
 }

-export const LiveStreamSection: React.FC<LiveStreamSectionProps> = ({ onChanged, onFocus, onBlur }) => {
-  const { m3uUrl, setM3uUrl } = useSettingsStore();
-  const [isInputFocused, setIsInputFocused] = useState(false);
-  const [isSectionFocused, setIsSectionFocused] = useState(false);
-  const inputRef = useRef<TextInput>(null);
-  const inputAnimationStyle = useButtonAnimation(isSectionFocused, 1.01);
+export interface LiveStreamSectionRef {
+  setInputValue: (value: string) => void;
+}

-  const handleUrlChange = (url: string) => {
-    setM3uUrl(url);
-    onChanged();
-  };
+export const LiveStreamSection = forwardRef<LiveStreamSectionRef, LiveStreamSectionProps>(
+  ({ onChanged, onFocus, onBlur }, ref) => {
+    const { m3uUrl, setM3uUrl, remoteInputEnabled } = useSettingsStore();
+    const { serverUrl } = useRemoteControlStore();
+    const [isInputFocused, setIsInputFocused] = useState(false);
+    const [isSectionFocused, setIsSectionFocused] = useState(false);
+    const inputRef = useRef<TextInput>(null);
+    const inputAnimationStyle = useButtonAnimation(isSectionFocused, 1.01);

-  const handleSectionFocus = () => {
-    setIsSectionFocused(true);
-    onFocus?.();
-  };
+    const handleUrlChange = (url: string) => {
+      setM3uUrl(url);
+      onChanged();
+    };

-  const handleSectionBlur = () => {
-    setIsSectionFocused(false);
-    onBlur?.();
-  };
+    useImperativeHandle(ref, () => ({
+      setInputValue: (value: string) => {
+        setM3uUrl(value);
+        onChanged();
+      },
+    }));

-  const handleTVEvent = React.useCallback(
-    (event: any) => {
-      if (isSectionFocused && event.eventType === "select") {
-        inputRef.current?.focus();
-      }
-    },
-    [isSectionFocused]
-  );
+    const handleSectionFocus = () => {
+      setIsSectionFocused(true);
+      onFocus?.();
+    };

-  useTVEventHandler(handleTVEvent);
+    const handleSectionBlur = () => {
+      setIsSectionFocused(false);
+      onBlur?.();
+    };

-  return (
-    <SettingsSection focusable onFocus={handleSectionFocus} onBlur={handleSectionBlur}>
-      <View style={styles.inputContainer}>
-        <ThemedText style={styles.sectionTitle}>直播源地址</ThemedText>
-        <Animated.View style={inputAnimationStyle}>
-          <TextInput
-            ref={inputRef}
-            style={[styles.input, isInputFocused && styles.inputFocused]}
-            value={m3uUrl}
-            onChangeText={handleUrlChange}
-            placeholder="输入 M3U 直播源地址"
-            placeholderTextColor="#888"
-            autoCapitalize="none"
-            autoCorrect={false}
-            onFocus={() => setIsInputFocused(true)}
-            onBlur={() => setIsInputFocused(false)}
-          />
-        </Animated.View>
-      </View>
-    </SettingsSection>
-  );
-};
+    const handleTVEvent = React.useCallback(
+      (event: any) => {
+        if (isSectionFocused && event.eventType === "select") {
+          inputRef.current?.focus();
+        }
+      },
+      [isSectionFocused]
+    );
+
+    useTVEventHandler(handleTVEvent);
+
+    return (
+      <SettingsSection focusable onFocus={handleSectionFocus} onBlur={handleSectionBlur}>
+        <View style={styles.inputContainer}>
+          <View style={styles.titleContainer}>
+            <ThemedText style={styles.sectionTitle}>直播源地址</ThemedText>
+            {remoteInputEnabled && serverUrl && (
+              <ThemedText style={styles.subtitle}>用手机访问 {serverUrl}，可远程输入</ThemedText>
+            )}
+          </View>
+          <Animated.View style={inputAnimationStyle}>
+            <TextInput
+              ref={inputRef}
+              style={[styles.input, isInputFocused && styles.inputFocused]}
+              value={m3uUrl}
+              onChangeText={handleUrlChange}
+              placeholder="输入 M3U 直播源地址"
+              placeholderTextColor="#888"
+              autoCapitalize="none"
+              autoCorrect={false}
+              onFocus={() => setIsInputFocused(true)}
+              onBlur={() => setIsInputFocused(false)}
+            />
+          </Animated.View>
+        </View>
+      </SettingsSection>
+    );
+  }
+);
+
+LiveStreamSection.displayName = "LiveStreamSection";

 const styles = StyleSheet.create({
+  titleContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 8,
+  },
  sectionTitle: {
    fontSize: 16,
-    fontWeight: 'bold',
-    marginBottom: 8,
+    fontWeight: "bold",
+    marginRight: 12,
+  },
+  subtitle: {
+    fontSize: 12,
+    color: "#888",
+    fontStyle: "italic",
  },
  inputContainer: {
    marginBottom: 12,
@@ -83,16 +115,16 @@ const styles = StyleSheet.create({
    borderRadius: 8,
    paddingHorizontal: 15,
    fontSize: 16,
-    backgroundColor: '#3a3a3c',
-    color: 'white',
-    borderColor: 'transparent',
+    backgroundColor: "#3a3a3c",
+    color: "white",
+    borderColor: "transparent",
  },
  inputFocused: {
-    borderColor: '#007AFF',
-    shadowColor: '#007AFF',
+    borderColor: "#007AFF",
+    shadowColor: "#007AFF",
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.8,
    shadowRadius: 10,
    elevation: 5,
  },
-});
+});
--- a/services/storage.ts
+++ b/services/storage.ts
@@ -184,7 +184,7 @@ export class SettingsManager {
  static async get(): Promise<AppSettings> {
    const defaultSettings: AppSettings = {
      apiBaseUrl: "https://orion-tv.edu.deal",
-      remoteInputEnabled: false,
+      remoteInputEnabled: true,
      videoSource: {
        enabledAll: true,
        sources: {},
--- a/stores/remoteControlStore.ts
+++ b/stores/remoteControlStore.ts
@@ -25,6 +25,16 @@ export const useRemoteControlStore = create<RemoteControlState>((set, get) => ({
    if (get().isServerRunning) {
      return;
    }
+    remoteControlService.init({
+      onMessage: (message: string) => {
+        console.log('[RemoteControlStore] Received message:', message);
+        set({ lastMessage: message });
+      },
+      onHandshake: () => {
+        console.log('[RemoteControlStore] Handshake successful');
+        set({ isModalVisible: false })
+      },
+    });
    try {
      const url = await remoteControlService.startServer();
      console.log(`[RemoteControlStore] Server started, URL: ${url}`);