diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..52f01a6
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": false,
+  "printWidth": 120
+}
diff --git a/app/+not-found.tsx b/app/+not-found.tsx
index d057dbc..af77bca 100644
--- 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: {
diff --git a/app/index.tsx b/app/index.tsx
index 0587dea..7b1d9a1 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,18 +1,18 @@
-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 { useColorScheme } from 'react-native';
-import { Search, Settings } from 'lucide-react-native';
-import { SettingsModal } from '@/components/SettingsModal';
-import useHomeStore, { RowItem, Category } from '@/stores/homeStore';
-import { useSettingsStore } from '@/stores/settingsStore';
+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 { useColorScheme } from "react-native";
+import { Search, Settings } from "lucide-react-native";
+import { SettingsModal } from "@/components/SettingsModal";
+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() {
@@ -33,7 +33,7 @@ export default function HomeScreen() {
     refreshPlayRecords,
   } = useHomeStore();
 
-  const showSettingsModal = useSettingsStore(state => state.showModal);
+  const showSettingsModal = useSettingsStore((state) => state.showModal);
 
   useFocusEffect(
     useCallback(() => {
@@ -99,15 +99,15 @@ export default function HomeScreen() {
         <View style={styles.rightHeaderButtons}>
           <Pressable
             style={({ focused }) => [styles.searchButton, focused && styles.searchButtonFocused]}
-            onPress={() => router.push({ pathname: '/search' })}
+            onPress={() => router.push({ pathname: "/search" })}
           >
-            <Search color={colorScheme === 'dark' ? 'white' : 'black'} size={24} />
+            <Search color={colorScheme === "dark" ? "white" : "black"} size={24} />
           </Pressable>
           <Pressable
             style={({ focused }) => [styles.searchButton, focused && styles.searchButtonFocused]}
             onPress={showSettingsModal}
           >
-            <Settings color={colorScheme === 'dark' ? 'white' : 'black'} size={24} />
+            <Settings color={colorScheme === "dark" ? "white" : "black"} size={24} />
           </Pressable>
         </View>
       </View>
@@ -117,7 +117,7 @@ export default function HomeScreen() {
         <FlatList
           data={categories}
           renderItem={renderCategory}
-          keyExtractor={item => item.title}
+          keyExtractor={(item) => item.title}
           horizontal
           showsHorizontalScrollIndicator={false}
           contentContainerStyle={styles.categoryListContent}
@@ -166,25 +166,25 @@ 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,
@@ -192,7 +192,7 @@ const styles = StyleSheet.create({
     marginLeft: 10,
   },
   searchButtonFocused: {
-    backgroundColor: '#007AFF',
+    backgroundColor: "#007AFF",
     transform: [{ scale: 1.1 }],
   },
   // Category Selector
@@ -209,18 +209,18 @@ const styles = StyleSheet.create({
     marginHorizontal: 5,
   },
   categoryButtonSelected: {
-    backgroundColor: '#007AFF', // A bright blue for selected state
+    backgroundColor: "#007AFF", // A bright blue for selected state
   },
   categoryButtonFocused: {
-    backgroundColor: '#0056b3', // A darker blue for focused state
+    backgroundColor: "#0056b3", // A darker blue for focused state
     elevation: 5,
   },
   categoryText: {
     fontSize: 16,
-    fontWeight: '500',
+    fontWeight: "500",
   },
   categoryTextSelected: {
-    color: '#FFFFFF',
+    color: "#FFFFFF",
   },
   // Content Grid
   listContent: {
@@ -230,6 +230,6 @@ const styles = StyleSheet.create({
   itemContainer: {
     margin: 8,
     width: ITEM_WIDTH,
-    alignItems: 'center',
+    alignItems: "center",
   },
 });
diff --git a/app/play.tsx b/app/play.tsx
index e5fc92e..834dd8d 100644
--- a/app/play.tsx
+++ b/app/play.tsx
@@ -1,15 +1,16 @@
-import React, { useEffect, useRef } from 'react';
-import { View, StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native';
-import { useLocalSearchParams } 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 { NextEpisodeOverlay } from '@/components/NextEpisodeOverlay';
-import { LoadingOverlay } from '@/components/LoadingOverlay';
-import usePlayerStore from '@/stores/playerStore';
-import { useTVRemoteHandler } from '@/hooks/useTVRemoteHandler';
+import React, { useEffect, useRef } from "react";
+import { View, StyleSheet, TouchableOpacity, ActivityIndicator } from "react-native";
+import { useLocalSearchParams } 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 { SeekingBar } from "@/components/SeekingBar";
+import { NextEpisodeOverlay } from "@/components/NextEpisodeOverlay";
+import { LoadingOverlay } from "@/components/LoadingOverlay";
+import usePlayerStore from "@/stores/playerStore";
+import { useTVRemoteHandler } from "@/hooks/useTVRemoteHandler";
 
 export default function PlayScreen() {
   const videoRef = useRef<Video>(null);
@@ -45,27 +46,14 @@ export default function PlayScreen() {
   useEffect(() => {
     setVideoRef(videoRef);
     if (source && id) {
-      loadVideo(source, id, parseInt(episodeIndex || '0', 10), parseInt(position || '0', 10));
+      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 { currentFocus, setCurrentFocus } = useTVRemoteHandler({
-    showControls,
-    setShowControls,
-    showEpisodeModal,
-    onPlayPause: togglePlayPause,
-    onSeek: seek,
-    onShowEpisodes: () => setShowEpisodeModal(true),
-    onPlayNextEpisode: () => {
-      if (currentEpisodeIndex < episodes.length - 1) {
-        playEpisode(currentEpisodeIndex + 1);
-        setShowControls(false);
-      }
-    },
-  });
+  const { onScreenPress } = useTVRemoteHandler();
 
   if (!detail && isLoading) {
     return (
@@ -79,14 +67,7 @@ export default function PlayScreen() {
 
   return (
     <ThemedView focusable style={styles.container}>
-      <TouchableOpacity
-        activeOpacity={1}
-        style={styles.videoContainer}
-        onPress={() => {
-          setShowControls(!showControls);
-          setCurrentFocus(null);
-        }}
-      >
+      <TouchableOpacity activeOpacity={1} style={styles.videoContainer} onPress={onScreenPress}>
         <Video
           ref={videoRef}
           style={styles.videoPlayer}
@@ -104,7 +85,9 @@ export default function PlayScreen() {
           shouldPlay
         />
 
-        {showControls && <PlayerControls currentFocus={currentFocus} setShowControls={setShowControls} />}
+        {showControls && <PlayerControls showControls={showControls} setShowControls={setShowControls} />}
+
+        <SeekingBar />
 
         <LoadingOverlay visible={isLoading} />
 
@@ -117,8 +100,8 @@ export default function PlayScreen() {
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: 'black' },
-  centered: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+  container: { flex: 1, backgroundColor: "black" },
+  centered: { flex: 1, justifyContent: "center", alignItems: "center" },
   videoContainer: {
     ...StyleSheet.absoluteFillObject,
   },
diff --git a/components/MediaButton.tsx b/components/MediaButton.tsx
index 974a4cd..415cb82 100644
--- a/components/MediaButton.tsx
+++ b/components/MediaButton.tsx
@@ -4,25 +4,26 @@ import { Pressable, StyleSheet, StyleProp, ViewStyle } from "react-native";
 interface MediaButtonProps {
   onPress: () => void;
   children: React.ReactNode;
-  isFocused?: boolean;
   isDisabled?: boolean;
+  hasTVPreferredFocus?: boolean;
   style?: StyleProp<ViewStyle>;
 }
 
 export const MediaButton: React.FC<MediaButtonProps> = ({
   onPress,
   children,
-  isFocused = false,
   isDisabled = false,
+  hasTVPreferredFocus = false,
   style,
 }) => {
   return (
     <Pressable
+      hasTVPreferredFocus={hasTVPreferredFocus}
       onPress={onPress}
       disabled={isDisabled}
-      style={[
+      style={({ focused }) => [
         styles.mediaControlButton,
-        isFocused && styles.focusedButton,
+        focused && styles.focusedButton,
         isDisabled && styles.disabledButton,
         style,
       ]}
diff --git a/components/PlayerControls.tsx b/components/PlayerControls.tsx
index bbb9706..e327826 100644
--- a/components/PlayerControls.tsx
+++ b/components/PlayerControls.tsx
@@ -1,19 +1,19 @@
-import React 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 } from 'lucide-react-native';
-import { ThemedText } from '@/components/ThemedText';
-import { MediaButton } from '@/components/MediaButton';
+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 } from "lucide-react-native";
+import { ThemedText } from "@/components/ThemedText";
+import { MediaButton } from "@/components/MediaButton";
 
-import usePlayerStore from '@/stores/playerStore';
+import usePlayerStore from "@/stores/playerStore";
 
 interface PlayerControlsProps {
-  currentFocus: string | null;
+  showControls: boolean;
   setShowControls: (show: boolean) => void;
 }
 
-export const PlayerControls: React.FC<PlayerControlsProps> = ({ currentFocus, setShowControls }) => {
+export const PlayerControls: React.FC<PlayerControlsProps> = ({ showControls, setShowControls }) => {
   const router = useRouter();
   const {
     detail,
@@ -28,35 +28,30 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({ currentFocus, se
     setShowEpisodeModal,
   } = usePlayerStore();
 
-  const videoTitle = detail?.videoInfo?.title || '';
+  const videoTitle = detail?.videoInfo?.title || "";
   const currentEpisode = detail?.episodes[currentEpisodeIndex];
   const currentEpisodeTitle = currentEpisode?.title;
   const hasNextEpisode = currentEpisodeIndex < (detail?.episodes.length || 0) - 1;
 
   const formatTime = (milliseconds: number) => {
-    if (!milliseconds) return '00:00';
+    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')}`;
+    return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
   };
 
   const onPlayNextEpisode = () => {
     if (hasNextEpisode) {
       playEpisode(currentEpisodeIndex + 1);
-      setShowControls(false);
     }
   };
 
   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}` : ""}
         </Text>
       </View>
 
@@ -74,18 +69,18 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({ currentFocus, se
           <Pressable style={styles.progressBarTouchable} />
         </View>
 
-        <ThemedText style={{ color: 'white', marginTop: 5 }}>
+        <ThemedText style={{ color: "white", marginTop: 5 }}>
           {status?.isLoaded
             ? `${formatTime(status.positionMillis)} / ${formatTime(status.durationMillis || 0)}`
-            : '00:00 / 00:00'}
+            : "00:00 / 00:00"}
         </ThemedText>
 
         <View style={styles.bottomControls}>
-          <MediaButton onPress={() => seek(false)} isFocused={currentFocus === 'skipBack'}>
+          <MediaButton onPress={() => seek(-15000)}>
             <ChevronsLeft color="white" size={24} />
           </MediaButton>
 
-          <MediaButton onPress={togglePlayPause} isFocused={currentFocus === 'playPause'}>
+          <MediaButton onPress={togglePlayPause} hasTVPreferredFocus={showControls}>
             {status?.isLoaded && status.isPlaying ? (
               <Pause color="white" size={24} />
             ) : (
@@ -93,19 +88,15 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({ currentFocus, se
             )}
           </MediaButton>
 
-          <MediaButton
-            onPress={onPlayNextEpisode}
-            isDisabled={!hasNextEpisode}
-            isFocused={currentFocus === 'nextEpisode'}
-          >
-            <SkipForward color={hasNextEpisode ? 'white' : '#666'} size={24} />
+          <MediaButton onPress={onPlayNextEpisode} isDisabled={!hasNextEpisode}>
+            <SkipForward color={hasNextEpisode ? "white" : "#666"} size={24} />
           </MediaButton>
 
-          <MediaButton onPress={() => seek(true)} isFocused={currentFocus === 'skipForward'}>
+          <MediaButton onPress={() => seek(15000)}>
             <ChevronsRight color="white" size={24} />
           </MediaButton>
 
-          <MediaButton onPress={() => setShowEpisodeModal(true)} isFocused={currentFocus === 'episodes'}>
+          <MediaButton onPress={() => setShowEpisodeModal(true)}>
             <List color="white" size={24} />
           </MediaButton>
         </View>
@@ -117,58 +108,58 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({ currentFocus, se
 const styles = StyleSheet.create({
   controlsOverlay: {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(0, 0, 0, 0.4)',
-    justifyContent: 'space-between',
+    backgroundColor: "rgba(0, 0, 0, 0.4)",
+    justifyContent: "space-between",
     padding: 20,
   },
   topControls: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
   },
   controlTitle: {
-    color: 'white',
+    color: "white",
     fontSize: 16,
-    fontWeight: 'bold',
+    fontWeight: "bold",
     flex: 1,
-    textAlign: 'center',
+    textAlign: "center",
     marginHorizontal: 10,
   },
   bottomControlsContainer: {
-    width: '100%',
-    alignItems: 'center',
+    width: "100%",
+    alignItems: "center",
   },
   bottomControls: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
     gap: 10,
-    flexWrap: 'wrap',
+    flexWrap: "wrap",
     marginTop: 15,
   },
   progressBarContainer: {
-    width: '100%',
+    width: "100%",
     height: 8,
-    position: 'relative',
+    position: "relative",
     marginTop: 10,
   },
   progressBarBackground: {
-    position: 'absolute',
+    position: "absolute",
     left: 0,
     right: 0,
     height: 8,
-    backgroundColor: 'rgba(255, 255, 255, 0.3)',
+    backgroundColor: "rgba(255, 255, 255, 0.3)",
     borderRadius: 4,
   },
   progressBarFilled: {
-    position: 'absolute',
+    position: "absolute",
     left: 0,
     height: 8,
-    backgroundColor: '#ff0000',
+    backgroundColor: "#ff0000",
     borderRadius: 4,
   },
   progressBarTouchable: {
-    position: 'absolute',
+    position: "absolute",
     left: 0,
     right: 0,
     height: 30,
@@ -177,20 +168,20 @@ const styles = StyleSheet.create({
   },
   controlButton: {
     padding: 10,
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
   },
   topRightContainer: {
     padding: 10,
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
     minWidth: 44, // Match TouchableOpacity default size for alignment
   },
   resolutionText: {
-    color: 'white',
+    color: "white",
     fontSize: 16,
-    fontWeight: 'bold',
-    backgroundColor: 'rgba(0,0,0,0.5)',
+    fontWeight: "bold",
+    backgroundColor: "rgba(0,0,0,0.5)",
     paddingHorizontal: 8,
     paddingVertical: 4,
     borderRadius: 6,
diff --git a/components/SeekingBar.tsx b/components/SeekingBar.tsx
new file mode 100644
index 0000000..ed24d18
--- /dev/null
+++ 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,
+  },
+});
diff --git a/hooks/useTVRemoteHandler.ts b/hooks/useTVRemoteHandler.ts
index da267d8..00a36cd 100644
--- a/hooks/useTVRemoteHandler.ts
+++ b/hooks/useTVRemoteHandler.ts
@@ -1,118 +1,97 @@
-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 CONTROLS_TIMEOUT = 5000;
 
-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" },
-};
+/**
+ * 管理播放器控件的显示/隐藏、遥控器事件和自动隐藏定时器。
+ * @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 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.
+  // 当控件显示时，启动定时器
+  useEffect(() => {
     if (showControls) {
-      controlsTimer.current = setTimeout(() => {
-        setShowControls(false);
-      }, 5000);
+      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, 'select' should toggle play/pause immediately
-    // and other interactions will just show the controls.
-    if (!showControls) {
-      if (event.eventType === "select") {
-        onPlayPause();
-        setShowControls(true);
-      } else if (["up", "down", "left", "right"].includes(event.eventType)) {
-        setShowControls(true);
+  // 处理遥控器事件
+  const handleTVEvent = useCallback(
+    (event: HWEvent) => {
+      // 如果剧集选择模态框显示，则不处理任何事件
+      if (showEpisodeModal) {
+        return;
       }
-      return;
-    }
 
-    // --- Event handling when controls are visible ---
+      resetTimer();
 
-    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();
-          break;
-        case "down":
-          setCurrentFocus("playPause");
-          break;
+      if (!showControls) {
+        switch (event.eventType) {
+          case "select":
+            togglePlayPause();
+            setShowControls(true);
+            break;
+          case "left":
+            seek(-15000); // 快退15秒
+            break;
+          case "right":
+            seek(15000); // 快进15秒
+            break;
+          case "longLeft":
+            seek(-60000); // 快退60秒
+            break;
+          case "longRight":
+            seek(60000); // 快进60秒
+            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);
-          }
-          break;
-        case "up":
-          setCurrentFocus(null);
-          break;
-        case "select":
-          actionMap[currentFocus]?.();
-          break;
-      }
-    }
-  });
+    },
+    [showControls, showEpisodeModal, setShowControls, resetTimer, togglePlayPause, seek]
+  );
 
-  return { currentFocus, setCurrentFocus };
+  useTVEventHandler(handleTVEvent);
+
+  // 处理屏幕点击事件
+  const onScreenPress = () => {
+    // 切换控件的显示状态
+    const newShowControls = !showControls;
+    setShowControls(newShowControls);
+
+    // 如果控件变为显示状态，则重置定时器
+    if (newShowControls) {
+      resetTimer();
+    }
+  };
+
+  return { onScreenPress };
 };
diff --git a/stores/playerStore.ts b/stores/playerStore.ts
index 7306731..d33d701 100644
--- a/stores/playerStore.ts
+++ b/stores/playerStore.ts
@@ -1,8 +1,8 @@
-import { create } from 'zustand';
-import { AVPlaybackStatus, Video } from 'expo-av';
-import { RefObject } from 'react';
-import { api, VideoDetail as ApiVideoDetail } from '@/services/api';
-import { PlayRecordManager } from '@/services/storage';
+import { create } from "zustand";
+import { AVPlaybackStatus, Video } from "expo-av";
+import { RefObject } from "react";
+import { api, VideoDetail as ApiVideoDetail } from "@/services/api";
+import { PlayRecordManager } from "@/services/storage";
 
 interface Episode {
   url: string;
@@ -10,7 +10,7 @@ interface Episode {
 }
 
 interface VideoDetail {
-  videoInfo: ApiVideoDetail['videoInfo'];
+  videoInfo: ApiVideoDetail["videoInfo"];
   episodes: Episode[];
 }
 
@@ -32,13 +32,14 @@ interface PlayerState {
   loadVideo: (source: string, id: string, episodeIndex: number, position?: number) => Promise<void>;
   playEpisode: (index: number) => void;
   togglePlayPause: () => void;
-  seek: (forward: boolean) => void;
+  seek: (duration: number) => void;
   handlePlaybackStatusUpdate: (newStatus: AVPlaybackStatus) => void;
   setLoading: (loading: boolean) => void;
   setShowControls: (show: boolean) => void;
   setShowEpisodeModal: (show: boolean) => void;
   setShowNextEpisodeOverlay: (show: boolean) => void;
   reset: () => void;
+  _seekTimeout?: NodeJS.Timeout;
 }
 
 const usePlayerStore = create<PlayerState>((set, get) => ({
@@ -48,13 +49,14 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
   currentEpisodeIndex: 0,
   status: null,
   isLoading: true,
-  showControls: true,
+  showControls: false,
   showEpisodeModal: false,
   showNextEpisodeOverlay: false,
   isSeeking: false,
   seekPosition: 0,
   progressPosition: 0,
   initialPosition: 0,
+  _seekTimeout: undefined,
 
   setVideoRef: (ref) => set({ videoRef: ref }),
 
@@ -84,7 +86,13 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
   playEpisode: (index) => {
     const { episodes, videoRef } = get();
     if (index >= 0 && index < episodes.length) {
-      set({ currentEpisodeIndex: index, showNextEpisodeOverlay: false, initialPosition: 0 });
+      set({
+        currentEpisodeIndex: index,
+        showNextEpisodeOverlay: false,
+        initialPosition: 0,
+        progressPosition: 0,
+        seekPosition: 0,
+      });
       videoRef?.current?.replayAsync();
     }
   },
@@ -100,39 +108,49 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
     }
   },
 
-  seek: (forward) => {
+  seek: (duration) => {
     const { status, videoRef } = get();
-    if (status?.isLoaded) {
-      const newPosition = status.positionMillis + (forward ? 15000 : -15000);
-      videoRef?.current?.setPositionAsync(Math.max(0, newPosition));
+    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 });
   },
 
   handlePlaybackStatusUpdate: (newStatus) => {
-    set({ status: newStatus });
     if (!newStatus.isLoaded) {
       if (newStatus.error) {
         console.error(`Playback Error: ${newStatus.error}`);
       }
+      set({ status: newStatus });
       return;
     }
 
+    const progressPosition = newStatus.durationMillis ? newStatus.positionMillis / newStatus.durationMillis : 0;
+    set({ status: newStatus, progressPosition });
+
     const { detail, currentEpisodeIndex, episodes } = get();
     if (detail && newStatus.durationMillis) {
       const { videoInfo } = detail;
-      PlayRecordManager.save(
-        videoInfo.source,
-        videoInfo.id,
-        {
-          title: videoInfo.title,
-          cover: videoInfo.cover || '',
-          index: currentEpisodeIndex,
-          total_episodes: episodes.length,
-          play_time: newStatus.positionMillis,
-          total_time: newStatus.durationMillis,
-          source_name: videoInfo.source_name,
-        }
-      );
+      PlayRecordManager.save(videoInfo.source, videoInfo.id, {
+        title: videoInfo.title,
+        cover: videoInfo.cover || "",
+        index: currentEpisodeIndex,
+        total_episodes: episodes.length,
+        play_time: newStatus.positionMillis,
+        total_time: newStatus.durationMillis,
+        source_name: videoInfo.source_name,
+      });
 
       const isNearEnd = newStatus.positionMillis / newStatus.durationMillis > 0.95;
       if (isNearEnd && currentEpisodeIndex < episodes.length - 1) {
@@ -142,13 +160,13 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
       }
     }
     if (newStatus.didJustFinish) {
-        const { playEpisode, currentEpisodeIndex, episodes } = get();
-        if (currentEpisodeIndex < episodes.length - 1) {
-            playEpisode(currentEpisodeIndex + 1);
-        }
+      const { playEpisode, currentEpisodeIndex, episodes } = get();
+      if (currentEpisodeIndex < episodes.length - 1) {
+        playEpisode(currentEpisodeIndex + 1);
+      }
     }
   },
-  
+
   setLoading: (loading) => set({ isLoading: loading }),
   setShowControls: (show) => set({ showControls: show }),
   setShowEpisodeModal: (show) => set({ showEpisodeModal: show }),
@@ -161,7 +179,7 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
       currentEpisodeIndex: 0,
       status: null,
       isLoading: true,
-      showControls: true,
+      showControls: false,
       showEpisodeModal: false,
       showNextEpisodeOverlay: false,
       initialPosition: 0,
@@ -169,4 +187,4 @@ const usePlayerStore = create<PlayerState>((set, get) => ({
   },
 }));
 
-export default usePlayerStore;
\ No newline at end of file
+export default usePlayerStore;