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

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,

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,
   },
-});
+});