Merge pull request #94 from zimplexing/v1.2.8

refactor: Update scroll experience
2026-02-04 03:36:29 +08:00 · 2025-07-25 16:32:47 +08:00
parent 3fa2eb3159 d1f0a2eb87
commit 928432e81c
11 changed files with 384 additions and 266 deletions
--- a/app/favorites.tsx
+++ b/app/favorites.tsx
@@ -1,11 +1,12 @@
 import React, { useEffect } from "react";
-import { View, FlatList, StyleSheet, ActivityIndicator } from "react-native";
+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 { favorites, loading, error, fetchFavorites } = useFavoritesStore();
@@ -14,31 +15,7 @@ export default function FavoritesScreen() {
    fetchFavorites();
  }, [fetchFavorites]);

-  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 } }) => {
+  const renderItem = ({ item }: { item: Favorite & { key: string }; index: number }) => {
    const [source, id] = item.key.split("+");
    return (
      <VideoCard
@@ -60,12 +37,13 @@ export default function FavoritesScreen() {
      <View style={styles.headerContainer}>
        <ThemedText style={styles.headerTitle}>我的收藏</ThemedText>
      </View>
-      <FlatList
+      <CustomScrollView
        data={favorites}
        renderItem={renderItem}
-        keyExtractor={(item) => item.key}
        numColumns={5}
-        contentContainerStyle={styles.list}
+        loading={loading}
+        error={error}
+        emptyMessage="暂无收藏"
      />
    </ThemedView>
  );
--- 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}
@@ -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/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";
@@ -12,6 +12,7 @@ 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("");
@@ -35,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;
@@ -80,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}
@@ -95,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 ? 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>
@@ -129,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/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/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/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);
  };
--- a/components/VideoCard.tv.tsx
+++ b/components/VideoCard.tv.tsx
@@ -1,14 +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;
@@ -25,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;
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
  "name": "OrionTV",
  "private": true,
  "main": "expo-router/entry",
-  "version": "1.2.7",
+  "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/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/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);
    }
  },