fix: Update channel change logic to use useCallback for better performance; adjust resource check in VideoSourceSection

This reverts commit 8000cde907.

.claude/settings.local.json

@@ -0,0 +1,14 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(find:*)",
+      "Bash(rm:*)",
+      "Bash(yarn install)",
+      "Bash(yarn lint)",
+      "Bash(yarn prebuild-tv:*)",
+      "Bash(mkdir:*)",
+      "Bash(yarn lint:*)"
+    ],
+    "deny": []
+  }
+}

.eslintrc.js

@@ -0,0 +1,4 @@
+// https://docs.expo.dev/guides/using-eslint/
+module.exports = {
+  extends: 'expo',
+};

CLAUDE.md

@@ -0,0 +1,107 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+OrionTV is a React Native TVOS application for streaming video content, built with Expo and designed specifically for TV platforms (Apple TV and Android TV). The project includes both a frontend React Native app and a backend Express service.
+
+## Key Commands
+
+### Development Commands
+- `yarn start-tv` - Start Metro bundler in TV mode
+- `yarn ios-tv` - Build and run on Apple TV
+- `yarn android-tv` - Build and run on Android TV  
+- `yarn prebuild-tv` - Generate native project files for TV (run this after dependency changes)
+- `yarn lint` - Run linting checks
+- `yarn test` - Run Jest tests with watch mode
+- `yarn build-local` - Build Android APK locally
+
+### Backend Commands (from `/backend` directory)
+- `yarn dev` - Start backend development server with hot reload
+- `yarn build` - Build TypeScript backend
+- `yarn start` - Start production backend server
+
+## Architecture Overview
+
+### Frontend Structure
+- **Expo Router**: File-based routing with screens in `/app` directory
+- **State Management**: Zustand stores for global state (`/stores`)
+- **TV-Specific Components**: Components optimized for TV remote control interaction
+- **Services**: API layer, storage management, and remote control service
+
+### Key Technologies
+- React Native TVOS (0.74.x) - TV-optimized React Native
+- Expo SDK 51 - Development platform and tooling
+- TypeScript - Type safety throughout
+- Zustand - Lightweight state management
+- Expo AV - Video playback functionality
+
+### State Management (Zustand Stores)
+- `homeStore.ts` - Home screen content, categories, and play records
+- `playerStore.ts` - Video player state and controls
+- `settingsStore.ts` - App settings and configuration
+- `remoteControlStore.ts` - Remote control server functionality
+
+### TV-Specific Features
+- Remote control navigation (`useTVRemoteHandler` hook)
+- TV-optimized UI components with focus management
+- Remote control server for external control via HTTP bridge
+- Gesture handling for TV remote interactions
+
+### Backend Architecture
+- Express.js server providing API endpoints
+- Routes for search, video details, and Douban integration
+- Image proxy service for handling external images
+- CORS enabled for cross-origin requests
+
+## Development Workflow
+
+### TV Development Notes
+- Always use TV-specific commands (`*-tv` variants)
+- Run `yarn prebuild-tv` after adding new dependencies
+- Test on both Apple TV and Android TV simulators
+- TV components require focus management and remote control support
+
+### State Management Patterns
+- Use Zustand stores for global state
+- Stores follow a consistent pattern with actions and state
+- API calls are centralized in the `/services` directory
+- Storage operations use AsyncStorage wrapper in `storage.ts`
+
+### Component Structure
+- TV-specific components have `.tv.tsx` extensions
+- Common components in `/components` directory
+- Custom hooks in `/hooks` directory for reusable logic
+- TV remote handling is centralized in `useTVRemoteHandler`
+
+## Testing
+
+- Uses Jest with `jest-expo` preset
+- Run tests with `yarn test`
+- Component tests in `__tests__` directories
+- Snapshot testing for UI components
+
+## Common Issues
+
+### TV Platform Specifics
+- TV apps require special focus management
+- Remote control events need careful handling
+- TV-specific assets and icons required
+- Platform-specific build configurations
+
+### Development Environment
+- Ensure Xcode is installed for Apple TV development
+- Android Studio required for Android TV development
+- Metro bundler must run in TV mode (`EXPO_TV=1`)
+- Backend server must be running on port 3001 for full functionality
+
+## File Structure Notes
+
+- `/app` - Expo Router screens and navigation
+- `/components` - Reusable UI components
+- `/stores` - Zustand state management
+- `/services` - API, storage, and external service integrations
+- `/hooks` - Custom React hooks
+- `/backend` - Express.js backend service
+- `/constants` - App constants and theme definitions

README.md

@@ -105,9 +105,10 @@ yarn android-tv
 
 2. `docker run -d -p 3001:3001 zimpel1/tv-host`
 
-#### 使用 demo 地址
 
-在设置中可以使用 demo 地址： https://orion-tv.vercel.app 需要代理且不保证稳定和可用性。
+## 其他
+ - 最低版本是android 7，可用，但是不推荐
+ - 如果使用https的后端接口无法访问，在确认服务没有问题的情况下，请检查https的TLS协议，Android 10 之后版本才支持 TLS1.3
 
 ## 📜 主要脚本
 

app/_layout.tsx

@@ -7,6 +7,8 @@ import { Platform } from "react-native";
 import Toast from "react-native-toast-message";
 
 import { useSettingsStore } from "@/stores/settingsStore";
+import { useRemoteControlStore } from "@/stores/remoteControlStore";
+import { remoteControlService } from "@/services/remoteControlService";
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
@@ -16,11 +18,12 @@ export default function RootLayout() {
   const [loaded, error] = useFonts({
     SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
   });
-  const initializeSettings = useSettingsStore((state) => state.loadSettings);
+  const { loadSettings, remoteInputEnabled } = useSettingsStore();
+  const { startServer, stopServer } = useRemoteControlStore();
 
   useEffect(() => {
-    initializeSettings();
-  }, [initializeSettings]);
+    loadSettings();
+  }, [loadSettings]);
 
   useEffect(() => {
     if (loaded || error) {
@@ -31,6 +34,14 @@ export default function RootLayout() {
     }
   }, [loaded, error]);
 
+  useEffect(() => {
+    if (remoteInputEnabled) {
+      startServer();
+    } else {
+      stopServer();
+    }
+  }, [remoteInputEnabled, startServer, stopServer]);
+
   if (!loaded && !error) {
     return null;
   }
@@ -42,6 +53,8 @@ export default function RootLayout() {
         <Stack.Screen name="detail" options={{ headerShown: false }} />
         {Platform.OS !== "web" && <Stack.Screen name="play" options={{ headerShown: false }} />}
         <Stack.Screen name="search" options={{ headerShown: false }} />
+        <Stack.Screen name="live" options={{ headerShown: false }} />
+        <Stack.Screen name="settings" options={{ headerShown: false }} />
         <Stack.Screen name="+not-found" />
       </Stack>
       <Toast />

app/detail.tsx

@@ -6,6 +6,7 @@ import { ThemedText } from "@/components/ThemedText";
 import { api, SearchResult } from "@/services/api";
 import { getResolutionFromM3U8 } from "@/services/m3u8";
 import { StyledButton } from "@/components/StyledButton";
+import { useSettingsStore } from "@/stores/settingsStore";
 
 export default function DetailScreen() {
   const { source, q } = useLocalSearchParams();
@@ -16,6 +17,7 @@ export default function DetailScreen() {
   const [error, setError] = useState<string | null>(null);
   const [allSourcesLoaded, setAllSourcesLoaded] = useState(false);
   const controllerRef = useRef<AbortController | null>(null);
+  const { videoSource } = useSettingsStore();
 
   useEffect(() => {
     if (controllerRef.current) {
@@ -33,13 +35,24 @@ export default function DetailScreen() {
         setAllSourcesLoaded(false);
 
         try {
-          const resources = await api.getResources(signal);
-          if (!resources || resources.length === 0) {
+          const allResources = await api.getResources(signal);
+          if (!allResources || allResources.length === 0) {
             setError("没有可用的播放源");
             setLoading(false);
             return;
           }
 
+          // Filter resources based on enabled sources in settings
+          const resources = videoSource.enabledAll
+            ? allResources
+            : allResources.filter((resource) => videoSource.sources[resource.key]);
+
+          if (!videoSource.enabledAll && resources.length === 0) {
+            setError("请到设置页面启用的播放源");
+            setLoading(false);
+            return;
+          }
+
           let foundFirstResult = false;
           // Prioritize source from params if available
           if (typeof source === "string") {
@@ -102,7 +115,7 @@ export default function DetailScreen() {
     return () => {
       controllerRef.current?.abort();
     };
-  }, [q, source]);
+  }, [q, source, videoSource.enabledAll, videoSource.sources]);
 
   const handlePlay = (episodeName: string, episodeIndex: number) => {
     if (!detail) return;
@@ -131,7 +144,9 @@ export default function DetailScreen() {
   if (error) {
     return (
       <ThemedView style={styles.centered}>
-        <ThemedText type="subtitle">{error}</ThemedText>
+        <ThemedText type="subtitle" style={styles.text}>
+          {error}
+        </ThemedText>
       </ThemedView>
     );
   }
@@ -222,6 +237,10 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     padding: 20,
   },
+  text: {
+    padding: 20,
+    textAlign: "center",
+  },
   poster: {
     width: 200,
     height: 300,

app/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useRef } from "react";
+import React, { useEffect, useCallback, useRef, useState } from "react";
 import { View, StyleSheet, ActivityIndicator, FlatList, Pressable, Dimensions } from "react-native";
 import { ThemedView } from "@/components/ThemedView";
 import { ThemedText } from "@/components/ThemedText";
@@ -6,10 +6,8 @@ import { api } from "@/services/api";
 import VideoCard from "@/components/VideoCard.tv";
 import { useFocusEffect, useRouter } from "expo-router";
 import { Search, Settings } from "lucide-react-native";
-import { SettingsModal } from "@/components/SettingsModal";
 import { StyledButton } from "@/components/StyledButton";
 import useHomeStore, { RowItem, Category } from "@/stores/homeStore";
-import { useSettingsStore } from "@/stores/settingsStore";
 
 const NUM_COLUMNS = 5;
 const { width } = Dimensions.get("window");
@@ -19,6 +17,7 @@ export default function HomeScreen() {
   const router = useRouter();
   const colorScheme = "dark";
   const flatListRef = useRef<FlatList>(null);
+  const [selectedTag, setSelectedTag] = useState<string | null>(null);
 
   const {
     categories,
@@ -33,8 +32,6 @@ export default function HomeScreen() {
     refreshPlayRecords,
   } = useHomeStore();
 
-  const showSettingsModal = useSettingsStore((state) => state.showModal);
-
   useFocusEffect(
     useCallback(() => {
       refreshPlayRecords();
@@ -42,14 +39,38 @@ export default function HomeScreen() {
   );
 
   useEffect(() => {
-    fetchInitialData();
-    flatListRef.current?.scrollToOffset({ animated: false, offset: 0 });
-  }, [selectedCategory, fetchInitialData]);
+    if (selectedCategory && !selectedCategory.tags) {
+      fetchInitialData();
+      flatListRef.current?.scrollToOffset({ animated: false, offset: 0 });
+    } else if (selectedCategory?.tags && !selectedCategory.tag) {
+      // Category with tags selected, but no specific tag yet. Select the first one.
+      const defaultTag = selectedCategory.tags[0];
+      setSelectedTag(defaultTag);
+      selectCategory({ ...selectedCategory, tag: defaultTag });
+    }
+  }, [selectedCategory, fetchInitialData, selectCategory]);
+
+  useEffect(() => {
+    if (selectedCategory && selectedCategory.tag) {
+      fetchInitialData();
+      flatListRef.current?.scrollToOffset({ animated: false, offset: 0 });
+    }
+  }, [fetchInitialData, selectedCategory, selectedCategory.tag]);
 
   const handleCategorySelect = (category: Category) => {
+    setSelectedTag(null);
     selectCategory(category);
   };
 
+  const handleTagSelect = (tag: string) => {
+    setSelectedTag(tag);
+    if (selectedCategory) {
+      // Create a new category object with the selected tag
+      const categoryWithTag = { ...selectedCategory, tag: tag };
+      selectCategory(categoryWithTag);
+    }
+  };
+
   const renderCategory = ({ item }: { item: Category }) => {
     const isSelected = selectedCategory?.title === item.title;
     return (
@@ -92,7 +113,14 @@ export default function HomeScreen() {
     <ThemedView style={styles.container}>
       {/* 顶部导航 */}
       <View style={styles.headerContainer}>
-        <ThemedText style={styles.headerTitle}>首页</ThemedText>
+        <View style={{ flexDirection: "row", alignItems: "center" }}>
+          <ThemedText style={styles.headerTitle}>首页</ThemedText>
+          <Pressable style={{ marginLeft: 20 }} onPress={() => router.push("/live")}>
+            {({ focused }) => (
+              <ThemedText style={[styles.headerTitle, { color: focused ? "white" : "grey" }]}>直播</ThemedText>
+            )}
+          </Pressable>
+        </View>
         <View style={styles.rightHeaderButtons}>
           <StyledButton
             style={styles.searchButton}
@@ -101,7 +129,7 @@ export default function HomeScreen() {
           >
             <Search color={colorScheme === "dark" ? "white" : "black"} size={24} />
           </StyledButton>
-          <StyledButton style={styles.searchButton} onPress={showSettingsModal} variant="ghost">
+          <StyledButton style={styles.searchButton} onPress={() => router.push("/settings")} variant="ghost">
             <Settings color={colorScheme === "dark" ? "white" : "black"} size={24} />
           </StyledButton>
         </View>
@@ -119,6 +147,33 @@ export default function HomeScreen() {
         />
       </View>
 
+      {/* Sub-category Tags */}
+      {selectedCategory && selectedCategory.tags && (
+        <View style={styles.categoryContainer}>
+          <FlatList
+            data={selectedCategory.tags}
+            renderItem={({ item, index }) => {
+              const isSelected = selectedTag === item;
+              return (
+                <StyledButton
+                  hasTVPreferredFocus={index === 0} // Focus the first tag by default
+                  text={item}
+                  onPress={() => handleTagSelect(item)}
+                  isSelected={isSelected}
+                  style={styles.categoryButton}
+                  textStyle={styles.categoryText}
+                  variant="ghost"
+                />
+              );
+            }}
+            keyExtractor={(item) => item}
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.categoryListContent}
+          />
+        </View>
+      )}
+
       {/* 内容网格 */}
       {loading ? (
         <View style={styles.centerContainer}>
@@ -143,12 +198,11 @@ export default function HomeScreen() {
           ListFooterComponent={renderFooter}
           ListEmptyComponent={
             <View style={styles.centerContainer}>
-              <ThemedText>该分类下暂无内容</ThemedText>
+              <ThemedText>{selectedCategory?.tags ? "请选择一个子分类" : "该分类下暂无内容"}</ThemedText>
             </View>
           }
         />
       )}
-      <SettingsModal />
     </ThemedView>
   );
 }

app/live.tsx

@@ -0,0 +1,205 @@
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { View, FlatList, StyleSheet, ActivityIndicator, Modal, useTVEventHandler, HWEvent, Text } from "react-native";
+import LivePlayer from "@/components/LivePlayer";
+import { fetchAndParseM3u, getPlayableUrl, Channel } from "@/services/m3u";
+import { ThemedView } from "@/components/ThemedView";
+import { StyledButton } from "@/components/StyledButton";
+import { useSettingsStore } from "@/stores/settingsStore";
+
+export default function LiveScreen() {
+  const { m3uUrl } = useSettingsStore();
+  const [channels, setChannels] = useState<Channel[]>([]);
+  const [groupedChannels, setGroupedChannels] = useState<Record<string, Channel[]>>({});
+  const [channelGroups, setChannelGroups] = useState<string[]>([]);
+  const [selectedGroup, setSelectedGroup] = useState<string>("");
+
+  const [currentChannelIndex, setCurrentChannelIndex] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isChannelListVisible, setIsChannelListVisible] = useState(false);
+  const [channelTitle, setChannelTitle] = useState<string | null>(null);
+  const titleTimer = useRef<NodeJS.Timeout | null>(null);
+
+  const selectedChannelUrl = channels.length > 0 ? getPlayableUrl(channels[currentChannelIndex].url) : null;
+
+  useEffect(() => {
+    const loadChannels = async () => {
+      if (!m3uUrl) return;
+      setIsLoading(true);
+      const parsedChannels = await fetchAndParseM3u(m3uUrl);
+      setChannels(parsedChannels);
+
+      const groups: Record<string, Channel[]> = parsedChannels.reduce((acc, channel) => {
+        const groupName = channel.group || "Other";
+        if (!acc[groupName]) {
+          acc[groupName] = [];
+        }
+        acc[groupName].push(channel);
+        return acc;
+      }, {} as Record<string, Channel[]>);
+
+      const groupNames = Object.keys(groups);
+      setGroupedChannels(groups);
+      setChannelGroups(groupNames);
+      setSelectedGroup(groupNames[0] || "");
+
+      if (parsedChannels.length > 0) {
+        showChannelTitle(parsedChannels[0].name);
+      }
+      setIsLoading(false);
+    };
+    loadChannels();
+  }, [m3uUrl]);
+
+  const showChannelTitle = (title: string) => {
+    setChannelTitle(title);
+    if (titleTimer.current) clearTimeout(titleTimer.current);
+    titleTimer.current = setTimeout(() => setChannelTitle(null), 3000);
+  };
+
+  const handleSelectChannel = (channel: Channel) => {
+    const globalIndex = channels.findIndex((c) => c.id === channel.id);
+    if (globalIndex !== -1) {
+      setCurrentChannelIndex(globalIndex);
+      showChannelTitle(channel.name);
+      setIsChannelListVisible(false);
+    }
+  };
+
+  const changeChannel = useCallback(
+    (direction: "next" | "prev") => {
+      if (channels.length === 0) return;
+      let newIndex =
+        direction === "next"
+          ? (currentChannelIndex + 1) % channels.length
+          : (currentChannelIndex - 1 + channels.length) % channels.length;
+      setCurrentChannelIndex(newIndex);
+      showChannelTitle(channels[newIndex].name);
+    },
+    [channels, currentChannelIndex]
+  );
+
+  const handleTVEvent = useCallback(
+    (event: HWEvent) => {
+      if (isChannelListVisible) return;
+      if (event.eventType === "down") setIsChannelListVisible(true);
+      else if (event.eventType === "left") changeChannel("prev");
+      else if (event.eventType === "right") changeChannel("next");
+    },
+    [changeChannel, isChannelListVisible]
+  );
+
+  useTVEventHandler(handleTVEvent);
+
+  return (
+    <ThemedView style={styles.container}>
+      <LivePlayer streamUrl={selectedChannelUrl} channelTitle={channelTitle} onPlaybackStatusUpdate={() => {}} />
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={isChannelListVisible}
+        onRequestClose={() => setIsChannelListVisible(false)}
+      >
+        <View style={styles.modalContainer}>
+          <View style={styles.modalContent}>
+            <Text style={styles.modalTitle}>选择频道</Text>
+            <View style={styles.listContainer}>
+              <View style={styles.groupColumn}>
+                <FlatList
+                  data={channelGroups}
+                  keyExtractor={(item) => item}
+                  renderItem={({ item }) => (
+                    <StyledButton
+                      text={item}
+                      onPress={() => setSelectedGroup(item)}
+                      isSelected={selectedGroup === item}
+                      style={styles.groupButton}
+                      textStyle={styles.groupButtonText}
+                    />
+                  )}
+                />
+              </View>
+              <View style={styles.channelColumn}>
+                {isLoading ? (
+                  <ActivityIndicator size="large" />
+                ) : (
+                  <FlatList
+                    data={groupedChannels[selectedGroup] || []}
+                    keyExtractor={(item) => item.id}
+                    renderItem={({ item }) => (
+                      <StyledButton
+                        text={item.name || "Unknown Channel"}
+                        onPress={() => handleSelectChannel(item)}
+                        isSelected={channels[currentChannelIndex]?.id === item.id}
+                        hasTVPreferredFocus={channels[currentChannelIndex]?.id === item.id}
+                        style={styles.channelItem}
+                        textStyle={styles.channelItemText}
+                      />
+                    )}
+                  />
+                )}
+              </View>
+            </View>
+          </View>
+        </View>
+      </Modal>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  loadingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  modalContainer: {
+    flex: 1,
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    backgroundColor: "transparent",
+  },
+  modalContent: {
+    width: 450,
+    height: "100%",
+    backgroundColor: "rgba(0, 0, 0, 0.85)",
+    padding: 15,
+  },
+  modalTitle: {
+    color: "white",
+    marginBottom: 10,
+    textAlign: "center",
+    fontSize: 16,
+    fontWeight: "bold",
+  },
+  listContainer: {
+    flex: 1,
+    flexDirection: "row",
+  },
+  groupColumn: {
+    flex: 1,
+    marginRight: 10,
+  },
+  channelColumn: {
+    flex: 2,
+  },
+  groupButton: {
+    paddingVertical: 8,
+    paddingHorizontal: 4,
+    marginVertical: 4,
+  },
+  groupButtonText: {
+    fontSize: 13,
+  },
+  channelItem: {
+    paddingVertical: 6,
+    paddingHorizontal: 4,
+    marginVertical: 3,
+  },
+  channelItemText: {
+    fontSize: 12,
+  },
+});

app/play.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from "react";
-import { View, StyleSheet, TouchableOpacity, ActivityIndicator, BackHandler } from "react-native";
+import { StyleSheet, TouchableOpacity, ActivityIndicator, BackHandler } from "react-native";
 import { useLocalSearchParams, useRouter } from "expo-router";
 import { Video, ResizeMode } from "expo-av";
 import { useKeepAwake } from "expo-keep-awake";
@@ -37,9 +37,6 @@ export default function PlayScreen() {
     introEndTime,
     setVideoRef,
     loadVideo,
-    playEpisode,
-    togglePlayPause,
-    seek,
     handlePlaybackStatusUpdate,
     setShowControls,
     setShowEpisodeModal,
@@ -100,6 +97,8 @@ export default function PlayScreen() {
           ref={videoRef}
           style={styles.videoPlayer}
           source={{ uri: currentEpisode?.url }}
+          usePoster
+          posterSource={{ uri: detail?.videoInfo.cover ?? "" }}
           resizeMode={ResizeMode.CONTAIN}
           onPlaybackStatusUpdate={handlePlaybackStatusUpdate}
           onLoad={() => {

app/search.tsx

@@ -1,11 +1,15 @@
 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";
 import { api, SearchResult } from "@/services/api";
-import { Search } from "lucide-react-native";
+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("");
@@ -15,6 +19,19 @@ export default function SearchScreen() {
   const textInputRef = useRef<TextInput>(null);
   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(() => {
     // Focus the text input when the screen loads
@@ -24,8 +41,9 @@ export default function SearchScreen() {
     return () => clearTimeout(timer);
   }, []);
 
-  const handleSearch = async () => {
-    if (!keyword.trim()) {
+  const handleSearch = async (searchText?: string) => {
+    const term = typeof searchText === "string" ? searchText : keyword;
+    if (!term.trim()) {
       Keyboard.dismiss();
       return;
     }
@@ -33,7 +51,7 @@ export default function SearchScreen() {
     setLoading(true);
     setError(null);
     try {
-      const response = await api.searchVideos(keyword);
+      const response = await api.searchVideos(term);
       if (response.results.length > 0) {
         setResults(response.results);
       } else {
@@ -47,6 +65,19 @@ 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()}
@@ -78,12 +109,15 @@ export default function SearchScreen() {
           onChangeText={setKeyword}
           onFocus={() => setIsInputFocused(true)}
           onBlur={() => setIsInputFocused(false)}
-          onSubmitEditing={handleSearch} // Allow searching with remote 'enter' button
+          onSubmitEditing={onSearchPress}
           returnKeyType="search"
         />
-        <StyledButton style={styles.searchButton} onPress={handleSearch}>
+        <StyledButton style={styles.searchButton} onPress={onSearchPress}>
           <Search size={24} color={colorScheme === "dark" ? "white" : "black"} />
         </StyledButton>
+        <StyledButton style={styles.qrButton} onPress={handleQrPress}>
+          <QrCode size={24} color={colorScheme === "dark" ? "white" : "black"} />
+        </StyledButton>
       </View>
 
       {loading ? (
@@ -108,6 +142,7 @@ export default function SearchScreen() {
           }
         />
       )}
+      <RemoteControlModal />
     </ThemedView>
   );
 }
@@ -140,6 +175,11 @@ const styles = StyleSheet.create({
     // backgroundColor is now set dynamically
     borderRadius: 8,
   },
+  qrButton: {
+    padding: 12,
+    borderRadius: 8,
+    marginLeft: 10,
+  },
   centerContainer: {
     flex: 1,
     justifyContent: "center",

app/settings.tsx

@@ -0,0 +1,208 @@
+import React, { useState, useEffect, useRef } from "react";
+import { View, StyleSheet, FlatList, Alert, KeyboardAvoidingView, Platform } from "react-native";
+import { useTVEventHandler } from "react-native";
+import { ThemedText } from "@/components/ThemedText";
+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";
+import Toast from "react-native-toast-message";
+
+export default function SettingsScreen() {
+  const { loadSettings, saveSettings, setApiBaseUrl, setM3uUrl } = useSettingsStore();
+  const { lastMessage } = useRemoteControlStore();
+  const backgroundColor = useThemeColor({}, "background");
+
+  const [hasChanges, setHasChanges] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentFocusIndex, setCurrentFocusIndex] = useState(0);
+  const [currentSection, setCurrentSection] = useState<string | null>(null);
+
+  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 (currentSection === "api" && apiSectionRef.current) {
+      // API Config Section
+      setApiBaseUrl(message);
+    } else if (currentSection === "livestream" && liveStreamSectionRef.current) {
+      // Live Stream Section
+      setM3uUrl(message);
+    }
+  };
+
+  const handleSave = async () => {
+    setIsLoading(true);
+    try {
+      await saveSettings();
+      setHasChanges(false);
+      Toast.show({
+        type: "success",
+        text1: "保存成功",
+      });
+    } catch {
+      Alert.alert("错误", "保存设置失败");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const markAsChanged = () => {
+    setHasChanges(true);
+  };
+
+  const sections = [
+    {
+      component: (
+        <RemoteInputSection
+          onChanged={markAsChanged}
+          onFocus={() => {
+            setCurrentFocusIndex(0);
+            setCurrentSection("remote");
+          }}
+        />
+      ),
+      key: "remote",
+    },
+    {
+      component: (
+        <APIConfigSection
+          ref={apiSectionRef}
+          onChanged={markAsChanged}
+          onFocus={() => {
+            setCurrentFocusIndex(1);
+            setCurrentSection("api");
+          }}
+        />
+      ),
+      key: "api",
+    },
+    {
+      component: (
+        <LiveStreamSection
+          ref={liveStreamSectionRef}
+          onChanged={markAsChanged}
+          onFocus={() => {
+            setCurrentFocusIndex(2);
+            setCurrentSection("livestream");
+          }}
+        />
+      ),
+      key: "livestream",
+    },
+    {
+      component: (
+        <VideoSourceSection
+          onChanged={markAsChanged}
+          onFocus={() => {
+            setCurrentFocusIndex(3);
+            setCurrentSection("videoSource");
+          }}
+        />
+      ),
+      key: "videoSource",
+    },
+  ];
+
+  // TV遥控器事件处理
+  const handleTVEvent = React.useCallback(
+    (event: any) => {
+      if (event.eventType === "down") {
+        const nextIndex = Math.min(currentFocusIndex + 1, sections.length);
+        setCurrentFocusIndex(nextIndex);
+        if (nextIndex === sections.length) {
+          saveButtonRef.current?.focus();
+        }
+      } else if (event.eventType === "up") {
+        const prevIndex = Math.max(currentFocusIndex - 1, 0);
+        setCurrentFocusIndex(prevIndex);
+      }
+    },
+    [currentFocusIndex, sections.length]
+  );
+
+  useTVEventHandler(handleTVEvent);
+
+  return (
+    <KeyboardAvoidingView style={{ flex: 1, backgroundColor }} behavior={Platform.OS === "ios" ? "padding" : "height"}>
+      <ThemedView style={styles.container}>
+        <View style={styles.header}>
+          <ThemedText style={styles.title}>设置</ThemedText>
+        </View>
+
+        <View style={styles.scrollView}>
+          <FlatList
+            data={sections}
+            renderItem={({ item }) => item.component}
+            keyExtractor={(item) => item.key}
+            showsVerticalScrollIndicator={false}
+          />
+        </View>
+
+        <View style={styles.footer}>
+          <StyledButton
+            text={isLoading ? "保存中..." : "保存设置"}
+            onPress={handleSave}
+            variant="primary"
+            disabled={!hasChanges || isLoading}
+            style={[styles.saveButton, (!hasChanges || isLoading) && styles.disabledButton]}
+          />
+        </View>
+      </ThemedView>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 12,
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 10,
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: "bold",
+    paddingTop: 24,
+  },
+  backButton: {
+    minWidth: 100,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  footer: {
+    paddingTop: 12,
+    alignItems: "flex-end",
+  },
+  saveButton: {
+    minHeight: 50,
+    width: 120,
+  },
+  disabledButton: {
+    opacity: 0.5,
+  },
+});

components/LivePlayer.tsx

@@ -0,0 +1,147 @@
+import React, { useRef, useState, useEffect } from "react";
+import { View, StyleSheet, Text, ActivityIndicator } from "react-native";
+import { Video, ResizeMode, AVPlaybackStatus } from "expo-av";
+
+interface LivePlayerProps {
+  streamUrl: string | null;
+  channelTitle?: string | null;
+  onPlaybackStatusUpdate: (status: AVPlaybackStatus) => void;
+}
+
+const PLAYBACK_TIMEOUT = 15000; // 15 seconds
+
+export default function LivePlayer({ streamUrl, channelTitle, onPlaybackStatusUpdate }: LivePlayerProps) {
+  const video = useRef<Video>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isTimeout, setIsTimeout] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    if (streamUrl) {
+      setIsLoading(true);
+      setIsTimeout(false);
+      timeoutRef.current = setTimeout(() => {
+        setIsTimeout(true);
+        setIsLoading(false);
+      }, PLAYBACK_TIMEOUT);
+    } else {
+      setIsLoading(false);
+      setIsTimeout(false);
+    }
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [streamUrl]);
+
+  const handlePlaybackStatusUpdate = (status: AVPlaybackStatus) => {
+    if (status.isLoaded) {
+      if (status.isPlaying) {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        setIsLoading(false);
+        setIsTimeout(false);
+      } else if (status.isBuffering) {
+        setIsLoading(true);
+      }
+    } else {
+      if (status.error) {
+        setIsLoading(false);
+        setIsTimeout(true);
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+      }
+    }
+    onPlaybackStatusUpdate(status);
+  };
+
+  if (!streamUrl) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.messageText}>Select a channel to play.</Text>
+      </View>
+    );
+  }
+
+  if (isTimeout) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.messageText}>Failed to load stream. It might be offline or unavailable.</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <Video
+        ref={video}
+        style={styles.video}
+        source={{
+          uri: streamUrl,
+        }}
+        resizeMode={ResizeMode.CONTAIN}
+        shouldPlay
+        onPlaybackStatusUpdate={handlePlaybackStatusUpdate}
+        onError={(e) => {
+          setIsTimeout(true);
+          setIsLoading(false);
+        }}
+      />
+      {isLoading && (
+        <View style={styles.loadingOverlay}>
+          <ActivityIndicator size="large" color="#fff" />
+          <Text style={styles.messageText}>Loading...</Text>
+        </View>
+      )}
+      {channelTitle && !isLoading && !isTimeout && (
+        <View style={styles.overlay}>
+          <Text style={styles.title}>{channelTitle}</Text>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#000",
+  },
+  video: {
+    flex: 1,
+    alignSelf: "stretch",
+  },
+  overlay: {
+    position: "absolute",
+    top: 20,
+    left: 20,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    padding: 10,
+    borderRadius: 5,
+  },
+  title: {
+    color: "#fff",
+    fontSize: 18,
+  },
+  messageText: {
+    color: "#fff",
+    fontSize: 16,
+    marginTop: 10,
+  },
+  loadingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+  },
+});

components/PlayerControls.tsx

@@ -1,18 +1,6 @@
-import React, { useCallback, useState } from "react";
-import { View, Text, StyleSheet, TouchableOpacity, Pressable } from "react-native";
-import { useRouter } from "expo-router";
-import { AVPlaybackStatus } from "expo-av";
-import {
-  Pause,
-  Play,
-  SkipForward,
-  List,
-  ChevronsRight,
-  ChevronsLeft,
-  Tv,
-  ArrowDownToDot,
-  ArrowUpFromDot,
-} from "lucide-react-native";
+import React from "react";
+import { View, Text, StyleSheet, Pressable } from "react-native";
+import { Pause, Play, SkipForward, List, Tv, ArrowDownToDot, ArrowUpFromDot } from "lucide-react-native";
 import { ThemedText } from "@/components/ThemedText";
 import { MediaButton } from "@/components/MediaButton";
 
@@ -24,7 +12,6 @@ interface PlayerControlsProps {
 }
 
 export const PlayerControls: React.FC<PlayerControlsProps> = ({ showControls, setShowControls }) => {
-  const router = useRouter();
   const {
     detail,
     currentEpisodeIndex,
@@ -33,7 +20,6 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({ showControls, se
     isSeeking,
     seekPosition,
     progressPosition,
-    seek,
     togglePlayPause,
     playEpisode,
     setShowEpisodeModal,

components/RemoteControlModal.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { Modal, View, Text, StyleSheet } from "react-native";
+import QRCode from "react-native-qrcode-svg";
+import { useRemoteControlStore } from "@/stores/remoteControlStore";
+import { ThemedView } from "./ThemedView";
+import { ThemedText } from "./ThemedText";
+import { StyledButton } from "./StyledButton";
+
+export const RemoteControlModal: React.FC = () => {
+  const { isModalVisible, hideModal, serverUrl, error } = useRemoteControlStore();
+
+  return (
+    <Modal animationType="fade" transparent={true} visible={isModalVisible} onRequestClose={hideModal}>
+      <View style={styles.modalContainer}>
+        <ThemedView style={styles.modalContent}>
+          <ThemedText style={styles.title}>手机扫码</ThemedText>
+          <View style={styles.qrContainer}>
+            {serverUrl ? (
+              <>
+                <QRCode value={serverUrl} size={200} backgroundColor="white" color="black" />
+              </>
+            ) : (
+              <ThemedText style={styles.statusText}>{error ? `错误: ${error}` : "正在生成二维码..."}</ThemedText>
+            )}
+          </View>
+          <ThemedText style={styles.instructions}>
+            使用手机扫描上方二维码，即可在浏览器中向 TV 发送消息。或者访问{serverUrl}
+          </ThemedText>
+          <StyledButton text="关闭" onPress={hideModal} style={styles.button} variant="primary" />
+        </ThemedView>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+  },
+  modalContent: {
+    width: "85%",
+    maxWidth: 400,
+    padding: 24,
+    borderRadius: 12,
+    alignItems: "center",
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "bold",
+    marginBottom: 10,
+    paddingTop: 10,
+  },
+  qrContainer: {
+    width: 220,
+    height: 220,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#f0f0f0",
+    borderRadius: 8,
+    marginBottom: 20,
+  },
+  statusText: {
+    textAlign: "center",
+    fontSize: 16,
+  },
+  serverUrlText: {
+    marginTop: 10,
+    fontSize: 12,
+  },
+  instructions: {
+    textAlign: "center",
+    marginBottom: 24,
+    fontSize: 16,
+    color: "#ccc",
+  },
+  button: {
+    width: "100%",
+  },
+});

components/SettingsModal.tsx

@@ -1,118 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import { Modal, View, Text, TextInput, StyleSheet } from "react-native";
-import { ThemedText } from "./ThemedText";
-import { ThemedView } from "./ThemedView";
-import { useSettingsStore } from "@/stores/settingsStore";
-import { StyledButton } from "./StyledButton";
-
-export const SettingsModal: React.FC = () => {
-  const { isModalVisible, hideModal, apiBaseUrl, setApiBaseUrl, saveSettings, loadSettings } = useSettingsStore();
-
-  const [isInputFocused, setIsInputFocused] = useState(false);
-  const colorScheme = "dark"; // Replace with useColorScheme() if needed
-  const inputRef = useRef<TextInput>(null);
-
-  useEffect(() => {
-    if (isModalVisible) {
-      loadSettings();
-      const timer = setTimeout(() => {
-        inputRef.current?.focus();
-      }, 200);
-      return () => clearTimeout(timer);
-    }
-  }, [isModalVisible, loadSettings]);
-
-  const handleSave = () => {
-    saveSettings();
-  };
-
-  const styles = StyleSheet.create({
-    modalContainer: {
-      flex: 1,
-      justifyContent: "center",
-      alignItems: "center",
-      backgroundColor: "rgba(0, 0, 0, 0.6)",
-    },
-    modalContent: {
-      width: "80%",
-      maxWidth: 500,
-      padding: 24,
-      borderRadius: 12,
-      elevation: 10,
-    },
-    title: {
-      fontSize: 24,
-      fontWeight: "bold",
-      marginBottom: 20,
-      textAlign: "center",
-    },
-    input: {
-      height: 50,
-      borderWidth: 2,
-      borderRadius: 8,
-      paddingHorizontal: 15,
-      fontSize: 16,
-      marginBottom: 24,
-      backgroundColor: colorScheme === "dark" ? "#3a3a3c" : "#f0f0f0",
-      color: colorScheme === "dark" ? "white" : "black",
-      borderColor: "transparent",
-    },
-    inputFocused: {
-      borderColor: "#007AFF",
-      shadowColor: "#007AFF",
-      shadowOffset: { width: 0, height: 0 },
-      shadowOpacity: 0.8,
-      shadowRadius: 10,
-      elevation: 5,
-    },
-    buttonContainer: {
-      flexDirection: "row",
-      justifyContent: "space-around",
-    },
-    button: {
-      flex: 1,
-      marginHorizontal: 8,
-    },
-    buttonText: {
-      fontSize: 18,
-    },
-  });
-
-  return (
-    <Modal animationType="fade" transparent={true} visible={isModalVisible} onRequestClose={hideModal}>
-      <View style={styles.modalContainer}>
-        <ThemedView style={styles.modalContent}>
-          <ThemedText style={styles.title}>设置</ThemedText>
-          <TextInput
-            ref={inputRef}
-            style={[styles.input, isInputFocused && styles.inputFocused]}
-            value={apiBaseUrl}
-            onChangeText={setApiBaseUrl}
-            placeholder="输入 API 地址"
-            placeholderTextColor={colorScheme === "dark" ? "#888" : "#555"}
-            autoCapitalize="none"
-            autoCorrect={false}
-            onFocus={() => setIsInputFocused(true)}
-            onBlur={() => setIsInputFocused(false)}
-          />
-          <View style={styles.buttonContainer}>
-            <StyledButton
-              text="取消"
-              onPress={hideModal}
-              style={styles.button}
-              textStyle={styles.buttonText}
-              variant="default"
-            />
-            <StyledButton
-              text="保存"
-              onPress={handleSave}
-              style={styles.button}
-              textStyle={styles.buttonText}
-              variant="primary"
-            />
-          </View>
-        </ThemedView>
-      </View>
-    </Modal>
-  );
-};

components/StyledButton.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Animated, Pressable, StyleSheet, StyleProp, ViewStyle, PressableProps, TextStyle } from "react-native";
 import { ThemedText } from "./ThemedText";
 import { Colors } from "@/constants/Colors";
-import { useButtonAnimation } from "@/hooks/useButtonAnimation";
+import { useButtonAnimation } from "@/hooks/useAnimation";
 
 interface StyledButtonProps extends PressableProps {
   children?: React.ReactNode;

components/settings/APIConfigSection.tsx

@@ -0,0 +1,136 @@
+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 {
+  onChanged: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+}
+
+export interface APIConfigSectionRef {
+  setInputValue: (value: string) => void;
+}
+
+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 handleUrlChange = (url: string) => {
+      setApiBaseUrl(url);
+      onChanged();
+    };
+
+    useImperativeHandle(ref, () => ({
+      setInputValue: (value: string) => {
+        setApiBaseUrl(value);
+        onChanged();
+      },
+    }));
+
+    const handleSectionFocus = () => {
+      setIsSectionFocused(true);
+      onFocus?.();
+    };
+
+    const handleSectionBlur = () => {
+      setIsSectionFocused(false);
+      onBlur?.();
+    };
+
+    // 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",
+    marginRight: 12,
+  },
+  subtitle: {
+    fontSize: 12,
+    color: "#888",
+    fontStyle: "italic",
+  },
+  inputContainer: {
+    marginBottom: 12,
+  },
+  label: {
+    fontSize: 16,
+    marginBottom: 8,
+    color: "#ccc",
+  },
+  input: {
+    height: 50,
+    borderWidth: 2,
+    borderRadius: 8,
+    paddingHorizontal: 15,
+    fontSize: 16,
+    backgroundColor: "#3a3a3c",
+    color: "white",
+    borderColor: "transparent",
+  },
+  inputFocused: {
+    borderColor: "#007AFF",
+    shadowColor: "#007AFF",
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.8,
+    shadowRadius: 10,
+    elevation: 5,
+  },
+});

components/settings/LiveStreamSection.tsx

@@ -0,0 +1,130 @@
+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;
+  onFocus?: () => void;
+  onBlur?: () => void;
+}
+
+export interface LiveStreamSectionRef {
+  setInputValue: (value: string) => void;
+}
+
+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 handleUrlChange = (url: string) => {
+      setM3uUrl(url);
+      onChanged();
+    };
+
+    useImperativeHandle(ref, () => ({
+      setInputValue: (value: string) => {
+        setM3uUrl(value);
+        onChanged();
+      },
+    }));
+
+    const handleSectionFocus = () => {
+      setIsSectionFocused(true);
+      onFocus?.();
+    };
+
+    const handleSectionBlur = () => {
+      setIsSectionFocused(false);
+      onBlur?.();
+    };
+
+    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",
+    marginRight: 12,
+  },
+  subtitle: {
+    fontSize: 12,
+    color: "#888",
+    fontStyle: "italic",
+  },
+  inputContainer: {
+    marginBottom: 12,
+  },
+  input: {
+    height: 50,
+    borderWidth: 2,
+    borderRadius: 8,
+    paddingHorizontal: 15,
+    fontSize: 16,
+    backgroundColor: "#3a3a3c",
+    color: "white",
+    borderColor: "transparent",
+  },
+  inputFocused: {
+    borderColor: "#007AFF",
+    shadowColor: "#007AFF",
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.8,
+    shadowRadius: 10,
+    elevation: 5,
+  },
+});

components/settings/RemoteInputSection.tsx

@@ -0,0 +1,143 @@
+import React, { useCallback } from "react";
+import { View, Switch, StyleSheet, Pressable, 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 RemoteInputSectionProps {
+  onChanged: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+}
+
+export const RemoteInputSection: React.FC<RemoteInputSectionProps> = ({ onChanged, onFocus, onBlur }) => {
+  const { remoteInputEnabled, setRemoteInputEnabled } = useSettingsStore();
+  const { isServerRunning, serverUrl, error } = useRemoteControlStore();
+  const [isFocused, setIsFocused] = React.useState(false);
+  const animationStyle = useButtonAnimation(isFocused, 1.2);
+
+  const handleToggle = useCallback(
+    (enabled: boolean) => {
+      setRemoteInputEnabled(enabled);
+      onChanged();
+    },
+    [setRemoteInputEnabled, onChanged]
+  );
+
+  const handleSectionFocus = () => {
+    setIsFocused(true);
+    onFocus?.();
+  };
+
+  const handleSectionBlur = () => {
+    setIsFocused(false);
+    onBlur?.();
+  };
+
+  // TV遥控器事件处理
+  const handleTVEvent = React.useCallback(
+    (event: any) => {
+      if (isFocused && event.eventType === "select") {
+        handleToggle(!remoteInputEnabled);
+      }
+    },
+    [isFocused, remoteInputEnabled, handleToggle]
+  );
+
+  useTVEventHandler(handleTVEvent);
+
+  return (
+    <SettingsSection focusable onFocus={handleSectionFocus} onBlur={handleSectionBlur}>
+      <Pressable style={styles.settingItem} onFocus={handleSectionFocus} onBlur={handleSectionBlur}>
+        <View style={styles.settingInfo}>
+          <ThemedText style={styles.settingName}>启用远程输入</ThemedText>
+        </View>
+        <Animated.View style={animationStyle}>
+          <Switch
+            value={remoteInputEnabled}
+            onValueChange={() => {}} // 禁用Switch的直接交互
+            trackColor={{ false: "#767577", true: "#007AFF" }}
+            thumbColor={remoteInputEnabled ? "#ffffff" : "#f4f3f4"}
+            pointerEvents="none"
+          />
+        </Animated.View>
+      </Pressable>
+
+      {remoteInputEnabled && (
+        <View style={styles.statusContainer}>
+          <View style={styles.statusItem}>
+            <ThemedText style={styles.statusLabel}>服务状态：</ThemedText>
+            <ThemedText style={[styles.statusValue, { color: isServerRunning ? "#00FF00" : "#FF6B6B" }]}>
+              {isServerRunning ? "运行中" : "已停止"}
+            </ThemedText>
+          </View>
+
+          {serverUrl && (
+            <View style={styles.statusItem}>
+              <ThemedText style={styles.statusLabel}>访问地址：</ThemedText>
+              <ThemedText style={styles.statusValue}>{serverUrl}</ThemedText>
+            </View>
+          )}
+
+          {error && (
+            <View style={styles.statusItem}>
+              <ThemedText style={styles.statusLabel}>错误：</ThemedText>
+              <ThemedText style={[styles.statusValue, { color: "#FF6B6B" }]}>{error}</ThemedText>
+            </View>
+          )}
+        </View>
+      )}
+    </SettingsSection>
+  );
+};
+
+const styles = StyleSheet.create({
+  settingItem: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingVertical: 12,
+  },
+  settingInfo: {
+    flex: 1,
+  },
+  settingName: {
+    fontSize: 16,
+    fontWeight: "bold",
+    marginBottom: 4,
+  },
+  settingDescription: {
+    fontSize: 14,
+    color: "#888",
+  },
+  statusContainer: {
+    marginTop: 16,
+    padding: 16,
+    backgroundColor: "#2a2a2c",
+    borderRadius: 8,
+  },
+  statusItem: {
+    flexDirection: "row",
+    marginBottom: 8,
+  },
+  statusLabel: {
+    fontSize: 14,
+    color: "#ccc",
+    minWidth: 80,
+  },
+  statusValue: {
+    fontSize: 14,
+    flex: 1,
+  },
+  actionButtons: {
+    flexDirection: "row",
+    gap: 12,
+    marginTop: 12,
+  },
+  actionButton: {
+    flex: 1,
+  },
+});

components/settings/SettingsSection.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import { StyleSheet, Pressable } from "react-native";
+import { ThemedView } from "@/components/ThemedView";
+
+interface SettingsSectionProps {
+  children: React.ReactNode;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  focusable?: boolean;
+}
+
+export const SettingsSection: React.FC<SettingsSectionProps> = ({ 
+  children, 
+  onFocus, 
+  onBlur, 
+  focusable = false 
+}) => {
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleFocus = () => {
+    setIsFocused(true);
+    onFocus?.();
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+    onBlur?.();
+  };
+
+  if (!focusable) {
+    return (
+      <ThemedView style={styles.section}>
+        {children}
+      </ThemedView>
+    );
+  }
+
+  return (
+    <ThemedView style={[styles.section, isFocused && styles.sectionFocused]}>
+      <Pressable
+        style={styles.sectionPressable}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+      >
+        {children}
+      </Pressable>
+    </ThemedView>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    padding: 20,
+    marginBottom: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: "#333",
+  },
+  sectionFocused: {
+    borderColor: "#007AFF",
+    backgroundColor: "#007AFF10",
+  },
+  sectionPressable: {
+    width: "100%",
+  },
+});

components/settings/VideoSourceSection.tsx

@@ -0,0 +1,213 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { StyleSheet, View, Switch, ActivityIndicator, FlatList, Pressable, Animated } from "react-native";
+import { useTVEventHandler } from "react-native";
+import { ThemedText } from "@/components/ThemedText";
+import { SettingsSection } from "./SettingsSection";
+import { api, ApiSite } from "@/services/api";
+import { useSettingsStore } from "@/stores/settingsStore";
+
+interface VideoSourceSectionProps {
+  onChanged: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+}
+
+export const VideoSourceSection: React.FC<VideoSourceSectionProps> = ({ onChanged, onFocus, onBlur }) => {
+  const [resources, setResources] = useState<ApiSite[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+  const [isSectionFocused, setIsSectionFocused] = useState(false);
+  const { videoSource, setVideoSource } = useSettingsStore();
+
+  useEffect(() => {
+    fetchResources();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const fetchResources = async () => {
+    try {
+      setLoading(true);
+      const resourcesList = await api.getResources();
+      setResources(resourcesList);
+
+      if (videoSource.enabledAll && Object.keys(videoSource.sources).length === 0) {
+        const allResourceKeys: { [key: string]: boolean } = {};
+        for (const resource of resourcesList) {
+          allResourceKeys[resource.key] = true;
+        }
+        setVideoSource({
+          enabledAll: true,
+          sources: allResourceKeys,
+        });
+      }
+    } catch (err) {
+      setError("获取播放源失败");
+      console.error("Failed to fetch resources:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const toggleResourceEnabled = useCallback(
+    (resourceKey: string) => {
+      const isEnabled = videoSource.sources[resourceKey];
+
+      const newEnabledSources = { ...videoSource.sources, [resourceKey]: !isEnabled };
+
+      setVideoSource({
+        enabledAll: Object.values(newEnabledSources).every((enabled) => enabled),
+        sources: newEnabledSources,
+      });
+
+      onChanged();
+    },
+    [videoSource.sources, setVideoSource, onChanged]
+  );
+
+  const handleSectionFocus = () => {
+    setIsSectionFocused(true);
+    onFocus?.();
+  };
+
+  const handleSectionBlur = () => {
+    setIsSectionFocused(false);
+    setFocusedIndex(null);
+    onBlur?.();
+  };
+
+  // TV遥控器事件处理
+  const handleTVEvent = useCallback(
+    (event: any) => {
+      if (event.eventType === "select") {
+        if (focusedIndex !== null) {
+          const resource = resources[focusedIndex];
+          if (resource) {
+            toggleResourceEnabled(resource.key);
+          }
+        } else if (isSectionFocused) {
+          setFocusedIndex(0);
+        }
+      }
+    },
+    [isSectionFocused, focusedIndex, resources, toggleResourceEnabled]
+  );
+
+  useTVEventHandler(handleTVEvent);
+
+  const renderResourceItem = ({ item, index }: { item: ApiSite; index: number }) => {
+    const isEnabled = videoSource.enabledAll || videoSource.sources[item.key];
+    const isFocused = focusedIndex === index;
+
+    return (
+      <Animated.View style={[styles.resourceItem]}>
+        <Pressable
+          hasTVPreferredFocus={isFocused}
+          style={[styles.resourcePressable, isFocused && styles.resourceFocused]}
+          onFocus={() => setFocusedIndex(index)}
+          onBlur={() => setFocusedIndex(null)}
+        >
+          <ThemedText style={styles.resourceName}>{item.name}</ThemedText>
+          <Switch
+            value={isEnabled}
+            onValueChange={() => {}} // 禁用Switch的直接交互
+            trackColor={{ false: "#767577", true: "#007AFF" }}
+            thumbColor={isEnabled ? "#ffffff" : "#f4f3f4"}
+            pointerEvents="none"
+          />
+        </Pressable>
+      </Animated.View>
+    );
+  };
+
+  return (
+    <SettingsSection focusable onFocus={handleSectionFocus} onBlur={handleSectionBlur}>
+      <ThemedText style={styles.sectionTitle}>播放源配置</ThemedText>
+
+      {loading && (
+        <View style={styles.loadingContainer}>
+          <ActivityIndicator size="small" />
+          <ThemedText style={styles.loadingText}>加载中...</ThemedText>
+        </View>
+      )}
+
+      {error && <ThemedText style={styles.errorText}>{error}</ThemedText>}
+
+      {!loading && !error && resources.length > 0 && (
+        <FlatList
+          data={resources}
+          renderItem={renderResourceItem}
+          keyExtractor={(item) => item.key}
+          numColumns={3}
+          columnWrapperStyle={styles.row}
+          contentContainerStyle={styles.flatListContainer}
+          scrollEnabled={false}
+        />
+      )}
+    </SettingsSection>
+  );
+};
+
+const styles = StyleSheet.create({
+  sectionTitle: {
+    fontSize: 20,
+    fontWeight: "bold",
+    marginBottom: 16,
+  },
+  loadingContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 16,
+  },
+  loadingText: {
+    marginLeft: 8,
+    color: "#888",
+  },
+  errorText: {
+    color: "#ff4444",
+    fontSize: 14,
+    textAlign: "center",
+    padding: 16,
+  },
+  flatListContainer: {
+    gap: 12,
+  },
+  row: {
+    justifyContent: "flex-start",
+  },
+  resourceItem: {
+    width: "32%",
+    marginHorizontal: 6,
+    marginVertical: 6,
+    borderRadius: 8,
+    overflow: "hidden",
+    justifyContent: "flex-start",
+  },
+  resourcePressable: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    backgroundColor: "#2a2a2a",
+    borderRadius: 8,
+    minHeight: 56,
+  },
+  resourceFocused: {
+    backgroundColor: "#3a3a3c",
+    borderWidth: 2,
+    borderColor: "#007AFF",
+    shadowColor: "#007AFF",
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.8,
+    shadowRadius: 10,
+    elevation: 5,
+  },
+  resourceName: {
+    fontSize: 14,
+    fontWeight: "600",
+    flex: 1,
+    marginRight: 8,
+  },
+});

docs/HTTP_SERVER_IMPLEMENTATION.md

@@ -0,0 +1,305 @@
+# OrionTV Native HTTP Server Implementation Documentation
+
+## Overview
+
+OrionTV implements a sophisticated native HTTP server solution that enables remote control functionality for the TV application. This implementation uses TCP sockets to create a custom HTTP server directly within the React Native application, providing a web-based remote control interface accessible from mobile devices.
+
+## Architecture
+
+### Core Components
+
+#### 1. TCPHttpServer (`/services/tcpHttpServer.ts`)
+
+A custom HTTP server implementation built on top of `react-native-tcp-socket` that handles raw TCP connections and implements HTTP protocol parsing and response formatting.
+
+**Key Features:**
+- Custom HTTP request/response parsing
+- Fixed port configuration (12346)
+- Automatic IP address detection via `@react-native-community/netinfo`
+- Support for GET and POST methods
+- Error handling and connection management
+
+**Class Structure:**
+```typescript
+class TCPHttpServer {
+  private server: TcpSocket.Server | null = null;
+  private isRunning = boolean;
+  private requestHandler: RequestHandler | null = null;
+}
+```
+
+**Core Methods:**
+- `start()`: Initializes server and binds to `0.0.0.0:12346`
+- `stop()`: Gracefully shuts down the server
+- `setRequestHandler()`: Sets the request handling logic
+- `parseHttpRequest()`: Parses raw HTTP request data
+- `formatHttpResponse()`: Formats HTTP responses
+
+#### 2. RemoteControlService (`/services/remoteControlService.ts`)
+
+A service layer that wraps the TCPHttpServer and provides the remote control functionality with predefined routes and HTML interface.
+
+**API Endpoints:**
+- `GET /` - Serves HTML remote control interface
+- `POST /message` - Receives messages from mobile devices
+- `POST /handshake` - Connection handshake for mobile clients
+
+**Features:**
+- Built-in HTML interface generation
+- JSON message parsing
+- Callback-based event handling
+- Error handling and validation
+
+#### 3. RemoteControlStore (`/stores/remoteControlStore.ts`)
+
+Zustand store that manages the remote control server state and provides React component integration.
+
+**State Management:**
+```typescript
+interface RemoteControlState {
+  isServerRunning: boolean;
+  serverUrl: string | null;
+  error: string | null;
+  isModalVisible: boolean;
+  lastMessage: string | null;
+  startServer: () => Promise<void>;
+  stopServer: () => void;
+  showModal: () => void;
+  hideModal: () => void;
+  setMessage: (message: string) => void;
+}
+```
+
+## Technical Implementation Details
+
+### HTTP Protocol Implementation
+
+#### Request Parsing
+The server implements custom HTTP request parsing that handles:
+- HTTP method and URL extraction
+- Header parsing with case-insensitive keys
+- Body content extraction
+- Malformed request detection
+
+#### Response Formatting
+Responses are formatted according to HTTP/1.1 specification:
+- Status line with appropriate status codes (200, 400, 404, 500)
+- Content-Length header calculation
+- Connection: close header for stateless operation
+- Proper CRLF line endings
+
+### Network Configuration
+
+#### IP Address Detection
+The server automatically detects the device's IP address using `@react-native-community/netinfo`:
+- Supports WiFi and Ethernet connections
+- Validates network connectivity before starting
+- Provides clear error messages for network issues
+
+#### Server Binding
+- Binds to `0.0.0.0:12346` for universal access
+- Fixed port configuration for consistency
+- Supports all network interfaces on the device
+
+### Security Considerations
+
+#### Current Implementation
+- No authentication mechanism
+- Open access on local network
+- Basic request validation
+- Error handling prevents information disclosure
+
+#### Limitations
+- Suitable only for local network use
+- No HTTPS/TLS encryption
+- No rate limiting or DDoS protection
+- Assumes trusted network environment
+
+## Web Interface
+
+### HTML Template
+The service provides a responsive web interface optimized for mobile devices:
+- Dark theme design matching TV app aesthetics
+- Touch-friendly controls with large buttons
+- Real-time message sending capability
+- Automatic handshake on page load
+
+### JavaScript Functionality
+- Automatic handshake POST request on page load
+- Message submission via JSON POST requests
+- Input field clearing after submission
+- Error handling for network issues
+
+## Integration with React Native App
+
+### App Initialization
+The server is automatically started when the app launches (`/app/_layout.tsx`):
+```typescript
+useEffect(() => {
+  const { setMessage, hideModal } = useRemoteControlStore.getState();
+  remoteControlService.init({
+    onMessage: setMessage,
+    onHandshake: hideModal,
+  });
+  useRemoteControlStore.getState().startServer();
+  
+  return () => {
+    useRemoteControlStore.getState().stopServer();
+  };
+}, []);
+```
+
+### Message Handling
+Messages received from mobile devices are processed and displayed as Toast notifications in the TV app, providing visual feedback for remote interactions.
+
+### QR Code Integration
+The app generates QR codes containing the server URL (`http://{device_ip}:12346`) for easy mobile device connection via `RemoteControlModal.tsx`.
+
+## Dependencies
+
+### Required Packages
+- `react-native-tcp-socket@^6.0.6` - TCP socket implementation
+- `@react-native-community/netinfo@^11.3.2` - Network interface information
+- `react-native-qrcode-svg@^6.3.1` - QR code generation for UI
+
+### Platform Compatibility
+- iOS (Apple TV)
+- Android (Android TV)
+- Requires network connectivity (WiFi or Ethernet)
+
+## Performance Characteristics
+
+### Connection Handling
+- Single-threaded event-driven architecture
+- Stateless HTTP connections with immediate closure
+- Memory-efficient request buffering
+- Graceful error recovery
+
+### Resource Usage
+- Minimal CPU overhead for HTTP parsing
+- Low memory footprint
+- Network I/O bound operations
+- Automatic connection cleanup
+
+## Error Handling
+
+### Server Level
+- Network binding failures with descriptive messages
+- Socket error handling and logging
+- Graceful server shutdown procedures
+- IP address detection error handling
+
+### Request Level
+- Malformed HTTP request detection
+- JSON parsing error handling
+- 400/404/500 status code responses
+- Request timeout and connection cleanup
+
+## Debugging and Monitoring
+
+### Logging
+Comprehensive logging throughout the system:
+- Server startup/shutdown events
+- Client connection/disconnection
+- Request processing details
+- Error conditions and stack traces
+
+### Console Output Format
+```
+[TCPHttpServer] Server listening on 192.168.1.100:12346
+[RemoteControl] Received request: POST /message
+[RemoteControlStore] Server started, URL: http://192.168.1.100:12346
+```
+
+## Usage Example
+
+### Starting the Server
+```typescript
+// Automatic startup via store
+const { startServer } = useRemoteControlStore();
+await startServer();
+
+// Manual service usage
+await remoteControlService.startServer();
+```
+
+### Stopping the Server
+```typescript
+// Via store
+const { stopServer } = useRemoteControlStore();
+stopServer();
+
+// Direct service call
+remoteControlService.stopServer();
+```
+
+### Mobile Device Access
+1. Ensure mobile device is on the same network as TV
+2. Scan QR code displayed in TV app
+3. Access web interface at `http://{tv_ip}:12346`
+4. Send messages that appear as notifications on TV
+
+## Comparison with Alternatives
+
+### vs react-native-http-bridge
+- **Advantages**: More control over HTTP implementation, custom error handling
+- **Disadvantages**: More complex implementation, requires manual HTTP parsing
+
+### vs External Backend Server
+- **Advantages**: No additional infrastructure, embedded in app
+- **Disadvantages**: Limited scalability, single device constraint
+
+## Future Enhancement Opportunities
+
+### Security
+- Authentication token implementation
+- HTTPS/TLS encryption support
+- Request rate limiting
+- CORS configuration
+
+### Functionality
+- Multi-device support
+- WebSocket integration for real-time communication
+- File upload/download capabilities
+- Advanced remote control commands
+
+### Performance
+- Connection pooling
+- Request caching
+- Compression support
+- IPv6 compatibility
+
+## Troubleshooting
+
+### Common Issues
+
+#### "Unable to get IP address" Error
+- Verify WiFi/Ethernet connection
+- Check network interface availability
+- Restart network services
+
+#### Server Won't Start
+- Check if port 12346 is already in use
+- Verify network permissions
+- Restart the application
+
+#### Mobile Device Can't Connect
+- Confirm both devices on same network
+- Verify firewall settings
+- Check IP address in QR code
+
+### Diagnostic Commands
+```bash
+# Check network connectivity
+yarn react-native log-ios  # View iOS logs
+yarn react-native log-android  # View Android logs
+
+# Network debugging
+netstat -an | grep 12346  # Check port binding (debugging environment)
+```
+
+## Conclusion
+
+The OrionTV native HTTP server implementation provides a robust, embedded solution for remote control functionality without requiring external infrastructure. The custom TCP-based approach offers flexibility and control while maintaining simplicity and performance suitable for TV applications.
+
+The implementation demonstrates sophisticated understanding of HTTP protocol handling, React Native integration, and TV-specific user experience requirements, making it an effective solution for cross-device interaction in smart TV environments.

docs/REMOTE_CONTROL_FEATURE.md

@@ -0,0 +1,136 @@
+# 手机遥控功能实现方案 (V2)
+
+本文档详细描述了在 OrionTV 应用中集成一个基于 **HTTP 请求** 的手机遥控功能的完整方案。
+
+---
+
+## 1. 核心功能与流程
+
+该功能允许用户通过手机浏览器向 TV 端发送文本消息，TV 端接收后以 Toast 形式进行展示。服务将在应用启动时自动开启，用户可在设置中找到入口以显示连接二维码。
+
+### 流程图
+
+```mermaid
+sequenceDiagram
+    participant App as App 启动
+    participant RemoteControlStore as 状态管理 (TV)
+    participant RemoteControlService as 遥控服务 (TV)
+    participant User as 用户
+    participant SettingsUI as 设置界面 (TV)
+    participant PhoneBrowser as 手机浏览器
+
+    App->>RemoteControlStore: App 启动, 触发 startHttpServer()
+    RemoteControlStore->>RemoteControlService: 启动 HTTP 服务
+    RemoteControlService-->>RemoteControlStore: 更新服务状态 (IP, Port)
+
+    User->>SettingsUI: 打开设置, 点击“手机遥控”按钮
+    SettingsUI->>RemoteControlStore: 获取服务 URL
+    RemoteControlStore-->>SettingsUI: 返回 serverUrl
+    SettingsUI-->>User: 显示二维码弹窗
+
+    User->>PhoneBrowser: 扫描二维码
+    PhoneBrowser->>RemoteControlService: (HTTP GET) 请求网页
+    RemoteControlService-->>PhoneBrowser: 返回 HTML 页面
+    User->>PhoneBrowser: 输入文本并发送
+    PhoneBrowser->>RemoteControlService: (HTTP POST /message) 发送消息
+    RemoteControlService->>RemoteControlStore: 处理消息 (显示 Toast)
+```
+
+---
+
+## 2. 技术选型
+
+*   **HTTP 服务**: `react-native-http-bridge`
+*   **二维码生成**: `react-native-qrcode-svg`
+*   **网络信息 (IP 地址)**: `@react-native-community/netinfo`
+*   **状态管理**: `zustand` (项目已集成)
+
+---
+
+## 3. 项目结构变更
+
+### 新增文件
+
+*   `services/remoteControlService.ts`: 封装 HTTP 服务的核心逻辑。
+*   `stores/remoteControlStore.ts`: 使用 Zustand 管理远程控制服务的状态。
+*   `components/RemoteControlModal.tsx`: 显示二维码和连接信息的弹窗组件。
+*   `types/react-native-http-bridge.d.ts`: `react-native-http-bridge` 的 TypeScript 类型定义。
+
+### 修改文件
+
+*   `app/_layout.tsx`: 在应用根组件中调用服务启动逻辑。
+*   `components/SettingsModal.tsx`: 添加“手机遥控”按钮，用于触发二维码弹窗。
+*   `package.json`: 添加新依赖。
+
+---
+
+## 4. 实现细节
+
+### a. 状态管理 (`stores/remoteControlStore.ts`)
+
+创建一个 Zustand store 来管理遥控服务的状态。
+
+*   **State**:
+    *   `isServerRunning`: `boolean` - 服务是否正在运行。
+    *   `serverUrl`: `string | null` - 完整的 HTTP 服务 URL (e.g., `http://192.168.1.5:12346`)。
+    *   `error`: `string | null` - 错误信息。
+*   **Actions**:
+    *   `startServer()`: 异步 action，调用 `remoteControlService.startServer` 并更新 state。
+    *   `stopServer()`: 调用 `remoteControlService.stopServer` 并更新 state。
+
+### b. 服务层 (`services/remoteControlService.ts`)
+
+实现服务的启动、停止和消息处理。
+
+*   **`startServer()`**:
+    1.  使用 `@react-native-community/netinfo` 获取 IP 地址。
+    2.  定义一个包含 `fetch` API 调用逻辑的 HTML 字符串。
+    3.  使用 `react-native-http-bridge` 在固定端口（如 `12346`）启动 HTTP 服务。
+    4.  配置 `GET /` 路由以返回 HTML 页面。
+    5.  配置 `POST /message` 路由来接收手机端发送的消息，并使用 `Toast` 显示。
+    6.  返回服务器 URL。
+*   **`stopServer()`**:
+    1.  调用 `httpBridge.stop()`。
+
+### c. UI 集成
+
+*   **`app/_layout.tsx`**:
+    *   在根组件 `useEffect` 中调用 `useRemoteControlStore.getState().startServer()`，实现服务自启。
+*   **`components/SettingsModal.tsx`**:
+    *   添加一个 `<StyledButton text="手机遥控" />`。
+    *   点击按钮时，触发 `RemoteControlModal` 的显示。
+*   **`components/RemoteControlModal.tsx`**:
+    *   从 `remoteControlStore` 中获取 `serverUrl`。
+    *   如果 `serverUrl` 存在，则使用 `react-native-qrcode-svg` 的 `<QRCode />` 组件显示二维码。
+    *   如果不存在，则显示加载中或错误信息。
+
+### d. 网页内容 (HTML)
+
+一个简单的 HTML 页面，包含一个输入框和一个按钮。
+
+```html
+<html>
+  <head>
+    <title>OrionTV Remote</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style> /* ... some basic styles ... */ </style>
+  </head>
+  <body>
+    <h3>发送消息到 TV</h3>
+    <input id="text" />
+    <button onclick="send()">发送</button>
+    <script>
+      function send() {
+        const val = document.getElementById("text").value;
+        if (val) {
+          fetch("/message", {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ message: val })
+          });
+          document.getElementById("text").value = '';
+        }
+      }
+    </script>
+  </body>
+</html>

docs/SETTINGS_REFACTOR_PLAN.md

@@ -0,0 +1,131 @@
+# 设置页面重构方案
+
+## 目标
+1. 将设置从弹窗模式改为独立页面
+2. 新增直播源配置功能
+3. 新增远程输入开关配置
+4. 新增播放源启用配置
+
+## 现有架构分析
+
+### 当前设置相关文件：
+- `stores/settingsStore.ts` - 设置状态管理，目前只有API地址配置
+- `components/SettingsModal.tsx` - 设置弹窗组件
+- `stores/remoteControlStore.ts` - 远程控制状态管理
+
+### 现有功能：
+- API基础地址配置
+- 远程控制服务器（但未集成到设置中）
+
+## 重构方案
+
+### 1. 创建独立设置页面
+- 新建 `app/settings.tsx` 页面
+- 使用 Expo Router 的文件路由系统
+- 删除现有的 `SettingsModal.tsx` 组件
+
+### 2. 扩展设置Store
+在 `settingsStore.ts` 中新增以下配置项：
+```typescript
+interface SettingsState {
+  // 现有配置
+  apiBaseUrl: string;
+  
+  // 新增配置项
+  liveStreamSources: LiveStreamSource[];  // 直播源配置
+  remoteInputEnabled: boolean;            // 远程输入开关
+  videoSourceConfig: VideoSourceConfig; // 播放源配置
+}
+
+interface LiveStreamSource {
+  id: string;
+  name: string;
+  url: string;
+  enabled: boolean;
+}
+
+interface VideoSourceConfig {
+  primarySource: string;
+  fallbackSources: string[];
+  enabledSources: string[];
+}
+```
+
+### 3. 设置页面UI结构
+```
+设置页面 (app/settings.tsx)
+├── API 配置区域
+│   └── API 基础地址输入框
+├── 直播源配置区域
+│   ├── 直播源列表
+│   ├── 添加直播源按钮
+│   └── 编辑/删除直播源功能
+├── 远程输入配置区域
+│   └── 远程输入开关
+└── 播放源配置区域
+    ├── 主播放源选择
+    ├── 备用播放源配置
+    └── 启用的播放源选择
+```
+
+### 4. 组件设计
+- 使用 TV 适配的组件和样式
+- 实现焦点管理和遥控器导航
+- 遵循现有的设计规范（ThemedView, ThemedText, StyledButton）
+
+### 5. 导航集成
+- 在主页面添加设置入口
+- 使用 Expo Router 的 router.push('/settings') 进行导航
+
+## 实施步骤
+
+1. **扩展 settingsStore.ts**
+   - 添加新的状态接口
+   - 实现新配置项的增删改查方法
+   - 集成本地存储
+
+2. **创建设置页面**
+   - 新建 `app/settings.tsx`
+   - 实现基础页面结构和导航
+
+3. **实现配置组件**
+   - API 配置组件（复用现有逻辑）
+   - 直播源配置组件
+   - 远程输入开关组件
+   - 播放源配置组件
+
+4. **集成远程控制**
+   - 将远程控制功能集成到设置页面
+   - 统一管理所有设置项
+
+5. **更新导航**
+   - 在主页面添加设置入口
+   - 移除现有的设置弹窗触发逻辑
+
+6. **测试验证**
+   - 测试所有配置项的保存和加载
+   - 验证TV平台的交互体验
+   - 确保配置项生效
+
+## 技术考虑
+
+### TV平台适配
+- 使用 `useTVRemoteHandler` 处理遥控器事件
+- 实现合适的焦点管理
+- 确保所有交互元素可通过遥控器操作
+
+### 数据持久化
+- 使用现有的 `SettingsManager` 进行本地存储
+- 确保新配置项能正确保存和恢复
+
+### 向后兼容
+- 保持现有API配置功能不变
+- 为新配置项提供默认值
+- 处理旧版本设置数据的迁移
+
+## 预期收益
+
+1. **更好的用户体验**：独立页面提供更多空间展示配置选项
+2. **功能扩展性**：为未来添加更多配置项提供良好基础
+3. **代码组织**：将设置相关功能集中管理
+4. **TV平台适配**：更好的遥控器交互体验

hooks/useAnimation.ts

@@ -1,16 +1,16 @@
 import { useRef, useEffect } from 'react';
 import { Animated } from 'react-native';
 
-export const useButtonAnimation = (isFocused: boolean) => {
+export const useButtonAnimation = (isFocused: boolean, size: number = 1.1) => {
   const scaleValue = useRef(new Animated.Value(1)).current;
 
   useEffect(() => {
     Animated.spring(scaleValue, {
-      toValue: isFocused ? 1.1 : 1,
+      toValue: isFocused ? size : 1,
       friction: 5,
       useNativeDriver: true,
     }).start();
-  }, [ isFocused, scaleValue]);
+  }, [ isFocused, scaleValue, size]);
 
   return {
     transform: [{ scale: scaleValue }],

package.json

@@ -2,7 +2,7 @@
   "name": "OrionTV",
   "private": true,
   "main": "expo-router/entry",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "scripts": {
     "start": "EXPO_USE_METRO_WORKSPACE_ROOT=1 expo start",
     "start-tv": "EXPO_TV=1 EXPO_USE_METRO_WORKSPACE_ROOT=1 expo start",
@@ -28,6 +28,7 @@
   "dependencies": {
     "@expo/vector-icons": "^14.0.0",
     "@react-native-async-storage/async-storage": "^2.2.0",
+    "@react-native-community/netinfo": "^11.3.2",
     "@react-navigation/native": "^6.0.2",
     "expo": "~51.0.13",
     "expo-av": "~14.0.7",
@@ -46,10 +47,12 @@
     "react-native": "npm:react-native-tvos@~0.74.2-0",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-media-console": "*",
+    "react-native-qrcode-svg": "^6.3.1",
     "react-native-reanimated": "~3.10.1",
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "3.31.1",
     "react-native-svg": "^15.12.0",
+    "react-native-tcp-socket": "^6.0.6",
     "react-native-toast-message": "^2.3.3",
     "react-native-web": "~0.19.10",
     "zustand": "^5.0.6"
@@ -60,6 +63,8 @@
     "@types/jest": "^29.5.12",
     "@types/react": "~18.2.45",
     "@types/react-test-renderer": "^18.0.7",
+    "eslint": "^8.57.0",
+    "eslint-config-expo": "~7.1.2",
     "jest": "^29.2.1",
     "jest-expo": "~51.0.1",
     "react-test-renderer": "18.2.0",

services/m3u.ts

@@ -0,0 +1,70 @@
+import { api } from "./api";
+
+export interface Channel {
+  id: string;
+  name: string;
+  url: string;
+  logo: string;
+  group: string;
+}
+
+export const parseM3U = (m3uText: string): Channel[] => {
+  const parsedChannels: Channel[] = [];
+  const lines = m3uText.split('\n');
+  let currentChannelInfo: Partial<Channel> | null = null;
+
+  for (const line of lines) {
+    const trimmedLine = line.trim();
+    if (trimmedLine.startsWith('#EXTINF:')) {
+      currentChannelInfo = { id: '', name: '', url: '', logo: '', group: '' };
+      const commaIndex = trimmedLine.indexOf(',');
+      if (commaIndex !== -1) {
+        currentChannelInfo.name = trimmedLine.substring(commaIndex + 1).trim();
+        const attributesPart = trimmedLine.substring(8, commaIndex);
+        const logoMatch = attributesPart.match(/tvg-logo="([^"]*)"/i);
+        if (logoMatch && logoMatch[1]) currentChannelInfo.logo = logoMatch[1];
+        const groupMatch = attributesPart.match(/group-title="([^"]*)"/i);
+        if (groupMatch && groupMatch[1]) currentChannelInfo.group = groupMatch[1];
+      } else {
+        currentChannelInfo.name = trimmedLine.substring(8).trim();
+      }
+    } else if (currentChannelInfo && trimmedLine && !trimmedLine.startsWith('#') && trimmedLine.includes('://')) {
+      currentChannelInfo.url = trimmedLine;
+      currentChannelInfo.id = currentChannelInfo.url; // Use URL as ID
+      parsedChannels.push(currentChannelInfo as Channel);
+      currentChannelInfo = null;
+    }
+  }
+  return parsedChannels;
+};
+
+export const fetchAndParseM3u = async (m3uUrl: string): Promise<Channel[]> => {
+  try {
+    const response = await fetch(m3uUrl);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch M3U: ${response.statusText}`);
+    }
+    const m3uText = await response.text();
+    return parseM3U(m3uText);
+  } catch (error) {
+    console.error("Error fetching or parsing M3U:", error);
+    return []; // Return empty array on error
+  }
+};
+
+export const getPlayableUrl = (originalUrl: string | null): string | null => {
+  if (!originalUrl) {
+    return null;
+  }
+  // In React Native, we use the proxy for all http streams to avoid potential issues.
+  if (originalUrl.toLowerCase().startsWith('http://')) {
+    // Use the baseURL from the existing api instance.
+    if (!api.baseURL) {
+        console.warn("API base URL is not set. Cannot create proxy URL.")
+        return originalUrl; // Fallback to original URL
+    }
+    return `${api.baseURL}/proxy?url=${encodeURIComponent(originalUrl)}`;
+  }
+  // HTTPS streams can be played directly.
+  return originalUrl;
+};

services/remoteControlService.ts

@@ -0,0 +1,142 @@
+import TCPHttpServer from './tcpHttpServer';
+
+const getRemotePageHTML = () => {
+  return `
+  <!DOCTYPE html>
+  <html>
+  <head>
+    <title>OrionTV Remote</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <style>
+      body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #121212; color: white; }
+      h3 { color: #eee; }
+      #container { display: flex; flex-direction: column; align-items: center; width: 90%; max-width: 400px; }
+      #text { width: 100%; padding: 15px; font-size: 16px; border-radius: 8px; border: 1px solid #333; background-color: #2a2a2a; color: white; margin-bottom: 20px; box-sizing: border-box; }
+      button { width: 100%; padding: 15px; font-size: 18px; font-weight: bold; border: none; border-radius: 8px; background-color: #007AFF; color: white; cursor: pointer; }
+      button:active { background-color: #0056b3; }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <h3>向电视发送文本</h3>
+      <input id="text" placeholder="请输入..." />
+      <button onclick="send()">发送</button>
+    </div>
+    <script>
+      window.addEventListener('DOMContentLoaded', () => {
+        fetch('/handshake', { method: 'POST' }).catch(console.error);
+      });
+      function send() {
+        const input = document.getElementById("text");
+        const value = input.value;
+        if (value) {
+          fetch("/message", {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ message: value })
+          })
+          .catch(err => console.error(err));
+          input.value = '';
+        }
+      }
+    </script>
+  </body>
+  </html>
+  `;
+};
+
+class RemoteControlService {
+  private httpServer: TCPHttpServer;
+  private onMessage: (message: string) => void = () => {};
+  private onHandshake: () => void = () => {};
+
+  constructor() {
+    this.httpServer = new TCPHttpServer();
+    this.setupRequestHandler();
+  }
+
+  private setupRequestHandler() {
+    this.httpServer.setRequestHandler((request) => {
+      console.log('[RemoteControl] Received request:', request.method, request.url);
+      
+      try {
+        if (request.method === 'GET' && request.url === '/') {
+          return {
+            statusCode: 200,
+            headers: { 'Content-Type': 'text/html' },
+            body: getRemotePageHTML()
+          };
+        } else if (request.method === 'POST' && request.url === '/message') {
+          try {
+            const parsedBody = JSON.parse(request.body || '{}');
+            const message = parsedBody.message;
+            if (message) {
+              this.onMessage(message);
+            }
+            return {
+              statusCode: 200,
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ status: 'ok' })
+            };
+          } catch (parseError) {
+            console.error('[RemoteControl] Failed to parse message body:', parseError);
+            return {
+              statusCode: 400,
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ error: 'Invalid JSON' })
+            };
+          }
+        } else if (request.method === 'POST' && request.url === '/handshake') {
+          this.onHandshake();
+          return {
+            statusCode: 200,
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ status: 'ok' })
+          };
+        } else {
+          return {
+            statusCode: 404,
+            headers: { 'Content-Type': 'text/plain' },
+            body: 'Not Found'
+          };
+        }
+      } catch (error) {
+        console.error('[RemoteControl] Request handler error:', error);
+        return {
+          statusCode: 500,
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ error: 'Internal Server Error' })
+        };
+      }
+    });
+  }
+
+  public init(actions: { onMessage: (message: string) => void; onHandshake: () => void }) {
+    this.onMessage = actions.onMessage;
+    this.onHandshake = actions.onHandshake;
+  }
+
+  public async startServer(): Promise<string> {
+    console.log('[RemoteControl] Attempting to start server...');
+    
+    try {
+      const url = await this.httpServer.start();
+      console.log(`[RemoteControl] Server started successfully at: ${url}`);
+      return url;
+    } catch (error) {
+      console.error('[RemoteControl] Failed to start server:', error);
+      throw new Error(error instanceof Error ? error.message : 'Failed to start server');
+    }
+  }
+
+  public stopServer() {
+    console.log('[RemoteControl] Stopping server...');
+    this.httpServer.stop();
+  }
+
+  public isRunning(): boolean {
+    return this.httpServer.getIsRunning();
+  }
+}
+
+export const remoteControlService = new RemoteControlService();

services/storage.ts

@@ -25,10 +25,15 @@ export interface FavoriteItem {
 }
 
 export interface AppSettings {
-  theme: "light" | "dark" | "auto";
-  autoPlay: boolean;
-  playbackSpeed: number;
   apiBaseUrl: string;
+  remoteInputEnabled: boolean;
+  videoSource: {
+    enabledAll: boolean;
+    sources: {
+      [key: string]: boolean;
+    };
+  },
+  m3uUrl: string;
 }
 
 // --- Helper ---
@@ -178,10 +183,13 @@ export class SearchHistoryManager {
 export class SettingsManager {
   static async get(): Promise<AppSettings> {
     const defaultSettings: AppSettings = {
-      theme: "auto",
-      autoPlay: true,
-      playbackSpeed: 1.0,
       apiBaseUrl: "",
+      remoteInputEnabled: true,
+      videoSource: {
+        enabledAll: true,
+        sources: {},
+      },
+      m3uUrl: "https://ghfast.top/https://raw.githubusercontent.com/sjnhnp/adblock/refs/heads/main/filtered_http_only_valid.m3u",
     };
     try {
       const data = await AsyncStorage.getItem(STORAGE_KEYS.SETTINGS);

services/tcpHttpServer.ts

@@ -0,0 +1,199 @@
+import TcpSocket from 'react-native-tcp-socket';
+import NetInfo from '@react-native-community/netinfo';
+
+const PORT = 12346;
+
+interface HttpRequest {
+  method: string;
+  url: string;
+  headers: { [key: string]: string };
+  body: string;
+}
+
+interface HttpResponse {
+  statusCode: number;
+  headers: { [key: string]: string };
+  body: string;
+}
+
+type RequestHandler = (request: HttpRequest) => HttpResponse | Promise<HttpResponse>;
+
+class TCPHttpServer {
+  private server: TcpSocket.Server | null = null;
+  private isRunning = false;
+  private requestHandler: RequestHandler | null = null;
+
+  constructor() {
+    this.server = null;
+  }
+
+  private parseHttpRequest(data: string): HttpRequest | null {
+    try {
+      const lines = data.split('\r\n');
+      const requestLine = lines[0].split(' ');
+      
+      if (requestLine.length < 3) {
+        return null;
+      }
+
+      const method = requestLine[0];
+      const url = requestLine[1];
+      const headers: { [key: string]: string } = {};
+      
+      let bodyStartIndex = -1;
+      for (let i = 1; i < lines.length; i++) {
+        const line = lines[i];
+        if (line === '') {
+          bodyStartIndex = i + 1;
+          break;
+        }
+        const colonIndex = line.indexOf(':');
+        if (colonIndex > 0) {
+          const key = line.substring(0, colonIndex).trim().toLowerCase();
+          const value = line.substring(colonIndex + 1).trim();
+          headers[key] = value;
+        }
+      }
+
+      const body = bodyStartIndex > 0 ? lines.slice(bodyStartIndex).join('\r\n') : '';
+
+      return { method, url, headers, body };
+    } catch (error) {
+      console.error('[TCPHttpServer] Error parsing HTTP request:', error);
+      return null;
+    }
+  }
+
+  private formatHttpResponse(response: HttpResponse): string {
+    const statusTexts: { [key: number]: string } = {
+      200: 'OK',
+      400: 'Bad Request',
+      404: 'Not Found',
+      500: 'Internal Server Error'
+    };
+
+    const statusText = statusTexts[response.statusCode] || 'Unknown';
+    const headers = {
+      'Content-Length': new TextEncoder().encode(response.body).length.toString(),
+      'Connection': 'close',
+      ...response.headers
+    };
+
+    let httpResponse = `HTTP/1.1 ${response.statusCode} ${statusText}\r\n`;
+    
+    for (const [key, value] of Object.entries(headers)) {
+      httpResponse += `${key}: ${value}\r\n`;
+    }
+    
+    httpResponse += '\r\n';
+    httpResponse += response.body;
+
+    return httpResponse;
+  }
+
+  public setRequestHandler(handler: RequestHandler) {
+    this.requestHandler = handler;
+  }
+
+  public async start(): Promise<string> {
+    const netState = await NetInfo.fetch();
+    let ipAddress: string | null = null;
+    
+    if (netState.type === 'wifi' || netState.type === 'ethernet') {
+      ipAddress = (netState.details as any)?.ipAddress ?? null;
+    }
+
+    if (!ipAddress) {
+      throw new Error('无法获取IP地址，请确认设备已连接到WiFi或以太网。');
+    }
+
+    if (this.isRunning) {
+      console.log('[TCPHttpServer] Server is already running.');
+      return `http://${ipAddress}:${PORT}`;
+    }
+
+    return new Promise((resolve, reject) => {
+      try {
+        this.server = TcpSocket.createServer((socket: TcpSocket.Socket) => {
+          console.log('[TCPHttpServer] Client connected');
+          
+          let requestData = '';
+          
+          socket.on('data', async (data: string | Buffer) => {
+            requestData += data.toString();
+            
+            // Check if we have a complete HTTP request
+            if (requestData.includes('\r\n\r\n')) {
+              try {
+                const request = this.parseHttpRequest(requestData);
+                if (request && this.requestHandler) {
+                  const response = await this.requestHandler(request);
+                  const httpResponse = this.formatHttpResponse(response);
+                  socket.write(httpResponse);
+                } else {
+                  // Send 400 Bad Request for malformed requests
+                  const errorResponse = this.formatHttpResponse({
+                    statusCode: 400,
+                    headers: { 'Content-Type': 'text/plain' },
+                    body: 'Bad Request'
+                  });
+                  socket.write(errorResponse);
+                }
+              } catch (error) {
+                console.error('[TCPHttpServer] Error handling request:', error);
+                const errorResponse = this.formatHttpResponse({
+                  statusCode: 500,
+                  headers: { 'Content-Type': 'text/plain' },
+                  body: 'Internal Server Error'
+                });
+                socket.write(errorResponse);
+              }
+              
+              socket.end();
+              requestData = '';
+            }
+          });
+
+          socket.on('error', (error: Error) => {
+            console.error('[TCPHttpServer] Socket error:', error);
+          });
+
+          socket.on('close', () => {
+            console.log('[TCPHttpServer] Client disconnected');
+          });
+        });
+
+        this.server.listen({ port: PORT, host: '0.0.0.0' }, () => {
+          console.log(`[TCPHttpServer] Server listening on ${ipAddress}:${PORT}`);
+          this.isRunning = true;
+          resolve(`http://${ipAddress}:${PORT}`);
+        });
+
+        this.server.on('error', (error: Error) => {
+          console.error('[TCPHttpServer] Server error:', error);
+          this.isRunning = false;
+          reject(error);
+        });
+
+      } catch (error) {
+        console.error('[TCPHttpServer] Failed to start server:', error);
+        reject(error);
+      }
+    });
+  }
+
+  public stop() {
+    if (this.server && this.isRunning) {
+      this.server.close();
+      this.server = null;
+      this.isRunning = false;
+      console.log('[TCPHttpServer] Server stopped');
+    }
+  }
+
+  public getIsRunning(): boolean {
+    return this.isRunning;
+  }
+}
+
+export default TCPHttpServer;

stores/homeStore.ts

@@ -21,19 +21,16 @@ export interface Category {
   title: string;
   type?: 'movie' | 'tv' | 'record';
   tag?: string;
+  tags?: string[];
 }
 
 const initialCategories: Category[] = [
   { title: '最近播放', type: 'record' },
   { title: '热门剧集', type: 'tv', tag: '热门' },
+  { title: '电视剧', type: 'tv', tags: [ '国产剧', '美剧', '英剧', '韩剧', '日剧', '港剧', '日本动画', '动画'] },
+  { title: '电影', type: 'movie', tags: ['热门', '最新', '经典', '豆瓣高分', '冷门佳片', '华语', '欧美', '韩国', '日本', '动作', '喜剧', '爱情', '科幻', '悬疑', '恐怖'] },
   { title: '综艺', type: 'tv', tag: '综艺' },
-  { title: '热门电影', type: 'movie', tag: '热门' },
   { title: '豆瓣 Top250', type: 'movie', tag: 'top250' },
-  { title: '儿童', type: 'movie', tag: '少儿' },
-  { title: '美剧', type: 'tv', tag: '美剧' },
-  { title: '韩剧', type: 'tv', tag: '韩剧' },
-  { title: '日剧', type: 'tv', tag: '日剧' },
-  { title: '日漫', type: 'tv', tag: '日本动画' },
 ];
 
 interface HomeState {
@@ -102,6 +99,9 @@ const useHomeStore = create<HomeState>((set, get) => ({
             hasMore: true,
           }));
         }
+      } else if (selectedCategory.tags) {
+        // It's a container category, do not load content, but clear current content
+        set({ contentData: [], hasMore: false });
       } else {
         set({ hasMore: false });
       }
@@ -117,8 +117,12 @@ const useHomeStore = create<HomeState>((set, get) => ({
   },
 
   selectCategory: (category: Category) => {
-    set({ selectedCategory: category });
-    get().fetchInitialData();
+    const currentCategory = get().selectedCategory;
+    // Only fetch new data if the category or tag actually changes
+    if (currentCategory.title !== category.title || currentCategory.tag !== category.tag) {
+      set({ selectedCategory: category, contentData: [], pageStart: 0, hasMore: true, error: null });
+      get().fetchInitialData();
+    }
   },
 
   refreshPlayRecords: async () => {

stores/remoteControlStore.ts

@@ -0,0 +1,62 @@
+import { create } from 'zustand';
+import { remoteControlService } from '@/services/remoteControlService';
+
+interface RemoteControlState {
+  isServerRunning: boolean;
+  serverUrl: string | null;
+  error: string | null;
+  startServer: () => Promise<void>;
+  stopServer: () => void;
+  isModalVisible: boolean;
+  showModal: () => void;
+  hideModal: () => void;
+  lastMessage: string | null;
+  setMessage: (message: string) => void;
+}
+
+export const useRemoteControlStore = create<RemoteControlState>((set, get) => ({
+  isServerRunning: false,
+  serverUrl: null,
+  error: null,
+  isModalVisible: false,
+  lastMessage: null,
+
+  startServer: async () => {
+    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}`);
+      set({ isServerRunning: true, serverUrl: url, error: null });
+    } catch {
+      const errorMessage = '启动失败，请强制退应用后重试。';
+      console.error('[RemoteControlStore] Failed to start server:', errorMessage);
+      set({ error: errorMessage });
+    }
+  },
+
+  stopServer: () => {
+    if (get().isServerRunning) {
+      remoteControlService.stopServer();
+      set({ isServerRunning: false, serverUrl: null });
+    }
+  },
+
+  showModal: () => set({ isModalVisible: true }),
+  hideModal: () => set({ isModalVisible: false }),
+
+  setMessage: (message: string) => {
+    set({ lastMessage: `${message}_${Date.now()}` });
+  },
+}));

stores/settingsStore.ts

@@ -3,28 +3,63 @@ import { SettingsManager } from '@/services/storage';
 import { api } from '@/services/api';
 import useHomeStore from './homeStore';
 
+
 interface SettingsState {
   apiBaseUrl: string;
+  m3uUrl: string;
+  remoteInputEnabled: boolean;
+  videoSource: {
+    enabledAll: boolean;
+    sources: {
+      [key: string]: boolean;
+    };
+  };
   isModalVisible: boolean;
   loadSettings: () => Promise<void>;
   setApiBaseUrl: (url: string) => void;
+  setM3uUrl: (url: string) => void;
+  setRemoteInputEnabled: (enabled: boolean) => void;
   saveSettings: () => Promise<void>;
+  setVideoSource: (config: { enabledAll: boolean; sources: {[key: string]: boolean} }) => void;
   showModal: () => void;
   hideModal: () => void;
 }
 
 export const useSettingsStore = create<SettingsState>((set, get) => ({
-  apiBaseUrl: 'https://orion-tv.edu.deal',
+  apiBaseUrl: '',
+  m3uUrl: 'https://raw.githubusercontent.com/sjnhnp/adblock/refs/heads/main/filtered_http_only_valid.m3u',
+  liveStreamSources: [],
+  remoteInputEnabled: false,
   isModalVisible: false,
+  videoSource: {
+    enabledAll: true,
+    sources: {},
+  },
   loadSettings: async () => {
     const settings = await SettingsManager.get();
-    set({ apiBaseUrl: settings.apiBaseUrl });
+    set({ 
+      apiBaseUrl: settings.apiBaseUrl,
+      m3uUrl: settings.m3uUrl,
+      remoteInputEnabled: settings.remoteInputEnabled || false,
+      videoSource: settings.videoSource || {
+        enabledAll: true,
+        sources: {},
+      },
+    });
     api.setBaseUrl(settings.apiBaseUrl);
   },
   setApiBaseUrl: (url) => set({ apiBaseUrl: url }),
+  setM3uUrl: (url) => set({ m3uUrl: url }),
+  setRemoteInputEnabled: (enabled) => set({ remoteInputEnabled: enabled }),
+  setVideoSource: (config) => set({ videoSource: config }),
   saveSettings: async () => {
-    const { apiBaseUrl } = get();
-    await SettingsManager.save({ apiBaseUrl });
+    const { apiBaseUrl, m3uUrl, remoteInputEnabled, videoSource } = get();
+    await SettingsManager.save({ 
+      apiBaseUrl,
+      m3uUrl,
+      remoteInputEnabled,
+      videoSource,
+    });
     api.setBaseUrl(apiBaseUrl);
     set({ isModalVisible: false });
     useHomeStore.getState().fetchInitialData();