Enhance responsive design and update dependencies

- Added expo-screen-orientation package to manage screen orientation. - Updated react-native-gesture-handler to version 2.27.1 for improved gesture handling. - Implemented responsive design features across multiple screens using the new useResponsive hook. - Refactored DetailScreen, HomeScreen, SearchScreen, and PlayScreen to adapt layouts based on screen size. - Introduced PlayerControlsMobile for optimized playback controls on mobile devices. - Adjusted button styles in StyledButton for better responsiveness.
Update README.md
2026-02-06 14:04:56 +08:00 · 2025-07-09 17:23:46 +08:00 · 2025-07-09 12:28:36 +08:00 · 2025-07-08 22:08:22 +08:00 · 2025-07-08 22:07:20 +08:00 · 2025-07-08 22:07:14 +08:00
33 changed files with 1911 additions and 1103 deletions
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": false,
+  "printWidth": 120
+}
--- a/README.md
+++ b/README.md
@@ -107,7 +107,11 @@ yarn android-tv

 #### 使用 demo 地址

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

 ## 📜 主要脚本

--- a/app/+not-found.tsx
+++ b/app/+not-found.tsx
@@ -1,13 +1,14 @@
-import {Link, Stack} from 'expo-router';
-import {StyleSheet} from 'react-native';
+import { Link, Stack } from "expo-router";
+import { StyleSheet } from "react-native";

-import {ThemedText} from '@/components/ThemedText';
-import {ThemedView} from '@/components/ThemedView';
+import { ThemedText } from "@/components/ThemedText";
+import { ThemedView } from "@/components/ThemedView";
+import React from "react";

 export default function NotFoundScreen() {
  return (
    <>
-      <Stack.Screen options={{title: 'Oops!'}} />
+      <Stack.Screen options={{ title: "Oops!" }} />
      <ThemedView style={styles.container}>
        <ThemedText type="title">This screen doesn't exist.</ThemedText>
        <Link href="/" style={styles.link}>
@@ -21,8 +22,8 @@ export default function NotFoundScreen() {
 const styles = StyleSheet.create({
  container: {
    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
    padding: 20,
  },
  link: {
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,25 +1,26 @@
-import {
-  DarkTheme,
-  DefaultTheme,
-  ThemeProvider,
-} from "@react-navigation/native";
+import { DarkTheme, DefaultTheme, ThemeProvider } from "@react-navigation/native";
 import { useFonts } from "expo-font";
 import { Stack } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import { useEffect } from "react";
 import { Platform } from "react-native";
+import Toast from "react-native-toast-message";

-import { useColorScheme } from "@/hooks/useColorScheme";
-import { initializeApi } from "@/services/api";
+import { useSettingsStore } from "@/stores/settingsStore";

 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();

 export default function RootLayout() {
-  const colorScheme = useColorScheme();
+  const colorScheme = "dark";
  const [loaded, error] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
  });
+  const initializeSettings = useSettingsStore((state) => state.loadSettings);
+
+  useEffect(() => {
+    initializeSettings();
+  }, [initializeSettings]);

  useEffect(() => {
    if (loaded || error) {
@@ -30,10 +31,6 @@ export default function RootLayout() {
    }
  }, [loaded, error]);

-  useEffect(() => {
-    initializeApi();
-  }, []);
-
  if (!loaded && !error) {
    return null;
  }
@@ -43,12 +40,11 @@ export default function RootLayout() {
      <Stack>
        <Stack.Screen name="index" options={{ headerShown: false }} />
        <Stack.Screen name="detail" options={{ headerShown: false }} />
-        {Platform.OS !== "web" && (
-          <Stack.Screen name="play" options={{ headerShown: false }} />
-        )}
+        {Platform.OS !== "web" && <Stack.Screen name="play" options={{ headerShown: false }} />}
        <Stack.Screen name="search" options={{ headerShown: false }} />
        <Stack.Screen name="+not-found" />
      </Stack>
+      <Toast />
    </ThemeProvider>
  );
 }
--- a/app/detail.tsx
+++ b/app/detail.tsx
@@ -1,15 +1,17 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { View, Text, StyleSheet, Image, ScrollView, ActivityIndicator } from 'react-native';
-import { useLocalSearchParams, useRouter } from 'expo-router';
-import { ThemedView } from '@/components/ThemedView';
-import { ThemedText } from '@/components/ThemedText';
-import { api, SearchResult } from '@/services/api';
-import { getResolutionFromM3U8 } from '@/services/m3u8';
-import { DetailButton } from '@/components/DetailButton';
+import React, { useEffect, useState, useRef } from "react";
+import { View, Text, StyleSheet, Image, ScrollView, ActivityIndicator, FlatList } from "react-native";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { ThemedView } from "@/components/ThemedView";
+import { ThemedText } from "@/components/ThemedText";
+import { api, SearchResult } from "@/services/api";
+import { getResolutionFromM3U8 } from "@/services/m3u8";
+import { StyledButton } from "@/components/StyledButton";
+import { useResponsive } from "@/hooks/useResponsive";

 export default function DetailScreen() {
  const { source, q } = useLocalSearchParams();
  const router = useRouter();
+  const { isMobile, screenWidth, numColumns } = useResponsive();
  const [searchResults, setSearchResults] = useState<(SearchResult & { resolution?: string | null })[]>([]);
  const [detail, setDetail] = useState<(SearchResult & { resolution?: string | null }) | null>(null);
  const [loading, setLoading] = useState(true);
@@ -24,7 +26,7 @@ export default function DetailScreen() {
    controllerRef.current = new AbortController();
    const signal = controllerRef.current.signal;

-    if (typeof q === 'string') {
+    if (typeof q === "string") {
      const fetchDetailData = async () => {
        setLoading(true);
        setSearchResults([]);
@@ -35,15 +37,15 @@ export default function DetailScreen() {
        try {
          const resources = await api.getResources(signal);
          if (!resources || resources.length === 0) {
-            setError('没有可用的播放源');
+            setError("没有可用的播放源");
            setLoading(false);
            return;
          }

          let foundFirstResult = false;
          // Prioritize source from params if available
-          if (typeof source === 'string') {
-            const index = resources.findIndex(r => r.key === source);
+          if (typeof source === "string") {
+            const index = resources.findIndex((r) => r.key === source);
            if (index > 0) {
              resources.unshift(resources.splice(index, 1)[0]);
            }
@@ -61,14 +63,14 @@ export default function DetailScreen() {
                    resolution = await getResolutionFromM3U8(searchResult.episodes[0], signal);
                  }
                } catch (e) {
-                  if ((e as Error).name !== 'AbortError') {
+                  if ((e as Error).name !== "AbortError") {
                    console.error(`Failed to get resolution for ${resource.name}`, e);
                  }
                }

                const resultWithResolution = { ...searchResult, resolution };

-                setSearchResults(prev => [...prev, resultWithResolution]);
+                setSearchResults((prev) => [...prev, resultWithResolution]);

                if (!foundFirstResult) {
                  setDetail(resultWithResolution);
@@ -77,19 +79,19 @@ export default function DetailScreen() {
                }
              }
            } catch (e) {
-              if ((e as Error).name !== 'AbortError') {
+              if ((e as Error).name !== "AbortError") {
                console.error(`Error searching in resource ${resource.name}:`, e);
              }
            }
          }

          if (!foundFirstResult) {
-            setError('未找到播放源');
+            setError("未找到播放源");
            setLoading(false);
          }
        } catch (e) {
-          if ((e as Error).name !== 'AbortError') {
-            setError(e instanceof Error ? e.message : '获取资源列表失败');
+          if ((e as Error).name !== "AbortError") {
+            setError(e instanceof Error ? e.message : "获取资源列表失败");
            setLoading(false);
          }
        } finally {
@@ -108,7 +110,7 @@ export default function DetailScreen() {
    if (!detail) return;
    controllerRef.current?.abort(); // Cancel any ongoing fetches
    router.push({
-      pathname: '/play',
+      pathname: "/play",
      params: {
        source: detail.source,
        id: detail.id.toString(),
@@ -147,9 +149,12 @@ export default function DetailScreen() {
  return (
    <ThemedView style={styles.container}>
      <ScrollView>
-        <View style={styles.topContainer}>
-          <Image source={{ uri: detail.poster }} style={styles.poster} />
-          <View style={styles.infoContainer}>
+        <View style={[styles.topContainer, isMobile && screenWidth < 600 && styles.topContainerMobile]}>
+          <Image
+            source={{ uri: detail.poster }}
+            style={[styles.poster, isMobile && screenWidth < 600 && styles.posterMobile]}
+          />
+          <View style={[styles.infoContainer, isMobile && screenWidth < 600 && styles.infoContainerMobile]}>
            <ThemedText style={styles.title} numberOfLines={1}>
              {detail.title}
            </ThemedText>
@@ -171,38 +176,52 @@ export default function DetailScreen() {
            </View>
            <View style={styles.sourceList}>
              {searchResults.map((item, index) => (
-                <DetailButton
+                <StyledButton
                  key={index}
                  onPress={() => setDetail(item)}
                  hasTVPreferredFocus={index === 0}
-                  style={[styles.sourceButton, detail?.source === item.source && styles.sourceButtonSelected]}
+                  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}`}
+                        {item.episodes.length > 99 ? "99+" : `${item.episodes.length}`} 集
                      </Text>
                    </View>
                  )}
                  {item.resolution && (
-                    <View style={[styles.badge, { backgroundColor: '#28a745' }]}>
+                    <View style={[styles.badge, { backgroundColor: "#28a745" }]}>
                      <Text style={styles.badgeText}>{item.resolution}</Text>
                    </View>
                  )}
-                </DetailButton>
+                </StyledButton>
              ))}
            </View>
          </View>
          <View style={styles.episodesContainer}>
            <ThemedText style={styles.episodesTitle}>播放列表</ThemedText>
-            <ScrollView contentContainerStyle={styles.episodeList}>
-              {detail.episodes.map((episode, index) => (
-                <DetailButton key={index} style={styles.episodeButton} onPress={() => handlePlay(episode, index)}>
-                  <ThemedText style={styles.episodeButtonText}>{`第 ${index + 1} 集`}</ThemedText>
-                </DetailButton>
-              ))}
-            </ScrollView>
+            <FlatList
+              data={detail.episodes}
+              renderItem={({ item, index }) => (
+                <StyledButton
+                  style={styles.episodeButton}
+                  onPress={() => handlePlay(item, index)}
+                  text={`第 ${index + 1} 集`}
+                  textStyle={styles.episodeButtonText}
+                />
+              )}
+              keyExtractor={(_item, index) => index.toString()}
+              numColumns={numColumns(80, 10)}
+              key={numColumns(80, 10)} // Re-render on column change
+              contentContainerStyle={styles.episodeList}
+              // The FlatList should not be scrollable itself, the parent ScrollView handles it.
+              // This can be achieved by making it non-scrollable and letting it expand.
+              // However, for performance, if the list is very long, a fixed height would be better.
+              // For now, we let the parent ScrollView handle scrolling.
+              scrollEnabled={false}
+            />
          </View>
        </View>
      </ScrollView>
@@ -212,33 +231,48 @@ export default function DetailScreen() {

 const styles = StyleSheet.create({
  container: { flex: 1 },
-  centered: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+  centered: { flex: 1, justifyContent: "center", alignItems: "center" },
  topContainer: {
-    flexDirection: 'row',
+    flexDirection: "row",
    padding: 20,
  },
+  topContainerMobile: {
+    flexDirection: "column",
+    alignItems: "center",
+  },
  poster: {
    width: 200,
    height: 300,
    borderRadius: 8,
  },
+  posterMobile: {
+    width: "80%",
+    height: undefined,
+    aspectRatio: 2 / 3, // Maintain aspect ratio
+    marginBottom: 20,
+  },
  infoContainer: {
    flex: 1,
    marginLeft: 20,
-    justifyContent: 'flex-start',
+    justifyContent: "flex-start",
+  },
+  infoContainerMobile: {
+    marginLeft: 0,
+    width: "100%",
+    alignItems: "center",
  },
  title: {
    fontSize: 28,
-    fontWeight: 'bold',
+    fontWeight: "bold",
    marginBottom: 10,
    paddingTop: 20,
  },
  metaContainer: {
-    flexDirection: 'row',
+    flexDirection: "row",
    marginBottom: 10,
  },
  metaText: {
-    color: '#aaa',
+    color: "#aaa",
    marginRight: 10,
    fontSize: 14,
  },
@@ -247,7 +281,7 @@ const styles = StyleSheet.create({
  },
  description: {
    fontSize: 14,
-    color: '#ccc',
+    color: "#ccc",
    lineHeight: 22,
  },
  bottomContainer: {
@@ -257,70 +291,52 @@ const styles = StyleSheet.create({
    marginTop: 20,
  },
  sourcesTitleContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
    marginBottom: 10,
  },
  sourcesTitle: {
    fontSize: 20,
-    fontWeight: 'bold',
+    fontWeight: "bold",
  },
  sourceList: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
+    flexDirection: "row",
+    flexWrap: "wrap",
  },
  sourceButton: {
-    backgroundColor: '#333',
-    paddingHorizontal: 15,
-    paddingVertical: 10,
-    borderRadius: 8,
-    margin: 5,
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderWidth: 2,
-    borderColor: 'transparent',
-  },
-  sourceButtonSelected: {
-    backgroundColor: '#007bff',
+    margin: 8,
  },
  sourceButtonText: {
-    color: 'white',
+    color: "white",
    fontSize: 16,
  },
  badge: {
-    backgroundColor: 'red',
+    backgroundColor: "red",
    borderRadius: 10,
    paddingHorizontal: 6,
    paddingVertical: 2,
    marginLeft: 8,
  },
  badgeText: {
-    color: 'white',
+    color: "white",
    fontSize: 12,
-    fontWeight: 'bold',
+    fontWeight: "bold",
  },
  episodesContainer: {
    marginTop: 20,
  },
  episodesTitle: {
    fontSize: 20,
-    fontWeight: 'bold',
+    fontWeight: "bold",
    marginBottom: 10,
  },
  episodeList: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
+    // flexDirection is now handled by FlatList's numColumns
  },
  episodeButton: {
-    backgroundColor: '#333',
-    paddingHorizontal: 20,
-    paddingVertical: 10,
-    borderRadius: 8,
    margin: 5,
-    borderWidth: 2,
-    borderColor: 'transparent',
  },
  episodeButtonText: {
-    color: 'white',
+    color: "white",
  },
 });
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,214 +1,72 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { View, StyleSheet, ActivityIndicator, FlatList, Pressable, Dimensions } from 'react-native';
-import { ThemedView } from '@/components/ThemedView';
-import { ThemedText } from '@/components/ThemedText';
-import { api } from '@/services/api';
-import { SearchResult } from '@/services/api';
-import { PlayRecord } from '@/services/storage';
-
-export type RowItem = (SearchResult | PlayRecord) & {
-  id: string;
-  source: string;
-  title: string;
-  poster: string;
-  progress?: number;
-  lastPlayed?: number;
-  episodeIndex?: number;
-  sourceName?: string;
-  totalEpisodes?: number;
-  year?: string;
-  rate?: string;
-};
-import VideoCard from '@/components/VideoCard.tv';
-import { PlayRecordManager } from '@/services/storage';
-import { useFocusEffect, useRouter } from 'expo-router';
-import { useColorScheme } from 'react-native';
-import { Search, Settings } from 'lucide-react-native';
-import { SettingsModal } from '@/components/SettingsModal';
-
-// --- 类别定义 ---
-interface Category {
-  title: string;
-  type?: 'movie' | 'tv' | 'record';
-  tag?: string;
-}
-
-const initialCategories: Category[] = [
-  { title: '最近播放', type: 'record' },
-  { title: '热门剧集', type: 'tv', tag: '热门' },
-  { title: '综艺', type: 'tv', tag: '综艺' },
-  { title: '热门电影', type: 'movie', tag: '热门' },
-  { title: '豆瓣 Top250', type: 'movie', tag: 'top250' },
-  { title: '儿童', type: 'movie', tag: '少儿' },
-  { title: '美剧', type: 'tv', tag: '美剧' },
-  { title: '韩剧', type: 'tv', tag: '韩剧' },
-  { title: '日剧', type: 'tv', tag: '日剧' },
-  { title: '日漫', type: 'tv', tag: '日本动画' },
-];
-
-const NUM_COLUMNS = 5;
-const { width } = Dimensions.get('window');
-const ITEM_WIDTH = width / NUM_COLUMNS - 24;
+import React, { useEffect, useCallback, useRef } from "react";
+import { View, StyleSheet, ActivityIndicator, FlatList, Pressable } from "react-native";
+import { ThemedView } from "@/components/ThemedView";
+import { ThemedText } from "@/components/ThemedText";
+import { api } from "@/services/api";
+import VideoCard from "@/components/VideoCard.tv";
+import { useFocusEffect, useRouter } from "expo-router";
+import { Search, Settings } from "lucide-react-native";
+import { SettingsModal } from "@/components/SettingsModal";
+import { StyledButton } from "@/components/StyledButton";
+import useHomeStore, { RowItem, Category } from "@/stores/homeStore";
+import { useSettingsStore } from "@/stores/settingsStore";
+import { useResponsive } from "@/hooks/useResponsive";

 export default function HomeScreen() {
  const router = useRouter();
-  const colorScheme = useColorScheme();
-
-  const [categories, setCategories] = useState<Category[]>(initialCategories);
-  const [selectedCategory, setSelectedCategory] = useState<Category>(categories[0]);
-  const [contentData, setContentData] = useState<RowItem[]>([]);
-
-  const [loading, setLoading] = useState(true);
-  const [loadingMore, setLoadingMore] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [isSettingsVisible, setSettingsVisible] = useState(false);
-
-  const [pageStart, setPageStart] = useState(0);
-  const [hasMore, setHasMore] = useState(true);
-
+  const { isMobile, screenWidth, numColumns } = useResponsive();
+  const colorScheme = "dark";
  const flatListRef = useRef<FlatList>(null);

-  // --- 数据获取逻辑 ---
-  const fetchPlayRecords = async () => {
-    const records = await PlayRecordManager.getAll();
-    return Object.entries(records)
-      .map(([key, record]) => {
-        const [source, id] = key.split('+');
-        return {
-          id,
-          source,
-          title: record.title,
-          poster: record.cover,
-          progress: record.play_time / record.total_time,
-          lastPlayed: record.save_time,
-          episodeIndex: record.index,
-          sourceName: record.source_name,
-          totalEpisodes: record.total_episodes,
-        } as RowItem;
-      })
-      .filter(record => record.progress !== undefined && record.progress > 0 && record.progress < 1)
-      .sort((a, b) => (b.lastPlayed || 0) - (a.lastPlayed || 0));
-  };
+  // Calculate item width based on screen size and number of columns
+  const itemWidth = isMobile ? screenWidth / numColumns(150, 16) - 24 : screenWidth / 5 - 24;
+  const calculatedNumColumns = numColumns(150, 16);

-  const fetchData = async (category: Category, start: number, preloadedRecords?: RowItem[]) => {
-    if (category.type === 'record') {
-      const records = preloadedRecords ?? (await fetchPlayRecords());
-      if (records.length === 0 && categories.some(c => c.type === 'record')) {
-        // 如果没有播放记录，则移除"最近播放"分类并选择第一个真实分类
-        const newCategories = categories.filter(c => c.type !== 'record');
-        setCategories(newCategories);
-        if (newCategories.length > 0) {
-          handleCategorySelect(newCategories[0]);
-        }
-      } else {
-        setContentData(records);
-        setHasMore(false);
-      }
-      setLoading(false);
-      return;
-    }
+  const {
+    categories,
+    selectedCategory,
+    contentData,
+    loading,
+    loadingMore,
+    error,
+    fetchInitialData,
+    loadMoreData,
+    selectCategory,
+    refreshPlayRecords,
+  } = useHomeStore();

-    if (!category.type || !category.tag) return;
+  const showSettingsModal = useSettingsStore((state) => state.showModal);

-    setLoadingMore(start > 0);
-    setError(null);
-
-    try {
-      const result = await api.getDoubanData(category.type, category.tag, 20, start);
-
-      if (result.list.length === 0) {
-        setHasMore(false);
-      } else {
-        const newItems = result.list.map(item => ({
-          ...item,
-          id: item.title, // 临时ID
-          source: 'douban',
-        })) as RowItem[];
-
-        setContentData(prev => (start === 0 ? newItems : [...prev, ...newItems]));
-        setPageStart(prev => prev + result.list.length);
-        setHasMore(true);
-      }
-    } catch (err: any) {
-      if (err.message === 'API_URL_NOT_SET') {
-        setError('请点击右上角设置按钮，配置您的 API 地址');
-      } else {
-        setError('加载失败，请重试');
-      }
-    } finally {
-      setLoading(false);
-      setLoadingMore(false);
-    }
-  };
-
-  // --- Effects ---
  useFocusEffect(
    useCallback(() => {
-      const manageRecordCategory = async () => {
-        const records = await fetchPlayRecords();
-        const hasRecords = records.length > 0;
-
-        setCategories(currentCategories => {
-          const recordCategoryExists = currentCategories.some(c => c.type === 'record');
-          if (hasRecords && !recordCategoryExists) {
-            // Add 'Recent Plays' if records exist and the tab doesn't
-            return [initialCategories[0], ...currentCategories];
-          }
-          return currentCategories;
-        });
-
-        // If 'Recent Plays' is selected, always refresh its data.
-        // This will also handle removing the tab if records have disappeared.
-        if (selectedCategory.type === 'record') {
-          loadInitialData(records);
-        }
-      };
-
-      manageRecordCategory();
-    }, [selectedCategory])
+      refreshPlayRecords();
+    }, [refreshPlayRecords])
  );

  useEffect(() => {
-    loadInitialData();
-  }, [selectedCategory]);
-
-  const loadInitialData = (records?: RowItem[]) => {
-    setLoading(true);
-    setContentData([]);
-    setPageStart(0);
-    setHasMore(true);
+    fetchInitialData();
    flatListRef.current?.scrollToOffset({ animated: false, offset: 0 });
-    fetchData(selectedCategory, 0, records);
-  };
-
-  const loadMoreData = () => {
-    if (loading || loadingMore || !hasMore || selectedCategory.type === 'record') return;
-    fetchData(selectedCategory, pageStart);
-  };
+  }, [selectedCategory, fetchInitialData]);

  const handleCategorySelect = (category: Category) => {
-    setSelectedCategory(category);
+    selectCategory(category);
  };

-  // --- 渲染组件 ---
  const renderCategory = ({ item }: { item: Category }) => {
-    const isSelected = selectedCategory.title === item.title;
+    const isSelected = selectedCategory?.title === item.title;
    return (
-      <Pressable
-        style={({ focused }) => [
-          styles.categoryButton,
-          isSelected && styles.categoryButtonSelected,
-          focused && styles.categoryButtonFocused,
-        ]}
+      <StyledButton
+        text={item.title}
        onPress={() => handleCategorySelect(item)}
-      >
-        <ThemedText style={[styles.categoryText, isSelected && styles.categoryTextSelected]}>{item.title}</ThemedText>
-      </Pressable>
+        isSelected={isSelected}
+        style={styles.categoryButton}
+        textStyle={styles.categoryText}
+      />
    );
  };

  const renderContentItem = ({ item }: { item: RowItem }) => (
-    <View style={styles.itemContainer}>
+    <View style={[styles.itemContainer, { width: itemWidth }]}>
      <VideoCard
        id={item.id}
        source={item.source}
@@ -217,11 +75,12 @@ export default function HomeScreen() {
        year={item.year}
        rate={item.rate}
        progress={item.progress}
+        playTime={item.play_time}
        episodeIndex={item.episodeIndex}
        sourceName={item.sourceName}
        totalEpisodes={item.totalEpisodes}
        api={api}
-        onRecordDeleted={loadInitialData} // For "Recent Plays"
+        onRecordDeleted={fetchInitialData} // For "Recent Plays"
      />
    </View>
  );
@@ -237,18 +96,16 @@ export default function HomeScreen() {
      <View style={styles.headerContainer}>
        <ThemedText style={styles.headerTitle}>首页</ThemedText>
        <View style={styles.rightHeaderButtons}>
-          <Pressable
-            style={({ focused }) => [styles.searchButton, focused && styles.searchButtonFocused]}
-            onPress={() => router.push({ pathname: '/search' })}
+          <StyledButton
+            style={styles.searchButton}
+            onPress={() => router.push({ pathname: "/search" })}
+            variant="ghost"
          >
-            <Search color={colorScheme === 'dark' ? 'white' : 'black'} size={24} />
-          </Pressable>
-          <Pressable
-            style={({ focused }) => [styles.searchButton, focused && styles.searchButtonFocused]}
-            onPress={() => setSettingsVisible(true)}
-          >
-            <Settings color={colorScheme === 'dark' ? 'white' : 'black'} size={24} />
-          </Pressable>
+            <Search color={colorScheme === "dark" ? "white" : "black"} size={24} />
+          </StyledButton>
+          <StyledButton style={styles.searchButton} onPress={showSettingsModal} variant="ghost">
+            <Settings color={colorScheme === "dark" ? "white" : "black"} size={24} />
+          </StyledButton>
        </View>
      </View>

@@ -257,7 +114,7 @@ export default function HomeScreen() {
        <FlatList
          data={categories}
          renderItem={renderCategory}
-          keyExtractor={item => item.title}
+          keyExtractor={(item) => item.title}
          horizontal
          showsHorizontalScrollIndicator={false}
          contentContainerStyle={styles.categoryListContent}
@@ -281,7 +138,8 @@ export default function HomeScreen() {
          data={contentData}
          renderItem={renderContentItem}
          keyExtractor={(item, index) => `${item.source}-${item.id}-${index}`}
-          numColumns={NUM_COLUMNS}
+          numColumns={calculatedNumColumns}
+          key={calculatedNumColumns} // Re-render FlatList when numColumns changes
          contentContainerStyle={styles.listContent}
          onEndReached={loadMoreData}
          onEndReachedThreshold={0.5}
@@ -293,14 +151,7 @@ export default function HomeScreen() {
          }
        />
      )}
-      <SettingsModal
-        visible={isSettingsVisible}
-        onCancel={() => setSettingsVisible(false)}
-        onSave={() => {
-          setSettingsVisible(false);
-          loadInitialData();
-        }}
-      />
+      <SettingsModal />
    </ThemedView>
  );
 }
@@ -313,61 +164,47 @@ const styles = StyleSheet.create({
  centerContainer: {
    flex: 1,
    paddingTop: 20,
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
  },
  // Header
  headerContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
    paddingHorizontal: 24,
    marginBottom: 10,
  },
  headerTitle: {
    fontSize: 32,
-    fontWeight: 'bold',
+    fontWeight: "bold",
    paddingTop: 16,
  },
  rightHeaderButtons: {
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
  },
  searchButton: {
    padding: 10,
    borderRadius: 30,
    marginLeft: 10,
  },
-  searchButtonFocused: {
-    backgroundColor: '#007AFF',
-    transform: [{ scale: 1.1 }],
-  },
  // Category Selector
  categoryContainer: {
-    paddingBottom: 10,
+    paddingBottom: 6,
  },
  categoryListContent: {
    paddingHorizontal: 16,
  },
  categoryButton: {
-    paddingHorizontal: 12,
+    paddingHorizontal: 2,
    paddingVertical: 6,
    borderRadius: 8,
-    marginHorizontal: 5,
-  },
-  categoryButtonSelected: {
-    backgroundColor: '#007AFF', // A bright blue for selected state
-  },
-  categoryButtonFocused: {
-    backgroundColor: '#0056b3', // A darker blue for focused state
-    elevation: 5,
+    marginHorizontal: 6,
  },
  categoryText: {
    fontSize: 16,
-    fontWeight: '500',
-  },
-  categoryTextSelected: {
-    color: '#FFFFFF',
+    fontWeight: "500",
  },
  // Content Grid
  listContent: {
@@ -376,7 +213,7 @@ const styles = StyleSheet.create({
  },
  itemContainer: {
    margin: 8,
-    width: ITEM_WIDTH,
-    alignItems: 'center',
+    // width is now set dynamically in renderContentItem
+    alignItems: "center",
  },
 });
--- a/app/play.tsx
+++ b/app/play.tsx
@@ -1,101 +1,137 @@
-import React, { useState, useRef } from "react";
-import {
-  View,
-  StyleSheet,
-  TouchableOpacity,
-  ActivityIndicator,
-} from "react-native";
-import { useRouter } from "expo-router";
+import React, { useEffect, useRef } from "react";
+import { View, StyleSheet, ActivityIndicator, BackHandler, Platform, SafeAreaView, Dimensions } from "react-native";
+import { useLocalSearchParams, useRouter } from "expo-router";
 import { Video, ResizeMode } from "expo-av";
+import * as ScreenOrientation from "expo-screen-orientation";
 import { useKeepAwake } from "expo-keep-awake";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import { ThemedView } from "@/components/ThemedView";
 import { PlayerControls } from "@/components/PlayerControls";
+import { PlayerControlsMobile } from "@/components/PlayerControls.mobile";
 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 { usePlaybackManager } from "@/hooks/usePlaybackManager";
+import usePlayerStore from "@/stores/playerStore";
 import { useTVRemoteHandler } from "@/hooks/useTVRemoteHandler";
+import { useResponsive } from "@/hooks/useResponsive";

 export default function PlayScreen() {
-  const router = useRouter();
  const videoRef = useRef<Video>(null);
+  const router = useRouter();
  useKeepAwake();
+  const { isMobile } = useResponsive();
+  const { source, id, episodeIndex, position } = useLocalSearchParams<{
+    source: string;
+    id: string;
+    episodeIndex: string;
+    position: string;
+  }>();

  const {
    detail,
    episodes,
    currentEpisodeIndex,
-    status,
    isLoading,
-    setIsLoading,
+    showControls,
+    showEpisodeModal,
+    showSourceModal,
    showNextEpisodeOverlay,
+    initialPosition,
+    introEndTime,
+    setVideoRef,
+    loadVideo,
    playEpisode,
    togglePlayPause,
    seek,
    handlePlaybackStatusUpdate,
-    setShowNextEpisodeOverlay,
-  } = usePlaybackManager(videoRef);
-
-  const [showControls, setShowControls] = useState(true);
-  const [showEpisodeModal, setShowEpisodeModal] = useState(false);
-  const [episodeGroupSize] = useState(30);
-  const [selectedEpisodeGroup, setSelectedEpisodeGroup] = useState(
-    Math.floor(currentEpisodeIndex / episodeGroupSize)
-  );
-
-  const { currentFocus, setCurrentFocus } = useTVRemoteHandler({
-    showControls,
    setShowControls,
+    setShowEpisodeModal,
+    setShowSourceModal,
+    setShowNextEpisodeOverlay,
+    reset,
+  } = usePlayerStore();
+
+  useEffect(() => {
+    async function lockOrientation() {
+      if (isMobile) {
+        await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT);
+      }
+    }
+    lockOrientation();
+
+    return () => {
+      if (isMobile) {
+        ScreenOrientation.unlockAsync();
+      }
+    };
+  }, [isMobile]);
+
+  useEffect(() => {
+    setVideoRef(videoRef);
+    if (source && id) {
+      loadVideo(source, id, parseInt(episodeIndex || "0", 10), parseInt(position || "0", 10));
+    }
+    return () => {
+      reset(); // Reset state when component unmounts
+    };
+  }, [source, id, episodeIndex, position, setVideoRef, loadVideo, reset]);
+
+  const { onScreenPress: onTVScreenPress } = useTVRemoteHandler();
+
+  const handleScreenPress = () => {
+    if (isMobile) {
+      setShowControls(!showControls);
+    } else {
+      onTVScreenPress();
+    }
+  };
+
+  const singleTap = Gesture.Tap()
+    .onEnd(() => {
+      handleScreenPress();
+    })
+    .runOnJS(true);
+
+  const doubleTap = Gesture.Tap()
+    .numberOfTaps(2)
+    .onEnd((e) => {
+      if (!isMobile) return;
+      const tapPositionX = e.x;
+      const screenWidth = Dimensions.get("window").width;
+      if (tapPositionX < screenWidth / 2) {
+        seek(-10); // Seek back
+      } else {
+        seek(10); // Seek forward
+      }
+    })
+    .runOnJS(true);
+
+  const composedGesture = Gesture.Exclusive(doubleTap, singleTap);
+
+  useEffect(() => {
+    const backAction = () => {
+      if (showControls) {
+        setShowControls(false);
+        return true;
+      }
+      router.back();
+      return true;
+    };
+
+    const backHandler = BackHandler.addEventListener("hardwareBackPress", backAction);
+
+    return () => backHandler.remove();
+  }, [
+    showControls,
    showEpisodeModal,
-    onPlayPause: togglePlayPause,
-    onSeek: seek,
-    onShowEpisodes: () => setShowEpisodeModal(true),
-    onPlayNextEpisode: () => {
-      if (currentEpisodeIndex < episodes.length - 1) {
-        playEpisode(currentEpisodeIndex + 1);
-      }
-    },
-  });
-
-  const [isSeeking, setIsSeeking] = useState(false);
-  const [seekPosition, setSeekPosition] = useState(0);
-  const [progressPosition, setProgressPosition] = useState(0);
-
-  const formatTime = (milliseconds: number) => {
-    if (!milliseconds) return "00:00";
-    const totalSeconds = Math.floor(milliseconds / 1000);
-    const minutes = Math.floor(totalSeconds / 60);
-    const seconds = totalSeconds % 60;
-    return `${minutes.toString().padStart(2, "0")}:${seconds
-      .toString()
-      .padStart(2, "0")}`;
-  };
-
-  const handleSeekStart = () => setIsSeeking(true);
-
-  const handleSeekMove = (event: { nativeEvent: { locationX: number } }) => {
-    if (!status?.isLoaded || !status.durationMillis) return;
-    const { locationX } = event.nativeEvent;
-    const progressBarWidth = 300;
-    const progress = Math.max(0, Math.min(locationX / progressBarWidth, 1));
-    setSeekPosition(progress);
-  };
-
-  const handleSeekRelease = (event: { nativeEvent: { locationX: number } }) => {
-    if (!videoRef.current || !status?.isLoaded || !status.durationMillis)
-      return;
-    const wasPlaying = status.isPlaying;
-    const { locationX } = event.nativeEvent;
-    const progressBarWidth = 300;
-    const progress = Math.max(0, Math.min(locationX / progressBarWidth, 1));
-    const newPosition = progress * status.durationMillis;
-    videoRef.current.setPositionAsync(newPosition).then(() => {
-      if (wasPlaying) {
-        videoRef.current?.playAsync();
-      }
-    });
-    setIsSeeking(false);
-  };
+    showSourceModal,
+    setShowControls,
+    setShowEpisodeModal,
+    setShowSourceModal,
+    router,
+  ]);

  if (!detail && isLoading) {
    return (
@@ -106,79 +142,46 @@ export default function PlayScreen() {
  }

  const currentEpisode = episodes[currentEpisodeIndex];
-  const videoTitle = detail?.videoInfo?.title || "";
-  const hasNextEpisode = currentEpisodeIndex < episodes.length - 1;
+
+  const PlayerComponent = isMobile ? PlayerControlsMobile : PlayerControls;

  return (
-    <ThemedView style={styles.container}>
-      <TouchableOpacity
-        activeOpacity={1}
-        style={styles.videoContainer}
-        onPress={() => {
-          setShowControls(!showControls);
-          setCurrentFocus(null);
-        }}
-      >
-        <Video
-          ref={videoRef}
-          style={styles.videoPlayer}
-          source={{ uri: currentEpisode?.url }}
-          resizeMode={ResizeMode.CONTAIN}
-          onPlaybackStatusUpdate={(s) => {
-            handlePlaybackStatusUpdate(s);
-            if (s.isLoaded && !isSeeking) {
-              setProgressPosition(s.positionMillis / (s.durationMillis || 1));
-            }
-          }}
-          onLoad={() => setIsLoading(false)}
-          onLoadStart={() => setIsLoading(true)}
-          useNativeControls={false}
-          shouldPlay
-        />
+    <SafeAreaView style={styles.container}>
+      <ThemedView focusable style={styles.container}>
+        <GestureDetector gesture={composedGesture}>
+          <View style={styles.videoContainer}>
+            <Video
+              ref={videoRef}
+              style={styles.videoPlayer}
+              source={{ uri: currentEpisode?.url }}
+              resizeMode={ResizeMode.CONTAIN}
+              onPlaybackStatusUpdate={handlePlaybackStatusUpdate}
+              onLoad={() => {
+                const jumpPosition = introEndTime || initialPosition;
+                if (jumpPosition > 0) {
+                  videoRef.current?.setPositionAsync(jumpPosition);
+                }
+                usePlayerStore.setState({ isLoading: false });
+              }}
+              onLoadStart={() => usePlayerStore.setState({ isLoading: true })}
+              useNativeControls={false}
+              shouldPlay
+            />

-        {showControls && (
-          <PlayerControls
-            videoTitle={videoTitle}
-            currentEpisodeTitle={currentEpisode?.title}
-            status={status}
-            isSeeking={isSeeking}
-            seekPosition={seekPosition}
-            progressPosition={progressPosition}
-            currentFocus={currentFocus}
-            hasNextEpisode={hasNextEpisode}
-            onSeekStart={handleSeekStart}
-            onSeekMove={handleSeekMove}
-            onSeekRelease={handleSeekRelease}
-            onSeek={seek}
-            onTogglePlayPause={togglePlayPause}
-            onPlayNextEpisode={() => playEpisode(currentEpisodeIndex + 1)}
-            onShowEpisodes={() => setShowEpisodeModal(true)}
-            formatTime={formatTime}
-          />
-        )}
+            {showControls && <PlayerComponent showControls={showControls} setShowControls={setShowControls} />}

-        <LoadingOverlay visible={isLoading} />
+            <SeekingBar />

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

-      <EpisodeSelectionModal
-        visible={showEpisodeModal}
-        episodes={episodes}
-        currentEpisodeIndex={currentEpisodeIndex}
-        episodeGroupSize={episodeGroupSize}
-        selectedEpisodeGroup={selectedEpisodeGroup}
-        setSelectedEpisodeGroup={setSelectedEpisodeGroup}
-        onSelectEpisode={(index) => {
-          playEpisode(index);
-          setShowEpisodeModal(false);
-        }}
-        onClose={() => setShowEpisodeModal(false)}
-      />
-    </ThemedView>
+            <NextEpisodeOverlay visible={showNextEpisodeOverlay} onCancel={() => setShowNextEpisodeOverlay(false)} />
+          </View>
+        </GestureDetector>
+
+        <EpisodeSelectionModal />
+        <SourceSelectionModal />
+      </ThemedView>
+    </SafeAreaView>
  );
 }

--- a/app/search.tsx
+++ b/app/search.tsx
@@ -1,29 +1,25 @@
-import React, { useState, useRef, useEffect } from 'react';
-import {
-  View,
-  TextInput,
-  StyleSheet,
-  FlatList,
-  ActivityIndicator,
-  Pressable,
-  Text,
-  Keyboard,
-  useColorScheme,
-} from 'react-native';
-import { ThemedView } from '@/components/ThemedView';
-import { ThemedText } from '@/components/ThemedText';
-import VideoCard from '@/components/VideoCard.tv';
-import { api, SearchResult } from '@/services/api';
-import { Search } from 'lucide-react-native';
+import React, { useState, useRef, useEffect } from "react";
+import { View, TextInput, StyleSheet, FlatList, ActivityIndicator, Text, Keyboard } from "react-native";
+import { ThemedView } from "@/components/ThemedView";
+import { ThemedText } from "@/components/ThemedText";
+import VideoCard from "@/components/VideoCard.tv";
+import { api, SearchResult } from "@/services/api";
+import { Search } from "lucide-react-native";
+import { StyledButton } from "@/components/StyledButton";
+import { useResponsive } from "@/hooks/useResponsive";

 export default function SearchScreen() {
-  const [keyword, setKeyword] = useState('');
+  const [keyword, setKeyword] = useState("");
  const [results, setResults] = useState<SearchResult[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const textInputRef = useRef<TextInput>(null);
-  const colorScheme = useColorScheme();
+  const colorScheme = "dark"; // Replace with useColorScheme() if needed
  const [isInputFocused, setIsInputFocused] = useState(false);
+  const { isMobile, screenWidth, numColumns } = useResponsive();
+
+  const itemWidth = isMobile ? screenWidth / numColumns(150, 16) - 24 : screenWidth / 5 - 24;
+  const calculatedNumColumns = numColumns(150, 16);

  useEffect(() => {
    // Focus the text input when the screen loads
@@ -46,26 +42,28 @@ export default function SearchScreen() {
      if (response.results.length > 0) {
        setResults(response.results);
      } else {
-        setError('没有找到相关内容');
+        setError("没有找到相关内容");
      }
    } catch (err) {
-      setError('搜索失败，请稍后重试。');
-      console.error('Search failed:', err);
+      setError("搜索失败，请稍后重试。");
+      console.error("Search failed:", err);
    } finally {
      setLoading(false);
    }
  };

  const renderItem = ({ item }: { item: SearchResult }) => (
-    <VideoCard
-      id={item.id.toString()}
-      source={item.source}
-      title={item.title}
-      poster={item.poster}
-      year={item.year}
-      sourceName={item.source_name}
-      api={api}
-    />
+    <View style={{ width: itemWidth, margin: 8 }}>
+      <VideoCard
+        id={item.id.toString()}
+        source={item.source}
+        title={item.title}
+        poster={item.poster}
+        year={item.year}
+        sourceName={item.source_name}
+        api={api}
+      />
+    </View>
  );

  return (
@@ -76,13 +74,13 @@ export default function SearchScreen() {
          style={[
            styles.input,
            {
-              backgroundColor: colorScheme === 'dark' ? '#2c2c2e' : '#f0f0f0',
-              color: colorScheme === 'dark' ? 'white' : 'black',
-              borderColor: isInputFocused ? '#007bff' : 'transparent',
+              backgroundColor: colorScheme === "dark" ? "#2c2c2e" : "#f0f0f0",
+              color: colorScheme === "dark" ? "white" : "black",
+              borderColor: isInputFocused ? "#007bff" : "transparent",
            },
          ]}
          placeholder="搜索电影、剧集..."
-          placeholderTextColor={colorScheme === 'dark' ? '#888' : '#555'}
+          placeholderTextColor={colorScheme === "dark" ? "#888" : "#555"}
          value={keyword}
          onChangeText={setKeyword}
          onFocus={() => setIsInputFocused(true)}
@@ -90,18 +88,9 @@ export default function SearchScreen() {
          onSubmitEditing={handleSearch} // Allow searching with remote 'enter' button
          returnKeyType="search"
        />
-        <Pressable
-          style={({ focused }) => [
-            styles.searchButton,
-            {
-              backgroundColor: colorScheme === 'dark' ? '#3a3a3c' : '#e0e0e0',
-            },
-            focused && styles.focusedButton,
-          ]}
-          onPress={handleSearch}
-        >
-          <Search size={24} color={colorScheme === 'dark' ? 'white' : 'black'} />
-        </Pressable>
+        <StyledButton style={styles.searchButton} onPress={handleSearch}>
+          <Search size={24} color={colorScheme === "dark" ? "white" : "black"} />
+        </StyledButton>
      </View>

      {loading ? (
@@ -117,7 +106,8 @@ export default function SearchScreen() {
          data={results}
          renderItem={renderItem}
          keyExtractor={(item, index) => `${item.id}-${item.source}-${index}`}
-          numColumns={5} // Adjust based on your card size and desired layout
+          numColumns={calculatedNumColumns}
+          key={calculatedNumColumns}
          contentContainerStyle={styles.listContent}
          ListEmptyComponent={
            <View style={styles.centerContainer}>
@@ -136,39 +126,35 @@ const styles = StyleSheet.create({
    paddingTop: 50,
  },
  searchContainer: {
-    flexDirection: 'row',
+    flexDirection: "row",
    paddingHorizontal: 20,
    marginBottom: 20,
-    alignItems: 'center',
+    alignItems: "center",
  },
  input: {
    flex: 1,
    height: 50,
-    backgroundColor: '#2c2c2e', // Default for dark mode, overridden inline
+    backgroundColor: "#2c2c2e", // Default for dark mode, overridden inline
    borderRadius: 8,
    paddingHorizontal: 15,
-    color: 'white', // Default for dark mode, overridden inline
+    color: "white", // Default for dark mode, overridden inline
    fontSize: 18,
    marginRight: 10,
    borderWidth: 2,
-    borderColor: 'transparent', // Default, overridden for focus
+    borderColor: "transparent", // Default, overridden for focus
  },
  searchButton: {
    padding: 12,
    // backgroundColor is now set dynamically
    borderRadius: 8,
  },
-  focusedButton: {
-    backgroundColor: '#007bff',
-    transform: [{ scale: 1.1 }],
-  },
  centerContainer: {
    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
  },
  errorText: {
-    color: 'red',
+    color: "red",
  },
  listContent: {
    paddingHorizontal: 10,
--- a/components/DetailButton.tsx
+++ b/components/DetailButton.tsx
@@ -1,55 +0,0 @@
-import React from "react";
-import {
-  Pressable,
-  StyleSheet,
-  StyleProp,
-  ViewStyle,
-  PressableProps,
-} from "react-native";
-
-interface DetailButtonProps extends PressableProps {
-  children: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-}
-
-export const DetailButton: React.FC<DetailButtonProps> = ({
-  children,
-  style,
-  ...rest
-}) => {
-  return (
-    <Pressable
-      style={({ focused }) => [
-        styles.button,
-        style,
-        focused && styles.buttonFocused,
-      ]}
-      {...rest}
-    >
-      {children}
-    </Pressable>
-  );
-};
-
-const styles = StyleSheet.create({
-  button: {
-    backgroundColor: "#333",
-    paddingHorizontal: 15,
-    paddingVertical: 10,
-    borderRadius: 8,
-    margin: 5,
-    borderWidth: 2,
-    borderColor: "transparent",
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  buttonFocused: {
-    backgroundColor: "#0056b3",
-    borderColor: "#fff",
-    elevation: 5,
-    shadowColor: "#fff",
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 1,
-    shadowRadius: 15,
-  },
-});
--- a/components/EpisodeSelectionModal.tsx
+++ b/components/EpisodeSelectionModal.tsx
@@ -1,74 +1,52 @@
 import React from "react";
-import {
-  View,
-  Text,
-  StyleSheet,
-  Modal,
-  FlatList,
-  Pressable,
-  TouchableOpacity,
-} from "react-native";
+import { View, Text, StyleSheet, Modal, FlatList, Pressable } from "react-native";
+import { StyledButton } from "./StyledButton";
+import usePlayerStore from "@/stores/playerStore";
+import { useState } from "react";

 interface Episode {
  title?: string;
  url: string;
 }

-interface EpisodeSelectionModalProps {
-  visible: boolean;
-  episodes: Episode[];
-  currentEpisodeIndex: number;
-  episodeGroupSize: number;
-  selectedEpisodeGroup: number;
-  setSelectedEpisodeGroup: (group: number) => void;
-  onSelectEpisode: (index: number) => void;
-  onClose: () => void;
-}
+interface EpisodeSelectionModalProps {}
+
+export const EpisodeSelectionModal: React.FC<EpisodeSelectionModalProps> = () => {
+  const { showEpisodeModal, episodes, currentEpisodeIndex, playEpisode, setShowEpisodeModal } = usePlayerStore();
+
+  const [episodeGroupSize] = useState(30);
+  const [selectedEpisodeGroup, setSelectedEpisodeGroup] = useState(Math.floor(currentEpisodeIndex / episodeGroupSize));
+
+  const onSelectEpisode = (index: number) => {
+    playEpisode(index);
+    setShowEpisodeModal(false);
+  };
+
+  const onClose = () => {
+    setShowEpisodeModal(false);
+  };

-export const EpisodeSelectionModal: React.FC<EpisodeSelectionModalProps> = ({
-  visible,
-  episodes,
-  currentEpisodeIndex,
-  episodeGroupSize,
-  selectedEpisodeGroup,
-  setSelectedEpisodeGroup,
-  onSelectEpisode,
-  onClose,
-}) => {
  return (
-    <Modal
-      visible={visible}
-      transparent={true}
-      animationType="slide"
-      onRequestClose={onClose}
-    >
+    <Modal visible={showEpisodeModal} transparent={true} animationType="slide" onRequestClose={onClose}>
      <View style={styles.modalContainer}>
        <View style={styles.modalContent}>
          <Text style={styles.modalTitle}>选择剧集</Text>

          {episodes.length > episodeGroupSize && (
            <View style={styles.episodeGroupContainer}>
-              {Array.from(
-                { length: Math.ceil(episodes.length / episodeGroupSize) },
-                (_, groupIndex) => (
-                  <TouchableOpacity
-                    key={groupIndex}
-                    style={[
-                      styles.episodeGroupButton,
-                      selectedEpisodeGroup === groupIndex &&
-                        styles.episodeGroupButtonSelected,
-                    ]}
-                    onPress={() => setSelectedEpisodeGroup(groupIndex)}
-                  >
-                    <Text style={styles.episodeGroupButtonText}>
-                      {`${groupIndex * episodeGroupSize + 1}-${Math.min(
-                        (groupIndex + 1) * episodeGroupSize,
-                        episodes.length
-                      )}`}
-                    </Text>
-                  </TouchableOpacity>
-                )
-              )}
+              {Array.from({ length: Math.ceil(episodes.length / episodeGroupSize) }, (_, groupIndex) => (
+                <StyledButton
+                  key={groupIndex}
+                  text={`${groupIndex * episodeGroupSize + 1}-${Math.min(
+                    (groupIndex + 1) * episodeGroupSize,
+                    episodes.length
+                  )}`}
+                  onPress={() => setSelectedEpisodeGroup(groupIndex)}
+                  isSelected={selectedEpisodeGroup === groupIndex}
+                  style={styles.episodeGroupButton}
+                  textStyle={styles.episodeGroupButtonText}
+                />
+              ))}
            </View>
          )}
          <FlatList
@@ -77,40 +55,22 @@ export const EpisodeSelectionModal: React.FC<EpisodeSelectionModalProps> = ({
              (selectedEpisodeGroup + 1) * episodeGroupSize
            )}
            numColumns={5}
-            keyExtractor={(_, index) =>
-              `episode-${selectedEpisodeGroup * episodeGroupSize + index}`
-            }
+            contentContainerStyle={styles.episodeList}
+            keyExtractor={(_, index) => `episode-${selectedEpisodeGroup * episodeGroupSize + index}`}
            renderItem={({ item, index }) => {
-              const absoluteIndex =
-                selectedEpisodeGroup * episodeGroupSize + index;
+              const absoluteIndex = selectedEpisodeGroup * episodeGroupSize + index;
              return (
-                <Pressable
-                  style={({ focused }) => [
-                    styles.episodeItem,
-                    currentEpisodeIndex === absoluteIndex &&
-                      styles.episodeItemSelected,
-                    focused && styles.focusedButton,
-                  ]}
+                <StyledButton
+                  text={item.title || `第 ${absoluteIndex + 1} 集`}
                  onPress={() => onSelectEpisode(absoluteIndex)}
+                  isSelected={currentEpisodeIndex === absoluteIndex}
                  hasTVPreferredFocus={currentEpisodeIndex === absoluteIndex}
-                >
-                  <Text style={styles.episodeItemText}>
-                    {item.title || `第 ${absoluteIndex + 1} 集`}
-                  </Text>
-                </Pressable>
+                  style={styles.episodeItem}
+                  textStyle={styles.episodeItemText}
+                />
              );
            }}
          />
-
-          <Pressable
-            style={({ focused }) => [
-              styles.closeButton,
-              focused && styles.focusedButton,
-            ]}
-            onPress={onClose}
-          >
-            <Text style={{ color: "white" }}>关闭</Text>
-          </Pressable>
        </View>
      </View>
    </Modal>
@@ -125,64 +85,40 @@ const styles = StyleSheet.create({
    backgroundColor: "transparent",
  },
  modalContent: {
-    width: 400,
+    width: 600,
    height: "100%",
    backgroundColor: "rgba(0, 0, 0, 0.85)",
    padding: 20,
  },
  modalTitle: {
    color: "white",
-    marginBottom: 20,
+    marginBottom: 12,
    textAlign: "center",
    fontSize: 18,
    fontWeight: "bold",
  },
-  episodeItem: {
-    backgroundColor: "#333",
-    paddingVertical: 12,
-    borderRadius: 8,
-    margin: 4,
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
+  episodeList: {
+    justifyContent: "flex-start",
  },
-  episodeItemSelected: {
-    backgroundColor: "#007bff",
+  episodeItem: {
+    paddingVertical: 2,
+    margin: 4,
+    width: "18%",
  },
  episodeItemText: {
-    color: "white",
    fontSize: 14,
  },
  episodeGroupContainer: {
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "center",
-    marginBottom: 15,
    paddingHorizontal: 10,
  },
  episodeGroupButton: {
-    backgroundColor: "#444",
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 15,
-    margin: 5,
-  },
-  episodeGroupButtonSelected: {
-    backgroundColor: "#007bff",
+    paddingHorizontal: 6,
+    margin: 8,
  },
  episodeGroupButtonText: {
-    color: "white",
    fontSize: 12,
  },
-  closeButton: {
-    backgroundColor: "#333",
-    padding: 15,
-    borderRadius: 8,
-    alignItems: "center",
-    marginTop: 20,
-  },
-  focusedButton: {
-    backgroundColor: "rgba(119, 119, 119, 0.9)",
-    transform: [{ scale: 1.1 }],
-  },
 });
--- a/components/MediaButton.tsx
+++ b/components/MediaButton.tsx
@@ -1,52 +1,32 @@
-import React from "react";
-import { Pressable, StyleSheet, StyleProp, ViewStyle } from "react-native";
+import React, { ComponentProps } from "react";
+import { StyledButton } from "./StyledButton";
+import { StyleSheet, View, Text } from "react-native";

-interface MediaButtonProps {
-  onPress: () => void;
-  children: React.ReactNode;
-  isFocused?: boolean;
-  isDisabled?: boolean;
-  style?: StyleProp<ViewStyle>;
-}
-
-export const MediaButton: React.FC<MediaButtonProps> = ({
-  onPress,
-  children,
-  isFocused = false,
-  isDisabled = false,
-  style,
-}) => {
-  return (
-    <Pressable
-      onPress={onPress}
-      disabled={isDisabled}
-      style={[
-        styles.mediaControlButton,
-        isFocused && styles.focusedButton,
-        isDisabled && styles.disabledButton,
-        style,
-      ]}
-    >
-      {children}
-    </Pressable>
-  );
+type StyledButtonProps = ComponentProps<typeof StyledButton> & {
+  timeLabel?: string;
 };

+export const MediaButton = ({ timeLabel, ...props }: StyledButtonProps) => (
+  <View>
+    <StyledButton {...props} style={[styles.mediaControlButton, props.style]} variant="ghost" />
+    {timeLabel && <Text style={styles.timeLabel}>{timeLabel}</Text>}
+  </View>
+);
+
 const styles = StyleSheet.create({
  mediaControlButton: {
-    backgroundColor: "rgba(51, 51, 51, 0.8)",
    padding: 12,
-    borderRadius: 8,
-    alignItems: "center",
-    justifyContent: "center",
    minWidth: 80,
-    margin: 5,
  },
-  focusedButton: {
-    backgroundColor: "rgba(119, 119, 119, 0.9)",
-    transform: [{ scale: 1.1 }],
-  },
-  disabledButton: {
-    opacity: 0.5,
+  timeLabel: {
+    position: "absolute",
+    top: 14,
+    right: 12,
+    color: "white",
+    fontSize: 10,
+    fontWeight: "bold",
+    backgroundColor: "rgba(0,0,0,0.6)",
+    paddingHorizontal: 4,
+    borderRadius: 3,
  },
 });
--- a/components/NextEpisodeOverlay.tsx
+++ b/components/NextEpisodeOverlay.tsx
@@ -1,16 +1,14 @@
 import React from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { ThemedText } from "@/components/ThemedText";
+import { StyledButton } from "./StyledButton";

 interface NextEpisodeOverlayProps {
  visible: boolean;
  onCancel: () => void;
 }

-export const NextEpisodeOverlay: React.FC<NextEpisodeOverlayProps> = ({
-  visible,
-  onCancel,
-}) => {
+export const NextEpisodeOverlay: React.FC<NextEpisodeOverlayProps> = ({ visible, onCancel }) => {
  if (!visible) {
    return null;
  }
@@ -18,12 +16,13 @@ export const NextEpisodeOverlay: React.FC<NextEpisodeOverlayProps> = ({
  return (
    <View style={styles.nextEpisodeOverlay}>
      <View style={styles.nextEpisodeContent}>
-        <ThemedText style={styles.nextEpisodeTitle}>
-          即将播放下一集...
-        </ThemedText>
-        <TouchableOpacity style={styles.nextEpisodeButton} onPress={onCancel}>
-          <ThemedText style={styles.nextEpisodeButtonText}>取消</ThemedText>
-        </TouchableOpacity>
+        <ThemedText style={styles.nextEpisodeTitle}>即将播放下一集...</ThemedText>
+        <StyledButton
+          text="取消"
+          onPress={onCancel}
+          style={styles.nextEpisodeButton}
+          textStyle={styles.nextEpisodeButtonText}
+        />
      </View>
    </View>
  );
@@ -48,10 +47,8 @@ const styles = StyleSheet.create({
    marginBottom: 10,
  },
  nextEpisodeButton: {
-    backgroundColor: "#333",
    padding: 8,
    paddingHorizontal: 15,
-    borderRadius: 5,
  },
  nextEpisodeButtonText: {
    fontSize: 14,
--- a/components/PlayerControls.mobile.tsx
+++ b/components/PlayerControls.mobile.tsx
@@ -0,0 +1,179 @@
+import React from "react";
+import { View, Text, StyleSheet, Pressable } from "react-native";
+import { Pause, Play, SkipForward, List, Tv } from "lucide-react-native";
+import { ThemedText } from "@/components/ThemedText";
+import { MediaButton } from "@/components/MediaButton";
+import usePlayerStore from "@/stores/playerStore";
+
+interface PlayerControlsProps {
+  showControls: boolean;
+}
+
+export const PlayerControlsMobile: React.FC<PlayerControlsProps> = ({ showControls }) => {
+  const {
+    detail,
+    currentEpisodeIndex,
+    currentSourceIndex,
+    status,
+    isSeeking,
+    seekPosition,
+    progressPosition,
+    togglePlayPause,
+    playEpisode,
+    setShowEpisodeModal,
+    setShowSourceModal,
+  } = usePlayerStore();
+
+  const videoTitle = detail?.videoInfo?.title || "";
+  const currentEpisode = detail?.episodes[currentEpisodeIndex];
+  const currentEpisodeTitle = currentEpisode?.title;
+  const hasNextEpisode = currentEpisodeIndex < (detail?.episodes.length || 0) - 1;
+
+  const formatTime = (milliseconds: number) => {
+    if (!milliseconds) return "00:00";
+    const totalSeconds = Math.floor(milliseconds / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+  };
+
+  const onPlayNextEpisode = () => {
+    if (hasNextEpisode) {
+      playEpisode(currentEpisodeIndex + 1);
+    }
+  };
+
+  return (
+    <View style={styles.controlsOverlay}>
+      <View style={styles.topControls}>
+        <Text style={styles.controlTitle} numberOfLines={2}>
+          {videoTitle} {currentEpisodeTitle ? `- ${currentEpisodeTitle}` : ""}
+        </Text>
+      </View>
+
+      <View style={styles.middleControls}>
+        {/* This area can be used for gesture-based seeking indicators in the future */}
+      </View>
+
+      <View style={styles.bottomControlsContainer}>
+        <View style={styles.timeAndActions}>
+          <ThemedText style={styles.timeText}>
+            {status?.isLoaded
+              ? `${formatTime(status.positionMillis)} / ${formatTime(status.durationMillis || 0)}`
+              : "00:00 / 00:00"}
+          </ThemedText>
+          <View style={styles.actions}>
+            <MediaButton onPress={() => setShowEpisodeModal(true)}>
+              <List color="white" size={22} />
+            </MediaButton>
+            <MediaButton onPress={() => setShowSourceModal(true)}>
+              <Tv color="white" size={22} />
+            </MediaButton>
+          </View>
+        </View>
+
+        <View style={styles.progressBarContainer}>
+          <View style={styles.progressBarBackground} />
+          <View
+            style={[
+              styles.progressBarFilled,
+              {
+                width: `${(isSeeking ? seekPosition : progressPosition) * 100}%`,
+              },
+            ]}
+          />
+          <Pressable style={styles.progressBarTouchable} />
+        </View>
+
+        <View style={styles.mainControls}>
+          <View style={styles.placeholder} />
+          <MediaButton onPress={togglePlayPause}>
+            {status?.isLoaded && status.isPlaying ? (
+              <Pause color="white" size={36} />
+            ) : (
+              <Play color="white" size={36} />
+            )}
+          </MediaButton>
+          <MediaButton onPress={onPlayNextEpisode} disabled={!hasNextEpisode}>
+            <SkipForward color={hasNextEpisode ? "white" : "#666"} size={28} />
+          </MediaButton>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  controlsOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.4)",
+    justifyContent: "space-between",
+    paddingHorizontal: 15,
+    paddingVertical: 10,
+  },
+  topControls: {
+    flexDirection: "row",
+    justifyContent: "center",
+  },
+  controlTitle: {
+    color: "white",
+    fontSize: 14,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  middleControls: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  bottomControlsContainer: {
+    width: "100%",
+  },
+  timeAndActions: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 5,
+  },
+  timeText: {
+    color: "white",
+    fontSize: 12,
+  },
+  actions: {
+    flexDirection: "row",
+    gap: 15,
+  },
+  progressBarContainer: {
+    width: "100%",
+    height: 4,
+    position: "relative",
+    marginVertical: 10,
+  },
+  progressBarBackground: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(255, 255, 255, 0.3)",
+    borderRadius: 2,
+  },
+  progressBarFilled: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "#ff0000",
+    borderRadius: 2,
+  },
+  progressBarTouchable: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    height: 20,
+    top: -8,
+    zIndex: 10,
+  },
+  mainControls: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    alignItems: "center",
+    marginTop: 5,
+  },
+  placeholder: {
+    width: 28, // to balance the skip forward button
+  },
+});
--- a/components/PlayerControls.tsx
+++ b/components/PlayerControls.tsx
@@ -1,76 +1,76 @@
-import React from "react";
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  Pressable,
-} from "react-native";
+import React, { useCallback, useState } from "react";
+import { View, Text, StyleSheet, TouchableOpacity, Pressable } from "react-native";
 import { useRouter } from "expo-router";
 import { AVPlaybackStatus } from "expo-av";
 import {
-  ArrowLeft,
  Pause,
  Play,
  SkipForward,
  List,
  ChevronsRight,
  ChevronsLeft,
+  Tv,
+  ArrowDownToDot,
+  ArrowUpFromDot,
 } from "lucide-react-native";
 import { ThemedText } from "@/components/ThemedText";
 import { MediaButton } from "@/components/MediaButton";

+import usePlayerStore from "@/stores/playerStore";
+
 interface PlayerControlsProps {
-  videoTitle: string;
-  currentEpisodeTitle?: string;
-  status: AVPlaybackStatus | null;
-  isSeeking: boolean;
-  seekPosition: number;
-  progressPosition: number;
-  currentFocus: string | null;
-  hasNextEpisode: boolean;
-  onSeekStart: () => void;
-  onSeekMove: (event: { nativeEvent: { locationX: number } }) => void;
-  onSeekRelease: (event: { nativeEvent: { locationX: number } }) => void;
-  onSeek: (forward: boolean) => void;
-  onTogglePlayPause: () => void;
-  onPlayNextEpisode: () => void;
-  onShowEpisodes: () => void;
-  formatTime: (time: number) => string;
+  showControls: boolean;
+  setShowControls: (show: boolean) => void;
 }

-export const PlayerControls: React.FC<PlayerControlsProps> = ({
-  videoTitle,
-  currentEpisodeTitle,
-  status,
-  isSeeking,
-  seekPosition,
-  progressPosition,
-  currentFocus,
-  hasNextEpisode,
-  onSeekStart,
-  onSeekMove,
-  onSeekRelease,
-  onSeek,
-  onTogglePlayPause,
-  onPlayNextEpisode,
-  onShowEpisodes,
-  formatTime,
-}) => {
+export const PlayerControls: React.FC<PlayerControlsProps> = ({ showControls, setShowControls }) => {
  const router = useRouter();
+  const {
+    detail,
+    currentEpisodeIndex,
+    currentSourceIndex,
+    status,
+    isSeeking,
+    seekPosition,
+    progressPosition,
+    seek,
+    togglePlayPause,
+    playEpisode,
+    setShowEpisodeModal,
+    setShowSourceModal,
+    setIntroEndTime,
+    setOutroStartTime,
+    introEndTime,
+    outroStartTime,
+  } = usePlayerStore();
+
+  const videoTitle = detail?.videoInfo?.title || "";
+  const currentEpisode = detail?.episodes[currentEpisodeIndex];
+  const currentEpisodeTitle = currentEpisode?.title;
+  const currentSource = detail?.sources[currentSourceIndex];
+  const currentSourceName = currentSource?.source_name;
+  const hasNextEpisode = currentEpisodeIndex < (detail?.episodes.length || 0) - 1;
+
+  const formatTime = (milliseconds: number) => {
+    if (!milliseconds) return "00:00";
+    const totalSeconds = Math.floor(milliseconds / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+  };
+
+  const onPlayNextEpisode = () => {
+    if (hasNextEpisode) {
+      playEpisode(currentEpisodeIndex + 1);
+    }
+  };

  return (
    <View style={styles.controlsOverlay}>
      <View style={styles.topControls}>
-        <TouchableOpacity
-          style={styles.controlButton}
-          onPress={() => router.back()}
-        >
-          <ArrowLeft color="white" size={24} />
-        </TouchableOpacity>
-
        <Text style={styles.controlTitle}>
-          {videoTitle} {currentEpisodeTitle ? `- ${currentEpisodeTitle}` : ""}
+          {videoTitle} {currentEpisodeTitle ? `- ${currentEpisodeTitle}` : ""}{" "}
+          {currentSourceName ? `(${currentSourceName})` : ""}
        </Text>
      </View>

@@ -81,40 +81,25 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
            style={[
              styles.progressBarFilled,
              {
-                width: `${
-                  (isSeeking ? seekPosition : progressPosition) * 100
-                }%`,
+                width: `${(isSeeking ? seekPosition : progressPosition) * 100}%`,
              },
            ]}
          />
-          <Pressable
-            style={styles.progressBarTouchable}
-            onPressIn={onSeekStart}
-            onTouchMove={onSeekMove}
-            onTouchEnd={onSeekRelease}
-          />
+          <Pressable style={styles.progressBarTouchable} />
        </View>

        <ThemedText style={{ color: "white", marginTop: 5 }}>
          {status?.isLoaded
-            ? `${formatTime(status.positionMillis)} / ${formatTime(
-                status.durationMillis || 0
-              )}`
+            ? `${formatTime(status.positionMillis)} / ${formatTime(status.durationMillis || 0)}`
            : "00:00 / 00:00"}
        </ThemedText>

        <View style={styles.bottomControls}>
-          <MediaButton
-            onPress={() => onSeek(false)}
-            isFocused={currentFocus === "skipBack"}
-          >
-            <ChevronsLeft color="white" size={24} />
+          <MediaButton onPress={setIntroEndTime} timeLabel={introEndTime ? formatTime(introEndTime) : undefined}>
+            <ArrowDownToDot color="white" size={24} />
          </MediaButton>

-          <MediaButton
-            onPress={onTogglePlayPause}
-            isFocused={currentFocus === "playPause"}
-          >
+          <MediaButton onPress={togglePlayPause} hasTVPreferredFocus={showControls}>
            {status?.isLoaded && status.isPlaying ? (
              <Pause color="white" size={24} />
            ) : (
@@ -122,27 +107,21 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
            )}
          </MediaButton>

-          <MediaButton
-            onPress={onPlayNextEpisode}
-            isFocused={currentFocus === "nextEpisode"}
-            isDisabled={!hasNextEpisode}
-          >
+          <MediaButton onPress={onPlayNextEpisode} disabled={!hasNextEpisode}>
            <SkipForward color={hasNextEpisode ? "white" : "#666"} size={24} />
          </MediaButton>

-          <MediaButton
-            onPress={() => onSeek(true)}
-            isFocused={currentFocus === "skipForward"}
-          >
-            <ChevronsRight color="white" size={24} />
+          <MediaButton onPress={setOutroStartTime} timeLabel={outroStartTime ? formatTime(outroStartTime) : undefined}>
+            <ArrowUpFromDot color="white" size={24} />
          </MediaButton>

-          <MediaButton
-            onPress={onShowEpisodes}
-            isFocused={currentFocus === "episodes"}
-          >
+          <MediaButton onPress={() => setShowEpisodeModal(true)}>
            <List color="white" size={24} />
          </MediaButton>
+
+          <MediaButton onPress={() => setShowSourceModal(true)}>
+            <Tv color="white" size={24} />
+          </MediaButton>
        </View>
      </View>
    </View>
--- a/components/SeekingBar.tsx
+++ b/components/SeekingBar.tsx
@@ -0,0 +1,86 @@
+import React from "react";
+import { View, StyleSheet, Text } from "react-native";
+import usePlayerStore from "@/stores/playerStore";
+
+const formatTime = (milliseconds: number) => {
+  if (isNaN(milliseconds) || milliseconds < 0) {
+    return "00:00";
+  }
+  const totalSeconds = Math.floor(milliseconds / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  if (hours > 0) {
+    return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds
+      .toString()
+      .padStart(2, "0")}`;
+  }
+  return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+};
+
+export const SeekingBar = () => {
+  const { isSeeking, seekPosition, status } = usePlayerStore();
+
+  if (!isSeeking || !status?.isLoaded) {
+    return null;
+  }
+
+  const durationMillis = status.durationMillis || 0;
+  const currentPositionMillis = seekPosition * durationMillis;
+
+  return (
+    <View style={styles.seekingContainer}>
+      <Text style={styles.timeText}>
+        {formatTime(currentPositionMillis)} / {formatTime(durationMillis)}
+      </Text>
+      <View style={styles.seekingBarContainer}>
+        <View style={styles.seekingBarBackground} />
+        <View
+          style={[
+            styles.seekingBarFilled,
+            {
+              width: `${seekPosition * 100}%`,
+            },
+          ]}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  seekingContainer: {
+    position: "absolute",
+    bottom: 80,
+    left: "5%",
+    right: "5%",
+    alignItems: "center",
+  },
+  timeText: {
+    color: "white",
+    fontSize: 18,
+    fontWeight: "bold",
+    backgroundColor: "rgba(0,0,0,0.6)",
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 8,
+    marginBottom: 10,
+  },
+  seekingBarContainer: {
+    width: "100%",
+    height: 5,
+    backgroundColor: "rgba(255, 255, 255, 0.3)",
+    borderRadius: 2.5,
+  },
+  seekingBarBackground: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(255, 255, 255, 0.3)",
+    borderRadius: 2.5,
+  },
+  seekingBarFilled: {
+    height: "100%",
+    backgroundColor: "#ff0000",
+    borderRadius: 2.5,
+  },
+});
--- a/components/SettingsModal.tsx
+++ b/components/SettingsModal.tsx
@@ -1,49 +1,40 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Modal, View, Text, TextInput, StyleSheet, Pressable, useColorScheme } from 'react-native';
-import { SettingsManager } from '@/services/storage';
-import { api } from '@/services/api';
-import { ThemedText } from './ThemedText';
-import { ThemedView } from './ThemedView';
+import React, { useState, useEffect, useRef } from "react";
+import { Modal, View, Text, TextInput, StyleSheet } from "react-native";
+import { ThemedText } from "./ThemedText";
+import { ThemedView } from "./ThemedView";
+import { useSettingsStore } from "@/stores/settingsStore";
+import { StyledButton } from "./StyledButton";

-interface SettingsModalProps {
-  visible: boolean;
-  onCancel: () => void;
-  onSave: () => void;
-}
+export const SettingsModal: React.FC = () => {
+  const { isModalVisible, hideModal, apiBaseUrl, setApiBaseUrl, saveSettings, loadSettings } = useSettingsStore();

-export const SettingsModal: React.FC<SettingsModalProps> = ({ visible, onCancel, onSave }) => {
-  const [apiUrl, setApiUrl] = useState('');
  const [isInputFocused, setIsInputFocused] = useState(false);
-  const colorScheme = useColorScheme();
+  const colorScheme = "dark"; // Replace with useColorScheme() if needed
  const inputRef = useRef<TextInput>(null);

  useEffect(() => {
-    if (visible) {
-      SettingsManager.get().then(settings => {
-        setApiUrl(settings.apiBaseUrl);
-      });
+    if (isModalVisible) {
+      loadSettings();
      const timer = setTimeout(() => {
        inputRef.current?.focus();
      }, 200);
      return () => clearTimeout(timer);
    }
-  }, [visible]);
+  }, [isModalVisible, loadSettings]);

-  const handleSave = async () => {
-    await SettingsManager.save({ apiBaseUrl: apiUrl });
-    api.setBaseUrl(apiUrl);
-    onSave();
+  const handleSave = () => {
+    saveSettings();
  };

  const styles = StyleSheet.create({
    modalContainer: {
      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: 'rgba(0, 0, 0, 0.6)',
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: "rgba(0, 0, 0, 0.6)",
    },
    modalContent: {
-      width: '80%',
+      width: "80%",
      maxWidth: 500,
      padding: 24,
      borderRadius: 12,
@@ -51,9 +42,9 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({ visible, onCancel,
    },
    title: {
      fontSize: 24,
-      fontWeight: 'bold',
+      fontWeight: "bold",
      marginBottom: 20,
-      textAlign: 'center',
+      textAlign: "center",
    },
    input: {
      height: 50,
@@ -62,80 +53,63 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({ visible, onCancel,
      paddingHorizontal: 15,
      fontSize: 16,
      marginBottom: 24,
-      backgroundColor: colorScheme === 'dark' ? '#3a3a3c' : '#f0f0f0',
-      color: colorScheme === 'dark' ? 'white' : 'black',
-      borderColor: 'transparent',
+      backgroundColor: colorScheme === "dark" ? "#3a3a3c" : "#f0f0f0",
+      color: colorScheme === "dark" ? "white" : "black",
+      borderColor: "transparent",
    },
    inputFocused: {
-      borderColor: '#007AFF',
-      shadowColor: '#007AFF',
+      borderColor: "#007AFF",
+      shadowColor: "#007AFF",
      shadowOffset: { width: 0, height: 0 },
      shadowOpacity: 0.8,
      shadowRadius: 10,
      elevation: 5,
    },
    buttonContainer: {
-      flexDirection: 'row',
-      justifyContent: 'space-around',
+      flexDirection: "row",
+      justifyContent: "space-around",
    },
    button: {
      flex: 1,
-      paddingVertical: 12,
-      borderRadius: 8,
-      alignItems: 'center',
      marginHorizontal: 8,
    },
-    buttonSave: {
-      backgroundColor: '#007AFF',
-    },
-    buttonCancel: {
-      backgroundColor: colorScheme === 'dark' ? '#444' : '#ccc',
-    },
    buttonText: {
-      color: 'white',
      fontSize: 18,
-      fontWeight: '500',
-    },
-    focusedButton: {
-      transform: [{ scale: 1.05 }],
-      shadowColor: '#000',
-      shadowOffset: { width: 0, height: 4 },
-      shadowOpacity: 0.3,
-      shadowRadius: 5,
-      elevation: 8,
    },
  });

  return (
-    <Modal animationType="fade" transparent={true} visible={visible} onRequestClose={onCancel}>
+    <Modal animationType="fade" transparent={true} visible={isModalVisible} onRequestClose={hideModal}>
      <View style={styles.modalContainer}>
        <ThemedView style={styles.modalContent}>
          <ThemedText style={styles.title}>设置</ThemedText>
          <TextInput
            ref={inputRef}
            style={[styles.input, isInputFocused && styles.inputFocused]}
-            value={apiUrl}
-            onChangeText={setApiUrl}
+            value={apiBaseUrl}
+            onChangeText={setApiBaseUrl}
            placeholder="输入 API 地址"
-            placeholderTextColor={colorScheme === 'dark' ? '#888' : '#555'}
+            placeholderTextColor={colorScheme === "dark" ? "#888" : "#555"}
            autoCapitalize="none"
            autoCorrect={false}
            onFocus={() => setIsInputFocused(true)}
            onBlur={() => setIsInputFocused(false)}
          />
          <View style={styles.buttonContainer}>
-            <Pressable
-              style={({ focused }) => [styles.button, styles.buttonCancel, focused && styles.focusedButton]}
-              onPress={onCancel}
-            >
-              <Text style={styles.buttonText}>取消</Text>
-            </Pressable>
-            <Pressable
-              style={({ focused }) => [styles.button, styles.buttonSave, focused && styles.focusedButton]}
+            <StyledButton
+              text="取消"
+              onPress={hideModal}
+              style={styles.button}
+              textStyle={styles.buttonText}
+              variant="default"
+            />
+            <StyledButton
+              text="保存"
              onPress={handleSave}
-            >
-              <Text style={styles.buttonText}>保存</Text>
-            </Pressable>
+              style={styles.button}
+              textStyle={styles.buttonText}
+              variant="primary"
+            />
          </View>
        </ThemedView>
      </View>
--- a/components/SourceSelectionModal.tsx
+++ b/components/SourceSelectionModal.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+import { View, Text, StyleSheet, Modal, FlatList } from "react-native";
+import { StyledButton } from "./StyledButton";
+import usePlayerStore from "@/stores/playerStore";
+
+export const SourceSelectionModal: React.FC = () => {
+  const { showSourceModal, sources, currentSourceIndex, switchSource, setShowSourceModal } = usePlayerStore();
+
+  const onSelectSource = (index: number) => {
+    if (index !== currentSourceIndex) {
+      switchSource(index);
+    }
+    setShowSourceModal(false);
+  };
+
+  const onClose = () => {
+    setShowSourceModal(false);
+  };
+
+  return (
+    <Modal visible={showSourceModal} transparent={true} animationType="slide" onRequestClose={onClose}>
+      <View style={styles.modalContainer}>
+        <View style={styles.modalContent}>
+          <Text style={styles.modalTitle}>选择播放源</Text>
+          <FlatList
+            data={sources}
+            numColumns={3}
+            contentContainerStyle={styles.sourceList}
+            keyExtractor={(item, index) => `source-${item.source}-${item.id}-${index}`}
+            renderItem={({ item, index }) => (
+              <StyledButton
+                text={item.source_name}
+                onPress={() => onSelectSource(index)}
+                isSelected={currentSourceIndex === index}
+                hasTVPreferredFocus={currentSourceIndex === index}
+                style={styles.sourceItem}
+                textStyle={styles.sourceItemText}
+              />
+            )}
+          />
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    backgroundColor: "transparent",
+  },
+  modalContent: {
+    width: 600,
+    height: "100%",
+    backgroundColor: "rgba(0, 0, 0, 0.85)",
+    padding: 20,
+  },
+  modalTitle: {
+    color: "white",
+    marginBottom: 12,
+    textAlign: "center",
+    fontSize: 18,
+    fontWeight: "bold",
+  },
+  sourceList: {
+    justifyContent: "flex-start",
+  },
+  sourceItem: {
+    paddingVertical: 2,
+    margin: 4,
+    width: "31%",
+  },
+  sourceItemText: {
+    fontSize: 14,
+  },
+});
--- a/components/StyledButton.tsx
+++ b/components/StyledButton.tsx
@@ -0,0 +1,147 @@
+import React from "react";
+import { Animated, Pressable, StyleSheet, StyleProp, ViewStyle, PressableProps, TextStyle } from "react-native";
+import { ThemedText } from "./ThemedText";
+import { Colors } from "@/constants/Colors";
+import { useButtonAnimation } from "@/hooks/useButtonAnimation";
+import { useResponsive } from "@/hooks/useResponsive";
+
+interface StyledButtonProps extends PressableProps {
+  children?: React.ReactNode;
+  text?: string;
+  variant?: "default" | "primary" | "ghost";
+  isSelected?: boolean;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}
+
+export const StyledButton: React.FC<StyledButtonProps> = ({
+  children,
+  text,
+  variant = "default",
+  isSelected = false,
+  style,
+  textStyle,
+  ...rest
+}) => {
+  const colorScheme = "dark";
+  const colors = Colors[colorScheme];
+  const [isFocused, setIsFocused] = React.useState(false);
+  const animationStyle = useButtonAnimation(isFocused);
+  const { isMobile } = useResponsive();
+
+  const variantStyles = {
+    default: StyleSheet.create({
+      button: {
+        backgroundColor: colors.border,
+      },
+      text: {
+        color: colors.text,
+      },
+      selectedButton: {
+        backgroundColor: colors.tint,
+      },
+      focusedButton: {
+        backgroundColor: colors.link,
+        borderColor: colors.background,
+      },
+      selectedText: {
+        color: Colors.dark.text,
+      },
+    }),
+    primary: StyleSheet.create({
+      button: {
+        backgroundColor: "transparent",
+      },
+      text: {
+        color: colors.text,
+      },
+      focusedButton: {
+        backgroundColor: colors.link,
+        borderColor: colors.background,
+      },
+      selectedButton: {
+        backgroundColor: "rgba(0, 122, 255, 0.3)",
+      },
+      selectedText: {
+        color: colors.link,
+      },
+    }),
+    ghost: StyleSheet.create({
+      button: {
+        backgroundColor: "transparent",
+      },
+      text: {
+        color: colors.text,
+      },
+      focusedButton: {
+        backgroundColor: "rgba(119, 119, 119, 0.9)",
+      },
+      selectedButton: {},
+      selectedText: {},
+    }),
+  };
+
+  const styles = StyleSheet.create({
+    button: {
+      paddingHorizontal: isMobile ? 12 : 16,
+      paddingVertical: isMobile ? 8 : 10,
+      borderRadius: 8,
+      borderWidth: 2,
+      borderColor: "transparent",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    focusedButton: {
+      backgroundColor: colors.link,
+      borderColor: colors.background,
+      elevation: 5,
+      shadowColor: colors.link,
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 1,
+      shadowRadius: 15,
+    },
+    selectedButton: {
+      backgroundColor: colors.tint,
+    },
+    text: {
+      fontSize: isMobile ? 14 : 16,
+      fontWeight: "500",
+      color: colors.text,
+    },
+    selectedText: {
+      color: Colors.dark.text,
+    },
+  });
+
+  return (
+    <Animated.View style={[animationStyle, style]}>
+      <Pressable
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+        style={({ focused }) => [
+          styles.button,
+          variantStyles[variant].button,
+          isSelected && (variantStyles[variant].selectedButton ?? styles.selectedButton),
+          focused && (variantStyles[variant].focusedButton ?? styles.focusedButton),
+        ]}
+        {...rest}
+      >
+        {text ? (
+          <ThemedText
+            style={[
+              styles.text,
+              variantStyles[variant].text,
+              isSelected && (variantStyles[variant].selectedText ?? styles.selectedText),
+              textStyle,
+            ]}
+          >
+            {text}
+          </ThemedText>
+        ) : (
+          children
+        )}
+      </Pressable>
+    </Animated.View>
+  );
+};
--- a/components/ThemedView.tsx
+++ b/components/ThemedView.tsx
@@ -1,22 +1,14 @@
-import {View, type ViewProps} from 'react-native';
+import { View, type ViewProps } from "react-native";

-import {useThemeColor} from '@/hooks/useThemeColor';
+import { useThemeColor } from "@/hooks/useThemeColor";

 export type ThemedViewProps = ViewProps & {
  lightColor?: string;
  darkColor?: string;
 };

-export function ThemedView({
-  style,
-  lightColor,
-  darkColor,
-  ...otherProps
-}: ThemedViewProps) {
-  const backgroundColor = useThemeColor(
-    {light: lightColor, dark: darkColor},
-    'background',
-  );
+export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) {
+  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, "background");

-  return <View style={[{backgroundColor}, style]} {...otherProps} />;
+  return <View style={[{ backgroundColor }, style]} {...otherProps} />;
 }
--- a/components/VideoCard.tv.tsx
+++ b/components/VideoCard.tv.tsx
@@ -1,11 +1,11 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { View, Text, Image, StyleSheet, Pressable, 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 { ThemedText } from '@/components/ThemedText';
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { View, Text, Image, StyleSheet, Pressable, 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 { ThemedText } from "@/components/ThemedText";

 interface VideoCardProps {
  id: string;
@@ -16,6 +16,7 @@ interface VideoCardProps {
  rate?: string;
  sourceName?: string;
  progress?: number; // 播放进度，0-1之间的小数
+  playTime?: number; // 播放时间 in ms
  episodeIndex?: number; // 剧集索引
  totalEpisodes?: number; // 总集数
  onFocus?: () => void;
@@ -37,6 +38,7 @@ export default function VideoCard({
  onFocus,
  onRecordDeleted,
  api,
+  playTime,
 }: VideoCardProps) {
  const router = useRouter();
  const [isFocused, setIsFocused] = useState(false);
@@ -59,12 +61,12 @@ export default function VideoCard({
    // 如果有播放进度，直接转到播放页面
    if (progress !== undefined && episodeIndex !== undefined) {
      router.push({
-        pathname: '/play',
-        params: { source, id, episodeIndex },
+        pathname: "/play",
+        params: { source, id, episodeIndex, position: playTime },
      });
    } else {
      router.push({
-        pathname: '/detail',
+        pathname: "/detail",
        params: { source, q: title },
      });
    }
@@ -88,14 +90,14 @@ export default function VideoCard({
    longPressTriggered.current = true;

    // Show confirmation dialog to delete play record
-    Alert.alert('删除观看记录', `确定要删除"${title}"的观看记录吗？`, [
+    Alert.alert("删除观看记录", `确定要删除"${title}"的观看记录吗？`, [
      {
-        text: '取消',
-        style: 'cancel',
+        text: "取消",
+        style: "cancel",
      },
      {
-        text: '删除',
-        style: 'destructive',
+        text: "删除",
+        style: "destructive",
        onPress: async () => {
          try {
            // Delete from local storage
@@ -107,11 +109,11 @@ export default function VideoCard({
            }
            // 如果没有回调函数，则使用导航刷新作为备选方案
            else if (router.canGoBack()) {
-              router.replace('/');
+              router.replace("/");
            }
          } catch (error) {
-            console.error('Failed to delete play record:', error);
-            Alert.alert('错误', '删除观看记录失败，请重试');
+            console.error("Failed to delete play record:", error);
+            Alert.alert("错误", "删除观看记录失败，请重试");
          }
        },
      },
@@ -171,7 +173,7 @@ export default function VideoCard({
        </View>
        <View style={styles.infoContainer}>
          <ThemedText numberOfLines={1}>{title}</ThemedText>
-          {isContinueWatching && !isFocused && (
+          {isContinueWatching && (
            <View style={styles.infoRow}>
              <ThemedText style={styles.continueLabel}>
                第{episodeIndex! + 1}集 已观看 {Math.round((progress || 0) * 100)}%
@@ -192,126 +194,126 @@ const styles = StyleSheet.create({
    marginHorizontal: 8,
  },
  pressable: {
-    alignItems: 'center',
+    alignItems: "center",
  },
  card: {
    width: CARD_WIDTH,
    height: CARD_HEIGHT,
    borderRadius: 8,
-    backgroundColor: '#222',
-    overflow: 'hidden',
+    backgroundColor: "#222",
+    overflow: "hidden",
  },
  poster: {
-    width: '100%',
-    height: '100%',
+    width: "100%",
+    height: "100%",
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(0,0,0,0.3)',
-    justifyContent: 'center',
-    alignItems: 'center',
+    backgroundColor: "rgba(0,0,0,0.3)",
+    justifyContent: "center",
+    alignItems: "center",
  },
  buttonRow: {
-    position: 'absolute',
+    position: "absolute",
    top: 8,
    left: 8,
-    flexDirection: 'row',
+    flexDirection: "row",
    gap: 8,
  },
  iconButton: {
    padding: 4,
  },
  favButton: {
-    position: 'absolute',
+    position: "absolute",
    top: 8,
    left: 8,
  },
  ratingContainer: {
-    position: 'absolute',
+    position: "absolute",
    top: 8,
    right: 8,
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
    borderRadius: 6,
    paddingHorizontal: 6,
    paddingVertical: 3,
  },
  ratingText: {
-    color: '#FFD700',
+    color: "#FFD700",
    fontSize: 12,
-    fontWeight: 'bold',
+    fontWeight: "bold",
    marginLeft: 4,
  },
  infoContainer: {
    width: CARD_WIDTH,
    marginTop: 8,
-    alignItems: 'flex-start', // Align items to the start
+    alignItems: "flex-start", // Align items to the start
    marginBottom: 16,
    paddingHorizontal: 4, // Add some padding
  },
  infoRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    width: '100%',
+    flexDirection: "row",
+    justifyContent: "space-between",
+    width: "100%",
  },
  title: {
-    color: 'white',
+    color: "white",
    fontSize: 16,
-    fontWeight: 'bold',
-    textAlign: 'center',
+    fontWeight: "bold",
+    textAlign: "center",
  },
  yearBadge: {
-    position: 'absolute',
+    position: "absolute",
    top: 8,
    right: 8,
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
    borderRadius: 6,
    paddingHorizontal: 6,
    paddingVertical: 3,
  },
  sourceNameBadge: {
-    position: 'absolute',
+    position: "absolute",
    top: 8,
    left: 8,
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
    borderRadius: 6,
    paddingHorizontal: 6,
    paddingVertical: 3,
  },
  badgeText: {
-    color: 'white',
+    color: "white",
    fontSize: 12,
-    fontWeight: 'bold',
+    fontWeight: "bold",
  },
  progressContainer: {
-    position: 'absolute',
+    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    height: 3,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
  },
  progressBar: {
    height: 3,
-    backgroundColor: '#ff0000',
+    backgroundColor: "#ff0000",
  },
  continueWatchingBadge: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: 'rgba(255, 0, 0, 0.8)',
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "rgba(255, 0, 0, 0.8)",
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderRadius: 5,
  },
  continueWatchingText: {
-    color: 'white',
+    color: "white",
    marginLeft: 5,
    fontSize: 12,
-    fontWeight: 'bold',
+    fontWeight: "bold",
  },
  continueLabel: {
-    color: '#ff5252',
+    color: "#ff5252",
    fontSize: 12,
  },
 });
--- a/docs/components/StyledButton.md
+++ b/docs/components/StyledButton.md
@@ -0,0 +1,77 @@
+# StyledButton 组件设计文档
+
+## 1. 目的
+
+为了统一整个应用中的按钮样式和行为，减少代码重复，并提高开发效率和一致性，我们设计了一个通用的 `StyledButton` 组件。
+
+该组件将取代以下位置的自定义 `Pressable` 和 `TouchableOpacity` 实现：
+
+- `app/index.tsx` (分类按钮, 头部图标按钮)
+- `components/DetailButton.tsx`
+- `components/EpisodeSelectionModal.tsx` (剧集分组按钮, 剧集项按钮, 关闭按钮)
+- `components/SettingsModal.tsx` (取消和保存按钮)
+- `app/search.tsx` (清除按钮)
+- `components/MediaButton.tsx` (媒体控制按钮)
+- `components/NextEpisodeOverlay.tsx` (取消按钮)
+
+## 2. API 设计
+
+`StyledButton` 组件将基于 React Native 的 `Pressable` 构建，并提供以下 props：
+
+```typescript
+import { PressableProps, StyleProp, ViewStyle, TextStyle } from "react-native";
+
+interface StyledButtonProps extends PressableProps {
+  // 按钮的主要内容，可以是文本或图标等 React 节点
+  children?: React.ReactNode;
+
+  // 如果按钮只包含文本，可以使用此 prop 快速设置
+  text?: string;
+
+  // 按钮的视觉变体，用于应用不同的预设样式
+  // 'default': 默认灰色背景
+  // 'primary': 主题色背景，用于关键操作
+  // 'ghost': 透明背景，通常用于图标按钮
+  variant?: "default" | "primary" | "ghost";
+
+  // 按钮是否处于选中状态
+  isSelected?: boolean;
+
+  // 覆盖容器的样式
+  style?: StyleProp<ViewStyle>;
+
+  // 覆盖文本的样式 (当使用 `text` prop 时生效)
+  textStyle?: StyleProp<TextStyle>;
+}
+```
+
+## 3. 样式和行为
+
+### 状态样式:
+
+- **默认状态 (`default`)**:
+  - 背景色: `#333`
+  - 边框: `transparent`
+- **聚焦状态 (`focused`)**:
+  - 背景色: `#0056b3` (深蓝色)
+  - 边框: `#fff`
+  - 阴影/光晕效果
+  - 轻微放大 (`transform: scale(1.1)`)
+- **选中状态 (`isSelected`)**:
+  - 背景色: `#007AFF` (亮蓝色)
+- **主操作 (`primary`)**:
+  - 默认背景色: `#007AFF`
+- **透明背景 (`ghost`)**:
+  - 默认背景色: `transparent`
+
+### 结构:
+
+组件内部将使用 `Pressable` 作为根元素，并根据 `focused` 和 `isSelected` props 动态计算样式。如果 `children` 和 `text` prop 都提供了，`children` 将优先被渲染。
+
+## 4. 实现计划
+
+1.  **创建 `components/StyledButton.tsx` 文件**。
+2.  **实现上述 API 和样式逻辑**。
+3.  **逐个重构目标文件**，将原有的 `Pressable`/`TouchableOpacity` 替换为新的 `StyledButton` 组件。
+4.  **删除旧的、不再需要的样式**。
+5.  **测试所有被修改的界面**，确保按钮的功能和视觉效果符合预期。
--- a/hooks/useButtonAnimation.ts
+++ b/hooks/useButtonAnimation.ts
@@ -0,0 +1,18 @@
+import { useRef, useEffect } from 'react';
+import { Animated } from 'react-native';
+
+export const useButtonAnimation = (isFocused: boolean) => {
+  const scaleValue = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    Animated.spring(scaleValue, {
+      toValue: isFocused ? 1.1 : 1,
+      friction: 5,
+      useNativeDriver: true,
+    }).start();
+  }, [ isFocused, scaleValue]);
+
+  return {
+    transform: [{ scale: scaleValue }],
+  };
+};
--- a/hooks/useColorScheme.ts
+++ b/hooks/useColorScheme.ts
@@ -1 +0,0 @@
-export {useColorScheme} from 'react-native';
--- a/hooks/useColorScheme.web.ts
+++ b/hooks/useColorScheme.web.ts
@@ -1,8 +0,0 @@
-// NOTE: The default React Native styling doesn't support server rendering.
-// Server rendered styles should not change between the first render of the HTML
-// and the first render on the client. Typically, web developers will use CSS media queries
-// to render different styles on the client and server, these aren't directly supported in React Native
-// but can be achieved using a styling library like Nativewind.
-export function useColorScheme() {
-  return 'light';
-}
--- a/hooks/useResponsive.ts
+++ b/hooks/useResponsive.ts
@@ -0,0 +1,43 @@
+import { useState, useEffect } from "react";
+import { Dimensions, Platform } from "react-native";
+
+const isMobile = Platform.OS === "android" || Platform.OS === "ios";
+
+interface ResponsiveInfo {
+  isMobile: boolean;
+  screenWidth: number;
+  numColumns: (itemWidth: number, gap?: number) => number;
+}
+
+export function useResponsive(): ResponsiveInfo {
+  const [screenWidth, setScreenWidth] = useState(Dimensions.get("window").width);
+
+  useEffect(() => {
+    const onChange = (result: { window: { width: number } }) => {
+      setScreenWidth(result.window.width);
+    };
+
+    const subscription = Dimensions.addEventListener("change", onChange);
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  const calculateNumColumns = (itemWidth: number, gap: number = 16) => {
+    if (!isMobile) {
+      // For TV, you might want a fixed number or a different logic
+      return 5;
+    }
+    const containerPadding = 16; // Horizontal padding of the container
+    const availableWidth = screenWidth - containerPadding * 2;
+    const num = Math.floor(availableWidth / (itemWidth + gap));
+    return Math.max(1, num); // Ensure at least one column
+  };
+
+  return {
+    isMobile,
+    screenWidth,
+    numColumns: calculateNumColumns,
+  };
+}
--- a/hooks/useTVRemoteHandler.ts
+++ b/hooks/useTVRemoteHandler.ts
@@ -1,114 +1,133 @@
-import { useState, useEffect, useRef } from "react";
-import { useTVEventHandler } from "react-native";
+import { useEffect, useRef, useCallback } from "react";
+import { useTVEventHandler, HWEvent } from "react-native";
+import usePlayerStore from "@/stores/playerStore";

-interface TVRemoteHandlerProps {
-  showControls: boolean;
-  setShowControls: (show: boolean) => void;
-  showEpisodeModal: boolean;
-  onPlayPause: () => void;
-  onSeek: (forward: boolean) => void;
-  onShowEpisodes: () => void;
-  onPlayNextEpisode: () => void;
-}
+const SEEK_STEP = 20 * 1000; // 快进/快退的时间步长（毫秒）

-const focusGraph: Record<string, Record<string, string>> = {
-  skipBack: { right: "playPause" },
-  playPause: { left: "skipBack", right: "nextEpisode" },
-  nextEpisode: { left: "playPause", right: "skipForward" },
-  skipForward: { left: "nextEpisode", right: "episodes" },
-  episodes: { left: "skipForward" },
-};
+// 定时器延迟时间（毫秒）
+const CONTROLS_TIMEOUT = 5000;
+
+/**
+ * 管理播放器控件的显示/隐藏、遥控器事件和自动隐藏定时器。
+ * @returns onScreenPress - 一个函数，用于处理屏幕点击事件，以显示控件并重置定时器。
+ */
+export const useTVRemoteHandler = () => {
+  const { showControls, setShowControls, showEpisodeModal, togglePlayPause, seek } = usePlayerStore();

-export const useTVRemoteHandler = ({
-  showControls,
-  setShowControls,
-  showEpisodeModal,
-  onPlayPause,
-  onSeek,
-  onShowEpisodes,
-  onPlayNextEpisode,
-}: TVRemoteHandlerProps) => {
-  const [currentFocus, setCurrentFocus] = useState<string | null>(null);
  const controlsTimer = useRef<NodeJS.Timeout | null>(null);
+  const fastForwardIntervalRef = useRef<NodeJS.Timeout | null>(null);

-  const actionMap: Record<string, () => void> = {
-    playPause: onPlayPause,
-    skipBack: () => onSeek(false),
-    skipForward: () => onSeek(true),
-    nextEpisode: onPlayNextEpisode,
-    episodes: onShowEpisodes,
-  };
-
-  // Centralized timer logic driven by state changes.
-  useEffect(() => {
+  // 重置或启动隐藏控件的定时器
+  const resetTimer = useCallback(() => {
+    // 清除之前的定时器
    if (controlsTimer.current) {
      clearTimeout(controlsTimer.current);
    }
+    // 设置新的定时器
+    controlsTimer.current = setTimeout(() => {
+      setShowControls(false);
+    }, CONTROLS_TIMEOUT);
+  }, [setShowControls]);

-    // Only set a timer to hide controls if they are shown AND no element is focused.
-    if (showControls && currentFocus === null) {
-      controlsTimer.current = setTimeout(() => {
-        setShowControls(false);
-      }, 5000);
+  // 当控件显示时，启动定时器
+  useEffect(() => {
+    if (showControls) {
+      resetTimer();
+    } else {
+      // 如果控件被隐藏，清除定时器
+      if (controlsTimer.current) {
+        clearTimeout(controlsTimer.current);
+      }
    }

+    // 组件卸载时清除定时器
    return () => {
      if (controlsTimer.current) {
        clearTimeout(controlsTimer.current);
      }
    };
-  }, [showControls, currentFocus]);
+  }, [showControls, resetTimer]);

-  useTVEventHandler((event) => {
-    if (showEpisodeModal) {
-      return;
-    }
-
-    // If controls are hidden, the first interaction will just show them.
-    if (!showControls) {
-      if (["up", "down", "left", "right", "select"].includes(event.eventType)) {
-        setShowControls(true);
+  // 组件卸载时清除快进定时器
+  useEffect(() => {
+    return () => {
+      if (fastForwardIntervalRef.current) {
+        clearInterval(fastForwardIntervalRef.current);
      }
-      return;
-    }
+    };
+  }, []);

-    // --- Event handling when controls are visible ---
+  // 处理遥控器事件
+  const handleTVEvent = useCallback(
+    (event: HWEvent) => {
+      if (showEpisodeModal) {
+        return;
+      }
+
+      if (event.eventType === "longRight" || event.eventType === "longLeft") {
+        if (event.eventKeyAction === 1) {
+          if (fastForwardIntervalRef.current) {
+            clearInterval(fastForwardIntervalRef.current);
+            fastForwardIntervalRef.current = null;
+          }
+        }
+      }
+
+      resetTimer();
+
+      if (showControls) {
+        // 如果控制条已显示，则不处理后台的快进/快退等操作
+        // 避免与控制条上的按钮焦点冲突
+        return;
+      }

-    if (currentFocus === null) {
-      // When no specific element is focused on the control bar
      switch (event.eventType) {
-        case "left":
-          onSeek(false);
-          break;
-        case "right":
-          onSeek(true);
-          break;
        case "select":
-          onPlayPause();
+          togglePlayPause();
+          setShowControls(true);
          break;
-        case "down":
-          setCurrentFocus("playPause");
-          break;
-      }
-    } else {
-      // When an element on the control bar is focused
-      switch (event.eventType) {
        case "left":
-        case "right":
-          const nextFocus = focusGraph[currentFocus]?.[event.eventType];
-          if (nextFocus) {
-            setCurrentFocus(nextFocus);
+          seek(-SEEK_STEP); // 快退15秒
+          break;
+        case "longLeft":
+          if (!fastForwardIntervalRef.current && event.eventKeyAction === 0) {
+            fastForwardIntervalRef.current = setInterval(() => {
+              seek(-SEEK_STEP); 
+            }, 200);
          }
          break;
-        case "up":
-          setCurrentFocus(null);
+        case "right":
+          seek(SEEK_STEP);
          break;
-        case "select":
-          actionMap[currentFocus]?.();
+        case "longRight":
+          // 长按开始: 启动连续快进
+          if (!fastForwardIntervalRef.current && event.eventKeyAction === 0) {
+            fastForwardIntervalRef.current = setInterval(() => {
+              seek(SEEK_STEP); 
+            }, 200);
+          }
+          break;
+        case "down":
+          setShowControls(true);
          break;
      }
-    }
-  });
+    },
+    [showControls, showEpisodeModal, setShowControls, resetTimer, togglePlayPause, seek]
+  );

-  return { currentFocus, setCurrentFocus };
+  useTVEventHandler(handleTVEvent);
+
+  // 处理屏幕点击事件
+  const onScreenPress = () => {
+    // 切换控件的显示状态
+    const newShowControls = !showControls;
+    setShowControls(newShowControls);
+
+    // 如果控件变为显示状态，则重置定时器
+    if (newShowControls) {
+      resetTimer();
+    }
+  };
+
+  return { onScreenPress };
 };
--- a/hooks/useThemeColor.ts
+++ b/hooks/useThemeColor.ts
@@ -3,15 +3,13 @@
 * https://docs.expo.dev/guides/color-schemes/
 */

-import {useColorScheme} from 'react-native';
-
 import {Colors} from '@/constants/Colors';

 export function useThemeColor(
  props: {light?: string; dark?: string},
  colorName: keyof typeof Colors.light & keyof typeof Colors.dark,
 ) {
-  const theme = useColorScheme() ?? 'light';
+  const theme = 'dark';
  const colorFromProps = props[theme];

  if (colorFromProps) {
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
  "name": "OrionTV",
  "private": true,
  "main": "expo-router/entry",
-  "version": "1.0.6",
+  "version": "1.1.0",
  "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-font": "~12.0.7",
    "expo-linking": "~6.3.1",
    "expo-router": "~3.5.16",
+    "expo-screen-orientation": "6",
    "expo-splash-screen": "~0.27.5",
    "expo-status-bar": "~1.12.1",
    "expo-system-ui": "~3.0.6",
@@ -44,13 +45,15 @@
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "npm:react-native-tvos@~0.74.2-0",
-    "react-native-gesture-handler": "~2.16.1",
+    "react-native-gesture-handler": "^2.27.1",
    "react-native-media-console": "*",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.1",
    "react-native-screens": "3.31.1",
    "react-native-svg": "^15.12.0",
-    "react-native-web": "~0.19.10"
+    "react-native-toast-message": "^2.3.3",
+    "react-native-web": "~0.19.10",
+    "zustand": "^5.0.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
--- a/services/storage.ts
+++ b/services/storage.ts
@@ -10,7 +10,10 @@ const STORAGE_KEYS = {
 } as const;

 // --- Type Definitions (aligned with api.ts) ---
-export type PlayRecord = ApiPlayRecord;
+export interface PlayRecord extends ApiPlayRecord {
+  introEndTime?: number;
+  outroStartTime?: number;
+}

 export interface FavoriteItem {
  id: string;
--- a/stores/homeStore.ts
+++ b/stores/homeStore.ts
@@ -0,0 +1,147 @@
+import { create } from 'zustand';
+import { api, SearchResult, PlayRecord } from '@/services/api';
+import { PlayRecordManager } from '@/services/storage';
+
+export type RowItem = (SearchResult | PlayRecord) & {
+  id: string;
+  source: string;
+  title: string;
+  poster: string;
+  progress?: number;
+  play_time?: number;
+  lastPlayed?: number;
+  episodeIndex?: number;
+  sourceName?: string;
+  totalEpisodes?: number;
+  year?: string;
+  rate?: string;
+};
+
+export interface Category {
+  title: string;
+  type?: 'movie' | 'tv' | 'record';
+  tag?: string;
+}
+
+const initialCategories: Category[] = [
+  { title: '最近播放', type: 'record' },
+  { title: '热门剧集', type: 'tv', tag: '热门' },
+  { title: '综艺', type: 'tv', tag: '综艺' },
+  { title: '热门电影', type: 'movie', tag: '热门' },
+  { title: '豆瓣 Top250', type: 'movie', tag: 'top250' },
+  { title: '儿童', type: 'movie', tag: '少儿' },
+  { title: '美剧', type: 'tv', tag: '美剧' },
+  { title: '韩剧', type: 'tv', tag: '韩剧' },
+  { title: '日剧', type: 'tv', tag: '日剧' },
+  { title: '日漫', type: 'tv', tag: '日本动画' },
+];
+
+interface HomeState {
+  categories: Category[];
+  selectedCategory: Category;
+  contentData: RowItem[];
+  loading: boolean;
+  loadingMore: boolean;
+  pageStart: number;
+  hasMore: boolean;
+  error: string | null;
+  fetchInitialData: () => Promise<void>;
+  loadMoreData: () => Promise<void>;
+  selectCategory: (category: Category) => void;
+  refreshPlayRecords: () => Promise<void>;
+}
+
+const useHomeStore = create<HomeState>((set, get) => ({
+  categories: initialCategories,
+  selectedCategory: initialCategories[0],
+  contentData: [],
+  loading: true,
+  loadingMore: false,
+  pageStart: 0,
+  hasMore: true,
+  error: null,
+
+  fetchInitialData: async () => {
+    set({ loading: true, contentData: [], pageStart: 0, hasMore: true, error: null });
+    await get().loadMoreData();
+  },
+
+  loadMoreData: async () => {
+    const { selectedCategory, pageStart, loadingMore, hasMore } = get();
+    if (loadingMore || !hasMore) return;
+
+    if (pageStart > 0) {
+      set({ loadingMore: true });
+    }
+
+    try {
+      if (selectedCategory.type === 'record') {
+        const records = await PlayRecordManager.getAll();
+        const rowItems = Object.entries(records)
+          .map(([key, record]) => {
+            const [source, id] = key.split('+');
+            return { ...record, id, source, progress: record.play_time / record.total_time, poster: record.cover, sourceName: record.source_name, episodeIndex: record.index, totalEpisodes: record.total_episodes, lastPlayed: record.save_time, play_time: record.play_time };
+          })
+          .filter(record => record.progress !== undefined && record.progress > 0 && record.progress < 1)
+          .sort((a, b) => (b.lastPlayed || 0) - (a.lastPlayed || 0));
+        
+        set({ contentData: rowItems, hasMore: false });
+      } else if (selectedCategory.type && selectedCategory.tag) {
+        const result = await api.getDoubanData(selectedCategory.type, selectedCategory.tag, 20, pageStart);
+        if (result.list.length === 0) {
+          set({ hasMore: false });
+        } else {
+          const newItems = result.list.map(item => ({
+            ...item,
+            id: item.title,
+            source: 'douban',
+          })) as RowItem[];
+          set(state => ({
+            contentData: pageStart === 0 ? newItems : [...state.contentData, ...newItems],
+            pageStart: state.pageStart + result.list.length,
+            hasMore: true,
+          }));
+        }
+      } else {
+        set({ hasMore: false });
+      }
+    } catch (err: any) {
+      if (err.message === 'API_URL_NOT_SET') {
+        set({ error: '请点击右上角设置按钮，配置您的 API 地址' });
+      } else {
+        set({ error: '加载失败，请重试' });
+      }
+    } finally {
+      set({ loading: false, loadingMore: false });
+    }
+  },
+
+  selectCategory: (category: Category) => {
+    set({ selectedCategory: category });
+    get().fetchInitialData();
+  },
+
+  refreshPlayRecords: async () => {
+    const records = await PlayRecordManager.getAll();
+    const hasRecords = Object.keys(records).length > 0;
+    set(state => {
+      const recordCategoryExists = state.categories.some(c => c.type === 'record');
+      if (hasRecords && !recordCategoryExists) {
+        return { categories: [initialCategories[0], ...state.categories] };
+      }
+      if (!hasRecords && recordCategoryExists) {
+        const newCategories = state.categories.filter(c => c.type !== 'record');
+        if (state.selectedCategory.type === 'record') {
+            get().selectCategory(newCategories[0] || null);
+        }
+        return { categories: newCategories };
+      }
+      return {};
+    });
+    if (get().selectedCategory.type === 'record') {
+      get().fetchInitialData();
+    }
+  },
+}));
+
+export default useHomeStore;
--- a/stores/playerStore.ts
+++ b/stores/playerStore.ts
@@ -0,0 +1,327 @@
+import { create } from "zustand";
+import Toast from "react-native-toast-message";
+import { AVPlaybackStatus, Video } from "expo-av";
+import { RefObject } from "react";
+import { api, VideoDetail as ApiVideoDetail, SearchResult } from "@/services/api";
+import { PlayRecord, PlayRecordManager } from "@/services/storage";
+
+interface Episode {
+  url: string;
+  title: string;
+}
+
+interface VideoDetail {
+  videoInfo: ApiVideoDetail["videoInfo"];
+  episodes: Episode[];
+  sources: SearchResult[];
+}
+
+interface PlayerState {
+  videoRef: RefObject<Video> | null;
+  detail: VideoDetail | null;
+  episodes: Episode[];
+  sources: SearchResult[];
+  currentSourceIndex: number;
+  currentEpisodeIndex: number;
+  status: AVPlaybackStatus | null;
+  isLoading: boolean;
+  showControls: boolean;
+  showEpisodeModal: boolean;
+  showSourceModal: boolean;
+  showNextEpisodeOverlay: boolean;
+  isSeeking: boolean;
+  seekPosition: number;
+  progressPosition: number;
+  initialPosition: number;
+  introEndTime?: number;
+  outroStartTime?: number;
+  setVideoRef: (ref: RefObject<Video>) => void;
+  loadVideo: (source: string, id: string, episodeIndex: number, position?: number) => Promise<void>;
+  switchSource: (newSourceIndex: number) => Promise<void>;
+  playEpisode: (index: number) => void;
+  togglePlayPause: () => void;
+  seek: (duration: number) => void;
+  handlePlaybackStatusUpdate: (newStatus: AVPlaybackStatus) => void;
+  setLoading: (loading: boolean) => void;
+  setShowControls: (show: boolean) => void;
+  setShowEpisodeModal: (show: boolean) => void;
+  setShowSourceModal: (show: boolean) => void;
+  setShowNextEpisodeOverlay: (show: boolean) => void;
+  setIntroEndTime: () => void;
+  setOutroStartTime: () => void;
+  reset: () => void;
+  _seekTimeout?: NodeJS.Timeout;
+  // Internal helper
+  _savePlayRecord: (updates?: Partial<PlayRecord>) => void;
+}
+
+const usePlayerStore = create<PlayerState>((set, get) => ({
+  videoRef: null,
+  detail: null,
+  episodes: [],
+  sources: [],
+  currentSourceIndex: 0,
+  currentEpisodeIndex: 0,
+  status: null,
+  isLoading: true,
+  showControls: false,
+  showEpisodeModal: false,
+  showSourceModal: false,
+  showNextEpisodeOverlay: false,
+  isSeeking: false,
+  seekPosition: 0,
+  progressPosition: 0,
+  initialPosition: 0,
+  introEndTime: undefined,
+  outroStartTime: undefined,
+  _seekTimeout: undefined,
+
+  setVideoRef: (ref) => set({ videoRef: ref }),
+
+  loadVideo: async (source, id, episodeIndex, position) => {
+    set({
+      isLoading: true,
+      detail: null,
+      episodes: [],
+      sources: [],
+      currentEpisodeIndex: 0,
+      initialPosition: position || 0,
+    });
+    try {
+      const videoDetail = await api.getVideoDetail(source, id);
+      const episodes = videoDetail.episodes.map((ep, index) => ({ url: ep, title: `第 ${index + 1} 集` }));
+
+      const searchResults = await api.searchVideos(videoDetail.videoInfo.title);
+      const sources = searchResults.results.filter((r) => r.title === videoDetail.videoInfo.title);
+      const currentSourceIndex = sources.findIndex((s) => s.source === source && s.id.toString() === id);
+      const playRecord = await PlayRecordManager.get(source, id);
+
+      set({
+        detail: { videoInfo: videoDetail.videoInfo, episodes, sources },
+        episodes,
+        sources,
+        currentSourceIndex: currentSourceIndex !== -1 ? currentSourceIndex : 0,
+        currentEpisodeIndex: episodeIndex,
+        isLoading: false,
+        introEndTime: playRecord?.introEndTime,
+        outroStartTime: playRecord?.outroStartTime,
+      });
+    } catch (error) {
+      console.error("Failed to load video details", error);
+      set({ isLoading: false });
+    }
+  },
+
+  switchSource: async (newSourceIndex: number) => {
+    const { sources, currentEpisodeIndex, status, detail } = get();
+    if (!detail || newSourceIndex < 0 || newSourceIndex >= sources.length) return;
+
+    const newSource = sources[newSourceIndex];
+    const position = status?.isLoaded ? status.positionMillis : 0;
+
+    set({ isLoading: true, showSourceModal: false });
+
+    try {
+      const videoDetail = await api.getVideoDetail(newSource.source, newSource.id.toString());
+      const episodes = videoDetail.episodes.map((ep, index) => ({ url: ep, title: `第 ${index + 1} 集` }));
+
+      set({
+        detail: {
+          ...detail,
+          videoInfo: videoDetail.videoInfo,
+          episodes,
+        },
+        episodes,
+        currentSourceIndex: newSourceIndex,
+        currentEpisodeIndex: currentEpisodeIndex < episodes.length ? currentEpisodeIndex : 0,
+        initialPosition: position,
+        isLoading: false,
+      });
+    } catch (error) {
+      console.error("Failed to switch source", error);
+      set({ isLoading: false });
+    }
+  },
+
+  playEpisode: (index) => {
+    const { episodes, videoRef } = get();
+    if (index >= 0 && index < episodes.length) {
+      set({
+        currentEpisodeIndex: index,
+        showNextEpisodeOverlay: false,
+        initialPosition: 0,
+        progressPosition: 0,
+        seekPosition: 0,
+      });
+      videoRef?.current?.replayAsync();
+    }
+  },
+
+  togglePlayPause: () => {
+    const { status, videoRef } = get();
+    if (status?.isLoaded) {
+      if (status.isPlaying) {
+        videoRef?.current?.pauseAsync();
+      } else {
+        videoRef?.current?.playAsync();
+      }
+    }
+  },
+
+  seek: (duration) => {
+    const { status, videoRef } = get();
+    if (!status?.isLoaded || !status.durationMillis) return;
+
+    const newPosition = Math.max(0, Math.min(status.positionMillis + duration, status.durationMillis));
+    videoRef?.current?.setPositionAsync(newPosition);
+
+    set({
+      isSeeking: true,
+      seekPosition: newPosition / status.durationMillis,
+    });
+
+    if (get()._seekTimeout) {
+      clearTimeout(get()._seekTimeout);
+    }
+    const timeoutId = setTimeout(() => set({ isSeeking: false }), 1000);
+    set({ _seekTimeout: timeoutId });
+  },
+
+  setIntroEndTime: () => {
+    const { status, detail, introEndTime: existingIntroEndTime } = get();
+    if (!status?.isLoaded || !detail) return;
+
+    if (existingIntroEndTime) {
+      // Clear the time
+      set({ introEndTime: undefined });
+      get()._savePlayRecord({ introEndTime: undefined });
+      Toast.show({
+        type: "info",
+        text1: "已清除片头时间",
+      });
+    } else {
+      // Set the time
+      const newIntroEndTime = status.positionMillis;
+      set({ introEndTime: newIntroEndTime });
+      get()._savePlayRecord({ introEndTime: newIntroEndTime });
+      Toast.show({
+        type: "success",
+        text1: "设置成功",
+        text2: "片头时间已记录。",
+      });
+    }
+  },
+
+  setOutroStartTime: () => {
+    const { status, detail, outroStartTime: existingOutroStartTime } = get();
+    if (!status?.isLoaded || !detail) return;
+
+    if (existingOutroStartTime) {
+      // Clear the time
+      set({ outroStartTime: undefined });
+      get()._savePlayRecord({ outroStartTime: undefined });
+      Toast.show({
+        type: "info",
+        text1: "已清除片尾时间",
+      });
+    } else {
+      // Set the time
+      const newOutroStartTime = status.positionMillis;
+      set({ outroStartTime: newOutroStartTime });
+      get()._savePlayRecord({ outroStartTime: newOutroStartTime });
+      Toast.show({
+        type: "success",
+        text1: "设置成功",
+        text2: "片尾时间已记录。",
+      });
+    }
+  },
+
+  _savePlayRecord: (updates = {}) => {
+    const { detail, currentEpisodeIndex, episodes, status, introEndTime, outroStartTime } = get();
+    if (detail && status?.isLoaded) {
+      const { videoInfo } = detail;
+      const existingRecord = {
+        introEndTime,
+        outroStartTime,
+      };
+      PlayRecordManager.save(videoInfo.source, videoInfo.id, {
+        title: videoInfo.title,
+        cover: videoInfo.cover || "",
+        index: currentEpisodeIndex,
+        total_episodes: episodes.length,
+        play_time: status.positionMillis,
+        total_time: status.durationMillis || 0,
+        source_name: videoInfo.source_name,
+        ...existingRecord,
+        ...updates,
+      });
+    }
+  },
+
+  handlePlaybackStatusUpdate: (newStatus) => {
+    if (!newStatus.isLoaded) {
+      if (newStatus.error) {
+        console.error(`Playback Error: ${newStatus.error}`);
+      }
+      set({ status: newStatus });
+      return;
+    }
+
+    const { detail, currentEpisodeIndex, episodes, outroStartTime, playEpisode } = get();
+
+    if (outroStartTime && newStatus.positionMillis >= outroStartTime) {
+      if (currentEpisodeIndex < episodes.length - 1) {
+        playEpisode(currentEpisodeIndex + 1);
+        return; // Stop further processing for this update
+      }
+    }
+
+    if (detail && newStatus.durationMillis) {
+      get()._savePlayRecord();
+
+      const isNearEnd = newStatus.positionMillis / newStatus.durationMillis > 0.95;
+      if (isNearEnd && currentEpisodeIndex < episodes.length - 1 && !outroStartTime) {
+        set({ showNextEpisodeOverlay: true });
+      } else {
+        set({ showNextEpisodeOverlay: false });
+      }
+    }
+
+    if (newStatus.didJustFinish) {
+      if (currentEpisodeIndex < episodes.length - 1) {
+        playEpisode(currentEpisodeIndex + 1);
+      }
+    }
+
+    const progressPosition = newStatus.durationMillis ? newStatus.positionMillis / newStatus.durationMillis : 0;
+    set({ status: newStatus, progressPosition });
+  },
+
+  setLoading: (loading) => set({ isLoading: loading }),
+  setShowControls: (show) => set({ showControls: show }),
+  setShowEpisodeModal: (show) => set({ showEpisodeModal: show }),
+  setShowSourceModal: (show) => set({ showSourceModal: show }),
+  setShowNextEpisodeOverlay: (show) => set({ showNextEpisodeOverlay: show }),
+
+  reset: () => {
+    set({
+      detail: null,
+      episodes: [],
+      sources: [],
+      currentSourceIndex: 0,
+      currentEpisodeIndex: 0,
+      status: null,
+      isLoading: true,
+      showControls: false,
+      showEpisodeModal: false,
+      showSourceModal: false,
+      showNextEpisodeOverlay: false,
+      initialPosition: 0,
+      introEndTime: undefined,
+      outroStartTime: undefined,
+    });
+  },
+}));
+
+export default usePlayerStore;
--- a/stores/settingsStore.ts
+++ b/stores/settingsStore.ts
@@ -0,0 +1,34 @@
+import { create } from 'zustand';
+import { SettingsManager } from '@/services/storage';
+import { api } from '@/services/api';
+import useHomeStore from './homeStore';
+
+interface SettingsState {
+  apiBaseUrl: string;
+  isModalVisible: boolean;
+  loadSettings: () => Promise<void>;
+  setApiBaseUrl: (url: string) => void;
+  saveSettings: () => Promise<void>;
+  showModal: () => void;
+  hideModal: () => void;
+}
+
+export const useSettingsStore = create<SettingsState>((set, get) => ({
+  apiBaseUrl: 'https://orion-tv.edu.deal',
+  isModalVisible: false,
+  loadSettings: async () => {
+    const settings = await SettingsManager.get();
+    set({ apiBaseUrl: settings.apiBaseUrl });
+    api.setBaseUrl(settings.apiBaseUrl);
+  },
+  setApiBaseUrl: (url) => set({ apiBaseUrl: url }),
+  saveSettings: async () => {
+    const { apiBaseUrl } = get();
+    await SettingsManager.save({ apiBaseUrl });
+    api.setBaseUrl(apiBaseUrl);
+    set({ isModalVisible: false });
+    useHomeStore.getState().fetchInitialData();
+  },
+  showModal: () => set({ isModalVisible: true }),
+  hideModal: () => set({ isModalVisible: false }),
+}));
--- a/yarn.lock
+++ b/yarn.lock
@@ -4004,6 +4004,11 @@ expo-router@~3.5.16:
    react-native-helmet-async "2.0.4"
    schema-utils "^4.0.1"

+expo-screen-orientation@6:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/expo-screen-orientation/-/expo-screen-orientation-6.4.1.tgz#1c4428a058921e48b5caa45367e626b8bec10e24"
+  integrity sha512-VM0C9ORNL1aT6Dr2OUeryzV519n0FjtXI2m+HlijOMi1QT2bPg4tBkCd7HLgywU4dZ1Esa46ewUudmk+fOqmMQ==
+
 expo-splash-screen@0.27.7, expo-splash-screen@~0.27.5:
  version "0.27.7"
  resolved "https://registry.yarnpkg.com/expo-splash-screen/-/expo-splash-screen-0.27.7.tgz#52171be54d8c008880d928e802819d767fbd3c12"
@@ -5850,7 +5855,7 @@ lodash.throttle@^4.1.1:
  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
  integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==

-lodash@^4.17.10, lodash@^4.17.13, lodash@^4.17.19, lodash@^4.17.21:
+lodash@^4.17.10, lodash@^4.17.13, lodash@^4.17.19:
  version "4.17.21"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -5879,7 +5884,7 @@ logkitty@^0.7.1:
    dayjs "^1.8.15"
    yargs "^15.1.0"

-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -6920,15 +6925,6 @@ prompts@^2.0.1, prompts@^2.2.1, prompts@^2.3.2, prompts@^2.4.2:
    kleur "^3.0.3"
    sisteransi "^1.0.5"

-prop-types@^15.7.2:
-  version "15.8.1"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
-  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
-  dependencies:
-    loose-envify "^1.4.0"
-    object-assign "^4.1.1"
-    react-is "^16.13.1"
-
 psl@^1.1.33:
  version "1.15.0"
  resolved "https://registry.yarnpkg.com/psl/-/psl-1.15.0.tgz#bdace31896f1d97cec6a79e8224898ce93d974c6"
@@ -7037,7 +7033,7 @@ react-freeze@^1.0.0:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==

-react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.4:
+react-is@^16.13.0, react-is@^16.7.0, react-is@^16.8.4:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -7047,16 +7043,14 @@ react-is@^17.0.1:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==

-react-native-gesture-handler@~2.16.1:
-  version "2.16.2"
-  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.16.2.tgz#032bd2a07334292d7f6cff1dc9d1ec928f72e26d"
-  integrity sha512-vGFlrDKlmyI+BT+FemqVxmvO7nqxU33cgXVsn6IKAFishvlG3oV2Ds67D5nPkHMea8T+s1IcuMm0bF8ntZtAyg==
+react-native-gesture-handler@^2.27.1:
+  version "2.27.1"
+  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.27.1.tgz#8865b2345f4c65536517f20cedc420481fc72d49"
+  integrity sha512-57TUWerhdz589OcDD21e/YlL923Ma4OIpyWsP0hy7gItBCPm5d7qIUW7Yo/cS2wo1qDdOhJaNlvlBD1lDou1fA==
  dependencies:
    "@egjs/hammerjs" "^2.0.17"
    hoist-non-react-statics "^3.3.0"
    invariant "^2.2.4"
-    lodash "^4.17.21"
-    prop-types "^15.7.2"

 react-native-helmet-async@2.0.4:
  version "2.0.4"
@@ -7108,6 +7102,11 @@ react-native-svg@^15.12.0:
    css-tree "^1.1.3"
    warn-once "0.1.1"

+react-native-toast-message@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/react-native-toast-message/-/react-native-toast-message-2.3.3.tgz#e301508d386a9902ff6b4559ecc6674f8cfdf97a"
+  integrity sha512-4IIUHwUPvKHu4gjD0Vj2aGQzqPATiblL1ey8tOqsxOWRPGGu52iIbL8M/mCz4uyqecvPdIcMY38AfwRuUADfQQ==
+
 react-native-web@~0.19.10:
  version "0.19.13"
  resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.19.13.tgz#2d84849bf0251ec0e3a8072fda7f9a7c29375331"
@@ -8953,3 +8952,8 @@ zod@^3.22.4:
  version "3.25.67"
  resolved "https://registry.yarnpkg.com/zod/-/zod-3.25.67.tgz#62987e4078e2ab0f63b491ef0c4f33df24236da8"
  integrity sha512-idA2YXwpCdqUSKRCACDE6ItZD9TZzy3OZMtpfLoh6oPR47lipysRrJfjzMqFxQ3uJuUPyUeWe1r9vLH33xO/Qw==
+
+zustand@^5.0.6:
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-5.0.6.tgz#a2da43d8dc3d31e314279e5baec06297bea70a5c"
+  integrity sha512-ihAqNeUVhe0MAD+X8M5UzqyZ9k3FFZLBTtqo6JLPwV53cbRB/mJwBI0PxcIgqhBBHlEs8G45OTDTMq3gNcLq3A==
Author	SHA1	Message	Date
zimplexing	803fc87fd9	Enhance responsive design and update dependencies - Added expo-screen-orientation package to manage screen orientation. - Updated react-native-gesture-handler to version 2.27.1 for improved gesture handling. - Implemented responsive design features across multiple screens using the new useResponsive hook. - Refactored DetailScreen, HomeScreen, SearchScreen, and PlayScreen to adapt layouts based on screen size. - Introduced PlayerControlsMobile for optimized playback controls on mobile devices. - Adjusted button styles in StyledButton for better responsiveness.	2025-07-09 17:23:46 +08:00
Xin	d42a3e014e	Update README.md	2025-07-09 12:28:36 +08:00
Xin	83bf083a6f	Merge pull request #16 from zimplexing/store-refactor Refactor components to use Zustand for state management	2025-07-08 22:08:22 +08:00
zimplexing	c9e5464000	Implement toggle functionality for intro and outro time settings with user feedback	2025-07-08 22:07:20 +08:00
zimplexing	30724a1e19	Add toast notifications for intro and outro time settings, update player store and media button for new time tracking	2025-07-08 22:07:14 +08:00
zimplexing	5043b33222	Refactor color scheme handling to use a fixed 'dark' theme and implement SourceSelectionModal for source management in the player	2025-07-08 20:57:38 +08:00
zimplexing	b238ffe3ba	Refactor button animation logic to focus only on isFocused state and update version to 1.1.0	2025-07-08 20:33:06 +08:00
zimplexing	74ad0872cb	Refactor components for consistent styling and improve button animations	2025-07-08 19:52:20 +08:00
zimplexing	504f12067b	Refactor components to use StyledButton for consistent button styling - Replaced custom button implementations with StyledButton in various components including DetailScreen, HomeScreen, SearchScreen, and SettingsModal. - Updated button styles and behaviors to align with the new StyledButton component. - Removed the obsolete DetailButton component to streamline the codebase.	2025-07-08 17:24:55 +08:00
zimplexing	9f721c22d5	Implement back navigation and control visibility in PlayScreen - Added back navigation functionality using the router in PlayScreen. - Implemented hardware back button handling to toggle controls visibility. - Updated useTVRemoteHandler to show controls on down key press.	2025-07-08 17:03:15 +08:00
zimplexing	5b4c8db317	Add Prettier configuration and refactor code for consistent formatting - Introduced a .prettierrc file to standardize code formatting. - Updated import statements and JSX attributes in NotFoundScreen, HomeScreen, PlayScreen, and PlayerControls for consistent use of double quotes. - Refactored styles in various components to use double quotes for string values. - Added SeekingBar component to enhance video playback experience.	2025-07-08 16:58:06 +08:00
Xin	d8f7953109	Update README.md	2025-07-08 09:48:00 +08:00
zimplexing	bd22fa2996	Enhance video playback features by adding playTime and initialPosition handling, and update PlayerControls for better focus management	2025-07-07 22:14:56 +08:00
zimplexing	08e24dd748	Refactor components to use Zustand for state management - Updated EpisodeSelectionModal to utilize Zustand for episode selection state. - Refactored PlayerControls to manage playback state and controls using Zustand. - Simplified SettingsModal to handle settings state with Zustand. - Introduced homeStore for managing home screen categories and content data. - Created playerStore for managing video playback and episode details. - Added settingsStore for managing API settings and modal visibility. - Updated package.json to include Zustand as a dependency. - Cleaned up code formatting and improved readability across components.	2025-07-06 20:45:42 +08:00
				`@@ -1 +0,0 @@`
				`export {useColorScheme} from 'react-native';`