Enhance responsive design and update dependencies

- Added expo-screen-orientation package to manage screen orientation. - Updated react-native-gesture-handler to version 2.27.1 for improved gesture handling. - Implemented responsive design features across multiple screens using the new useResponsive hook. - Refactored DetailScreen, HomeScreen, SearchScreen, and PlayScreen to adapt layouts based on screen size. - Introduced PlayerControlsMobile for optimized playback controls on mobile devices. - Adjusted button styles in StyledButton for better responsiveness.
2026-02-15 04:14:42 +08:00 · 2025-07-09 17:23:46 +08:00
parent d42a3e014e
commit 803fc87fd9
10 changed files with 428 additions and 97 deletions
--- a/app/detail.tsx
+++ b/app/detail.tsx
@@ -1,15 +1,17 @@
 import React, { useEffect, useState, useRef } from "react";
-import { View, Text, StyleSheet, Image, ScrollView, ActivityIndicator } from "react-native";
+import { View, Text, StyleSheet, Image, ScrollView, ActivityIndicator, FlatList } 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 { useResponsive } from "@/hooks/useResponsive";

 export default function DetailScreen() {
  const { source, q } = useLocalSearchParams();
  const router = useRouter();
+  const { isMobile, screenWidth, numColumns } = useResponsive();
  const [searchResults, setSearchResults] = useState<(SearchResult & { resolution?: string | null })[]>([]);
  const [detail, setDetail] = useState<(SearchResult & { resolution?: string | null }) | null>(null);
  const [loading, setLoading] = useState(true);
@@ -147,9 +149,12 @@ export default function DetailScreen() {
  return (
    <ThemedView style={styles.container}>
      <ScrollView>
-        <View style={styles.topContainer}>
-          <Image source={{ uri: detail.poster }} style={styles.poster} />
-          <View style={styles.infoContainer}>
+        <View style={[styles.topContainer, isMobile && screenWidth < 600 && styles.topContainerMobile]}>
+          <Image
+            source={{ uri: detail.poster }}
+            style={[styles.poster, isMobile && screenWidth < 600 && styles.posterMobile]}
+          />
+          <View style={[styles.infoContainer, isMobile && screenWidth < 600 && styles.infoContainerMobile]}>
            <ThemedText style={styles.title} numberOfLines={1}>
              {detail.title}
            </ThemedText>
@@ -197,17 +202,26 @@ export default function DetailScreen() {
          </View>
          <View style={styles.episodesContainer}>
            <ThemedText style={styles.episodesTitle}>播放列表</ThemedText>
-            <ScrollView contentContainerStyle={styles.episodeList}>
-              {detail.episodes.map((episode, index) => (
+            <FlatList
+              data={detail.episodes}
+              renderItem={({ item, index }) => (
                <StyledButton
-                  key={index}
                  style={styles.episodeButton}
-                  onPress={() => handlePlay(episode, index)}
+                  onPress={() => handlePlay(item, index)}
                  text={`第 ${index + 1} 集`}
                  textStyle={styles.episodeButtonText}
                />
-              ))}
-            </ScrollView>
+              )}
+              keyExtractor={(_item, index) => index.toString()}
+              numColumns={numColumns(80, 10)}
+              key={numColumns(80, 10)} // Re-render on column change
+              contentContainerStyle={styles.episodeList}
+              // The FlatList should not be scrollable itself, the parent ScrollView handles it.
+              // This can be achieved by making it non-scrollable and letting it expand.
+              // However, for performance, if the list is very long, a fixed height would be better.
+              // For now, we let the parent ScrollView handle scrolling.
+              scrollEnabled={false}
+            />
          </View>
        </View>
      </ScrollView>
@@ -222,16 +236,31 @@ const styles = StyleSheet.create({
    flexDirection: "row",
    padding: 20,
  },
+  topContainerMobile: {
+    flexDirection: "column",
+    alignItems: "center",
+  },
  poster: {
    width: 200,
    height: 300,
    borderRadius: 8,
  },
+  posterMobile: {
+    width: "80%",
+    height: undefined,
+    aspectRatio: 2 / 3, // Maintain aspect ratio
+    marginBottom: 20,
+  },
  infoContainer: {
    flex: 1,
    marginLeft: 20,
    justifyContent: "flex-start",
  },
+  infoContainerMobile: {
+    marginLeft: 0,
+    width: "100%",
+    alignItems: "center",
+  },
  title: {
    fontSize: 28,
    fontWeight: "bold",
@@ -302,8 +331,7 @@ const styles = StyleSheet.create({
    marginBottom: 10,
  },
  episodeList: {
-    flexDirection: "row",
-    flexWrap: "wrap",
+    // flexDirection is now handled by FlatList's numColumns
  },
  episodeButton: {
    margin: 5,
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback, useRef } from "react";
-import { View, StyleSheet, ActivityIndicator, FlatList, Pressable, Dimensions } from "react-native";
+import { View, StyleSheet, ActivityIndicator, FlatList, Pressable } from "react-native";
 import { ThemedView } from "@/components/ThemedView";
 import { ThemedText } from "@/components/ThemedText";
 import { api } from "@/services/api";
@@ -10,16 +10,18 @@ import { SettingsModal } from "@/components/SettingsModal";
 import { StyledButton } from "@/components/StyledButton";
 import useHomeStore, { RowItem, Category } from "@/stores/homeStore";
 import { useSettingsStore } from "@/stores/settingsStore";
-
-const NUM_COLUMNS = 5;
-const { width } = Dimensions.get("window");
-const ITEM_WIDTH = width / NUM_COLUMNS - 24;
+import { useResponsive } from "@/hooks/useResponsive";

 export default function HomeScreen() {
  const router = useRouter();
+  const { isMobile, screenWidth, numColumns } = useResponsive();
  const colorScheme = "dark";
  const flatListRef = useRef<FlatList>(null);

+  // Calculate item width based on screen size and number of columns
+  const itemWidth = isMobile ? screenWidth / numColumns(150, 16) - 24 : screenWidth / 5 - 24;
+  const calculatedNumColumns = numColumns(150, 16);
+
  const {
    categories,
    selectedCategory,
@@ -64,7 +66,7 @@ export default function HomeScreen() {
  };

  const renderContentItem = ({ item }: { item: RowItem }) => (
-    <View style={styles.itemContainer}>
+    <View style={[styles.itemContainer, { width: itemWidth }]}>
      <VideoCard
        id={item.id}
        source={item.source}
@@ -136,7 +138,8 @@ export default function HomeScreen() {
          data={contentData}
          renderItem={renderContentItem}
          keyExtractor={(item, index) => `${item.source}-${item.id}-${index}`}
-          numColumns={NUM_COLUMNS}
+          numColumns={calculatedNumColumns}
+          key={calculatedNumColumns} // Re-render FlatList when numColumns changes
          contentContainerStyle={styles.listContent}
          onEndReached={loadMoreData}
          onEndReachedThreshold={0.5}
@@ -210,7 +213,7 @@ const styles = StyleSheet.create({
  },
  itemContainer: {
    margin: 8,
-    width: ITEM_WIDTH,
+    // width is now set dynamically in renderContentItem
    alignItems: "center",
  },
 });
--- a/app/play.tsx
+++ b/app/play.tsx
@@ -1,10 +1,13 @@
 import React, { useEffect, useRef } from "react";
-import { View, StyleSheet, TouchableOpacity, ActivityIndicator, BackHandler } from "react-native";
+import { View, StyleSheet, ActivityIndicator, BackHandler, Platform, SafeAreaView, Dimensions } from "react-native";
 import { useLocalSearchParams, useRouter } from "expo-router";
 import { Video, ResizeMode } from "expo-av";
+import * as ScreenOrientation from "expo-screen-orientation";
 import { useKeepAwake } from "expo-keep-awake";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import { ThemedView } from "@/components/ThemedView";
 import { PlayerControls } from "@/components/PlayerControls";
+import { PlayerControlsMobile } from "@/components/PlayerControls.mobile";
 import { EpisodeSelectionModal } from "@/components/EpisodeSelectionModal";
 import { SourceSelectionModal } from "@/components/SourceSelectionModal";
 import { SeekingBar } from "@/components/SeekingBar";
@@ -12,11 +15,13 @@ import { NextEpisodeOverlay } from "@/components/NextEpisodeOverlay";
 import { LoadingOverlay } from "@/components/LoadingOverlay";
 import usePlayerStore from "@/stores/playerStore";
 import { useTVRemoteHandler } from "@/hooks/useTVRemoteHandler";
+import { useResponsive } from "@/hooks/useResponsive";

 export default function PlayScreen() {
  const videoRef = useRef<Video>(null);
  const router = useRouter();
  useKeepAwake();
+  const { isMobile } = useResponsive();
  const { source, id, episodeIndex, position } = useLocalSearchParams<{
    source: string;
    id: string;
@@ -48,6 +53,21 @@ export default function PlayScreen() {
    reset,
  } = usePlayerStore();

+  useEffect(() => {
+    async function lockOrientation() {
+      if (isMobile) {
+        await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT);
+      }
+    }
+    lockOrientation();
+
+    return () => {
+      if (isMobile) {
+        ScreenOrientation.unlockAsync();
+      }
+    };
+  }, [isMobile]);
+
  useEffect(() => {
    setVideoRef(videoRef);
    if (source && id) {
@@ -58,7 +78,37 @@ export default function PlayScreen() {
    };
  }, [source, id, episodeIndex, position, setVideoRef, loadVideo, reset]);

-  const { onScreenPress } = useTVRemoteHandler();
+  const { onScreenPress: onTVScreenPress } = useTVRemoteHandler();
+
+  const handleScreenPress = () => {
+    if (isMobile) {
+      setShowControls(!showControls);
+    } else {
+      onTVScreenPress();
+    }
+  };
+
+  const singleTap = Gesture.Tap()
+    .onEnd(() => {
+      handleScreenPress();
+    })
+    .runOnJS(true);
+
+  const doubleTap = Gesture.Tap()
+    .numberOfTaps(2)
+    .onEnd((e) => {
+      if (!isMobile) return;
+      const tapPositionX = e.x;
+      const screenWidth = Dimensions.get("window").width;
+      if (tapPositionX < screenWidth / 2) {
+        seek(-10); // Seek back
+      } else {
+        seek(10); // Seek forward
+      }
+    })
+    .runOnJS(true);
+
+  const composedGesture = Gesture.Exclusive(doubleTap, singleTap);

  useEffect(() => {
    const backAction = () => {
@@ -93,39 +143,45 @@ export default function PlayScreen() {

  const currentEpisode = episodes[currentEpisodeIndex];

+  const PlayerComponent = isMobile ? PlayerControlsMobile : PlayerControls;
+
  return (
-    <ThemedView focusable style={styles.container}>
-      <TouchableOpacity activeOpacity={1} style={styles.videoContainer} onPress={onScreenPress}>
-        <Video
-          ref={videoRef}
-          style={styles.videoPlayer}
-          source={{ uri: currentEpisode?.url }}
-          resizeMode={ResizeMode.CONTAIN}
-          onPlaybackStatusUpdate={handlePlaybackStatusUpdate}
-          onLoad={() => {
-            const jumpPosition = introEndTime || initialPosition;
-            if (jumpPosition > 0) {
-              videoRef.current?.setPositionAsync(jumpPosition);
-            }
-            usePlayerStore.setState({ isLoading: false });
-          }}
-          onLoadStart={() => usePlayerStore.setState({ isLoading: true })}
-          useNativeControls={false}
-          shouldPlay
-        />
+    <SafeAreaView style={styles.container}>
+      <ThemedView focusable style={styles.container}>
+        <GestureDetector gesture={composedGesture}>
+          <View style={styles.videoContainer}>
+            <Video
+              ref={videoRef}
+              style={styles.videoPlayer}
+              source={{ uri: currentEpisode?.url }}
+              resizeMode={ResizeMode.CONTAIN}
+              onPlaybackStatusUpdate={handlePlaybackStatusUpdate}
+              onLoad={() => {
+                const jumpPosition = introEndTime || initialPosition;
+                if (jumpPosition > 0) {
+                  videoRef.current?.setPositionAsync(jumpPosition);
+                }
+                usePlayerStore.setState({ isLoading: false });
+              }}
+              onLoadStart={() => usePlayerStore.setState({ isLoading: true })}
+              useNativeControls={false}
+              shouldPlay
+            />

-        {showControls && <PlayerControls showControls={showControls} setShowControls={setShowControls} />}
+            {showControls && <PlayerComponent showControls={showControls} setShowControls={setShowControls} />}

-        <SeekingBar />
+            <SeekingBar />

-        <LoadingOverlay visible={isLoading} />
+            <LoadingOverlay visible={isLoading} />

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

-      <EpisodeSelectionModal />
-      <SourceSelectionModal />
-    </ThemedView>
+        <EpisodeSelectionModal />
+        <SourceSelectionModal />
+      </ThemedView>
+    </SafeAreaView>
  );
 }

--- a/app/search.tsx
+++ b/app/search.tsx
@@ -6,6 +6,7 @@ import VideoCard from "@/components/VideoCard.tv";
 import { api, SearchResult } from "@/services/api";
 import { Search } from "lucide-react-native";
 import { StyledButton } from "@/components/StyledButton";
+import { useResponsive } from "@/hooks/useResponsive";

 export default function SearchScreen() {
  const [keyword, setKeyword] = useState("");
@@ -15,6 +16,10 @@ export default function SearchScreen() {
  const textInputRef = useRef<TextInput>(null);
  const colorScheme = "dark"; // Replace with useColorScheme() if needed
  const [isInputFocused, setIsInputFocused] = useState(false);
+  const { isMobile, screenWidth, numColumns } = useResponsive();
+
+  const itemWidth = isMobile ? screenWidth / numColumns(150, 16) - 24 : screenWidth / 5 - 24;
+  const calculatedNumColumns = numColumns(150, 16);

  useEffect(() => {
    // Focus the text input when the screen loads
@@ -48,15 +53,17 @@ export default function SearchScreen() {
  };

  const renderItem = ({ item }: { item: SearchResult }) => (
-    <VideoCard
-      id={item.id.toString()}
-      source={item.source}
-      title={item.title}
-      poster={item.poster}
-      year={item.year}
-      sourceName={item.source_name}
-      api={api}
-    />
+    <View style={{ width: itemWidth, margin: 8 }}>
+      <VideoCard
+        id={item.id.toString()}
+        source={item.source}
+        title={item.title}
+        poster={item.poster}
+        year={item.year}
+        sourceName={item.source_name}
+        api={api}
+      />
+    </View>
  );

  return (
@@ -99,7 +106,8 @@ export default function SearchScreen() {
          data={results}
          renderItem={renderItem}
          keyExtractor={(item, index) => `${item.id}-${item.source}-${index}`}
-          numColumns={5} // Adjust based on your card size and desired layout
+          numColumns={calculatedNumColumns}
+          key={calculatedNumColumns}
          contentContainerStyle={styles.listContent}
          ListEmptyComponent={
            <View style={styles.centerContainer}>