feat: add useKeepAwake to LivePlayer and update version to 1.2.7

feat: enhance LivePlayer messages with localized text and improve M3U parsing logic
Merge pull request #73 from Moon3r/fix-m3u-without-extinf
2026-02-10 00:44:42 +08:00 · 2025-07-21 19:03:12 +08:00 · 2025-07-21 14:06:44 +08:00 · 2025-07-21 11:04:35 +08:00 · 2025-07-21 10:16:42 +08:00 · 2025-07-21 09:16:01 +08:00
35 changed files with 677 additions and 232 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

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

 ## 部署

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

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

 ## 其他

@@ -92,9 +93,9 @@ yarn android-tv
 ## 📸 应用截图

 ![首页界面](screenshot/image.png)
-![详情页面](screenshot/image1.png)
-![搜索界面](screenshot/image3.png)
 ![视频播放](screenshot/image2.png)
+![搜索界面](screenshot/image3.png)
+![详情页面](screenshot/image1.png)

 ## 📝 License

--- 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
@@ -4,6 +4,7 @@ import { useLocalSearchParams, useRouter } from "expo-router";
 import { ThemedView } from "@/components/ThemedView";
 import { ThemedText } from "@/components/ThemedText";
 import { StyledButton } from "@/components/StyledButton";
+import VideoLoadingAnimation from "@/components/VideoLoadingAnimation";
 import useDetailStore from "@/stores/detailStore";
 import { FontAwesome } from "@expo/vector-icons";

@@ -49,11 +50,7 @@ export default function DetailScreen() {
  };

  if (loading) {
-    return (
-      <ThemedView style={styles.centered}>
-        <ActivityIndicator size="large" />
-      </ThemedView>
-    );
+    return <VideoLoadingAnimation showProgressBar={false} />;
  }

  if (error) {
@@ -80,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>
@@ -104,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}>
@@ -170,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",
@@ -194,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,
@@ -233,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,27 +1,19 @@
 import React, { useEffect } from "react";
-import { View, FlatList, StyleSheet, ActivityIndicator, Image, Pressable } from "react-native";
-import { useRouter } from "expo-router";
+import { View, FlatList, 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";

 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 },
-    });
-  };
-
  if (loading) {
    return (
      <ThemedView style={styles.centered}>
@@ -46,17 +38,22 @@ export default function FavoritesScreen() {
    );
  }

-  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>
-  );
+  const renderItem = ({ item }: { item: Favorite & { key: string } }) => {
+    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}
+      />
+    );
+  };

  return (
    <ThemedView style={styles.container}>
@@ -67,7 +64,7 @@ export default function FavoritesScreen() {
        data={favorites}
        renderItem={renderItem}
        keyExtractor={(item) => item.key}
-        numColumns={3}
+        numColumns={5}
        contentContainerStyle={styles.list}
      />
    </ThemedView>
@@ -99,26 +96,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
@@ -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" })}
--- 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
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from "react";
-import { StyleSheet, TouchableOpacity, ActivityIndicator, BackHandler, AppState, AppStateStatus } from "react-native";
+import { StyleSheet, TouchableOpacity, BackHandler, AppState, AppStateStatus, View } from "react-native";
 import { useLocalSearchParams, useRouter } from "expo-router";
 import { Video, ResizeMode } from "expo-av";
 import { useKeepAwake } from "expo-keep-awake";
@@ -8,8 +8,8 @@ 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 { LoadingOverlay } from "@/components/LoadingOverlay";
+// import { NextEpisodeOverlay } from "@/components/NextEpisodeOverlay";
+import VideoLoadingAnimation from "@/components/VideoLoadingAnimation";
 import useDetailStore from "@/stores/detailStore";
 import { useTVRemoteHandler } from "@/hooks/useTVRemoteHandler";
 import Toast from "react-native-toast-message";
@@ -42,13 +42,13 @@ export default function PlayScreen() {
  const {
    isLoading,
    showControls,
-    showNextEpisodeOverlay,
+    // showNextEpisodeOverlay,
    initialPosition,
    introEndTime,
    setVideoRef,
    handlePlaybackStatusUpdate,
    setShowControls,
-    setShowNextEpisodeOverlay,
+    // setShowNextEpisodeOverlay,
    reset,
    loadVideo,
  } = usePlayerStore();
@@ -96,12 +96,27 @@ export default function PlayScreen() {
    return () => backHandler.remove();
  }, [showControls, setShowControls, router]);

+  useEffect(() => {
+    let timeoutId: NodeJS.Timeout | null = null;
+
+    if (isLoading) {
+      timeoutId = setTimeout(() => {
+        if (usePlayerStore.getState().isLoading) {
+          usePlayerStore.setState({ isLoading: false });
+          Toast.show({ type: "error", text1: "播放超时，请重试" });
+        }
+      }, 60000); // 1 minute
+    }
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [isLoading]);
+
  if (!detail) {
-    return (
-      <ThemedView style={[styles.container, styles.centered]}>
-        <ActivityIndicator size="large" color="#fff" />
-      </ThemedView>
-    );
+    return <VideoLoadingAnimation showProgressBar />;
  }

  return (
@@ -111,7 +126,6 @@ export default function PlayScreen() {
          ref={videoRef}
          style={styles.videoPlayer}
          source={{ uri: currentEpisode?.url || "" }}
-          usePoster
          posterSource={{ uri: detail?.poster ?? "" }}
          resizeMode={ResizeMode.CONTAIN}
          onPlaybackStatusUpdate={handlePlaybackStatusUpdate}
@@ -122,10 +136,6 @@ export default function PlayScreen() {
            }
            usePlayerStore.setState({ isLoading: false });
          }}
-          onError={() => {
-            usePlayerStore.setState({ isLoading: false });
-            Toast.show({ type: "error", text1: "播放失败，请更换源后重试" });
-          }}
          onLoadStart={() => usePlayerStore.setState({ isLoading: true })}
          useNativeControls={false}
          shouldPlay
@@ -135,9 +145,13 @@ export default function PlayScreen() {

        <SeekingBar />

-        <LoadingOverlay visible={isLoading} />
+        {isLoading && (
+          <View style={styles.videoContainer}>
+            <VideoLoadingAnimation showProgressBar />
+          </View>
+        )}

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

      <EpisodeSelectionModal />
--- a/app/search.tsx
+++ b/app/search.tsx
@@ -1,8 +1,9 @@
 import React, { useState, useRef, useEffect } from "react";
-import { View, TextInput, StyleSheet, FlatList, ActivityIndicator, Alert, Keyboard } from "react-native";
+import { View, TextInput, StyleSheet, FlatList, Alert, Keyboard } from "react-native";
 import { ThemedView } from "@/components/ThemedView";
 import { ThemedText } from "@/components/ThemedText";
 import VideoCard from "@/components/VideoCard.tv";
+import VideoLoadingAnimation from "@/components/VideoLoadingAnimation";
 import { api, SearchResult } from "@/services/api";
 import { Search, QrCode } from "lucide-react-native";
 import { StyledButton } from "@/components/StyledButton";
@@ -10,6 +11,7 @@ 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";

 export default function SearchScreen() {
  const [keyword, setKeyword] = useState("");
@@ -100,7 +102,7 @@ export default function SearchScreen() {
            {
              backgroundColor: colorScheme === "dark" ? "#2c2c2e" : "#f0f0f0",
              color: colorScheme === "dark" ? "white" : "black",
-              borderColor: isInputFocused ? "#007bff" : "transparent",
+              borderColor: isInputFocused ? Colors.dark.primary : "transparent",
            },
          ]}
          placeholder="搜索电影、剧集..."
@@ -121,9 +123,7 @@ export default function SearchScreen() {
      </View>

      {loading ? (
-        <View style={styles.centerContainer}>
-          <ActivityIndicator size="large" />
-        </View>
+        <VideoLoadingAnimation showProgressBar={false} />
      ) : error ? (
        <View style={styles.centerContainer}>
          <ThemedText style={styles.errorText}>{error}</ThemedText>
--- 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);
@@ -111,18 +110,18 @@ export default function SettingsScreen() {
      ),
      key: "livestream",
    },
-    {
-      component: (
-        <VideoSourceSection
-          onChanged={markAsChanged}
-          onFocus={() => {
-            setCurrentFocusIndex(3);
-            setCurrentSection("videoSource");
-          }}
-        />
-      ),
-      key: "videoSource",
-    },
+    // {
+    //   component: (
+    //     <VideoSourceSection
+    //       onChanged={markAsChanged}
+    //       onFocus={() => {
+    //         setCurrentFocusIndex(3);
+    //         setCurrentSection("videoSource");
+    //       }}
+    //     />
+    //   ),
+    //   key: "videoSource",
+    // },
  ];

  // TV遥控器事件处理
--- 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,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import { Modal, View, TextInput, StyleSheet, ActivityIndicator, useTVEventHandler } from "react-native";
+import { usePathname } from "expo-router";
 import Toast from "react-native-toast-message";
 import useAuthStore from "@/stores/authStore";
 import { useSettingsStore } from "@/stores/settingsStore";
@@ -20,9 +21,11 @@ const LoginModal = () => {
  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) {
+    if (!evt || !isLoginModalVisible || isSettingsPage) {
      return;
    }

@@ -48,7 +51,7 @@ const LoginModal = () => {
  useTVEventHandler(tvEventHandler);

  useEffect(() => {
-    if (isLoginModalVisible) {
+    if (isLoginModalVisible && !isSettingsPage) {
      const isUsernameVisible = serverConfig?.StorageType !== "localstorage";
      setTimeout(() => {
        if (isUsernameVisible) {
@@ -58,7 +61,7 @@ const LoginModal = () => {
        }
      }, 200);
    }
-  }, [isLoginModalVisible, serverConfig]);
+  }, [isLoginModalVisible, serverConfig, isSettingsPage]);

  const handleLogin = async () => {
    const isLocalStorage = serverConfig?.StorageType === "localstorage";
@@ -83,7 +86,12 @@ const LoginModal = () => {
  };

  return (
-    <Modal transparent={true} visible={isLoginModalVisible} animationType="fade" onRequestClose={hideLoginModal}>
+    <Modal
+      transparent={true}
+      visible={isLoginModalVisible && !isSettingsPage}
+      animationType="fade"
+      onRequestClose={hideLoginModal}
+    >
      <View style={styles.overlay}>
        <ThemedView style={styles.container}>
          <ThemedText style={styles.title}>需要登录</ThemedText>
--- 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
@@ -72,7 +72,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
@@ -6,6 +6,7 @@ import { Heart, Star, Play, Trash2 } from "lucide-react-native";
 import { FavoriteManager, PlayRecordManager } from "@/services/storage";
 import { API, api } from "@/services/api";
 import { ThemedText } from "@/components/ThemedText";
+import { Colors } from "@/constants/Colors";

 interface VideoCardProps {
  id: string;
@@ -209,6 +210,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 +294,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 +316,7 @@ const styles = StyleSheet.create({
    fontWeight: "bold",
  },
  continueLabel: {
-    color: "#ff5252",
+    color: Colors.dark.primary,
    fontSize: 12,
  },
 });
--- a/components/VideoLoadingAnimation.tsx
+++ b/components/VideoLoadingAnimation.tsx
@@ -0,0 +1,334 @@
+import React, { useEffect, useRef } from "react";
+import { View, StyleSheet, Animated, Easing } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+
+interface VideoLoadingAnimationProps {
+  showProgressBar?: boolean;
+}
+
+const VideoLoadingAnimation: React.FC<VideoLoadingAnimationProps> = ({ showProgressBar = true }) => {
+  const floatAnim = useRef(new Animated.Value(0)).current;
+  const pulseAnim = useRef(new Animated.Value(0)).current;
+  const bounceAnims = [
+    useRef(new Animated.Value(0)).current,
+    useRef(new Animated.Value(0)).current,
+    useRef(new Animated.Value(0)).current,
+  ];
+  const progressAnim = useRef(new Animated.Value(0)).current;
+  const gradientAnim = useRef(new Animated.Value(0)).current;
+  const textFadeAnim = useRef(new Animated.Value(0)).current;
+  const shapeAnims = [
+    useRef(new Animated.Value(0)).current,
+    useRef(new Animated.Value(0)).current,
+    useRef(new Animated.Value(0)).current,
+    useRef(new Animated.Value(0)).current,
+  ];
+
+  useEffect(() => {
+    const floatAnimation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(floatAnim, {
+          toValue: -20,
+          duration: 1500,
+          useNativeDriver: true,
+          easing: Easing.inOut(Easing.ease),
+        }),
+        Animated.timing(floatAnim, {
+          toValue: 0,
+          duration: 1500,
+          useNativeDriver: true,
+          easing: Easing.inOut(Easing.ease),
+        }),
+      ])
+    );
+
+    const pulseAnimation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulseAnim, {
+          toValue: 1,
+          duration: 1000,
+          useNativeDriver: true,
+          easing: Easing.inOut(Easing.ease),
+        }),
+        Animated.timing(pulseAnim, {
+          toValue: 0,
+          duration: 1000,
+          useNativeDriver: true,
+          easing: Easing.inOut(Easing.ease),
+        }),
+      ])
+    );
+
+    const bounceAnimations = bounceAnims.map((anim, i) =>
+      Animated.loop(
+        Animated.sequence([
+          Animated.delay(i * 160),
+          Animated.timing(anim, {
+            toValue: 1,
+            duration: 700,
+            useNativeDriver: true,
+            easing: Easing.inOut(Easing.ease),
+          }),
+          Animated.timing(anim, {
+            toValue: 0,
+            duration: 700,
+            useNativeDriver: true,
+            easing: Easing.inOut(Easing.ease),
+          }),
+        ])
+      )
+    );
+
+    const progressAnimation = Animated.loop(
+      Animated.timing(progressAnim, {
+        toValue: 1,
+        duration: 4000,
+        useNativeDriver: false, // width animation not supported by native driver
+        easing: Easing.inOut(Easing.ease),
+      })
+    );
+
+    const gradientAnimation = Animated.loop(
+      Animated.timing(gradientAnim, {
+        toValue: 1,
+        duration: 2000,
+        useNativeDriver: false, // gradient animation not supported by native driver
+        easing: Easing.inOut(Easing.ease),
+      })
+    );
+
+    const textFadeAnimation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(textFadeAnim, {
+          toValue: 1,
+          duration: 1000,
+          useNativeDriver: true,
+          easing: Easing.inOut(Easing.ease),
+        }),
+        Animated.timing(textFadeAnim, {
+          toValue: 0,
+          duration: 1000,
+          useNativeDriver: true,
+          easing: Easing.inOut(Easing.ease),
+        }),
+      ])
+    );
+
+    const shapeAnimations = shapeAnims.map((anim, i) =>
+      Animated.loop(
+        Animated.sequence([
+          Animated.delay(i * 2000),
+          Animated.timing(anim, {
+            toValue: 1,
+            duration: 8000,
+            useNativeDriver: true,
+            easing: Easing.inOut(Easing.ease),
+          }),
+        ])
+      )
+    );
+
+    Animated.parallel([
+      floatAnimation,
+      pulseAnimation,
+      ...bounceAnimations,
+      progressAnimation,
+      gradientAnimation,
+      textFadeAnimation,
+      ...shapeAnimations,
+    ]).start();
+  }, []);
+
+  const animatedStyles = {
+    float: {
+      transform: [{ translateY: floatAnim }],
+    },
+    pulse: {
+      opacity: pulseAnim.interpolate({ inputRange: [0, 1], outputRange: [1, 0.7] }),
+      transform: [
+        { translateX: -12.5 },
+        { translateY: -15 },
+        {
+          scale: pulseAnim.interpolate({ inputRange: [0, 1], outputRange: [1, 1.1] }),
+        },
+      ],
+    },
+    bounce: bounceAnims.map((anim) => ({
+      transform: [{ scale: anim.interpolate({ inputRange: [0, 1], outputRange: [0.8, 1.2] }) }],
+      opacity: anim.interpolate({ inputRange: [0, 1], outputRange: [0.5, 1] }),
+    })),
+    progress: {
+      width: progressAnim.interpolate({
+        inputRange: [0, 0.7, 1],
+        outputRange: ["0%", "100%", "100%"],
+      }),
+    },
+    textFade: {
+      opacity: textFadeAnim.interpolate({ inputRange: [0, 1], outputRange: [0.6, 1] }),
+    },
+    shapes: shapeAnims.map((anim, i) => ({
+      transform: [
+        {
+          translateY: anim.interpolate({
+            inputRange: [0, 0.33, 0.66, 1],
+            outputRange: [0, -30, 10, 0],
+          }),
+        },
+        {
+          rotate: anim.interpolate({
+            inputRange: [0, 1],
+            outputRange: ["0deg", "360deg"],
+          }),
+        },
+      ],
+    })),
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.bgShapes}>
+        <Animated.View style={[styles.shape, styles.shape1, animatedStyles.shapes[0]]} />
+        <Animated.View style={[styles.shape, styles.shape2, animatedStyles.shapes[1]]} />
+        <Animated.View style={[styles.shape, styles.shape3, animatedStyles.shapes[2]]} />
+        <Animated.View style={[styles.shape, styles.shape4, animatedStyles.shapes[3]]} />
+      </View>
+      <View style={styles.loadingContainer}>
+        <Animated.View style={[styles.videoIcon, animatedStyles.float]}>
+          <View style={styles.videoFrame}>
+            <Animated.View style={[styles.playButton, animatedStyles.pulse]} />
+          </View>
+        </Animated.View>
+
+        {/* <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> */}
+
+        {showProgressBar && (
+          <View style={styles.progressBar}>
+            <Animated.View style={[styles.progressFill, animatedStyles.progress]}>
+              <LinearGradient
+                colors={["#00bb5e", "#feff5f"]}
+                style={StyleSheet.absoluteFill}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 0 }}
+              />
+            </Animated.View>
+          </View>
+        )}
+
+        <Animated.Text style={[styles.loadingText, animatedStyles.textFade]}>正在加载视频</Animated.Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+  },
+  loadingContainer: {
+    alignItems: "center",
+    zIndex: 10,
+  },
+  videoIcon: {
+    width: 100,
+    height: 100,
+    marginBottom: 30,
+  },
+  videoFrame: {
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    borderWidth: 3,
+    borderColor: "rgba(255, 255, 255, 0.2)",
+    borderRadius: 12,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  playButton: {
+    width: 0,
+    height: 0,
+    borderStyle: "solid",
+    borderLeftWidth: 25,
+    borderLeftColor: "rgba(255, 255, 255, 0.9)",
+    borderTopWidth: 15,
+    borderTopColor: "transparent",
+    borderBottomWidth: 15,
+    borderBottomColor: "transparent",
+  },
+  loadingDots: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: 8,
+    marginBottom: 20,
+  },
+  dot: {
+    width: 12,
+    height: 12,
+    backgroundColor: "rgba(255, 255, 255, 0.9)",
+    borderRadius: 6,
+  },
+  progressBar: {
+    width: 300,
+    height: 6,
+    backgroundColor: "rgba(255, 255, 255, 0.1)",
+    borderRadius: 3,
+    marginVertical: 20,
+    overflow: "hidden",
+  },
+  progressFill: {
+    height: "100%",
+    borderRadius: 3,
+  },
+  loadingText: {
+    color: "rgba(255, 255, 255, 0.9)",
+    fontSize: 18,
+    fontWeight: "300",
+    letterSpacing: 2,
+    marginTop: 10,
+  },
+  bgShapes: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: 1,
+  },
+  shape: {
+    position: "absolute",
+    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    borderRadius: 50,
+  },
+  shape1: {
+    width: 80,
+    height: 80,
+    top: "20%",
+    left: "10%",
+  },
+  shape2: {
+    width: 60,
+    height: 60,
+    top: "60%",
+    right: "15%",
+  },
+  shape3: {
+    width: 100,
+    height: 100,
+    bottom: "20%",
+    left: "20%",
+  },
+  shape4: {
+    width: 40,
+    height: 40,
+    top: "30%",
+    right: "30%",
+  },
+});
+
+export default VideoLoadingAnimation;
--- 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.1.2",
+  "version": "1.2.7",
  "scripts": {
    "start": "EXPO_USE_METRO_WORKSPACE_ROOT=1 expo start",
    "start-tv": "EXPO_TV=1 EXPO_USE_METRO_WORKSPACE_ROOT=1 expo start",
@@ -36,6 +36,7 @@
    "expo-build-properties": "~0.12.3",
    "expo-constants": "~16.0.2",
    "expo-font": "~12.0.7",
+    "expo-linear-gradient": "~13.0.2",
    "expo-linking": "~6.3.1",
    "expo-router": "~3.5.16",
    "expo-splash-screen": "~0.27.5",
--- a/screenshot/image.png
+++ b/screenshot/image.png
--- a/screenshot/image1.png
+++ b/screenshot/image1.png
--- a/screenshot/image2.png
+++ b/screenshot/image2.png
--- a/screenshot/image3.png
+++ b/screenshot/image3.png
--- 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;
@@ -121,7 +120,7 @@ export class API {
  }

  async getFavorites(key?: string): Promise<Record<string, Favorite> | Favorite | null> {
-    const url = key ? `/api/favorites?key=${key}` : "/api/favorites";
+    const url = key ? `/api/favorites?key=${encodeURIComponent(key)}` : "/api/favorites";
    const response = await this._fetch(url);
    return response.json();
  }
@@ -136,7 +135,7 @@ export class API {
  }

  async deleteFavorite(key?: string): Promise<{ success: boolean }> {
-    const url = key ? `/api/favorites?key=${key}` : "/api/favorites";
+    const url = key ? `/api/favorites?key=${encodeURIComponent(key)}` : "/api/favorites";
    const response = await this._fetch(url, { method: "DELETE" });
    return response.json();
  }
@@ -156,7 +155,7 @@ export class API {
  }

  async deletePlayRecord(key?: string): Promise<{ success: boolean }> {
-    const url = key ? `/api/playrecords?key=${key}` : "/api/playrecords";
+    const url = key ? `/api/playrecords?key=${encodeURIComponent(key)}` : "/api/playrecords";
    const response = await this._fetch(url, { method: "DELETE" });
    return response.json();
  }
--- 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
@@ -1,6 +1,7 @@
 import { create } from "zustand";
 import Cookies from "@react-native-cookies/cookies";
 import { api } from "@/services/api";
+import { useSettingsStore } from "./settingsStore";

 interface AuthState {
  isLoggedIn: boolean;
@@ -22,11 +23,21 @@ const useAuthStore = create<AuthState>((set) => ({
      return;
    }
    try {
+      const serverConfig = useSettingsStore.getState().serverConfig;
      const cookies = await Cookies.get(api.baseURL);
-      const isLoggedIn = cookies && !!cookies.auth;
-      set({ isLoggedIn });
-      if (!isLoggedIn) {
-        set({ isLoginModalVisible: true });
+      if (serverConfig && serverConfig.StorageType === "localstorage" && !cookies.auth) {
+        const loginResult = await api.login().catch(() => {
+          set({ isLoggedIn: false, isLoginModalVisible: true });
+        });
+        if (loginResult && loginResult.ok) {
+          set({ isLoggedIn: true });
+        }
+      } else {
+        const isLoggedIn = cookies && !!cookies.auth;
+        set({ isLoggedIn });
+        if (!isLoggedIn) {
+          set({ isLoginModalVisible: true });
+        }
      }
    } catch (error) {
      console.info("Failed to check login status:", error);
--- 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
@@ -27,7 +27,13 @@ interface PlayerState {
  introEndTime?: number;
  outroStartTime?: number;
  setVideoRef: (ref: RefObject<Video>) => void;
-  loadVideo: (options: {source: string, id: string, title: string; episodeIndex: number, position?: number}) => Promise<void>;
+  loadVideo: (options: {
+    source: string;
+    id: string;
+    title: string;
+    episodeIndex: number;
+    position?: number;
+  }) => Promise<void>;
  playEpisode: (index: number) => void;
  togglePlayPause: () => void;
  seek: (duration: number) => void;
@@ -41,8 +47,9 @@ interface PlayerState {
  setOutroStartTime: () => void;
  reset: () => void;
  _seekTimeout?: NodeJS.Timeout;
+  _isRecordSaveThrottled: boolean;
  // Internal helper
-  _savePlayRecord: (updates?: Partial<PlayRecord>) => void;
+  _savePlayRecord: (updates?: Partial<PlayRecord>, options?: { immediate?: boolean }) => void;
 }

 const usePlayerStore = create<PlayerState>((set, get) => ({
@@ -62,6 +69,7 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
  introEndTime: undefined,
  outroStartTime: undefined,
  _seekTimeout: undefined,
+  _isRecordSaveThrottled: false,

  setVideoRef: (ref) => set({ videoRef: ref }),

@@ -81,7 +89,7 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
        console.info("Detail not found after initialization");
        return;
      }
-    };
+    }

    try {
      const playRecord = await PlayRecordManager.get(detail.source, detail.id.toString());
@@ -170,7 +178,7 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
    if (existingIntroEndTime) {
      // Clear the time
      set({ introEndTime: undefined });
-      get()._savePlayRecord({ introEndTime: undefined });
+      get()._savePlayRecord({ introEndTime: undefined }, { immediate: true });
      Toast.show({
        type: "info",
        text1: "已清除片头时间",
@@ -179,7 +187,7 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
      // Set the time
      const newIntroEndTime = status.positionMillis;
      set({ introEndTime: newIntroEndTime });
-      get()._savePlayRecord({ introEndTime: newIntroEndTime });
+      get()._savePlayRecord({ introEndTime: newIntroEndTime }, { immediate: true });
      Toast.show({
        type: "success",
        text1: "设置成功",
@@ -196,7 +204,7 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
    if (existingOutroStartTime) {
      // Clear the time
      set({ outroStartTime: undefined });
-      get()._savePlayRecord({ outroStartTime: undefined });
+      get()._savePlayRecord({ outroStartTime: undefined }, { immediate: true });
      Toast.show({
        type: "info",
        text1: "已清除片尾时间",
@@ -206,7 +214,7 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
      if (!status.durationMillis) return;
      const newOutroStartTime = status.durationMillis - status.positionMillis;
      set({ outroStartTime: newOutroStartTime });
-      get()._savePlayRecord({ outroStartTime: newOutroStartTime });
+      get()._savePlayRecord({ outroStartTime: newOutroStartTime }, { immediate: true });
      Toast.show({
        type: "success",
        text1: "设置成功",
@@ -215,7 +223,18 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
    }
  },

-  _savePlayRecord: (updates = {}) => {
+  _savePlayRecord: (updates = {}, options = {}) => {
+    const { immediate = false } = options;
+    if (!immediate) {
+      if (get()._isRecordSaveThrottled) {
+        return;
+      }
+      set({ _isRecordSaveThrottled: true });
+      setTimeout(() => {
+        set({ _isRecordSaveThrottled: false });
+      }, 10000); // 10 seconds
+    }
+
    const { detail } = useDetailStore.getState();
    const { currentEpisodeIndex, episodes, status, introEndTime, outroStartTime } = get();
    if (detail && status?.isLoaded) {
@@ -235,6 +254,7 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
        ...existingRecord,
        ...updates,
      });
+      console.log("Play record saved")
    }
  },

--- a/stores/settingsStore.ts
+++ b/stores/settingsStore.ts
@@ -68,14 +68,35 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
  setVideoSource: (config) => set({ videoSource: config }),
  saveSettings: async () => {
    const { apiBaseUrl, m3uUrl, remoteInputEnabled, videoSource } = get();
+
+    let processedApiBaseUrl = apiBaseUrl.trim();
+    if (processedApiBaseUrl.endsWith("/")) {
+      processedApiBaseUrl = processedApiBaseUrl.slice(0, -1);
+    }
+
+    if (!/^https?:\/\//i.test(processedApiBaseUrl)) {
+      const hostPart = processedApiBaseUrl.split("/")[0];
+      // Simple check for IP address format.
+      const isIpAddress = /^((\d{1,3}\.){3}\d{1,3})(:\d+)?$/.test(hostPart);
+      // Check if the domain includes a port.
+      const hasPort = /:\d+/.test(hostPart);
+
+      if (isIpAddress || hasPort) {
+        processedApiBaseUrl = "http://" + processedApiBaseUrl;
+      } else {
+        processedApiBaseUrl = "https://" + processedApiBaseUrl;
+      }
+    }
+
    await SettingsManager.save({
-      apiBaseUrl,
+      apiBaseUrl: processedApiBaseUrl,
      m3uUrl,
      remoteInputEnabled,
      videoSource,
    });
-    api.setBaseUrl(apiBaseUrl);
-    set({ isModalVisible: false });
+    api.setBaseUrl(processedApiBaseUrl);
+    // Also update the URL in the state so the input field shows the processed URL
+    set({ isModalVisible: false, apiBaseUrl: processedApiBaseUrl });
    await get().fetchServerConfig();
  },
  showModal: () => set({ isModalVisible: true }),
--- a/yarn.lock
+++ b/yarn.lock
@@ -4587,6 +4587,11 @@ expo-keep-awake@~13.0.2:
  resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-13.0.2.tgz#5ef31311a339671eec9921b934fdd90ab9652b0e"
  integrity sha512-kKiwkVg/bY0AJ5q1Pxnm/GvpeB6hbNJhcFsoOWDh2NlpibhCLaHL826KHUM+WsnJRbVRxJ+K9vbPRHEMvFpVyw==

+expo-linear-gradient@~13.0.2:
+  version "13.0.2"
+  resolved "https://registry.yarnpkg.com/expo-linear-gradient/-/expo-linear-gradient-13.0.2.tgz#21bd7bc7c71ef4f7c089521daa16db729d2aec5f"
+  integrity sha512-EDcILUjRKu4P1rtWcwciN6CSyGtH7Bq4ll3oTRV7h3h8oSzSilH1g6z7kTAMlacPBKvMnkkWOGzW6KtgMKEiTg==
+
 expo-linking@~6.3.1:
  version "6.3.1"
  resolved "https://registry.yarnpkg.com/expo-linking/-/expo-linking-6.3.1.tgz#05aef8a42bd310391d0b00644be40d80ece038d9"
@@ -8804,7 +8809,16 @@ string-length@^5.0.1:
    char-regex "^2.0.0"
    strip-ansi "^7.0.1"

-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
  version "4.2.3"
  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -8895,7 +8909,7 @@ string_decoder@~1.1.1:
  dependencies:
    safe-buffer "~5.1.0"

-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -8909,6 +8923,13 @@ strip-ansi@^5.0.0, strip-ansi@^5.2.0:
  dependencies:
    ansi-regex "^4.1.0"

+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1:
  version "7.1.0"
  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -9740,7 +9761,7 @@ word-wrap@^1.2.5:
  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
  integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==

-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -9758,6 +9779,15 @@ wrap-ansi@^6.2.0:
    string-width "^4.1.0"
    strip-ansi "^6.0.0"

+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
  version "8.1.0"
  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
Author	SHA1	Message	Date
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
zimplexing	828a0b3d72	chore: bump version to 1.2.3 in package.json	2025-07-18 19:09:29 +08:00
zimplexing	e8a1ea2717	feat: update PlayScreen and VideoLoadingAnimation styles, and log play record saving in playerStore	2025-07-18 19:08:49 +08:00
zimplexing	bd7087264d	feat: add VideoLoadingAnimation component and integrate it into detail, play, and search screens for improved loading experience	2025-07-18 17:15:24 +08:00
zimplexing	990745eba9	feat: modify LoginModal to conditionally handle visibility based on pathname, preventing display on settings page	2025-07-18 12:19:29 +08:00
zimplexing	cab3e2ed12	feat: refactor playerStore to improve loadVideo and _savePlayRecord methods with enhanced options and throttling logic	2025-07-18 11:26:06 +08:00
zimplexing	3fdd1fc587	feat: update screenshot assets with new images	2025-07-17 22:15:50 +08:00
zimplexing	4b3d1c620b	chore: update version to 1.2.2 in package.json	2025-07-17 22:06:15 +08:00
zimplexing	1f694f9245	feat: add timeout handling for loading state with error notification	2025-07-17 22:04:28 +08:00
zimplexing	ec949029fa	feat: enhance saveSettings function to process API base URL and ensure valid format	2025-07-17 21:14:03 +08:00
Xin	2325b76f77	Update README.md	2025-07-17 12:19:22 +08:00
Xin	4473fd6ab3	Update README.md	2025-07-16 23:09:12 +08:00
zimplexing	c514a6d03e	chore: update version to 1.2.1 in package.json	2025-07-16 22:06:28 +08:00
zimplexing	f6baa0523c	feat: enhance authentication flow by adding server configuration check and login handling in authStore	2025-07-16 22:06:04 +08:00
zimplexing	9540aaa3b9	chore: update version to 1.2.0 in package.json	2025-07-16 21:31:21 +08:00
Xin	8a1c26991b	Merge pull request #38 from zimplexing/v1.2.0 Adapt moontv api	2025-07-16 21:29:51 +08:00