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-17 14:14:46 +08:00 · 2025-07-09 17:23:46 +08:00
parent d42a3e014e
commit 803fc87fd9
10 changed files with 428 additions and 97 deletions
--- a/components/PlayerControls.mobile.tsx
+++ b/components/PlayerControls.mobile.tsx
@@ -0,0 +1,179 @@
+import React from "react";
+import { View, Text, StyleSheet, Pressable } from "react-native";
+import { Pause, Play, SkipForward, List, Tv } from "lucide-react-native";
+import { ThemedText } from "@/components/ThemedText";
+import { MediaButton } from "@/components/MediaButton";
+import usePlayerStore from "@/stores/playerStore";
+
+interface PlayerControlsProps {
+  showControls: boolean;
+}
+
+export const PlayerControlsMobile: React.FC<PlayerControlsProps> = ({ showControls }) => {
+  const {
+    detail,
+    currentEpisodeIndex,
+    currentSourceIndex,
+    status,
+    isSeeking,
+    seekPosition,
+    progressPosition,
+    togglePlayPause,
+    playEpisode,
+    setShowEpisodeModal,
+    setShowSourceModal,
+  } = usePlayerStore();
+
+  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";
+    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")}`;
+  };
+
+  const onPlayNextEpisode = () => {
+    if (hasNextEpisode) {
+      playEpisode(currentEpisodeIndex + 1);
+    }
+  };
+
+  return (
+    <View style={styles.controlsOverlay}>
+      <View style={styles.topControls}>
+        <Text style={styles.controlTitle} numberOfLines={2}>
+          {videoTitle} {currentEpisodeTitle ? `- ${currentEpisodeTitle}` : ""}
+        </Text>
+      </View>
+
+      <View style={styles.middleControls}>
+        {/* This area can be used for gesture-based seeking indicators in the future */}
+      </View>
+
+      <View style={styles.bottomControlsContainer}>
+        <View style={styles.timeAndActions}>
+          <ThemedText style={styles.timeText}>
+            {status?.isLoaded
+              ? `${formatTime(status.positionMillis)} / ${formatTime(status.durationMillis || 0)}`
+              : "00:00 / 00:00"}
+          </ThemedText>
+          <View style={styles.actions}>
+            <MediaButton onPress={() => setShowEpisodeModal(true)}>
+              <List color="white" size={22} />
+            </MediaButton>
+            <MediaButton onPress={() => setShowSourceModal(true)}>
+              <Tv color="white" size={22} />
+            </MediaButton>
+          </View>
+        </View>
+
+        <View style={styles.progressBarContainer}>
+          <View style={styles.progressBarBackground} />
+          <View
+            style={[
+              styles.progressBarFilled,
+              {
+                width: `${(isSeeking ? seekPosition : progressPosition) * 100}%`,
+              },
+            ]}
+          />
+          <Pressable style={styles.progressBarTouchable} />
+        </View>
+
+        <View style={styles.mainControls}>
+          <View style={styles.placeholder} />
+          <MediaButton onPress={togglePlayPause}>
+            {status?.isLoaded && status.isPlaying ? (
+              <Pause color="white" size={36} />
+            ) : (
+              <Play color="white" size={36} />
+            )}
+          </MediaButton>
+          <MediaButton onPress={onPlayNextEpisode} disabled={!hasNextEpisode}>
+            <SkipForward color={hasNextEpisode ? "white" : "#666"} size={28} />
+          </MediaButton>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  controlsOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.4)",
+    justifyContent: "space-between",
+    paddingHorizontal: 15,
+    paddingVertical: 10,
+  },
+  topControls: {
+    flexDirection: "row",
+    justifyContent: "center",
+  },
+  controlTitle: {
+    color: "white",
+    fontSize: 14,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  middleControls: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  bottomControlsContainer: {
+    width: "100%",
+  },
+  timeAndActions: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 5,
+  },
+  timeText: {
+    color: "white",
+    fontSize: 12,
+  },
+  actions: {
+    flexDirection: "row",
+    gap: 15,
+  },
+  progressBarContainer: {
+    width: "100%",
+    height: 4,
+    position: "relative",
+    marginVertical: 10,
+  },
+  progressBarBackground: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "rgba(255, 255, 255, 0.3)",
+    borderRadius: 2,
+  },
+  progressBarFilled: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "#ff0000",
+    borderRadius: 2,
+  },
+  progressBarTouchable: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    height: 20,
+    top: -8,
+    zIndex: 10,
+  },
+  mainControls: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    alignItems: "center",
+    marginTop: 5,
+  },
+  placeholder: {
+    width: 28, // to balance the skip forward button
+  },
+});