From 2bed3a4d008e6a824ec699a5da3352f5f60f0ee6 Mon Sep 17 00:00:00 2001
From: zimplexing <zhangx0728@gmail.com>
Date: Mon, 14 Jul 2025 22:55:55 +0800
Subject: [PATCH] feat: implement user authentication and logout functionality

- Added login/logout buttons to the HomeScreen and SettingsScreen.
- Integrated authentication state management using Zustand and cookies.
- Updated API to support username and password for login.
- Enhanced PlayScreen to handle video playback based on user authentication.
- Created a new detailStore to manage video details and sources.
- Refactored playerStore to utilize detailStore for episode management.
- Added sourceStore to manage video source toggling.
- Updated settingsStore to fetch server configuration.
- Improved error handling and user feedback with Toast notifications.
- Cleaned up unused code and optimized imports across components.
---
 app/_layout.tsx                            |   8 +-
 app/detail.tsx                             | 125 ++----------------
 app/index.tsx                              |   9 +-
 app/play.tsx                               |  57 ++++-----
 app/settings.tsx                           |   2 +
 backend/src/config/config.json             |  12 +-
 backend/src/data/playrecords.json          |   2 +-
 backend/src/routes/login.ts                |  25 +++-
 components/LoginModal.tsx                  |  30 ++++-
 components/PlayerControls.tsx              |  16 ++-
 components/SourceSelectionModal.tsx        |  16 ++-
 components/settings/VideoSourceSection.tsx |  95 +++-----------
 package.json                               |   1 +
 services/api.ts                            |  18 +--
 stores/authStore.ts                        |  27 ++++
 stores/detailStore.ts                      | 141 +++++++++++++++++++++
 stores/homeStore.ts                        |  21 +++
 stores/playerStore.ts                      | 119 ++++++-----------
 stores/settingsStore.ts                    |  16 ++-
 stores/sourceStore.ts                      |  24 ++++
 yarn.lock                                  |   7 +
 21 files changed, 413 insertions(+), 358 deletions(-)
 create mode 100644 stores/detailStore.ts
 create mode 100644 stores/sourceStore.ts

diff --git a/app/_layout.tsx b/app/_layout.tsx
index 08721d4..6068172 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -9,6 +9,7 @@ import Toast from "react-native-toast-message";
 import { useSettingsStore } from "@/stores/settingsStore";
 import { useRemoteControlStore } from "@/stores/remoteControlStore";
 import LoginModal from "@/components/LoginModal";
+import useAuthStore from "@/stores/authStore";
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
@@ -20,10 +21,13 @@ export default function RootLayout() {
   });
   const { loadSettings, remoteInputEnabled } = useSettingsStore();
   const { startServer, stopServer } = useRemoteControlStore();
+  const { checkLoginStatus } = useAuthStore();
 
   useEffect(() => {
-    loadSettings();
-  }, [loadSettings]);
+    loadSettings().then(() => {
+      checkLoginStatus();
+    });
+  }, [loadSettings, checkLoginStatus]);
 
   useEffect(() => {
     if (loaded || error) {
diff --git a/app/detail.tsx b/app/detail.tsx
index 0df4093..111ab2e 100644
--- a/app/detail.tsx
+++ b/app/detail.tsx
@@ -1,134 +1,37 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect } 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";
-import { useSettingsStore } from "@/stores/settingsStore";
+import useDetailStore from "@/stores/detailStore";
 
 export default function DetailScreen() {
-  const { source, q } = useLocalSearchParams();
+  const { q } = useLocalSearchParams<{ q: string }>();
   const router = useRouter();
-  const [searchResults, setSearchResults] = useState<(SearchResult & { resolution?: string | null })[]>([]);
-  const [detail, setDetail] = useState<(SearchResult & { resolution?: string | null }) | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [allSourcesLoaded, setAllSourcesLoaded] = useState(false);
-  const controllerRef = useRef<AbortController | null>(null);
-  const { videoSource } = useSettingsStore();
+
+  const { detail, searchResults, loading, error, allSourcesLoaded, init, setDetail, abort } = useDetailStore();
 
   useEffect(() => {
-    if (controllerRef.current) {
-      controllerRef.current.abort();
+    if (q) {
+      init(q);
     }
-    controllerRef.current = new AbortController();
-    const signal = controllerRef.current.signal;
-
-    if (typeof q === "string") {
-      const fetchDetailData = async () => {
-        setLoading(true);
-        setSearchResults([]);
-        setDetail(null);
-        setError(null);
-        setAllSourcesLoaded(false);
-
-        try {
-          const allResources = await api.getResources(signal);
-          if (!allResources || allResources.length === 0) {
-            setError("没有可用的播放源");
-            setLoading(false);
-            return;
-          }
-
-          // Filter resources based on enabled sources in settings
-          const resources = videoSource.enabledAll
-            ? allResources
-            : allResources.filter((resource) => videoSource.sources[resource.key]);
-
-          if (!videoSource.enabledAll && resources.length === 0) {
-            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 (index > 0) {
-              resources.unshift(resources.splice(index, 1)[0]);
-            }
-          }
-
-          for (const resource of resources) {
-            try {
-              const { results } = await api.searchVideo(q, resource.key, signal);
-              if (results && results.length > 0) {
-                const searchResult = results[0];
-
-                let resolution;
-                try {
-                  if (searchResult.episodes && searchResult.episodes.length > 0) {
-                    resolution = await getResolutionFromM3U8(searchResult.episodes[0], signal);
-                  }
-                } catch (e) {
-                  if ((e as Error).name !== "AbortError") {
-                    console.error(`Failed to get resolution for ${resource.name}`, e);
-                  }
-                }
-
-                const resultWithResolution = { ...searchResult, resolution };
-
-                setSearchResults((prev) => [...prev, resultWithResolution]);
-
-                if (!foundFirstResult) {
-                  setDetail(resultWithResolution);
-                  foundFirstResult = true;
-                  setLoading(false);
-                }
-              }
-            } catch (e) {
-              if ((e as Error).name !== "AbortError") {
-                console.error(`Error searching in resource ${resource.name}:`, e);
-              }
-            }
-          }
-
-          if (!foundFirstResult) {
-            setError("未找到播放源");
-            setLoading(false);
-          }
-        } catch (e) {
-          if ((e as Error).name !== "AbortError") {
-            setError(e instanceof Error ? e.message : "获取资源列表失败");
-            setLoading(false);
-          }
-        } finally {
-          setAllSourcesLoaded(true);
-        }
-      };
-      fetchDetailData();
-    }
-
     return () => {
-      controllerRef.current?.abort();
+      abort();
     };
-  }, [q, source, videoSource.enabledAll, videoSource.sources]);
+  }, [abort, init, q]);
 
-  const handlePlay = (episodeName: string, episodeIndex: number) => {
+  const handlePlay = (episodeIndex: number) => {
     if (!detail) return;
-    controllerRef.current?.abort(); // Cancel any ongoing fetches
+    abort(); // Cancel any ongoing fetches
     router.push({
       pathname: "/play",
       params: {
+        // Pass necessary identifiers, the rest will be in the store
+        q: detail.title,
         source: detail.source,
         id: detail.id.toString(),
-        episodeUrl: episodeName, // The "episode" is actually the URL
         episodeIndex: episodeIndex.toString(),
-        title: detail.title,
-        poster: detail.poster,
       },
     });
   };
@@ -217,7 +120,7 @@ export default function DetailScreen() {
                 <StyledButton
                   key={index}
                   style={styles.episodeButton}
-                  onPress={() => handlePlay(episode, index)}
+                  onPress={() => handlePlay(index)}
                   text={`第 ${index + 1} 集`}
                   textStyle={styles.episodeButtonText}
                 />
diff --git a/app/index.tsx b/app/index.tsx
index 18f186d..c2f8b13 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -5,9 +5,10 @@ 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 { Search, Settings, LogOut } from "lucide-react-native";
 import { StyledButton } from "@/components/StyledButton";
 import useHomeStore, { RowItem, Category } from "@/stores/homeStore";
+import useAuthStore from "@/stores/authStore";
 
 const NUM_COLUMNS = 5;
 const { width } = Dimensions.get("window");
@@ -31,6 +32,7 @@ export default function HomeScreen() {
     selectCategory,
     refreshPlayRecords,
   } = useHomeStore();
+  const { isLoggedIn, logout } = useAuthStore();
 
   useFocusEffect(
     useCallback(() => {
@@ -132,6 +134,11 @@ export default function HomeScreen() {
           <StyledButton style={styles.searchButton} onPress={() => router.push("/settings")} variant="ghost">
             <Settings color={colorScheme === "dark" ? "white" : "black"} size={24} />
           </StyledButton>
+          {isLoggedIn && (
+            <StyledButton style={styles.searchButton} onPress={logout} variant="ghost">
+              <LogOut color={colorScheme === "dark" ? "white" : "black"} size={24} />
+            </StyledButton>
+          )}
         </View>
       </View>
 
diff --git a/app/play.tsx b/app/play.tsx
index 6104f01..9ec5610 100644
--- a/app/play.tsx
+++ b/app/play.tsx
@@ -10,50 +10,51 @@ import { SourceSelectionModal } from "@/components/SourceSelectionModal";
 import { SeekingBar } from "@/components/SeekingBar";
 import { NextEpisodeOverlay } from "@/components/NextEpisodeOverlay";
 import { LoadingOverlay } from "@/components/LoadingOverlay";
-import usePlayerStore from "@/stores/playerStore";
+import useDetailStore from "@/stores/detailStore";
 import { useTVRemoteHandler } from "@/hooks/useTVRemoteHandler";
+import Toast from "react-native-toast-message";
+import usePlayerStore from "@/stores/playerStore";
 
 export default function PlayScreen() {
   const videoRef = useRef<Video>(null);
   const router = useRouter();
   useKeepAwake();
-  const { source, id, episodeIndex, position } = useLocalSearchParams<{
-    source: string;
-    id: string;
+  const { episodeIndex: episodeIndexStr } = useLocalSearchParams<{
     episodeIndex: string;
-    position: string;
   }>();
+  const episodeIndex = parseInt(episodeIndexStr || "0", 10);
 
+  const { detail } = useDetailStore();
   const {
-    detail,
-    episodes,
-    currentEpisodeIndex,
+    status,
     isLoading,
     showControls,
-    showEpisodeModal,
-    showSourceModal,
     showNextEpisodeOverlay,
     initialPosition,
     introEndTime,
     setVideoRef,
-    loadVideo,
     handlePlaybackStatusUpdate,
     setShowControls,
-    setShowEpisodeModal,
-    setShowSourceModal,
     setShowNextEpisodeOverlay,
     reset,
+    playEpisode,
+    togglePlayPause,
+    seek,
   } = usePlayerStore();
 
   useEffect(() => {
     setVideoRef(videoRef);
-    if (source && id) {
-      loadVideo(source, id, parseInt(episodeIndex || "0", 10), parseInt(position || "0", 10));
-    }
+    // The detail is already in the detailStore, no need to load it again.
+    // We just need to set the current episode in the player store.
+    usePlayerStore.setState({
+      currentEpisodeIndex: episodeIndex,
+      episodes: detail?.episodes.map((ep, index) => ({ url: ep, title: `第 ${index + 1} 集` })) || [],
+    });
+
     return () => {
       reset(); // Reset state when component unmounts
     };
-  }, [source, id, episodeIndex, position, setVideoRef, loadVideo, reset]);
+  }, [episodeIndex, detail, setVideoRef, reset]);
 
   const { onScreenPress } = useTVRemoteHandler();
 
@@ -70,17 +71,9 @@ export default function PlayScreen() {
     const backHandler = BackHandler.addEventListener("hardwareBackPress", backAction);
 
     return () => backHandler.remove();
-  }, [
-    showControls,
-    showEpisodeModal,
-    showSourceModal,
-    setShowControls,
-    setShowEpisodeModal,
-    setShowSourceModal,
-    router,
-  ]);
+  }, [showControls, setShowControls, router]);
 
-  if (!detail && isLoading) {
+  if (!detail) {
     return (
       <ThemedView style={[styles.container, styles.centered]}>
         <ActivityIndicator size="large" color="#fff" />
@@ -88,7 +81,7 @@ export default function PlayScreen() {
     );
   }
 
-  const currentEpisode = episodes[currentEpisodeIndex];
+  const currentEpisode = detail.episodes[episodeIndex];
 
   return (
     <ThemedView focusable style={styles.container}>
@@ -96,9 +89,9 @@ export default function PlayScreen() {
         <Video
           ref={videoRef}
           style={styles.videoPlayer}
-          source={{ uri: currentEpisode?.url }}
+          source={{ uri: currentEpisode }}
           usePoster
-          posterSource={{ uri: detail?.videoInfo.poster ?? "" }}
+          posterSource={{ uri: detail?.poster ?? "" }}
           resizeMode={ResizeMode.CONTAIN}
           onPlaybackStatusUpdate={handlePlaybackStatusUpdate}
           onLoad={() => {
@@ -108,6 +101,10 @@ export default function PlayScreen() {
             }
             usePlayerStore.setState({ isLoading: false });
           }}
+          onError={() => {
+            usePlayerStore.setState({ isLoading: false });
+            Toast.show({ type: "error", text1: "播放失败，请更换源后重试" });
+          }}
           onLoadStart={() => usePlayerStore.setState({ isLoading: true })}
           useNativeControls={false}
           shouldPlay
diff --git a/app/settings.tsx b/app/settings.tsx
index 66a4550..0e84055 100644
--- a/app/settings.tsx
+++ b/app/settings.tsx
@@ -6,6 +6,7 @@ import { ThemedView } from "@/components/ThemedView";
 import { StyledButton } from "@/components/StyledButton";
 import { useThemeColor } from "@/hooks/useThemeColor";
 import { useSettingsStore } from "@/stores/settingsStore";
+import useAuthStore from "@/stores/authStore";
 import { useRemoteControlStore } from "@/stores/remoteControlStore";
 import { APIConfigSection } from "@/components/settings/APIConfigSection";
 import { LiveStreamSection } from "@/components/settings/LiveStreamSection";
@@ -16,6 +17,7 @@ import Toast from "react-native-toast-message";
 export default function SettingsScreen() {
   const { loadSettings, saveSettings, setApiBaseUrl, setM3uUrl } = useSettingsStore();
   const { lastMessage } = useRemoteControlStore();
+  const { isLoggedIn, logout } = useAuthStore();
   const backgroundColor = useThemeColor({}, "background");
 
   const [hasChanges, setHasChanges] = useState(false);
diff --git a/backend/src/config/config.json b/backend/src/config/config.json
index 6afc400..dcdf585 100644
--- a/backend/src/config/config.json
+++ b/backend/src/config/config.json
@@ -3,8 +3,7 @@
   "api_site": {
     "dyttzy": {
       "api": "http://caiji.dyttzyapi.com/api.php/provide/vod",
-      "name": "电影天堂资源",
-      "detail": "http://caiji.dyttzyapi.com"
+      "name": "电影天堂资源"
     },
     "ruyi": {
       "api": "https://cj.rycjapi.com/api.php/provide/vod",
@@ -16,8 +15,7 @@
     },
     "heimuer": {
       "api": "https://json.heimuer.xyz/api.php/provide/vod",
-      "name": "黑木耳",
-      "detail": "https://heimuer.tv"
+      "name": "黑木耳"
     },
     "bfzy": {
       "api": "https://bfzyapi.com/api.php/provide/vod",
@@ -29,8 +27,7 @@
     },
     "ffzy": {
       "api": "http://ffzy5.tv/api.php/provide/vod",
-      "name": "非凡影视",
-      "detail": "http://ffzy5.tv"
+      "name": "非凡影视"
     },
     "zy360": {
       "api": "https://360zy.com/api.php/provide/vod",
@@ -50,8 +47,7 @@
     },
     "jisu": {
       "api": "https://jszyapi.com/api.php/provide/vod",
-      "name": "极速资源",
-      "detail": "https://jszyapi.com"
+      "name": "极速资源"
     },
     "dbzy": {
       "api": "https://dbzy.tv/api.php/provide/vod",
diff --git a/backend/src/data/playrecords.json b/backend/src/data/playrecords.json
index 0967ef4..9e26dfe 100644
--- a/backend/src/data/playrecords.json
+++ b/backend/src/data/playrecords.json
@@ -1 +1 @@
-{}
+{}
\ No newline at end of file
diff --git a/backend/src/routes/login.ts b/backend/src/routes/login.ts
index 21f10f3..3555417 100644
--- a/backend/src/routes/login.ts
+++ b/backend/src/routes/login.ts
@@ -4,6 +4,7 @@ import dotenv from "dotenv";
 dotenv.config();
 
 const router = express.Router();
+const username = process.env.USERNAME;
 const password = process.env.PASSWORD;
 
 /**
@@ -11,6 +12,7 @@ const password = process.env.PASSWORD;
  * @apiName UserLogin
  * @apiGroup User
  *
+ * @apiBody {String} username User's username.
  * @apiBody {String} password User's password.
  *
  * @apiSuccess {Boolean} ok Indicates if the login was successful.
@@ -30,17 +32,26 @@ const password = process.env.PASSWORD;
  *     }
  */
 router.post("/login", (req: Request, res: Response) => {
-  if (!password) {
-    // If no password is set, login is always successful.
-    return res.json({ ok: true });
+  const { username: inputUsername, password: inputPassword } = req.body;
+
+  // Compatibility with old versions, if username is not set, only password is required
+  if (!username || !password) {
+    if (inputPassword === password) {
+      res.cookie("auth", "true", { httpOnly: true, maxAge: 24 * 60 * 60 * 1000 });
+      return res.json({ ok: true });
+    } else if (!password) {
+      // If no password is set, login is always successful.
+      return res.json({ ok: true });
+    } else {
+      return res.status(400).json({ message: "Invalid password" });
+    }
   }
 
-  const { password: inputPassword } = req.body;
-
-  if (inputPassword === password) {
+  if (inputUsername === username && inputPassword === password) {
+    res.cookie("auth", "true", { httpOnly: true, maxAge: 24 * 60 * 60 * 1000 });
     res.json({ ok: true });
   } else {
-    res.status(400).json({ message: "Invalid password" });
+    res.status(400).json({ message: "Invalid username or password" });
   }
 });
 
diff --git a/components/LoginModal.tsx b/components/LoginModal.tsx
index e03fdeb..3374036 100644
--- a/components/LoginModal.tsx
+++ b/components/LoginModal.tsx
@@ -2,29 +2,38 @@ import React, { useState } from "react";
 import { Modal, View, Text, TextInput, StyleSheet, ActivityIndicator } from "react-native";
 import Toast from "react-native-toast-message";
 import useAuthStore from "@/stores/authStore";
+import { useSettingsStore } from "@/stores/settingsStore";
+import useHomeStore from "@/stores/homeStore";
 import { api } from "@/services/api";
 import { ThemedView } from "./ThemedView";
 import { ThemedText } from "./ThemedText";
 import { StyledButton } from "./StyledButton";
 
 const LoginModal = () => {
-  const { isLoginModalVisible, hideLoginModal } = useAuthStore();
+  const { isLoginModalVisible, hideLoginModal, checkLoginStatus } = useAuthStore();
+  const { serverConfig } = useSettingsStore();
+  const { refreshPlayRecords } = useHomeStore();
+  const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [isLoading, setIsLoading] = useState(false);
 
   const handleLogin = async () => {
-    if (!password) {
-      Toast.show({ type: "error", text1: "请输入密码" });
+    const isLocalStorage = serverConfig?.StorageType === "localstorage";
+    if (!password || (!isLocalStorage && !username)) {
+      Toast.show({ type: "error", text1: "请输入用户名和密码" });
       return;
     }
     setIsLoading(true);
     try {
-      await api.login(password);
+      await api.login(isLocalStorage ? undefined : username, password);
+      await checkLoginStatus();
+      await refreshPlayRecords();
       Toast.show({ type: "success", text1: "登录成功" });
       hideLoginModal();
+      setUsername("");
       setPassword("");
     } catch (error) {
-      Toast.show({ type: "error", text1: "登录失败", text2: "密码错误或服务器无法连接" });
+      Toast.show({ type: "error", text1: "登录失败", text2: "用户名或密码错误" });
     } finally {
       setIsLoading(false);
     }
@@ -36,6 +45,16 @@ const LoginModal = () => {
         <ThemedView style={styles.container}>
           <ThemedText style={styles.title}>需要登录</ThemedText>
           <ThemedText style={styles.subtitle}>服务器需要验证您的身份</ThemedText>
+          {serverConfig?.StorageType !== "localstorage" && (
+            <TextInput
+              style={styles.input}
+              placeholder="请输入用户名"
+              placeholderTextColor="#888"
+              value={username}
+              onChangeText={setUsername}
+              autoFocus
+            />
+          )}
           <TextInput
             style={styles.input}
             placeholder="请输入密码"
@@ -43,7 +62,6 @@ const LoginModal = () => {
             secureTextEntry
             value={password}
             onChangeText={setPassword}
-            autoFocus
           />
           <StyledButton text={isLoading ? "" : "登录"} onPress={handleLogin} disabled={isLoading} style={styles.button}>
             {isLoading && <ActivityIndicator color="#fff" />}
diff --git a/components/PlayerControls.tsx b/components/PlayerControls.tsx
index cc9e863..8493256 100644
--- a/components/PlayerControls.tsx
+++ b/components/PlayerControls.tsx
@@ -5,6 +5,8 @@ import { ThemedText } from "@/components/ThemedText";
 import { MediaButton } from "@/components/MediaButton";
 
 import usePlayerStore from "@/stores/playerStore";
+import useDetailStore from "@/stores/detailStore";
+import { useSources } from "@/stores/sourceStore";
 
 interface PlayerControlsProps {
   showControls: boolean;
@@ -13,9 +15,8 @@ interface PlayerControlsProps {
 
 export const PlayerControls: React.FC<PlayerControlsProps> = ({ showControls, setShowControls }) => {
   const {
-    detail,
     currentEpisodeIndex,
-    currentSourceIndex,
+    episodes,
     status,
     isSeeking,
     seekPosition,
@@ -30,12 +31,15 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({ showControls, se
     outroStartTime,
   } = usePlayerStore();
 
-  const videoTitle = detail?.videoInfo?.title || "";
-  const currentEpisode = detail?.episodes[currentEpisodeIndex];
+  const { detail } = useDetailStore();
+  const resources = useSources();
+
+  const videoTitle = detail?.title || "";
+  const currentEpisode = episodes[currentEpisodeIndex];
   const currentEpisodeTitle = currentEpisode?.title;
-  const currentSource = detail?.sources[currentSourceIndex];
+  const currentSource = resources.find((r) => r.source === detail?.source);
   const currentSourceName = currentSource?.source_name;
-  const hasNextEpisode = currentEpisodeIndex < (detail?.episodes.length || 0) - 1;
+  const hasNextEpisode = currentEpisodeIndex < (episodes.length || 0) - 1;
 
   const formatTime = (milliseconds: number) => {
     if (!milliseconds) return "00:00";
diff --git a/components/SourceSelectionModal.tsx b/components/SourceSelectionModal.tsx
index a35dd3e..6686ff9 100644
--- a/components/SourceSelectionModal.tsx
+++ b/components/SourceSelectionModal.tsx
@@ -1,14 +1,16 @@
 import React from "react";
 import { View, Text, StyleSheet, Modal, FlatList } from "react-native";
 import { StyledButton } from "./StyledButton";
+import useDetailStore from "@/stores/detailStore";
 import usePlayerStore from "@/stores/playerStore";
 
 export const SourceSelectionModal: React.FC = () => {
-  const { showSourceModal, sources, currentSourceIndex, switchSource, setShowSourceModal } = usePlayerStore();
+  const { showSourceModal, setShowSourceModal } = usePlayerStore();
+  const { searchResults, detail, setDetail } = useDetailStore();
 
   const onSelectSource = (index: number) => {
-    if (index !== currentSourceIndex) {
-      switchSource(index);
+    if (searchResults[index].source !== detail?.source) {
+      setDetail(searchResults[index]);
     }
     setShowSourceModal(false);
   };
@@ -23,16 +25,16 @@ export const SourceSelectionModal: React.FC = () => {
         <View style={styles.modalContent}>
           <Text style={styles.modalTitle}>选择播放源</Text>
           <FlatList
-            data={sources}
+            data={searchResults}
             numColumns={3}
             contentContainerStyle={styles.sourceList}
-            keyExtractor={(item, index) => `source-${item.source}-${item.id}-${index}`}
+            keyExtractor={(item, index) => `source-${item.source}-${index}`}
             renderItem={({ item, index }) => (
               <StyledButton
                 text={item.source_name}
                 onPress={() => onSelectSource(index)}
-                isSelected={currentSourceIndex === index}
-                hasTVPreferredFocus={currentSourceIndex === index}
+                isSelected={detail?.source === item.source}
+                hasTVPreferredFocus={detail?.source === item.source}
                 style={styles.sourceItem}
                 textStyle={styles.sourceItemText}
               />
diff --git a/components/settings/VideoSourceSection.tsx b/components/settings/VideoSourceSection.tsx
index 5c42a1b..e02df50 100644
--- a/components/settings/VideoSourceSection.tsx
+++ b/components/settings/VideoSourceSection.tsx
@@ -1,10 +1,10 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { StyleSheet, View, Switch, ActivityIndicator, FlatList, Pressable, Animated } from "react-native";
+import React, { useState, useCallback } from "react";
+import { StyleSheet, Switch, FlatList, Pressable, Animated } from "react-native";
 import { useTVEventHandler } from "react-native";
 import { ThemedText } from "@/components/ThemedText";
 import { SettingsSection } from "./SettingsSection";
-import { api, ApiSite } from "@/services/api";
 import { useSettingsStore } from "@/stores/settingsStore";
+import useSourceStore, { useSources } from "@/stores/sourceStore";
 
 interface VideoSourceSectionProps {
   onChanged: () => void;
@@ -13,56 +13,18 @@ interface VideoSourceSectionProps {
 }
 
 export const VideoSourceSection: React.FC<VideoSourceSectionProps> = ({ onChanged, onFocus, onBlur }) => {
-  const [resources, setResources] = useState<ApiSite[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
   const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
   const [isSectionFocused, setIsSectionFocused] = useState(false);
-  const { videoSource, setVideoSource } = useSettingsStore();
+  const { videoSource } = useSettingsStore();
+  const resources = useSources();
+  const { toggleResourceEnabled } = useSourceStore();
 
-  useEffect(() => {
-    fetchResources();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const fetchResources = async () => {
-    try {
-      setLoading(true);
-      const resourcesList = await api.getResources();
-      setResources(resourcesList);
-
-      if (videoSource.enabledAll && Object.keys(videoSource.sources).length === 0) {
-        const allResourceKeys: { [key: string]: boolean } = {};
-        for (const resource of resourcesList) {
-          allResourceKeys[resource.key] = true;
-        }
-        setVideoSource({
-          enabledAll: true,
-          sources: allResourceKeys,
-        });
-      }
-    } catch (err) {
-      setError("获取播放源失败");
-      console.error("Failed to fetch resources:", err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const toggleResourceEnabled = useCallback(
+  const handleToggle = useCallback(
     (resourceKey: string) => {
-      const isEnabled = videoSource.sources[resourceKey];
-
-      const newEnabledSources = { ...videoSource.sources, [resourceKey]: !isEnabled };
-
-      setVideoSource({
-        enabledAll: Object.values(newEnabledSources).every((enabled) => enabled),
-        sources: newEnabledSources,
-      });
-
+      toggleResourceEnabled(resourceKey);
       onChanged();
     },
-    [videoSource.sources, setVideoSource, onChanged]
+    [onChanged, toggleResourceEnabled]
   );
 
   const handleSectionFocus = () => {
@@ -83,20 +45,20 @@ export const VideoSourceSection: React.FC<VideoSourceSectionProps> = ({ onChange
         if (focusedIndex !== null) {
           const resource = resources[focusedIndex];
           if (resource) {
-            toggleResourceEnabled(resource.key);
+            handleToggle(resource.source);
           }
         } else if (isSectionFocused) {
           setFocusedIndex(0);
         }
       }
     },
-    [isSectionFocused, focusedIndex, resources, toggleResourceEnabled]
+    [isSectionFocused, focusedIndex, resources, handleToggle]
   );
 
   useTVEventHandler(handleTVEvent);
 
-  const renderResourceItem = ({ item, index }: { item: ApiSite; index: number }) => {
-    const isEnabled = videoSource.enabledAll || videoSource.sources[item.key];
+  const renderResourceItem = ({ item, index }: { item: { source: string; source_name: string }; index: number }) => {
+    const isEnabled = videoSource.enabledAll || videoSource.sources[item.source];
     const isFocused = focusedIndex === index;
 
     return (
@@ -107,7 +69,7 @@ export const VideoSourceSection: React.FC<VideoSourceSectionProps> = ({ onChange
           onFocus={() => setFocusedIndex(index)}
           onBlur={() => setFocusedIndex(null)}
         >
-          <ThemedText style={styles.resourceName}>{item.name}</ThemedText>
+          <ThemedText style={styles.resourceName}>{item.source_name}</ThemedText>
           <Switch
             value={isEnabled}
             onValueChange={() => {}} // 禁用Switch的直接交互
@@ -124,20 +86,11 @@ export const VideoSourceSection: React.FC<VideoSourceSectionProps> = ({ onChange
     <SettingsSection focusable onFocus={handleSectionFocus} onBlur={handleSectionBlur}>
       <ThemedText style={styles.sectionTitle}>播放源配置</ThemedText>
 
-      {loading && (
-        <View style={styles.loadingContainer}>
-          <ActivityIndicator size="small" />
-          <ThemedText style={styles.loadingText}>加载中...</ThemedText>
-        </View>
-      )}
-
-      {error && <ThemedText style={styles.errorText}>{error}</ThemedText>}
-
-      {!loading && !error && resources.length > 0 && (
+      {resources.length > 0 && (
         <FlatList
           data={resources}
           renderItem={renderResourceItem}
-          keyExtractor={(item) => item.key}
+          keyExtractor={(item) => item.source}
           numColumns={3}
           columnWrapperStyle={styles.row}
           contentContainerStyle={styles.flatListContainer}
@@ -154,22 +107,6 @@ const styles = StyleSheet.create({
     fontWeight: "bold",
     marginBottom: 16,
   },
-  loadingContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: 16,
-  },
-  loadingText: {
-    marginLeft: 8,
-    color: "#888",
-  },
-  errorText: {
-    color: "#ff4444",
-    fontSize: 14,
-    textAlign: "center",
-    padding: 16,
-  },
   flatListContainer: {
     gap: 12,
   },
diff --git a/package.json b/package.json
index f793657..9d0ede0 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@expo/vector-icons": "^14.0.0",
     "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-community/netinfo": "^11.3.2",
+    "@react-native-cookies/cookies": "^6.2.1",
     "@react-navigation/native": "^6.0.2",
     "expo": "~51.0.13",
     "expo-av": "~14.0.7",
diff --git a/services/api.ts b/services/api.ts
index 9fcb95b..461602b 100644
--- a/services/api.ts
+++ b/services/api.ts
@@ -1,4 +1,3 @@
-import { SettingsManager } from "./storage";
 import useAuthStore from "@/stores/authStore";
 
 // region: --- Interface Definitions ---
@@ -52,7 +51,7 @@ export interface Favorite {
 export interface PlayRecord {
   title: string;
   source_name: string;
-  poster: string;
+  cover: string;
   index: number;
   total_episodes: number;
   play_time: number;
@@ -71,7 +70,6 @@ export interface ServerConfig {
   SiteName: string;
   StorageType: "localstorage" | "redis" | string;
 }
-// endregion
 
 export class API {
   public baseURL: string = "";
@@ -105,17 +103,16 @@ export class API {
     return response;
   }
 
-  // region: --- New API Methods ---
   async getServerConfig(): Promise<ServerConfig> {
     const response = await this._fetch("/api/server-config");
     return response.json();
   }
 
-  async login(password: string): Promise<{ ok: boolean }> {
+  async login(username: string | undefined, password: string): Promise<{ ok: boolean }> {
     const response = await this._fetch("/api/login", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ password }),
+      body: JSON.stringify({ username, password }),
     });
     return response.json();
   }
@@ -180,9 +177,7 @@ export class API {
     const response = await this._fetch(url, { method: "DELETE" });
     return response.json();
   }
-  // endregion
 
-  // region: --- Existing API Methods (Refactored) ---
   getImageProxyUrl(imageUrl: string): string {
     return `${this.baseURL}/api/image-proxy?url=${encodeURIComponent(imageUrl)}`;
   }
@@ -221,14 +216,7 @@ export class API {
     const response = await this._fetch(url);
     return response.json();
   }
-  // endregion
 }
 
 // 默认实例
 export let api = new API();
-
-// 初始化 API
-export const initializeApi = async () => {
-  const settings = await SettingsManager.get();
-  api.setBaseUrl(settings.apiBaseUrl);
-};
diff --git a/stores/authStore.ts b/stores/authStore.ts
index 04dd684..959df2d 100644
--- a/stores/authStore.ts
+++ b/stores/authStore.ts
@@ -1,15 +1,42 @@
 import { create } from "zustand";
+import Cookies from "@react-native-cookies/cookies";
+import { api } from "@/services/api";
 
 interface AuthState {
+  isLoggedIn: boolean;
   isLoginModalVisible: boolean;
   showLoginModal: () => void;
   hideLoginModal: () => void;
+  checkLoginStatus: () => Promise<void>;
+  logout: () => Promise<void>;
 }
 
 const useAuthStore = create<AuthState>((set) => ({
+  isLoggedIn: false,
   isLoginModalVisible: false,
   showLoginModal: () => set({ isLoginModalVisible: true }),
   hideLoginModal: () => set({ isLoginModalVisible: false }),
+  checkLoginStatus: async () => {
+    try {
+      const cookies = await Cookies.get(api.baseURL);
+      const isLoggedIn = cookies && !!cookies.auth;
+      set({ isLoggedIn });
+      if (!isLoggedIn) {
+        set({ isLoginModalVisible: true });
+      }
+    } catch (error) {
+      console.error("Failed to check login status:", error);
+      set({ isLoggedIn: false, isLoginModalVisible: true });
+    }
+  },
+  logout: async () => {
+    try {
+      await Cookies.clearAll();
+      set({ isLoggedIn: false, isLoginModalVisible: true });
+    } catch (error) {
+      console.error("Failed to logout:", error);
+    }
+  },
 }));
 
 export default useAuthStore;
diff --git a/stores/detailStore.ts b/stores/detailStore.ts
new file mode 100644
index 0000000..74eb480
--- /dev/null
+++ b/stores/detailStore.ts
@@ -0,0 +1,141 @@
+import { create } from "zustand";
+import { SearchResult, api } from "@/services/api";
+import { getResolutionFromM3U8 } from "@/services/m3u8";
+import { useSettingsStore } from "@/stores/settingsStore";
+
+export type SearchResultWithResolution = SearchResult & { resolution?: string | null };
+
+interface DetailState {
+  q: string | null;
+  searchResults: SearchResultWithResolution[];
+  sources: { source: string; source_name: string; resolution: string | null | undefined }[];
+  detail: SearchResultWithResolution | null;
+  loading: boolean;
+  error: string | null;
+  allSourcesLoaded: boolean;
+  controller: AbortController | null
+
+  init: (q: string) => void;
+  setDetail: (detail: SearchResultWithResolution) => void;
+  abort: () => void;
+}
+
+const useDetailStore = create<DetailState>((set, get) => ({
+  q: null,
+  searchResults: [],
+  sources: [],
+  detail: null,
+  loading: true,
+  error: null,
+  allSourcesLoaded: false,
+  controller: null,
+
+  init: async (q) => {
+    const { controller: oldController } = get();
+    if (oldController) {
+      oldController.abort();
+    }
+    const newController = new AbortController();
+    const signal = newController.signal;
+
+    set({
+      q,
+      loading: true,
+      searchResults: [],
+      detail: null,
+      error: null,
+      allSourcesLoaded: false,
+      controller: newController,
+    });
+
+    const { videoSource } = useSettingsStore.getState();
+
+    try {
+      const processAndSetResults = async (
+        results: SearchResult[]
+      ) => {
+        const resultsWithResolution = await Promise.all(
+          results.map(async (searchResult) => {
+            let resolution;
+            try {
+              if (searchResult.episodes && searchResult.episodes.length > 0) {
+                resolution = await getResolutionFromM3U8(
+                  searchResult.episodes[0],
+                  signal
+                );
+              }
+            } catch (e) {
+              if ((e as Error).name !== "AbortError") {
+                console.error(
+                  `Failed to get resolution for ${searchResult.source_name}`,
+                  e
+                );
+              }
+            }
+            return { ...searchResult, resolution };
+          })
+        );
+
+        if (signal.aborted) return;
+
+        set((state) => {
+          const existingSources = new Set(state.searchResults.map((r) => r.source));
+          const newResults = resultsWithResolution.filter(
+            (r) => !existingSources.has(r.source)
+          );
+          const finalResults = [...state.searchResults, ...newResults];
+          return {
+            searchResults: finalResults,
+            sources: finalResults.map((r) => ({
+              source: r.source,
+              source_name: r.source_name,
+              resolution: r.resolution,
+            })),
+            detail: state.detail ?? finalResults[0] ?? null,
+          };
+        });
+      };
+
+      // Background fetch for all sources
+      const { results: allResults } = await api.searchVideos(q);
+      if (signal.aborted) return;
+
+      const filteredResults = videoSource.enabledAll
+        ? allResults
+        : allResults.filter((result) => videoSource.sources[result.source]);
+
+      if (filteredResults.length > 0) {
+        await processAndSetResults(filteredResults);
+      }
+
+      if (get().searchResults.length === 0) {
+         if (!videoSource.enabledAll) {
+           set({ error: "请到设置页面启用的播放源" });
+         } else {
+           set({ error: "未找到播放源" });
+         }
+      }
+    } catch (e) {
+      if ((e as Error).name !== "AbortError") {
+        set({ error: e instanceof Error ? e.message : "获取数据失败" });
+      }
+    } finally {
+      if (!signal.aborted) {
+        set({ loading: false, allSourcesLoaded: true });
+      }
+    }
+  },
+
+  setDetail: (detail) => {
+    set({ detail });
+  },
+
+  abort: () => {
+    get().controller?.abort();
+  },
+}));
+
+export const sourcesSelector = (state: DetailState) => state.sources;
+export default useDetailStore;
+export const episodesSelectorBySource = (source: string) => (state: DetailState) =>
+  state.searchResults.find((r) => r.source === source)?.episodes || [];
\ No newline at end of file
diff --git a/stores/homeStore.ts b/stores/homeStore.ts
index 485e61d..e423eba 100644
--- a/stores/homeStore.ts
+++ b/stores/homeStore.ts
@@ -1,6 +1,7 @@
 import { create } from 'zustand';
 import { api, SearchResult, PlayRecord } from '@/services/api';
 import { PlayRecordManager } from '@/services/storage';
+import useAuthStore from './authStore';
 
 export type RowItem = (SearchResult | PlayRecord) & {
   id: string;
@@ -73,6 +74,11 @@ const useHomeStore = create<HomeState>((set, get) => ({
 
     try {
       if (selectedCategory.type === 'record') {
+        const { isLoggedIn } = useAuthStore.getState();
+        if (!isLoggedIn) {
+          set({ contentData: [], hasMore: false });
+          return;
+        }
         const records = await PlayRecordManager.getAll();
         const rowItems = Object.entries(records)
           .map(([key, record]) => {
@@ -126,6 +132,21 @@ const useHomeStore = create<HomeState>((set, get) => ({
   },
 
   refreshPlayRecords: async () => {
+    const { isLoggedIn } = useAuthStore.getState();
+    if (!isLoggedIn) {
+      set(state => {
+        const recordCategoryExists = state.categories.some(c => c.type === 'record');
+        if (recordCategoryExists) {
+          const newCategories = state.categories.filter(c => c.type !== 'record');
+          if (state.selectedCategory.type === 'record') {
+              get().selectCategory(newCategories[0] || null);
+          }
+          return { categories: newCategories };
+        }
+        return {};
+      });
+      return;
+    }
     const records = await PlayRecordManager.getAll();
     const hasRecords = Object.keys(records).length > 0;
     set(state => {
diff --git a/stores/playerStore.ts b/stores/playerStore.ts
index 04c6e4c..f3f4f07 100644
--- a/stores/playerStore.ts
+++ b/stores/playerStore.ts
@@ -2,27 +2,18 @@ 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";
+import useDetailStore, { episodesSelectorBySource } from "./detailStore";
 
 interface Episode {
   url: string;
   title: string;
 }
 
-interface VideoDetail {
-  videoInfo: ApiVideoDetail;
-  episodes: Episode[];
-  sources: SearchResult[];
-}
-
 interface PlayerState {
   videoRef: RefObject<Video> | null;
-  detail: VideoDetail | null;
-  episodes: Episode[];
-  sources: SearchResult[];
-  currentSourceIndex: number;
   currentEpisodeIndex: number;
+  episodes: Episode[];
   status: AVPlaybackStatus | null;
   isLoading: boolean;
   showControls: boolean;
@@ -36,8 +27,11 @@ interface PlayerState {
   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>;
+  loadVideo: (
+    source: string,
+    episodeIndex: number,
+    position?: number
+  ) => Promise<void>;
   playEpisode: (index: number) => void;
   togglePlayPause: () => void;
   seek: (duration: number) => void;
@@ -57,10 +51,7 @@ interface PlayerState {
 
 const usePlayerStore = create<PlayerState>((set, get) => ({
   videoRef: null,
-  detail: null,
   episodes: [],
-  sources: [],
-  currentSourceIndex: 0,
   currentEpisodeIndex: 0,
   status: null,
   isLoading: true,
@@ -78,76 +69,38 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
 
   setVideoRef: (ref) => set({ videoRef: ref }),
 
-  loadVideo: async (source, id, episodeIndex, position) => {
+  loadVideo: async (source, episodeIndex, position) => {
+    const detail = useDetailStore.getState().detail;
+    const episodes = episodesSelectorBySource(source)(useDetailStore.getState());
+
+    if (!detail || !episodes || episodes.length === 0) return;
+
     set({
       isLoading: true,
-      detail: null,
-      episodes: [],
-      sources: [],
-      currentEpisodeIndex: 0,
+      currentEpisodeIndex: episodeIndex,
       initialPosition: position || 0,
+      episodes: episodes.map((ep, index) => ({
+        url: ep,
+        title: `第 ${index + 1} 集`,
+      })),
     });
-    try {
-      const videoDetail = await api.getVideoDetail(source, id);
-      const [{ results: sources }, resources] = await Promise.all([
-        api.searchVideo(videoDetail.title, source),
-        api.getResources(),
-      ]);
-      const currentSourceIndex = resources.findIndex((s) => s.key === source);
-      const episodes = sources.map((ep, index) => ({ url: ep.episodes[index], title: `第 ${index + 1} 集` }));
-      const playRecord = await PlayRecordManager.get(source, id);
 
+    try {
+      const playRecord = await PlayRecordManager.get(
+        detail.source,
+        detail.id.toString()
+      );
       set({
-        detail: { videoInfo: videoDetail, 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);
+      console.error("Failed to load play record", 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 searchResults = await api.searchVideo(videoDetail.title, newSource.source);
-      if (!searchResults.results || searchResults.results.length === 0) {
-        throw new Error("No episodes found for this source.");
-      }
-      const sourceDetail = searchResults.results[0];
-      const episodes = sourceDetail.episodes.map((ep, index) => ({ url: ep, title: `第 ${index + 1} 集` }));
-
-      set({
-        detail: {
-          ...detail,
-          videoInfo: videoDetail,
-          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();
@@ -194,7 +147,8 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
   },
 
   setIntroEndTime: () => {
-    const { status, detail, introEndTime: existingIntroEndTime } = get();
+    const { status, introEndTime: existingIntroEndTime } = get();
+    const detail = useDetailStore.getState().detail;
     if (!status?.isLoaded || !detail) return;
 
     if (existingIntroEndTime) {
@@ -219,7 +173,8 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
   },
 
   setOutroStartTime: () => {
-    const { status, detail, outroStartTime: existingOutroStartTime } = get();
+    const { status, outroStartTime: existingOutroStartTime } = get();
+    const detail = useDetailStore.getState().detail;
     if (!status?.isLoaded || !detail) return;
 
     if (existingOutroStartTime) {
@@ -245,21 +200,21 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
   },
 
   _savePlayRecord: (updates = {}) => {
-    const { detail, currentEpisodeIndex, episodes, status, introEndTime, outroStartTime } = get();
+    const { detail } = useDetailStore.getState();
+    const { 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,
-        poster: videoInfo.poster || "",
+      PlayRecordManager.save(detail.source, detail.id.toString(), {
+        title: detail.title,
+        poster: detail.poster || "",
         index: currentEpisodeIndex,
         total_episodes: episodes.length,
         play_time: status.positionMillis,
         total_time: status.durationMillis || 0,
-        source_name: videoInfo.source_name,
+        source_name: detail.source_name,
         ...existingRecord,
         ...updates,
       });
@@ -275,7 +230,8 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
       return;
     }
 
-    const { detail, currentEpisodeIndex, episodes, outroStartTime, playEpisode } = get();
+    const { currentEpisodeIndex, episodes, outroStartTime, playEpisode } = get();
+    const detail = useDetailStore.getState().detail;
 
     if (
       outroStartTime &&
@@ -317,10 +273,7 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
 
   reset: () => {
     set({
-      detail: null,
       episodes: [],
-      sources: [],
-      currentSourceIndex: 0,
       currentEpisodeIndex: 0,
       status: null,
       isLoading: true,
diff --git a/stores/settingsStore.ts b/stores/settingsStore.ts
index a0e4d42..ae786ef 100644
--- a/stores/settingsStore.ts
+++ b/stores/settingsStore.ts
@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 import { SettingsManager } from '@/services/storage';
-import { api } from '@/services/api';
+import { api, ServerConfig } from '@/services/api';
 import useHomeStore from './homeStore';
 
 
@@ -15,7 +15,9 @@ interface SettingsState {
     };
   };
   isModalVisible: boolean;
+  serverConfig: ServerConfig | null;
   loadSettings: () => Promise<void>;
+  fetchServerConfig: () => Promise<void>;
   setApiBaseUrl: (url: string) => void;
   setM3uUrl: (url: string) => void;
   setRemoteInputEnabled: (enabled: boolean) => void;
@@ -31,13 +33,14 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
   liveStreamSources: [],
   remoteInputEnabled: false,
   isModalVisible: false,
+  serverConfig: null,
   videoSource: {
     enabledAll: true,
     sources: {},
   },
   loadSettings: async () => {
     const settings = await SettingsManager.get();
-    set({ 
+    set({
       apiBaseUrl: settings.apiBaseUrl,
       m3uUrl: settings.m3uUrl,
       remoteInputEnabled: settings.remoteInputEnabled || false,
@@ -47,6 +50,15 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
       },
     });
     api.setBaseUrl(settings.apiBaseUrl);
+    await get().fetchServerConfig();
+  },
+  fetchServerConfig: async () => {
+    try {
+      const config = await api.getServerConfig();
+      set({ serverConfig: config });
+    } catch (error) {
+      console.error("Failed to fetch server config:", error);
+    }
   },
   setApiBaseUrl: (url) => set({ apiBaseUrl: url }),
   setM3uUrl: (url) => set({ m3uUrl: url }),
diff --git a/stores/sourceStore.ts b/stores/sourceStore.ts
new file mode 100644
index 0000000..f6db54a
--- /dev/null
+++ b/stores/sourceStore.ts
@@ -0,0 +1,24 @@
+import { create } from "zustand";
+import { useSettingsStore } from "@/stores/settingsStore";
+import useDetailStore, { sourcesSelector } from "./detailStore";
+
+interface SourceState {
+  toggleResourceEnabled: (resourceKey: string) => void;
+}
+
+const useSourceStore = create<SourceState>((set, get) => ({
+  toggleResourceEnabled: (resourceKey: string) => {
+    const { videoSource, setVideoSource } = useSettingsStore.getState();
+    const isEnabled = videoSource.sources[resourceKey];
+    const newEnabledSources = { ...videoSource.sources, [resourceKey]: !isEnabled };
+
+    setVideoSource({
+      enabledAll: Object.values(newEnabledSources).every((enabled) => enabled),
+      sources: newEnabledSources,
+    });
+  },
+}));
+
+export const useSources = () => useDetailStore(sourcesSelector);
+
+export default useSourceStore;
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index a1dbeec..84be445 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1762,6 +1762,13 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/netinfo/-/netinfo-11.4.1.tgz#a3c247aceab35f75dd0aa4bfa85d2be5a4508688"
   integrity sha512-B0BYAkghz3Q2V09BF88RA601XursIEA111tnc2JOaN7axJWmNefmfjZqw/KdSxKZp7CZUuPpjBmz/WCR9uaHYg==
 
+"@react-native-cookies/cookies@^6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@react-native-cookies/cookies/-/cookies-6.2.1.tgz#54d50b9496400bbdc19e43c155f70f8f918999e3"
+  integrity sha512-D17wCA0DXJkGJIxkL74Qs9sZ3sA+c+kCoGmXVknW7bVw/W+Vv1m/7mWTNi9DLBZSRddhzYw8SU0aJapIaM/g5w==
+  dependencies:
+    invariant "^2.2.4"
+
 "@react-native-tvos/config-tv@^0.0.10":
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/@react-native-tvos/config-tv/-/config-tv-0.0.10.tgz#38fe1571e24c6790b43137d130832c68b366c295"