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.
2026-02-14 11:44:47 +08:00 · 2025-07-08 16:58:06 +08:00
parent bd22fa2996
commit 5b4c8db317
9 changed files with 333 additions and 268 deletions
--- a/app/+not-found.tsx
+++ b/app/+not-found.tsx
@@ -1,13 +1,14 @@
-import {Link, Stack} from 'expo-router';
-import {StyleSheet} from 'react-native';
+import { Link, Stack } from "expo-router";
+import { StyleSheet } from "react-native";

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

 export default function NotFoundScreen() {
  return (
    <>
-      <Stack.Screen options={{title: 'Oops!'}} />
+      <Stack.Screen options={{ title: "Oops!" }} />
      <ThemedView style={styles.container}>
        <ThemedText type="title">This screen doesn't exist.</ThemedText>
        <Link href="/" style={styles.link}>
@@ -21,8 +22,8 @@ export default function NotFoundScreen() {
 const styles = StyleSheet.create({
  container: {
    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
    padding: 20,
  },
  link: {
--- a/app/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",
  },
 });
--- 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,
  },