Implement toggle functionality for intro and outro time settings with user feedback

Add toast notifications for intro and outro time settings, update player store and media button for new time tracking
Refactor color scheme handling to use a fixed 'dark' theme and implement SourceSelectionModal for source management in the player
2026-02-10 17:44:44 +08:00 · 2025-07-08 22:07:20 +08:00 · 2025-07-08 22:07:14 +08:00 · 2025-07-08 20:57:38 +08:00 · 2025-07-08 20:33:06 +08:00 · 2025-07-08 19:52:20 +08:00
29 changed files with 1536 additions and 1063 deletions
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": false,
+  "printWidth": 120
+}
--- 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,11 +1,11 @@
-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 } 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";

 export default function DetailScreen() {
  const { source, q } = useLocalSearchParams();
@@ -24,7 +24,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 +35,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 +61,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 +77,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 +108,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(),
@@ -171,26 +171,27 @@ 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>
@@ -198,9 +199,13 @@ export default function DetailScreen() {
            <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>
+                <StyledButton
+                  key={index}
+                  style={styles.episodeButton}
+                  onPress={() => handlePlay(episode, index)}
+                  text={`第 ${index + 1} 集`}
+                  textStyle={styles.episodeButtonText}
+                />
              ))}
            </ScrollView>
          </View>
@@ -212,9 +217,9 @@ 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,
  },
  poster: {
@@ -225,20 +230,20 @@ const styles = StyleSheet.create({
  infoContainer: {
    flex: 1,
    marginLeft: 20,
-    justifyContent: 'flex-start',
+    justifyContent: "flex-start",
  },
  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 +252,7 @@ const styles = StyleSheet.create({
  },
  description: {
    fontSize: 14,
-    color: '#ccc',
+    color: "#ccc",
    lineHeight: 22,
  },
  bottomContainer: {
@@ -257,70 +262,53 @@ 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: "row",
+    flexWrap: "wrap",
  },
  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,209 +1,65 @@
-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: '日本动画' },
-];
+import React, { 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 VideoCard from "@/components/VideoCard.tv";
+import { useFocusEffect, useRouter } from "expo-router";
+import { Search, Settings } from "lucide-react-native";
+import { SettingsModal } from "@/components/SettingsModal";
+import { StyledButton } from "@/components/StyledButton";
+import useHomeStore, { RowItem, Category } from "@/stores/homeStore";
+import { useSettingsStore } from "@/stores/settingsStore";

 const NUM_COLUMNS = 5;
-const { width } = Dimensions.get('window');
+const { width } = Dimensions.get("window");
 const ITEM_WIDTH = width / NUM_COLUMNS - 24;

 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 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));
-  };
+  const {
+    categories,
+    selectedCategory,
+    contentData,
+    loading,
+    loadingMore,
+    error,
+    fetchInitialData,
+    loadMoreData,
+    selectCategory,
+    refreshPlayRecords,
+  } = useHomeStore();

-  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 showSettingsModal = useSettingsStore((state) => state.showModal);

-    if (!category.type || !category.tag) return;
-
-    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}
+      />
    );
  };

@@ -217,11 +73,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 +94,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 +112,7 @@ export default function HomeScreen() {
        <FlatList
          data={categories}
          renderItem={renderCategory}
-          keyExtractor={item => item.title}
+          keyExtractor={(item) => item.title}
          horizontal
          showsHorizontalScrollIndicator={false}
          contentContainerStyle={styles.categoryListContent}
@@ -293,14 +148,7 @@ export default function HomeScreen() {
          }
        />
      )}
-      <SettingsModal
-        visible={isSettingsVisible}
-        onCancel={() => setSettingsVisible(false)}
-        onSave={() => {
-          setSettingsVisible(false);
-          loadInitialData();
-        }}
-      />
+      <SettingsModal />
    </ThemedView>
  );
 }
@@ -313,61 +161,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: {
@@ -377,6 +211,6 @@ const styles = StyleSheet.create({
  itemContainer: {
    margin: 8,
    width: ITEM_WIDTH,
-    alignItems: 'center',
+    alignItems: "center",
  },
 });
--- a/app/play.tsx
+++ b/app/play.tsx
@@ -1,101 +1,87 @@
-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, TouchableOpacity, ActivityIndicator, BackHandler } from "react-native";
+import { useLocalSearchParams, useRouter } from "expo-router";
 import { Video, ResizeMode } from "expo-av";
 import { useKeepAwake } from "expo-keep-awake";
 import { ThemedView } from "@/components/ThemedView";
 import { PlayerControls } from "@/components/PlayerControls";
 import { EpisodeSelectionModal } from "@/components/EpisodeSelectionModal";
+import { SourceSelectionModal } from "@/components/SourceSelectionModal";
+import { SeekingBar } from "@/components/SeekingBar";
 import { NextEpisodeOverlay } from "@/components/NextEpisodeOverlay";
 import { LoadingOverlay } from "@/components/LoadingOverlay";
-import { usePlaybackManager } from "@/hooks/usePlaybackManager";
+import usePlayerStore from "@/stores/playerStore";
 import { useTVRemoteHandler } from "@/hooks/useTVRemoteHandler";

 export default function PlayScreen() {
-  const router = useRouter();
  const videoRef = useRef<Video>(null);
+  const router = useRouter();
  useKeepAwake();
+  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(() => {
+    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 } = useTVRemoteHandler();
+
+  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,78 +92,39 @@ export default function PlayScreen() {
  }

  const currentEpisode = episodes[currentEpisodeIndex];
-  const videoTitle = detail?.videoInfo?.title || "";
-  const hasNextEpisode = currentEpisodeIndex < episodes.length - 1;

  return (
-    <ThemedView style={styles.container}>
-      <TouchableOpacity
-        activeOpacity={1}
-        style={styles.videoContainer}
-        onPress={() => {
-          setShowControls(!showControls);
-          setCurrentFocus(null);
-        }}
-      >
+    <ThemedView focusable style={styles.container}>
+      <TouchableOpacity activeOpacity={1} style={styles.videoContainer} onPress={onScreenPress}>
        <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));
+          onPlaybackStatusUpdate={handlePlaybackStatusUpdate}
+          onLoad={() => {
+            const jumpPosition = introEndTime || initialPosition;
+            if (jumpPosition > 0) {
+              videoRef.current?.setPositionAsync(jumpPosition);
            }
+            usePlayerStore.setState({ isLoading: false });
          }}
-          onLoad={() => setIsLoading(false)}
-          onLoadStart={() => setIsLoading(true)}
+          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 && <PlayerControls showControls={showControls} setShowControls={setShowControls} />}
+
+        <SeekingBar />

        <LoadingOverlay visible={isLoading} />

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

-      <EpisodeSelectionModal
-        visible={showEpisodeModal}
-        episodes={episodes}
-        currentEpisodeIndex={currentEpisodeIndex}
-        episodeGroupSize={episodeGroupSize}
-        selectedEpisodeGroup={selectedEpisodeGroup}
-        setSelectedEpisodeGroup={setSelectedEpisodeGroup}
-        onSelectEpisode={(index) => {
-          playEpisode(index);
-          setShowEpisodeModal(false);
-        }}
-        onClose={() => setShowEpisodeModal(false)}
-      />
+      <EpisodeSelectionModal />
+      <SourceSelectionModal />
    </ThemedView>
  );
 }
--- a/app/search.tsx
+++ b/app/search.tsx
@@ -1,28 +1,19 @@
-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";

 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);

  useEffect(() => {
@@ -46,11 +37,11 @@ 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);
    }
@@ -76,13 +67,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 +81,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 ? (
@@ -136,39 +118,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.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,145 @@
+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";
+
+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 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: 16,
+      paddingVertical: 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: 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/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/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",
@@ -50,7 +50,9 @@
    "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
@@ -7108,6 +7108,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"
@@ -7909,16 +7914,7 @@ string-length@^5.0.1:
    char-regex "^2.0.0"
    strip-ansi "^7.0.1"

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

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

-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
  version "7.1.0"
  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -8750,7 +8739,7 @@ wonka@^6.3.2:
  resolved "https://registry.yarnpkg.com/wonka/-/wonka-6.3.5.tgz#33fa54ea700ff3e87b56fe32202112a9e8fea1a2"
  integrity sha512-SSil+ecw6B4/Dm7Pf2sAshKQ5hWFvfyGlfPbEd6A14dOH6VDjrmbY86u6nZvy9omGwwIPFR8V41+of1EezgoUw==

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

-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
  version "8.1.0"
  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
@@ -8953,3 +8933,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	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
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';`