feat: Optimize availability checking of api addresses

fix: search input focus issue
feat: Update scroll experience
2026-02-09 08:24:42 +08:00 · 2025-07-25 16:32:15 +08:00 · 2025-07-25 16:00:11 +08:00 · 2025-07-25 15:39:23 +08:00 · 2025-07-25 14:15:18 +08:00 · 2025-07-25 13:58:26 +08:00
31 changed files with 561 additions and 435 deletions
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@

 ## ✨ 功能特性

- **跨平台支持**: 同时支持 Apple TV 和 Android TV。
+- **框架跨平台支持**: 同时支持构建 Apple TV 和 Android TV。
 - **现代化前端**: 使用 Expo、React Native TVOS 和 TypeScript 构建，性能卓越。
 - **Expo Router**: 基于文件系统的路由，使导航逻辑清晰简单。
 - **后端服务**: 配套 Express 后端，用于处理数据获取、搜索和详情展示。
@@ -52,10 +52,8 @@
 接下来，在项目根目录运行前端应用：

 ```sh
-# (如果还在 backend 目录) 返回根目录
-cd ..

-# 安装前端依赖
+# 安装依赖
 yarn

 # [首次运行或依赖更新后] 生成原生项目文件
@@ -73,7 +71,8 @@ yarn android-tv

 - 1.2.x 以上版本需配合 [MoonTV](https://github.com/senshinya/MoonTV) 部署使用，api 地址填部MoonTV署后的访问地址。

-  - **注意：** 地址后面不要带 `/` ,不要遗漏 `http://` 或者 `https://` 
+  - **注意：** 地址后面不要带 `/` ,不要遗漏 `http://` 或者 `https://`
+  - 如果部署在CF，请确保电视端可以访问，不然会出现无法登录或者登录项与自己配置不符的问题

 - 如果不想依赖 MoonTV，可以使用 1.1.x 版本。

--- a/app.json
+++ b/app.json
@@ -38,6 +38,7 @@
    "android": {
      "package": "com.oriontv",
      "usesCleartextTraffic": true,
+      "hardwareAcceleration": true,
      "networkSecurityConfig": "@xml/network_security_config",
      "icon": "./assets/images/icon.png",
      "permissions": [
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -63,7 +63,7 @@ export default function RootLayout() {
        <Stack.Screen name="search" options={{ headerShown: false }} />
        <Stack.Screen name="live" options={{ headerShown: false }} />
        <Stack.Screen name="settings" options={{ headerShown: false }} />
-        {/* <Stack.Screen name="favorites" options={{ headerShown: false }} /> */}
+        <Stack.Screen name="favorites" options={{ headerShown: false }} />
        <Stack.Screen name="+not-found" />
      </Stack>
      <Toast />
--- a/app/detail.tsx
+++ b/app/detail.tsx
@@ -77,17 +77,23 @@ export default function DetailScreen() {
        <View style={styles.topContainer}>
          <Image source={{ uri: detail.poster }} style={styles.poster} />
          <View style={styles.infoContainer}>
-            <ThemedText style={styles.title} numberOfLines={1}>
-              {detail.title}
-            </ThemedText>
+            <View style={styles.titleContainer}>
+              <ThemedText style={styles.title} numberOfLines={1} ellipsizeMode="tail">
+                {detail.title}
+              </ThemedText>
+              <StyledButton onPress={toggleFavorite} variant="ghost" style={styles.favoriteButton}>
+                <FontAwesome
+                  name={isFavorited ? "heart" : "heart-o"}
+                  size={24}
+                  color={isFavorited ? "#feff5f" : "#ccc"}
+                />
+              </StyledButton>
+            </View>
            <View style={styles.metaContainer}>
              <ThemedText style={styles.metaText}>{detail.year}</ThemedText>
              <ThemedText style={styles.metaText}>{detail.type_name}</ThemedText>
            </View>
-            {/* <Pressable onPress={toggleFavorite} style={styles.favoriteButton}>
-              <FontAwesome name={isFavorited ? "star" : "star-o"} size={24} color={isFavorited ? "#FFD700" : "#ccc"} />
-              <ThemedText style={styles.favoriteButtonText}>{isFavorited ? "已收藏" : "收藏"}</ThemedText>
-            </Pressable> */}
+
            <ScrollView style={styles.descriptionScrollView}>
              <ThemedText style={styles.description}>{detail.desc}</ThemedText>
            </ScrollView>
@@ -101,29 +107,32 @@ export default function DetailScreen() {
              {!allSourcesLoaded && <ActivityIndicator style={{ marginLeft: 10 }} />}
            </View>
            <View style={styles.sourceList}>
-              {searchResults.map((item, index) => (
-                <StyledButton
-                  key={index}
-                  onPress={() => setDetail(item)}
-                  hasTVPreferredFocus={index === 0}
-                  isSelected={detail?.source === item.source}
-                  style={styles.sourceButton}
-                >
-                  <ThemedText style={styles.sourceButtonText}>{item.source_name}</ThemedText>
-                  {item.episodes.length > 1 && (
-                    <View style={styles.badge}>
-                      <Text style={styles.badgeText}>
-                        {item.episodes.length > 99 ? "99+" : `${item.episodes.length}`} 集
-                      </Text>
-                    </View>
-                  )}
-                  {item.resolution && (
-                    <View style={[styles.badge, { backgroundColor: "#28a745" }]}>
-                      <Text style={styles.badgeText}>{item.resolution}</Text>
-                    </View>
-                  )}
-                </StyledButton>
-              ))}
+              {searchResults.map((item, index) => {
+                const isSelected = detail?.source === item.source;
+                return (
+                  <StyledButton
+                    key={index}
+                    onPress={() => setDetail(item)}
+                    hasTVPreferredFocus={index === 0}
+                    isSelected={isSelected}
+                    style={styles.sourceButton}
+                  >
+                    <ThemedText style={styles.sourceButtonText}>{item.source_name}</ThemedText>
+                    {item.episodes.length > 1 && (
+                      <View style={[styles.badge, isSelected && styles.selectedBadge]}>
+                        <Text style={styles.badgeText}>
+                          {item.episodes.length > 99 ? "99+" : `${item.episodes.length}`} 集
+                        </Text>
+                      </View>
+                    )}
+                    {item.resolution && (
+                      <View style={[styles.badge, { backgroundColor: "#666" }, isSelected && styles.selectedBadge]}>
+                        <Text style={styles.badgeText}>{item.resolution}</Text>
+                      </View>
+                    )}
+                  </StyledButton>
+                );
+              })}
            </View>
          </View>
          <View style={styles.episodesContainer}>
@@ -167,11 +176,15 @@ const styles = StyleSheet.create({
    marginLeft: 20,
    justifyContent: "flex-start",
  },
+  titleContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
  title: {
+    paddingTop: 16,
    fontSize: 28,
    fontWeight: "bold",
-    marginBottom: 10,
-    paddingTop: 20,
+    flexShrink: 1,
  },
  metaContainer: {
    flexDirection: "row",
@@ -191,13 +204,9 @@ const styles = StyleSheet.create({
    lineHeight: 22,
  },
  favoriteButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginTop: 10,
    padding: 10,
-    backgroundColor: "rgba(255, 255, 255, 0.1)",
-    borderRadius: 5,
-    alignSelf: "flex-start",
+    marginLeft: 10,
+    backgroundColor: "transparent",
  },
  favoriteButtonText: {
    marginLeft: 8,
@@ -230,16 +239,23 @@ const styles = StyleSheet.create({
    fontSize: 16,
  },
  badge: {
-    backgroundColor: "red",
+    backgroundColor: "#666",
    borderRadius: 10,
    paddingHorizontal: 6,
    paddingVertical: 2,
    marginLeft: 8,
  },
  badgeText: {
-    color: "white",
+    color: "#fff",
    fontSize: 12,
    fontWeight: "bold",
+    paddingBottom: 2.5,
+  },
+  selectedBadge: {
+    backgroundColor: "#4c4c4c",
+  },
+  selectedbadgeText: {
+    color: "#333",
  },
  episodesContainer: {
    marginTop: 20,
--- a/app/favorites.tsx
+++ b/app/favorites.tsx
@@ -1,74 +1,49 @@
 import React, { useEffect } from "react";
-import { View, FlatList, StyleSheet, ActivityIndicator, Image, Pressable } from "react-native";
-import { useRouter } from "expo-router";
+import { View, StyleSheet, ActivityIndicator } from "react-native";
 import { ThemedView } from "@/components/ThemedView";
 import { ThemedText } from "@/components/ThemedText";
 import useFavoritesStore from "@/stores/favoritesStore";
 import { Favorite } from "@/services/storage";
+import VideoCard from "@/components/VideoCard.tv";
+import { api } from "@/services/api";
+import CustomScrollView from "@/components/CustomScrollView";

 export default function FavoritesScreen() {
-  const router = useRouter();
  const { favorites, loading, error, fetchFavorites } = useFavoritesStore();

  useEffect(() => {
    fetchFavorites();
  }, [fetchFavorites]);

-  const handlePress = (favorite: Favorite & { key: string }) => {
-    const [source, id] = favorite.key.split("+");
-    router.push({
-      pathname: "/detail",
-      params: { q: favorite.title, source, id },
-    });
+  const renderItem = ({ item }: { item: Favorite & { key: string }; index: number }) => {
+    const [source, id] = item.key.split("+");
+    return (
+      <VideoCard
+        id={id}
+        source={source}
+        title={item.title}
+        sourceName={item.source_name}
+        poster={item.cover}
+        year={item.year}
+        api={api}
+        episodeIndex={1}
+        progress={0}
+      />
+    );
  };

-  if (loading) {
-    return (
-      <ThemedView style={styles.centered}>
-        <ActivityIndicator size="large" />
-      </ThemedView>
-    );
-  }
-
-  if (error) {
-    return (
-      <ThemedView style={styles.centered}>
-        <ThemedText type="subtitle">{error}</ThemedText>
-      </ThemedView>
-    );
-  }
-
-  if (favorites.length === 0) {
-    return (
-      <ThemedView style={styles.centered}>
-        <ThemedText type="subtitle">暂无收藏</ThemedText>
-      </ThemedView>
-    );
-  }
-
-  const renderItem = ({ item }: { item: Favorite & { key: string } }) => (
-    <Pressable onPress={() => handlePress(item)} style={styles.itemContainer}>
-      <Image source={{ uri: item.poster }} style={styles.poster} />
-      <View style={styles.infoContainer}>
-        <ThemedText style={styles.title} numberOfLines={1}>
-          {item.title}
-        </ThemedText>
-        <ThemedText style={styles.year}>{item.year}</ThemedText>
-      </View>
-    </Pressable>
-  );
-
  return (
    <ThemedView style={styles.container}>
      <View style={styles.headerContainer}>
        <ThemedText style={styles.headerTitle}>我的收藏</ThemedText>
      </View>
-      <FlatList
+      <CustomScrollView
        data={favorites}
        renderItem={renderItem}
-        keyExtractor={(item) => item.key}
-        numColumns={3}
-        contentContainerStyle={styles.list}
+        numColumns={5}
+        loading={loading}
+        error={error}
+        emptyMessage="暂无收藏"
      />
    </ThemedView>
  );
@@ -99,26 +74,4 @@ const styles = StyleSheet.create({
  list: {
    padding: 10,
  },
-  itemContainer: {
-    flex: 1,
-    margin: 10,
-    alignItems: "center",
-  },
-  poster: {
-    width: 120,
-    height: 180,
-    borderRadius: 8,
-  },
-  infoContainer: {
-    marginTop: 8,
-    alignItems: "center",
-  },
-  title: {
-    fontSize: 16,
-    fontWeight: "bold",
-  },
-  year: {
-    fontSize: 14,
-    color: "#888",
-  },
 });
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -9,15 +9,17 @@ import { Search, Settings, LogOut, Heart } from "lucide-react-native";
 import { StyledButton } from "@/components/StyledButton";
 import useHomeStore, { RowItem, Category } from "@/stores/homeStore";
 import useAuthStore from "@/stores/authStore";
+import CustomScrollView from "@/components/CustomScrollView";

 const NUM_COLUMNS = 5;
 const { width } = Dimensions.get("window");
-const ITEM_WIDTH = width / NUM_COLUMNS - 24;
+
+// Threshold for triggering load more data (in pixels)
+const LOAD_MORE_THRESHOLD = 200;

 export default function HomeScreen() {
  const router = useRouter();
  const colorScheme = "dark";
-  const flatListRef = useRef<FlatList>(null);
  const [selectedTag, setSelectedTag] = useState<string | null>(null);

  const {
@@ -43,7 +45,6 @@ export default function HomeScreen() {
  useEffect(() => {
    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];
@@ -55,7 +56,6 @@ export default function HomeScreen() {
  useEffect(() => {
    if (selectedCategory && selectedCategory.tag) {
      fetchInitialData();
-      flatListRef.current?.scrollToOffset({ animated: false, offset: 0 });
    }
  }, [fetchInitialData, selectedCategory, selectedCategory.tag]);

@@ -86,7 +86,7 @@ export default function HomeScreen() {
    );
  };

-  const renderContentItem = ({ item }: { item: RowItem }) => (
+  const renderContentItem = ({ item, index }: { item: RowItem; index: number }) => (
    <View style={styles.itemContainer}>
      <VideoCard
        id={item.id}
@@ -124,9 +124,9 @@ export default function HomeScreen() {
          </Pressable>
        </View>
        <View style={styles.rightHeaderButtons}>
-          {/* <StyledButton style={styles.searchButton} onPress={() => router.push("/favorites")} variant="ghost">
+          <StyledButton style={styles.searchButton} onPress={() => router.push("/favorites")} variant="ghost">
            <Heart color={colorScheme === "dark" ? "white" : "black"} size={24} />
-          </StyledButton> */}
+          </StyledButton>
          <StyledButton
            style={styles.searchButton}
            onPress={() => router.push({ pathname: "/search" })}
@@ -196,21 +196,17 @@ export default function HomeScreen() {
          </ThemedText>
        </View>
      ) : (
-        <FlatList
-          ref={flatListRef}
+        <CustomScrollView
          data={contentData}
          renderItem={renderContentItem}
-          keyExtractor={(item, index) => `${item.source}-${item.id}-${index}`}
          numColumns={NUM_COLUMNS}
-          contentContainerStyle={styles.listContent}
+          loading={loading}
+          loadingMore={loadingMore}
+          error={error}
          onEndReached={loadMoreData}
-          onEndReachedThreshold={0.5}
+          loadMoreThreshold={LOAD_MORE_THRESHOLD}
+          emptyMessage={selectedCategory?.tags ? "请选择一个子分类" : "该分类下暂无内容"}
          ListFooterComponent={renderFooter}
-          ListEmptyComponent={
-            <View style={styles.centerContainer}>
-              <ThemedText>{selectedCategory?.tags ? "请选择一个子分类" : "该分类下暂无内容"}</ThemedText>
-            </View>
-          }
        />
      )}
    </ThemedView>
@@ -272,7 +268,6 @@ const styles = StyleSheet.create({
  },
  itemContainer: {
    margin: 8,
-    width: ITEM_WIDTH,
    alignItems: "center",
  },
 });
--- a/app/live.tsx
+++ b/app/live.tsx
@@ -106,7 +106,7 @@ export default function LiveScreen() {
              <View style={styles.groupColumn}>
                <FlatList
                  data={channelGroups}
-                  keyExtractor={(item) => item}
+                  keyExtractor={(item, index) => `group-${item}-${index}`}
                  renderItem={({ item }) => (
                    <StyledButton
                      text={item}
@@ -124,7 +124,7 @@ export default function LiveScreen() {
                ) : (
                  <FlatList
                    data={groupedChannels[selectedGroup] || []}
-                    keyExtractor={(item) => item.id}
+                    keyExtractor={(item, index) => `${item.id}-${item.group}-${index}`}
                    renderItem={({ item }) => (
                      <StyledButton
                        text={item.name || "Unknown Channel"}
@@ -190,6 +190,8 @@ const styles = StyleSheet.create({
    paddingVertical: 8,
    paddingHorizontal: 4,
    marginVertical: 4,
+    paddingLeft: 10,
+    paddingRight: 10,
  },
  groupButtonText: {
    fontSize: 13,
@@ -198,6 +200,8 @@ const styles = StyleSheet.create({
    paddingVertical: 6,
    paddingHorizontal: 4,
    marginVertical: 3,
+    paddingLeft: 16,
+    paddingRight: 16,
  },
  channelItemText: {
    fontSize: 12,
--- a/app/play.tsx
+++ b/app/play.tsx
@@ -8,7 +8,7 @@ import { PlayerControls } from "@/components/PlayerControls";
 import { EpisodeSelectionModal } from "@/components/EpisodeSelectionModal";
 import { SourceSelectionModal } from "@/components/SourceSelectionModal";
 import { SeekingBar } from "@/components/SeekingBar";
-import { NextEpisodeOverlay } from "@/components/NextEpisodeOverlay";
+// import { NextEpisodeOverlay } from "@/components/NextEpisodeOverlay";
 import VideoLoadingAnimation from "@/components/VideoLoadingAnimation";
 import useDetailStore from "@/stores/detailStore";
 import { useTVRemoteHandler } from "@/hooks/useTVRemoteHandler";
@@ -42,13 +42,13 @@ export default function PlayScreen() {
  const {
    isLoading,
    showControls,
-    showNextEpisodeOverlay,
+    // showNextEpisodeOverlay,
    initialPosition,
    introEndTime,
    setVideoRef,
    handlePlaybackStatusUpdate,
    setShowControls,
-    setShowNextEpisodeOverlay,
+    // setShowNextEpisodeOverlay,
    reset,
    loadVideo,
  } = usePlayerStore();
@@ -151,7 +151,7 @@ export default function PlayScreen() {
          </View>
        )}

-        <NextEpisodeOverlay visible={showNextEpisodeOverlay} onCancel={() => setShowNextEpisodeOverlay(false)} />
+        {/* <NextEpisodeOverlay visible={showNextEpisodeOverlay} onCancel={() => setShowNextEpisodeOverlay(false)} /> */}
      </TouchableOpacity>

      <EpisodeSelectionModal />
--- a/app/search.tsx
+++ b/app/search.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
-import { View, TextInput, StyleSheet, FlatList, Alert, Keyboard } from "react-native";
+import { View, TextInput, StyleSheet, Alert, Keyboard, TouchableOpacity, Pressable } from "react-native";
 import { ThemedView } from "@/components/ThemedView";
 import { ThemedText } from "@/components/ThemedText";
 import VideoCard from "@/components/VideoCard.tv";
@@ -11,6 +11,8 @@ import { useRemoteControlStore } from "@/stores/remoteControlStore";
 import { RemoteControlModal } from "@/components/RemoteControlModal";
 import { useSettingsStore } from "@/stores/settingsStore";
 import { useRouter } from "expo-router";
+import { Colors } from "@/constants/Colors";
+import CustomScrollView from "@/components/CustomScrollView";

 export default function SearchScreen() {
  const [keyword, setKeyword] = useState("");
@@ -34,13 +36,13 @@ export default function SearchScreen() {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [lastMessage]);

-  useEffect(() => {
-    // Focus the text input when the screen loads
-    const timer = setTimeout(() => {
-      textInputRef.current?.focus();
-    }, 200);
-    return () => clearTimeout(timer);
-  }, []);
+  // useEffect(() => {
+  //   // Focus the text input when the screen loads
+  //   const timer = setTimeout(() => {
+  //     textInputRef.current?.focus();
+  //   }, 200);
+  //   return () => clearTimeout(timer);
+  // }, []);

  const handleSearch = async (searchText?: string) => {
    const term = typeof searchText === "string" ? searchText : keyword;
@@ -79,7 +81,7 @@ export default function SearchScreen() {
    showRemoteModal();
  };

-  const renderItem = ({ item }: { item: SearchResult }) => (
+  const renderItem = ({ item, index }: { item: SearchResult; index: number }) => (
    <VideoCard
      id={item.id.toString()}
      source={item.source}
@@ -94,25 +96,36 @@ export default function SearchScreen() {
  return (
    <ThemedView style={styles.container}>
      <View style={styles.searchContainer}>
-        <TextInput
-          ref={textInputRef}
+        <TouchableOpacity
+          activeOpacity={1}
          style={[
            styles.input,
            {
              backgroundColor: colorScheme === "dark" ? "#2c2c2e" : "#f0f0f0",
-              color: colorScheme === "dark" ? "white" : "black",
-              borderColor: isInputFocused ? "#007bff" : "transparent",
+              borderColor: isInputFocused ? Colors.dark.primary : "transparent",
+              borderWidth: 2,
            },
          ]}
-          placeholder="搜索电影、剧集..."
-          placeholderTextColor={colorScheme === "dark" ? "#888" : "#555"}
-          value={keyword}
-          onChangeText={setKeyword}
+          onPress={() => textInputRef.current?.focus()}
          onFocus={() => setIsInputFocused(true)}
          onBlur={() => setIsInputFocused(false)}
-          onSubmitEditing={onSearchPress}
-          returnKeyType="search"
-        />
+        >
+          <TextInput
+            ref={textInputRef}
+            style={[
+              styles.input,
+              {
+                color: colorScheme === "dark" ? "white" : "black",
+              },
+            ]}
+            placeholder="搜索电影、剧集..."
+            placeholderTextColor={colorScheme === "dark" ? "#888" : "#555"}
+            value={keyword}
+            onChangeText={setKeyword}
+            onSubmitEditing={onSearchPress}
+            returnKeyType="search"
+          />
+        </TouchableOpacity>
        <StyledButton style={styles.searchButton} onPress={onSearchPress}>
          <Search size={24} color={colorScheme === "dark" ? "white" : "black"} />
        </StyledButton>
@@ -128,17 +141,13 @@ export default function SearchScreen() {
          <ThemedText style={styles.errorText}>{error}</ThemedText>
        </View>
      ) : (
-        <FlatList
+        <CustomScrollView
          data={results}
          renderItem={renderItem}
-          keyExtractor={(item, index) => `${item.id}-${item.source}-${index}`}
-          numColumns={5} // Adjust based on your card size and desired layout
-          contentContainerStyle={styles.listContent}
-          ListEmptyComponent={
-            <View style={styles.centerContainer}>
-              <ThemedText>输入关键词开始搜索</ThemedText>
-            </View>
-          }
+          numColumns={5}
+          loading={loading}
+          error={error}
+          emptyMessage="输入关键词开始搜索"
        />
      )}
      <RemoteControlModal />
--- a/app/settings.tsx
+++ b/app/settings.tsx
@@ -6,18 +6,17 @@ import { ThemedView } from "@/components/ThemedView";
 import { StyledButton } from "@/components/StyledButton";
 import { useThemeColor } from "@/hooks/useThemeColor";
 import { useSettingsStore } from "@/stores/settingsStore";
-import useAuthStore from "@/stores/authStore";
+// import useAuthStore from "@/stores/authStore";
 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 { 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 { isLoggedIn, logout } = useAuthStore();
  const backgroundColor = useThemeColor({}, "background");

  const [hasChanges, setHasChanges] = useState(false);
--- a/components/CustomScrollView.tsx
+++ b/components/CustomScrollView.tsx
@@ -0,0 +1,130 @@
+import React, { useState, useCallback } from "react";
+import { View, StyleSheet, ScrollView, Dimensions, ActivityIndicator } from "react-native";
+import { ThemedText } from "@/components/ThemedText";
+
+interface CustomScrollViewProps {
+  data: any[];
+  renderItem: ({ item, index }: { item: any; index: number }) => React.ReactNode;
+  numColumns?: number;
+  loading?: boolean;
+  loadingMore?: boolean;
+  error?: string | null;
+  onEndReached?: () => void;
+  loadMoreThreshold?: number;
+  emptyMessage?: string;
+  ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null;
+}
+
+const { width } = Dimensions.get("window");
+
+const CustomScrollView: React.FC<CustomScrollViewProps> = ({
+  data,
+  renderItem,
+  numColumns = 1,
+  loading = false,
+  loadingMore = false,
+  error = null,
+  onEndReached,
+  loadMoreThreshold = 200,
+  emptyMessage = "暂无内容",
+  ListFooterComponent,
+}) => {
+  const ITEM_WIDTH = numColumns > 0 ? width / numColumns - 24 : width - 24;
+
+  const handleScroll = useCallback(
+    ({ nativeEvent }: { nativeEvent: any }) => {
+      const { layoutMeasurement, contentOffset, contentSize } = nativeEvent;
+      const isCloseToBottom = layoutMeasurement.height + contentOffset.y >= contentSize.height - loadMoreThreshold;
+
+      if (isCloseToBottom && !loadingMore && onEndReached) {
+        onEndReached();
+      }
+    },
+    [onEndReached, loadingMore, loadMoreThreshold]
+  );
+
+  const renderFooter = () => {
+    if (ListFooterComponent) {
+      if (React.isValidElement(ListFooterComponent)) {
+        return ListFooterComponent;
+      } else if (typeof ListFooterComponent === "function") {
+        const Component = ListFooterComponent as React.ComponentType<any>;
+        return <Component />;
+      }
+      return null;
+    }
+    if (loadingMore) {
+      return <ActivityIndicator style={{ marginVertical: 20 }} size="large" />;
+    }
+    return null;
+  };
+
+  if (loading) {
+    return (
+      <View style={styles.centerContainer}>
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={styles.centerContainer}>
+        <ThemedText type="subtitle" style={{ padding: 10 }}>
+          {error}
+        </ThemedText>
+      </View>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <View style={styles.centerContainer}>
+        <ThemedText>{emptyMessage}</ThemedText>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView contentContainerStyle={styles.listContent} onScroll={handleScroll} scrollEventThrottle={16}>
+      {data.length > 0 ? (
+        <>
+          {/* Render content in a grid layout */}
+          {Array.from({ length: Math.ceil(data.length / numColumns) }).map((_, rowIndex) => (
+            <View key={rowIndex} style={{ flexDirection: "row", justifyContent: "space-between" }}>
+              {data.slice(rowIndex * numColumns, (rowIndex + 1) * numColumns).map((item, index) => (
+                <View key={index} style={[styles.itemContainer, { width: ITEM_WIDTH }]}>
+                  {renderItem({ item, index: rowIndex * numColumns + index })}
+                </View>
+              ))}
+            </View>
+          ))}
+          {renderFooter()}
+        </>
+      ) : (
+        <View style={styles.centerContainer}>
+          <ThemedText>{emptyMessage}</ThemedText>
+        </View>
+      )}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  centerContainer: {
+    flex: 1,
+    paddingTop: 20,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  listContent: {
+    paddingHorizontal: 16,
+    paddingBottom: 20,
+  },
+  itemContainer: {
+    margin: 8,
+    alignItems: "center",
+  },
+});
+
+export default CustomScrollView;
--- a/components/LivePlayer.tsx
+++ b/components/LivePlayer.tsx
@@ -1,6 +1,7 @@
 import React, { useRef, useState, useEffect } from "react";
 import { View, StyleSheet, Text, ActivityIndicator } from "react-native";
 import { Video, ResizeMode, AVPlaybackStatus } from "expo-av";
+import { useKeepAwake } from "expo-keep-awake";

 interface LivePlayerProps {
  streamUrl: string | null;
@@ -15,6 +16,7 @@ export default function LivePlayer({ streamUrl, channelTitle, onPlaybackStatusUp
  const [isLoading, setIsLoading] = useState(false);
  const [isTimeout, setIsTimeout] = useState(false);
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  useKeepAwake();

  useEffect(() => {
    if (timeoutRef.current) {
@@ -66,7 +68,7 @@ export default function LivePlayer({ streamUrl, channelTitle, onPlaybackStatusUp
  if (!streamUrl) {
    return (
      <View style={styles.container}>
-        <Text style={styles.messageText}>Select a channel to play.</Text>
+        <Text style={styles.messageText}>按向下键选择频道</Text>
      </View>
    );
  }
@@ -74,7 +76,7 @@ export default function LivePlayer({ streamUrl, channelTitle, onPlaybackStatusUp
  if (isTimeout) {
    return (
      <View style={styles.container}>
-        <Text style={styles.messageText}>Failed to load stream. It might be offline or unavailable.</Text>
+        <Text style={styles.messageText}>加载失败，请重试</Text>
      </View>
    );
  }
@@ -98,7 +100,7 @@ export default function LivePlayer({ streamUrl, channelTitle, onPlaybackStatusUp
      {isLoading && (
        <View style={styles.loadingOverlay}>
          <ActivityIndicator size="large" color="#fff" />
-          <Text style={styles.messageText}>Loading...</Text>
+          <Text style={styles.messageText}>加载中...</Text>
        </View>
      )}
      {channelTitle && !isLoading && !isTimeout && (
--- a/components/LoginModal.tsx
+++ b/components/LoginModal.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
-import { Modal, View, TextInput, StyleSheet, ActivityIndicator, useTVEventHandler } from "react-native";
+import { Modal, View, TextInput, StyleSheet, ActivityIndicator } from "react-native";
 import { usePathname } from "expo-router";
 import Toast from "react-native-toast-message";
 import useAuthStore from "@/stores/authStore";
@@ -19,47 +19,24 @@ const LoginModal = () => {
  const [isLoading, setIsLoading] = useState(false);
  const usernameInputRef = useRef<TextInput>(null);
  const passwordInputRef = useRef<TextInput>(null);
-  const loginButtonRef = useRef<View>(null);
-  const [focused, setFocused] = useState("username");
  const pathname = usePathname();
  const isSettingsPage = pathname.includes("settings");

-  const tvEventHandler = (evt: any) => {
-    if (!evt || !isLoginModalVisible || isSettingsPage) {
-      return;
-    }
-
-    const isUsernameVisible = serverConfig?.StorageType !== "localstorage";
-
-    if (evt.eventType === "down") {
-      if (focused === "username" && isUsernameVisible) {
-        passwordInputRef.current?.focus();
-      } else if (focused === "password") {
-        loginButtonRef.current?.focus();
-      }
-    }
-
-    if (evt.eventType === "up") {
-      if (focused === "button") {
-        passwordInputRef.current?.focus();
-      } else if (focused === "password" && isUsernameVisible) {
-        usernameInputRef.current?.focus();
-      }
-    }
-  };
-
-  useTVEventHandler(tvEventHandler);
-
+  // Focus management with better TV remote handling
  useEffect(() => {
    if (isLoginModalVisible && !isSettingsPage) {
      const isUsernameVisible = serverConfig?.StorageType !== "localstorage";
-      setTimeout(() => {
+      
+      // Use a small delay to ensure the modal is fully rendered
+      const focusTimeout = setTimeout(() => {
        if (isUsernameVisible) {
          usernameInputRef.current?.focus();
        } else {
          passwordInputRef.current?.focus();
        }
-      }, 200);
+      }, 100);
+      
+      return () => clearTimeout(focusTimeout);
    }
  }, [isLoginModalVisible, serverConfig, isSettingsPage]);

@@ -85,6 +62,11 @@ const LoginModal = () => {
    }
  };

+  // Handle navigation between inputs using returnKeyType
+  const handleUsernameSubmit = () => {
+    passwordInputRef.current?.focus();
+  };
+
  return (
    <Modal
      transparent={true}
@@ -105,7 +87,8 @@ const LoginModal = () => {
              value={username}
              onChangeText={setUsername}
              returnKeyType="next"
-              onFocus={() => setFocused("username")}
+              onSubmitEditing={handleUsernameSubmit}
+              blurOnSubmit={false}
            />
          )}
          <TextInput
@@ -117,16 +100,14 @@ const LoginModal = () => {
            value={password}
            onChangeText={setPassword}
            returnKeyType="go"
-            onFocus={() => setFocused("password")}
            onSubmitEditing={handleLogin}
          />
          <StyledButton
-            ref={loginButtonRef}
-            onFocus={() => setFocused("button")}
            text={isLoading ? "" : "登录"}
            onPress={handleLogin}
            disabled={isLoading}
            style={styles.button}
+            hasTVPreferredFocus={!serverConfig || serverConfig.StorageType === "localstorage"}
          >
            {isLoading && <ActivityIndicator color="#fff" />}
          </StyledButton>
--- a/components/PlayerControls.tsx
+++ b/components/PlayerControls.tsx
@@ -168,7 +168,7 @@ const styles = StyleSheet.create({
    position: "absolute",
    left: 0,
    height: 8,
-    backgroundColor: "#ff0000",
+    backgroundColor: "#fff",
    borderRadius: 4,
  },
  progressBarTouchable: {
--- a/components/SeekingBar.tsx
+++ b/components/SeekingBar.tsx
@@ -80,7 +80,7 @@ const styles = StyleSheet.create({
  },
  seekingBarFilled: {
    height: "100%",
-    backgroundColor: "#ff0000",
+    backgroundColor: "#fff",
    borderRadius: 2.5,
  },
 });
--- a/components/SourceSelectionModal.tsx
+++ b/components/SourceSelectionModal.tsx
@@ -5,12 +5,24 @@ import useDetailStore from "@/stores/detailStore";
 import usePlayerStore from "@/stores/playerStore";

 export const SourceSelectionModal: React.FC = () => {
-  const { showSourceModal, setShowSourceModal } = usePlayerStore();
+  const { showSourceModal, setShowSourceModal, loadVideo, currentEpisodeIndex, status } = usePlayerStore();
  const { searchResults, detail, setDetail } = useDetailStore();

  const onSelectSource = (index: number) => {
+    console.log("onSelectSource", index, searchResults[index].source, detail?.source);
    if (searchResults[index].source !== detail?.source) {
-      setDetail(searchResults[index]);
+      const newDetail = searchResults[index];
+      setDetail(newDetail);
+      
+      // Reload the video with the new source, preserving current position
+      const currentPosition = status?.isLoaded ? status.positionMillis : undefined;
+      loadVideo({
+        source: newDetail.source,
+        id: newDetail.id.toString(),
+        episodeIndex: currentEpisodeIndex,
+        title: newDetail.title,
+        position: currentPosition
+      });
    }
    setShowSourceModal(false);
  };
@@ -72,7 +84,9 @@ const styles = StyleSheet.create({
  sourceItem: {
    paddingVertical: 2,
    margin: 4,
-    width: "31%",
+    marginLeft: 10,
+    marginRight: 8,
+    width: "30%",
  },
  sourceItemText: {
    fontSize: 14,
--- a/components/StyledButton.tsx
+++ b/components/StyledButton.tsx
@@ -29,11 +29,10 @@ export const StyledButton = forwardRef<View, StyledButtonProps>(
          color: colors.text,
        },
        selectedButton: {
-          backgroundColor: colors.tint,
+          backgroundColor: colors.primary,
        },
        focusedButton: {
-          backgroundColor: colors.link,
-          borderColor: colors.background,
+          borderColor: colors.primary,
        },
        selectedText: {
          color: Colors.dark.text,
@@ -47,11 +46,11 @@ export const StyledButton = forwardRef<View, StyledButtonProps>(
          color: colors.text,
        },
        focusedButton: {
-          backgroundColor: colors.link,
+          backgroundColor: colors.primary,
          borderColor: colors.background,
        },
        selectedButton: {
-          backgroundColor: "rgba(0, 122, 255, 0.3)",
+          backgroundColor: colors.primary,
        },
        selectedText: {
          color: colors.link,
@@ -65,7 +64,8 @@ export const StyledButton = forwardRef<View, StyledButtonProps>(
          color: colors.text,
        },
        focusedButton: {
-          backgroundColor: "rgba(119, 119, 119, 0.9)",
+          backgroundColor: "rgba(119, 119, 119, 0.2)",
+          borderColor: colors.primary,
        },
        selectedButton: {},
        selectedText: {},
--- a/components/VideoCard.tv.tsx
+++ b/components/VideoCard.tv.tsx
@@ -1,13 +1,14 @@
-import React, { useState, useEffect, useCallback, useRef } from "react";
-import { View, Text, Image, StyleSheet, Pressable, TouchableOpacity, Alert } from "react-native";
+import React, { useState, useCallback, useRef, forwardRef } from "react";
+import { View, Text, Image, StyleSheet, TouchableOpacity, Alert } from "react-native";
 import Animated, { useSharedValue, useAnimatedStyle, withSpring } from "react-native-reanimated";
 import { useRouter } from "expo-router";
-import { Heart, Star, Play, Trash2 } from "lucide-react-native";
-import { FavoriteManager, PlayRecordManager } from "@/services/storage";
-import { API, api } from "@/services/api";
+import { Star, Play } from "lucide-react-native";
+import { PlayRecordManager } from "@/services/storage";
+import { API } from "@/services/api";
 import { ThemedText } from "@/components/ThemedText";
+import { Colors } from "@/constants/Colors";

-interface VideoCardProps {
+interface VideoCardProps extends React.ComponentProps<typeof TouchableOpacity> {
  id: string;
  source: string;
  title: string;
@@ -24,166 +25,175 @@ interface VideoCardProps {
  api: API;
 }

-export default function VideoCard({
-  id,
-  source,
-  title,
-  poster,
-  year,
-  rate,
-  sourceName,
-  progress,
-  episodeIndex,
-  onFocus,
-  onRecordDeleted,
-  api,
-  playTime = 0,
-}: VideoCardProps) {
-  const router = useRouter();
-  const [isFocused, setIsFocused] = useState(false);
+const VideoCard = forwardRef<View, VideoCardProps>(
+  (
+    {
+      id,
+      source,
+      title,
+      poster,
+      year,
+      rate,
+      sourceName,
+      progress,
+      episodeIndex,
+      onFocus,
+      onRecordDeleted,
+      api,
+      playTime = 0,
+    }: VideoCardProps,
+    ref
+  ) => {
+    const router = useRouter();
+    const [isFocused, setIsFocused] = useState(false);

-  const longPressTriggered = useRef(false);
+    const longPressTriggered = useRef(false);

-  const scale = useSharedValue(1);
+    const scale = useSharedValue(1);

-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      transform: [{ scale: scale.value }],
+    const animatedStyle = useAnimatedStyle(() => {
+      return {
+        transform: [{ scale: scale.value }],
+      };
+    });
+
+    const handlePress = () => {
+      if (longPressTriggered.current) {
+        longPressTriggered.current = false;
+        return;
+      }
+      // 如果有播放进度，直接转到播放页面
+      if (progress !== undefined && episodeIndex !== undefined) {
+        router.push({
+          pathname: "/play",
+          params: { source, id, episodeIndex: episodeIndex - 1, title, position: playTime * 1000 },
+        });
+      } else {
+        router.push({
+          pathname: "/detail",
+          params: { source, q: title },
+        });
+      }
    };
-  });

-  const handlePress = () => {
-    if (longPressTriggered.current) {
-      longPressTriggered.current = false;
-      return;
-    }
-    // 如果有播放进度，直接转到播放页面
-    if (progress !== undefined && episodeIndex !== undefined) {
-      router.push({
-        pathname: "/play",
-        params: { source, id, episodeIndex: episodeIndex - 1, title, position: playTime * 1000 },
-      });
-    } else {
-      router.push({
-        pathname: "/detail",
-        params: { source, q: title },
-      });
-    }
-  };
+    const handleFocus = useCallback(() => {
+      setIsFocused(true);
+      scale.value = withSpring(1.05, { damping: 15, stiffness: 200 });
+      onFocus?.();
+    }, [scale, onFocus]);

-  const handleFocus = useCallback(() => {
-    setIsFocused(true);
-    scale.value = withSpring(1.05, { damping: 15, stiffness: 200 });
-    onFocus?.();
-  }, [scale, onFocus]);
+    const handleBlur = useCallback(() => {
+      setIsFocused(false);
+      scale.value = withSpring(1.0);
+    }, [scale]);

-  const handleBlur = useCallback(() => {
-    setIsFocused(false);
-    scale.value = withSpring(1.0);
-  }, [scale]);
+    const handleLongPress = () => {
+      // Only allow long press for items with progress (play records)
+      if (progress === undefined) return;

-  const handleLongPress = () => {
-    // Only allow long press for items with progress (play records)
-    if (progress === undefined) return;
+      longPressTriggered.current = true;

-    longPressTriggered.current = true;
-
-    // Show confirmation dialog to delete play record
-    Alert.alert("删除观看记录", `确定要删除"${title}"的观看记录吗？`, [
-      {
-        text: "取消",
-        style: "cancel",
-      },
-      {
-        text: "删除",
-        style: "destructive",
-        onPress: async () => {
-          try {
-            // Delete from local storage
-            await PlayRecordManager.remove(source, id);
-
-            // Call the onRecordDeleted callback
-            if (onRecordDeleted) {
-              onRecordDeleted();
-            }
-            // 如果没有回调函数，则使用导航刷新作为备选方案
-            else if (router.canGoBack()) {
-              router.replace("/");
-            }
-          } catch (error) {
-            console.info("Failed to delete play record:", error);
-            Alert.alert("错误", "删除观看记录失败，请重试");
-          }
+      // Show confirmation dialog to delete play record
+      Alert.alert("删除观看记录", `确定要删除"${title}"的观看记录吗？`, [
+        {
+          text: "取消",
+          style: "cancel",
        },
-      },
-    ]);
-  };
+        {
+          text: "删除",
+          style: "destructive",
+          onPress: async () => {
+            try {
+              // Delete from local storage
+              await PlayRecordManager.remove(source, id);

-  // 是否是继续观看的视频
-  const isContinueWatching = progress !== undefined && progress > 0 && progress < 1;
+              // Call the onRecordDeleted callback
+              if (onRecordDeleted) {
+                onRecordDeleted();
+              }
+              // 如果没有回调函数，则使用导航刷新作为备选方案
+              else if (router.canGoBack()) {
+                router.replace("/");
+              }
+            } catch (error) {
+              console.info("Failed to delete play record:", error);
+              Alert.alert("错误", "删除观看记录失败，请重试");
+            }
+          },
+        },
+      ]);
+    };

-  return (
-    <Animated.View style={[styles.wrapper, animatedStyle]}>
-      <TouchableOpacity
-        onPress={handlePress}
-        onLongPress={handleLongPress}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        style={styles.pressable}
-        activeOpacity={1}
-        delayLongPress={1000}
-      >
-        <View style={styles.card}>
-          <Image source={{ uri: api.getImageProxyUrl(poster) }} style={styles.poster} />
-          {isFocused && (
-            <View style={styles.overlay}>
-              {isContinueWatching && (
-                <View style={styles.continueWatchingBadge}>
-                  <Play size={16} color="#ffffff" fill="#ffffff" />
-                  <ThemedText style={styles.continueWatchingText}>继续观看</ThemedText>
-                </View>
-              )}
-            </View>
-          )}
+    // 是否是继续观看的视频
+    const isContinueWatching = progress !== undefined && progress > 0 && progress < 1;

-          {/* 进度条 */}
-          {isContinueWatching && (
-            <View style={styles.progressContainer}>
-              <View style={[styles.progressBar, { width: `${(progress || 0) * 100}%` }]} />
-            </View>
-          )}
+    return (
+      <Animated.View style={[styles.wrapper, animatedStyle]}>
+        <TouchableOpacity
+          onPress={handlePress}
+          onLongPress={handleLongPress}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          style={styles.pressable}
+          activeOpacity={1}
+          delayLongPress={1000}
+        >
+          <View style={styles.card}>
+            <Image source={{ uri: api.getImageProxyUrl(poster) }} style={styles.poster} />
+            {isFocused && (
+              <View style={styles.overlay}>
+                {isContinueWatching && (
+                  <View style={styles.continueWatchingBadge}>
+                    <Play size={16} color="#ffffff" fill="#ffffff" />
+                    <ThemedText style={styles.continueWatchingText}>继续观看</ThemedText>
+                  </View>
+                )}
+              </View>
+            )}

-          {rate && (
-            <View style={styles.ratingContainer}>
-              <Star size={12} color="#FFD700" fill="#FFD700" />
-              <ThemedText style={styles.ratingText}>{rate}</ThemedText>
-            </View>
-          )}
-          {year && (
-            <View style={styles.yearBadge}>
-              <Text style={styles.badgeText}>{year}</Text>
-            </View>
-          )}
-          {sourceName && (
-            <View style={styles.sourceNameBadge}>
-              <Text style={styles.badgeText}>{sourceName}</Text>
-            </View>
-          )}
-        </View>
-        <View style={styles.infoContainer}>
-          <ThemedText numberOfLines={1}>{title}</ThemedText>
-          {isContinueWatching && (
-            <View style={styles.infoRow}>
-              <ThemedText style={styles.continueLabel}>
-                第{episodeIndex! + 1}集 已观看 {Math.round((progress || 0) * 100)}%
-              </ThemedText>
-            </View>
-          )}
-        </View>
-      </TouchableOpacity>
-    </Animated.View>
-  );
-}
+            {/* 进度条 */}
+            {isContinueWatching && (
+              <View style={styles.progressContainer}>
+                <View style={[styles.progressBar, { width: `${(progress || 0) * 100}%` }]} />
+              </View>
+            )}
+
+            {rate && (
+              <View style={styles.ratingContainer}>
+                <Star size={12} color="#FFD700" fill="#FFD700" />
+                <ThemedText style={styles.ratingText}>{rate}</ThemedText>
+              </View>
+            )}
+            {year && (
+              <View style={styles.yearBadge}>
+                <Text style={styles.badgeText}>{year}</Text>
+              </View>
+            )}
+            {sourceName && (
+              <View style={styles.sourceNameBadge}>
+                <Text style={styles.badgeText}>{sourceName}</Text>
+              </View>
+            )}
+          </View>
+          <View style={styles.infoContainer}>
+            <ThemedText numberOfLines={1}>{title}</ThemedText>
+            {isContinueWatching && (
+              <View style={styles.infoRow}>
+                <ThemedText style={styles.continueLabel}>
+                  第{episodeIndex! + 1}集 已观看 {Math.round((progress || 0) * 100)}%
+                </ThemedText>
+              </View>
+            )}
+          </View>
+        </TouchableOpacity>
+      </Animated.View>
+    );
+  }
+);
+
+VideoCard.displayName = "VideoCard";
+
+export default VideoCard;

 const CARD_WIDTH = 160;
 const CARD_HEIGHT = 240;
@@ -209,6 +219,9 @@ const styles = StyleSheet.create({
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: "rgba(0,0,0,0.3)",
+    borderColor: Colors.dark.primary,
+    borderWidth: 2,
+    borderRadius: 8,
    justifyContent: "center",
    alignItems: "center",
  },
@@ -290,17 +303,17 @@ const styles = StyleSheet.create({
    bottom: 0,
    left: 0,
    right: 0,
-    height: 3,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    height: 4,
+    backgroundColor: "rgba(0, 0, 0, 0.8)",
  },
  progressBar: {
-    height: 3,
-    backgroundColor: "#ff0000",
+    height: 4,
+    backgroundColor: Colors.dark.primary,
  },
  continueWatchingBadge: {
    flexDirection: "row",
    alignItems: "center",
-    backgroundColor: "rgba(255, 0, 0, 0.8)",
+    backgroundColor: Colors.dark.primary,
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderRadius: 5,
@@ -312,7 +325,7 @@ const styles = StyleSheet.create({
    fontWeight: "bold",
  },
  continueLabel: {
-    color: "#ff5252",
+    color: Colors.dark.primary,
    fontSize: 12,
  },
 });
--- a/components/VideoLoadingAnimation.tsx
+++ b/components/VideoLoadingAnimation.tsx
@@ -199,17 +199,17 @@ const VideoLoadingAnimation: React.FC<VideoLoadingAnimationProps> = ({ showProgr
          </View>
        </Animated.View>

-        <View style={styles.loadingDots}>
+        {/* <View style={styles.loadingDots}>
          <Animated.View style={[styles.dot, animatedStyles.bounce[0]]} />
          <Animated.View style={[styles.dot, animatedStyles.bounce[1]]} />
          <Animated.View style={[styles.dot, animatedStyles.bounce[2]]} />
-        </View>
+        </View> */}

        {showProgressBar && (
          <View style={styles.progressBar}>
            <Animated.View style={[styles.progressFill, animatedStyles.progress]}>
              <LinearGradient
-                colors={["#4fd1c7", "#06b6d4", "#3b82f6", "#8b5cf6"]}
+                colors={["#00bb5e", "#feff5f"]}
                style={StyleSheet.absoluteFill}
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 0 }}
--- a/components/settings/APIConfigSection.tsx
+++ b/components/settings/APIConfigSection.tsx
@@ -6,6 +6,7 @@ import { SettingsSection } from "./SettingsSection";
 import { useSettingsStore } from "@/stores/settingsStore";
 import { useRemoteControlStore } from "@/stores/remoteControlStore";
 import { useButtonAnimation } from "@/hooks/useAnimation";
+import { Colors } from "@/constants/Colors";

 interface APIConfigSectionProps {
  onChanged: () => void;
@@ -126,8 +127,8 @@ const styles = StyleSheet.create({
    borderColor: "transparent",
  },
  inputFocused: {
-    borderColor: "#007AFF",
-    shadowColor: "#007AFF",
+    borderColor: Colors.dark.primary,
+    shadowColor: Colors.dark.primary,
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.8,
    shadowRadius: 10,
--- a/components/settings/LiveStreamSection.tsx
+++ b/components/settings/LiveStreamSection.tsx
@@ -6,6 +6,7 @@ import { SettingsSection } from "./SettingsSection";
 import { useSettingsStore } from "@/stores/settingsStore";
 import { useRemoteControlStore } from "@/stores/remoteControlStore";
 import { useButtonAnimation } from "@/hooks/useAnimation";
+import { Colors } from "@/constants/Colors";

 interface LiveStreamSectionProps {
  onChanged: () => void;
@@ -120,8 +121,8 @@ const styles = StyleSheet.create({
    borderColor: "transparent",
  },
  inputFocused: {
-    borderColor: "#007AFF",
-    shadowColor: "#007AFF",
+    borderColor: Colors.dark.primary,
+    shadowColor: Colors.dark.primary,
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.8,
    shadowRadius: 10,
--- a/components/settings/RemoteInputSection.tsx
+++ b/components/settings/RemoteInputSection.tsx
@@ -6,6 +6,7 @@ import { SettingsSection } from "./SettingsSection";
 import { useSettingsStore } from "@/stores/settingsStore";
 import { useRemoteControlStore } from "@/stores/remoteControlStore";
 import { useButtonAnimation } from "@/hooks/useAnimation";
+import { Colors } from "@/constants/Colors";

 interface RemoteInputSectionProps {
  onChanged: () => void;
@@ -59,7 +60,7 @@ export const RemoteInputSection: React.FC<RemoteInputSectionProps> = ({ onChange
          <Switch
            value={remoteInputEnabled}
            onValueChange={() => {}} // 禁用Switch的直接交互
-            trackColor={{ false: "#767577", true: "#007AFF" }}
+            trackColor={{ false: "#767577", true: Colors.dark.primary }}
            thumbColor={remoteInputEnabled ? "#ffffff" : "#f4f3f4"}
            pointerEvents="none"
          />
@@ -70,7 +71,7 @@ export const RemoteInputSection: React.FC<RemoteInputSectionProps> = ({ onChange
        <View style={styles.statusContainer}>
          <View style={styles.statusItem}>
            <ThemedText style={styles.statusLabel}>服务状态：</ThemedText>
-            <ThemedText style={[styles.statusValue, { color: isServerRunning ? "#00FF00" : "#FF6B6B" }]}>
+            <ThemedText style={[styles.statusValue, { color: isServerRunning ? Colors.dark.primary : "#FF6B6B" }]}>
              {isServerRunning ? "运行中" : "已停止"}
            </ThemedText>
          </View>
--- a/components/settings/SettingsSection.tsx
+++ b/components/settings/SettingsSection.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { StyleSheet, Pressable } from "react-native";
 import { ThemedView } from "@/components/ThemedView";
+import { Colors } from "@/constants/Colors";

 interface SettingsSectionProps {
  children: React.ReactNode;
@@ -9,12 +10,7 @@ interface SettingsSectionProps {
  focusable?: boolean;
 }

-export const SettingsSection: React.FC<SettingsSectionProps> = ({ 
-  children, 
-  onFocus, 
-  onBlur, 
-  focusable = false 
-}) => {
+export const SettingsSection: React.FC<SettingsSectionProps> = ({ children, onFocus, onBlur, focusable = false }) => {
  const [isFocused, setIsFocused] = useState(false);

  const handleFocus = () => {
@@ -28,20 +24,12 @@ export const SettingsSection: React.FC<SettingsSectionProps> = ({
  };

  if (!focusable) {
-    return (
-      <ThemedView style={styles.section}>
-        {children}
-      </ThemedView>
-    );
+    return <ThemedView style={styles.section}>{children}</ThemedView>;
  }

  return (
    <ThemedView style={[styles.section, isFocused && styles.sectionFocused]}>
-      <Pressable
-        style={styles.sectionPressable}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-      >
+      <Pressable style={styles.sectionPressable} onFocus={handleFocus} onBlur={handleBlur}>
        {children}
      </Pressable>
    </ThemedView>
@@ -57,10 +45,10 @@ const styles = StyleSheet.create({
    borderColor: "#333",
  },
  sectionFocused: {
-    borderColor: "#007AFF",
+    borderColor: Colors.dark.primary,
    backgroundColor: "#007AFF10",
  },
  sectionPressable: {
    width: "100%",
  },
-});
+});
--- a/constants/Colors.ts
+++ b/constants/Colors.ts
@@ -26,5 +26,6 @@ export const Colors = {
    tabIconSelected: tintColorDark,
    link: "#0a7ea4",
    border: "#333",
+    primary: "#00bb5e",
  },
 };
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
  "name": "OrionTV",
  "private": true,
  "main": "expo-router/entry",
-  "version": "1.2.3",
+  "version": "1.2.8",
  "scripts": {
    "start": "EXPO_USE_METRO_WORKSPACE_ROOT=1 expo start",
    "start-tv": "EXPO_TV=1 EXPO_USE_METRO_WORKSPACE_ROOT=1 expo start",
@@ -80,4 +80,4 @@
    }
  },
  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
-}
+}
--- a/services/api.ts
+++ b/services/api.ts
@@ -43,7 +43,6 @@ export interface SearchResult {
 export interface Favorite {
  cover: string;
  title: string;
-  poster: string;
  source_name: string;
  total_episodes: number;
  search_title: string;
--- a/services/m3u.ts
+++ b/services/m3u.ts
@@ -16,23 +16,37 @@ export const parseM3U = (m3uText: string): Channel[] => {
  for (const line of lines) {
    const trimmedLine = line.trim();
    if (trimmedLine.startsWith('#EXTINF:')) {
-      currentChannelInfo = { id: '', name: '', url: '', logo: '', group: '' };
-      const commaIndex = trimmedLine.indexOf(',');
+      currentChannelInfo = {}; // Start a new channel
+      const commaIndex = trimmedLine.lastIndexOf(',');
      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];
+        if (logoMatch && logoMatch[1]) {
+          currentChannelInfo.logo = logoMatch[1];
+        }
        const groupMatch = attributesPart.match(/group-title="([^"]*)"/i);
-        if (groupMatch && groupMatch[1]) currentChannelInfo.group = groupMatch[1];
+        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;
+      
+      // Ensure all required fields are present, providing defaults if necessary
+      const finalChannel: Channel = {
+        id: currentChannelInfo.id,
+        url: currentChannelInfo.url,
+        name: currentChannelInfo.name || 'Unknown',
+        logo: currentChannelInfo.logo || '',
+        group: currentChannelInfo.group || 'Default',
+      };
+      
+      parsedChannels.push(finalChannel);
+      currentChannelInfo = null; // Reset for the next channel
    }
  }
  return parsedChannels;
@@ -57,14 +71,14 @@ export const getPlayableUrl = (originalUrl: string | null): string | null => {
    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)}`;
-  }
+  // 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;
-};
+};
--- a/stores/authStore.ts
+++ b/stores/authStore.ts
@@ -2,6 +2,7 @@ import { create } from "zustand";
 import Cookies from "@react-native-cookies/cookies";
 import { api } from "@/services/api";
 import { useSettingsStore } from "./settingsStore";
+import Toast from "react-native-toast-message";

 interface AuthState {
  isLoggedIn: boolean;
@@ -24,6 +25,10 @@ const useAuthStore = create<AuthState>((set) => ({
    }
    try {
      const serverConfig = useSettingsStore.getState().serverConfig;
+      if (!serverConfig?.StorageType) {
+        Toast.show({ type: "error", text1: "请检查网络或者 API 地址是否可用" });
+        return
+      }
      const cookies = await Cookies.get(api.baseURL);
      if (serverConfig && serverConfig.StorageType === "localstorage" && !cookies.auth) {
        const loginResult = await api.login().catch(() => {
--- a/stores/detailStore.ts
+++ b/stores/detailStore.ts
@@ -133,11 +133,11 @@ const useDetailStore = create<DetailState>((set, get) => ({
        set({ error: "未找到任何播放源" });
      }

-      // if (get().detail) {
-      //   const { source, id } = get().detail!;
-      //   const isFavorited = await FavoriteManager.isFavorited(source, id.toString());
-      //   set({ isFavorited });
-      // }
+      if (get().detail) {
+        const { source, id } = get().detail!;
+        const isFavorited = await FavoriteManager.isFavorited(source, id.toString());
+        set({ isFavorited });
+      }
    } catch (e) {
      if ((e as Error).name !== "AbortError") {
        set({ error: e instanceof Error ? e.message : "获取数据失败" });
@@ -151,9 +151,9 @@ const useDetailStore = create<DetailState>((set, get) => ({

  setDetail: async (detail) => {
    set({ detail });
-    // const { source, id } = detail;
-    // const isFavorited = await FavoriteManager.isFavorited(source, id.toString());
-    // set({ isFavorited });
+    const { source, id } = detail;
+    const isFavorited = await FavoriteManager.isFavorited(source, id.toString());
+    set({ isFavorited });
  },

  abort: () => {
--- a/stores/playerStore.ts
+++ b/stores/playerStore.ts
@@ -254,7 +254,6 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
        ...existingRecord,
        ...updates,
      });
-      console.log("Play record saved")
    }
  },

--- a/stores/settingsStore.ts
+++ b/stores/settingsStore.ts
@@ -56,9 +56,10 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
      const config = await api.getServerConfig();
      if (config) {
        storageConfig.setStorageType(config.StorageType);
+        set({ serverConfig: config });
      }
-      set({ serverConfig: config });
    } catch (error) {
+      set({ serverConfig: null });
      console.info("Failed to fetch server config:", error);
    }
  },
Author	SHA1	Message	Date
zimplexing	d1f0a2eb87	feat: Optimize availability checking of api addresses	2025-07-25 16:32:15 +08:00
zimplexing	62c03beb5e	fix: search input focus issue	2025-07-25 16:00:11 +08:00
zimplexing	5992a89db4	feat: Update scroll experience	2025-07-25 15:39:23 +08:00
zimplexing	c9587d7070	chore: bump version to 1.2.8 in package.json	2025-07-25 14:15:18 +08:00
zimplexing	75d7f675f7	fix: reload video with new source while preserving playback position	2025-07-25 13:58:26 +08:00
zimplexing	9cbd23c36a	refactor: improve focus management and input handling in LoginModal	2025-07-25 13:34:11 +08:00
zimplexing	3fa2eb3159	feat: add useKeepAwake to LivePlayer and update version to 1.2.7	2025-07-21 19:03:12 +08:00
zimplexing	e4e4417ef6	feat: enhance LivePlayer messages with localized text and improve M3U parsing logic	2025-07-21 14:06:44 +08:00
Xin	64cdcb78b6	Merge pull request #73 from Moon3r/fix-m3u-without-extinf Fix fetch m3u failed when m3u file without extinf.	2025-07-21 11:04:35 +08:00
Moon3r	809422f702	Fix fetch m3u failed when m3u file without extinf.	2025-07-21 10:16:42 +08:00
Xin	1c9b3b2553	Update README.md	2025-07-21 09:16:01 +08:00
Xin	e02b3c512f	Update README.md	2025-07-21 09:14:50 +08:00
zimplexing	fe05525805	fix: add padding to badge text for improved spacing	2025-07-18 23:00:42 +08:00
zimplexing	1be777825b	fix: update VideoCard styles for improved visual consistency and accessibility	2025-07-18 22:57:56 +08:00
zimplexing	813ca40576	chore: bump version to 1.2.5 in package.json	2025-07-18 22:21:53 +08:00
zimplexing	4c633febdc	feat: update color scheme and styles across components for improved UI consistency	2025-07-18 22:21:33 +08:00
zimplexing	2fd30c8fd7	chore: bump version to 1.2.4 in package.json	2025-07-18 19:59:42 +08:00
zimplexing	f09f103d59	feat: add favorites screen and integrate it into navigation; enhance detail screen with favorite toggle functionality	2025-07-18 19:57:39 +08:00