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.

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,
       ]}

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,

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,
+  },
+});