diff --git a/app/play.tsx b/app/play.tsx
index e994a80..3e9a8f7 100644
--- a/app/play.tsx
+++ b/app/play.tsx
@@ -1,7 +1,7 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useCallback, memo, useMemo } from "react";
import { StyleSheet, TouchableOpacity, BackHandler, AppState, AppStateStatus, View } from "react-native";
import { useLocalSearchParams, useRouter } from "expo-router";
-import { Video, ResizeMode } from "expo-av";
+import { Video } from "expo-av";
import { useKeepAwake } from "expo-keep-awake";
import { ThemedView } from "@/components/ThemedView";
import { PlayerControls } from "@/components/PlayerControls";
@@ -16,6 +16,55 @@ import { useTVRemoteHandler } from "@/hooks/useTVRemoteHandler";
import Toast from "react-native-toast-message";
import usePlayerStore, { selectCurrentEpisode } from "@/stores/playerStore";
import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
+import { useVideoHandlers } from "@/hooks/useVideoHandlers";
+
+// 优化的加载动画组件
+const LoadingContainer = memo(
+ ({ style, currentEpisode }: { style: any; currentEpisode: { url: string; title: string } | undefined }) => {
+ console.info(
+ `[PERF] Video component NOT rendered - waiting for valid URL. currentEpisode: ${!!currentEpisode}, url: ${
+ currentEpisode?.url ? "exists" : "missing"
+ }`
+ );
+ return (
+
+
+
+ );
+ }
+);
+
+LoadingContainer.displayName = "LoadingContainer";
+
+// 移到组件外部避免重复创建
+const createResponsiveStyles = (deviceType: string) => {
+ const isMobile = deviceType === "mobile";
+ const isTablet = deviceType === "tablet";
+
+ return StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: "black",
+ // 移动端和平板端可能需要状态栏处理
+ ...(isMobile || isTablet ? { paddingTop: 0 } : {}),
+ },
+ videoContainer: {
+ ...StyleSheet.absoluteFillObject,
+ // 为触摸设备添加更多的交互区域
+ ...(isMobile || isTablet ? { zIndex: 1 } : {}),
+ },
+ videoPlayer: {
+ ...StyleSheet.absoluteFillObject,
+ },
+ loadingContainer: {
+ ...StyleSheet.absoluteFillObject,
+ backgroundColor: "rgba(0, 0, 0, 0.8)",
+ justifyContent: "center",
+ alignItems: "center",
+ zIndex: 10,
+ },
+ });
+};
export default function PlayScreen() {
const videoRef = useRef