From 4c93736c5e4b55fe4ea67ba2dfeb61e35a7e8108 Mon Sep 17 00:00:00 2001
From: James Chen <litecn@gmail.com>
Date: Wed, 27 Aug 2025 17:22:11 +0800
Subject: [PATCH 1/5] feat(ui): replace TouchableOpacity with Pressable for
 improved ripple effect and add color customization, android focus effect

---
 app/index.tsx               |  3 ++-
 components/StyledButton.tsx |  1 +
 components/VideoCard.tv.tsx | 14 ++++++++++----
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/app/index.tsx b/app/index.tsx
index aa3489e..ed1fe18 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -15,6 +15,7 @@ import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
 import { getCommonResponsiveStyles } from "@/utils/ResponsiveStyles";
 import ResponsiveNavigation from "@/components/navigation/ResponsiveNavigation";
 import { useApiConfig, getApiConfigErrorMessage } from "@/hooks/useApiConfig";
+import { Colors } from "@/constants/Colors";
 
 const LOAD_MORE_THRESHOLD = 200;
 
@@ -166,7 +167,7 @@ export default function HomeScreen() {
       <View style={dynamicStyles.headerContainer}>
         <View style={{ flexDirection: "row", alignItems: "center" }}>
           <ThemedText style={dynamicStyles.headerTitle}>首页</ThemedText>
-          <Pressable style={{ marginLeft: 20 }} onPress={() => router.push("/live")}>
+          <Pressable android_ripple={{color: Colors.dark.link}} style={{ marginLeft: 20 }} onPress={() => router.push("/live")}>
             {({ focused }) => (
               <ThemedText style={[dynamicStyles.headerTitle, { color: focused ? "white" : "grey" }]}>直播</ThemedText>
             )}
diff --git a/components/StyledButton.tsx b/components/StyledButton.tsx
index 7d5a21d..d0d582c 100644
--- a/components/StyledButton.tsx
+++ b/components/StyledButton.tsx
@@ -108,6 +108,7 @@ export const StyledButton = forwardRef<View, StyledButtonProps>(
     return (
       <Animated.View style={[animationStyle, style]}>
         <Pressable
+          android_ripple={{ color: Colors.dark.link, borderless: false }}
           ref={ref}
           onFocus={() => setIsFocused(true)}
           onBlur={() => setIsFocused(false)}
diff --git a/components/VideoCard.tv.tsx b/components/VideoCard.tv.tsx
index 426c779..51c9bd8 100644
--- a/components/VideoCard.tv.tsx
+++ b/components/VideoCard.tv.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback, useRef, forwardRef } from "react";
-import { View, Text, Image, StyleSheet, TouchableOpacity, Alert, Animated } from "react-native";
+import { View, Text, Image, StyleSheet, Pressable, TouchableOpacity, Alert, Animated } from "react-native";
 import { useRouter } from "expo-router";
 import { Star, Play } from "lucide-react-native";
 import { PlayRecordManager } from "@/services/storage";
@@ -147,13 +147,18 @@ const VideoCard = forwardRef<View, VideoCardProps>(
 
     return (
       <Animated.View style={[styles.wrapper, animatedStyle, { opacity: fadeAnim }]}>
-        <TouchableOpacity
+        <Pressable
+          android_ripple={{
+            color: Colors.dark.link,
+            borderless: false,
+            foreground: true,
+          }}
           onPress={handlePress}
           onLongPress={handleLongPress}
           onFocus={handleFocus}
           onBlur={handleBlur}
           style={styles.pressable}
-          activeOpacity={1}
+          // activeOpacity={1}
           delayLongPress={1000}
         >
           <View style={styles.card}>
@@ -203,7 +208,8 @@ const VideoCard = forwardRef<View, VideoCardProps>(
               </View>
             )}
           </View>
-        </TouchableOpacity>
+        </Pressable>
+
       </Animated.View>
     );
   }

From 9bcdeaa44d3b1ea28f31f41d0ff54c9307733013 Mon Sep 17 00:00:00 2001
From: James Chen <litecn@gmail.com>
Date: Wed, 27 Aug 2025 18:07:22 +0800
Subject: [PATCH 2/5] feat(platform): customize android ripple effect for
 Pressable based on platform type

---
 app/index.tsx               |  4 ++--
 components/StyledButton.tsx |  4 ++--
 components/VideoCard.tv.tsx | 28 +++++++++++++++-------------
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/app/index.tsx b/app/index.tsx
index ed1fe18..8e38248 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback, useRef, useState } from "react";
-import { View, StyleSheet, ActivityIndicator, FlatList, Pressable, Animated, StatusBar } from "react-native";
+import { View, StyleSheet, ActivityIndicator, FlatList, Pressable, Animated, StatusBar, Platform } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ThemedView } from "@/components/ThemedView";
 import { ThemedText } from "@/components/ThemedText";
@@ -167,7 +167,7 @@ export default function HomeScreen() {
       <View style={dynamicStyles.headerContainer}>
         <View style={{ flexDirection: "row", alignItems: "center" }}>
           <ThemedText style={dynamicStyles.headerTitle}>首页</ThemedText>
-          <Pressable android_ripple={{color: Colors.dark.link}} style={{ marginLeft: 20 }} onPress={() => router.push("/live")}>
+          <Pressable android_ripple={Platform.isTV ? {color:'transparent'} : {color: Colors.dark.link}} style={{ marginLeft: 20 }} onPress={() => router.push("/live")}>
             {({ focused }) => (
               <ThemedText style={[dynamicStyles.headerTitle, { color: focused ? "white" : "grey" }]}>直播</ThemedText>
             )}
diff --git a/components/StyledButton.tsx b/components/StyledButton.tsx
index d0d582c..e87d6d7 100644
--- a/components/StyledButton.tsx
+++ b/components/StyledButton.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { Animated, Pressable, StyleSheet, StyleProp, ViewStyle, PressableProps, TextStyle, View } from "react-native";
+import { Animated, Pressable, StyleSheet, StyleProp, ViewStyle, PressableProps, TextStyle, View, Platform } from "react-native";
 import { ThemedText } from "./ThemedText";
 import { Colors } from "@/constants/Colors";
 import { useButtonAnimation } from "@/hooks/useAnimation";
@@ -108,7 +108,7 @@ export const StyledButton = forwardRef<View, StyledButtonProps>(
     return (
       <Animated.View style={[animationStyle, style]}>
         <Pressable
-          android_ripple={{ color: Colors.dark.link, borderless: false }}
+          android_ripple={Platform.isTV ? {color:'transparent'} : { color: Colors.dark.link, borderless: false }}
           ref={ref}
           onFocus={() => setIsFocused(true)}
           onBlur={() => setIsFocused(false)}
diff --git a/components/VideoCard.tv.tsx b/components/VideoCard.tv.tsx
index 51c9bd8..42bd878 100644
--- a/components/VideoCard.tv.tsx
+++ b/components/VideoCard.tv.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback, useRef, forwardRef } from "react";
-import { View, Text, Image, StyleSheet, Pressable, TouchableOpacity, Alert, Animated } from "react-native";
+import { View, Text, Image, StyleSheet, Pressable, TouchableOpacity, Alert, Animated, Platform } from "react-native";
 import { useRouter } from "expo-router";
 import { Star, Play } from "lucide-react-native";
 import { PlayRecordManager } from "@/services/storage";
@@ -148,7 +148,7 @@ const VideoCard = forwardRef<View, VideoCardProps>(
     return (
       <Animated.View style={[styles.wrapper, animatedStyle, { opacity: fadeAnim }]}>
         <Pressable
-          android_ripple={{
+          android_ripple={Platform.isTV ? {color:'transparent'} : {
             color: Colors.dark.link,
             borderless: false,
             foreground: true,
@@ -162,17 +162,18 @@ const VideoCard = forwardRef<View, VideoCardProps>(
           delayLongPress={1000}
         >
           <View style={styles.card}>
-            <Image source={{ uri: api.getImageProxyUrl(poster) }} style={styles.poster} />
-            {isFocused && (
-              <View style={styles.overlay}>
-                {isContinueWatching && (
-                  <View style={styles.continueWatchingBadge}>
-                    <Play size={16} color="#ffffff" fill="#ffffff" />
-                    <ThemedText style={styles.continueWatchingText}>继续观看</ThemedText>
-                  </View>
-                )}
-              </View>
-            )}
+
+              <Image source={{ uri: api.getImageProxyUrl(poster) }} style={styles.poster} />
+              {isFocused && (
+                <View style={styles.overlay}>
+                  {isContinueWatching && (
+                    <View style={styles.continueWatchingBadge}>
+                      <Play size={16} color="#ffffff" fill="#ffffff" />
+                      <ThemedText style={styles.continueWatchingText}>继续观看</ThemedText>
+                    </View>
+                  )}
+                </View>
+              )}
 
             {/* 进度条 */}
             {isContinueWatching && (
@@ -197,6 +198,7 @@ const VideoCard = forwardRef<View, VideoCardProps>(
                 <Text style={styles.badgeText}>{sourceName}</Text>
               </View>
             )}
+
           </View>
           <View style={styles.infoContainer}>
             <ThemedText numberOfLines={1}>{title}</ThemedText>

From f7ae93bd3d830530bfadf1f540584bc5175ad385 Mon Sep 17 00:00:00 2001
From: James Chen <litecn@gmail.com>
Date: Wed, 27 Aug 2025 22:46:20 +0800
Subject: [PATCH 3/5] feat(ui): update Pressable ripple effect for device type
 in HomeScreen, StyledButton, and VideoCard components

---
 app/index.tsx               |  2 +-
 components/StyledButton.tsx |  4 +++-
 components/VideoCard.tv.tsx | 14 +++++++++-----
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/app/index.tsx b/app/index.tsx
index 8e38248..b2cadb0 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -167,7 +167,7 @@ export default function HomeScreen() {
       <View style={dynamicStyles.headerContainer}>
         <View style={{ flexDirection: "row", alignItems: "center" }}>
           <ThemedText style={dynamicStyles.headerTitle}>首页</ThemedText>
-          <Pressable android_ripple={Platform.isTV ? {color:'transparent'} : {color: Colors.dark.link}} style={{ marginLeft: 20 }} onPress={() => router.push("/live")}>
+          <Pressable android_ripple={Platform.isTV ? {color:'transparent'} : ( deviceType==='tv' ? {color: Colors.dark.link}: {color:'transparent'})} style={{ marginLeft: 20 }} onPress={() => router.push("/live")}>
             {({ focused }) => (
               <ThemedText style={[dynamicStyles.headerTitle, { color: focused ? "white" : "grey" }]}>直播</ThemedText>
             )}
diff --git a/components/StyledButton.tsx b/components/StyledButton.tsx
index e87d6d7..e90beca 100644
--- a/components/StyledButton.tsx
+++ b/components/StyledButton.tsx
@@ -3,6 +3,7 @@ import { Animated, Pressable, StyleSheet, StyleProp, ViewStyle, PressableProps,
 import { ThemedText } from "./ThemedText";
 import { Colors } from "@/constants/Colors";
 import { useButtonAnimation } from "@/hooks/useAnimation";
+import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
 
 interface StyledButtonProps extends PressableProps {
   children?: React.ReactNode;
@@ -19,6 +20,7 @@ export const StyledButton = forwardRef<View, StyledButtonProps>(
     const colors = Colors[colorScheme];
     const [isFocused, setIsFocused] = React.useState(false);
     const animationStyle = useButtonAnimation(isFocused);
+    const deviceType = useResponsiveLayout().deviceType;
 
     const variantStyles = {
       default: StyleSheet.create({
@@ -108,7 +110,7 @@ export const StyledButton = forwardRef<View, StyledButtonProps>(
     return (
       <Animated.View style={[animationStyle, style]}>
         <Pressable
-          android_ripple={Platform.isTV ? {color:'transparent'} : { color: Colors.dark.link, borderless: false }}
+          android_ripple={Platform.isTV ? { color: 'transparent' } : (deviceType === 'tv' ? { color: Colors.dark.link } : { color: 'transparent' })}
           ref={ref}
           onFocus={() => setIsFocused(true)}
           onBlur={() => setIsFocused(false)}
diff --git a/components/VideoCard.tv.tsx b/components/VideoCard.tv.tsx
index 42bd878..cd32fcc 100644
--- a/components/VideoCard.tv.tsx
+++ b/components/VideoCard.tv.tsx
@@ -7,6 +7,7 @@ import { API } from "@/services/api";
 import { ThemedText } from "@/components/ThemedText";
 import { Colors } from "@/constants/Colors";
 import Logger from '@/utils/Logger';
+import { useResponsiveLayout } from "@/hooks/useResponsiveLayout";
 
 const logger = Logger.withTag('VideoCardTV');
 
@@ -54,6 +55,8 @@ const VideoCard = forwardRef<View, VideoCardProps>(
 
     const scale = useRef(new Animated.Value(1)).current;
 
+    const deviceType = useResponsiveLayout().deviceType;
+
     const animatedStyle = {
       transform: [{ scale }],
     };
@@ -148,11 +151,7 @@ const VideoCard = forwardRef<View, VideoCardProps>(
     return (
       <Animated.View style={[styles.wrapper, animatedStyle, { opacity: fadeAnim }]}>
         <Pressable
-          android_ripple={Platform.isTV ? {color:'transparent'} : {
-            color: Colors.dark.link,
-            borderless: false,
-            foreground: true,
-          }}
+          android_ripple={Platform.isTV ? { color: 'transparent' } : (deviceType === 'tv' ? { color: Colors.dark.link } : { color: 'transparent' })}
           onPress={handlePress}
           onLongPress={handleLongPress}
           onFocus={handleFocus}
@@ -229,9 +228,14 @@ const styles = StyleSheet.create({
     marginHorizontal: 8,
   },
   pressable: {
+    width: CARD_WIDTH + 20,
+    height: CARD_HEIGHT + 60,
+    justifyContent: 'center',
     alignItems: "center",
+    overflow: "visible",
   },
   card: {
+    marginTop: 10,
     width: CARD_WIDTH,
     height: CARD_HEIGHT,
     borderRadius: 8,

From 67275988bd77950d92d8df84f62ce03ea17b0dfd Mon Sep 17 00:00:00 2001
From: James Chen <litecn@gmail.com>
Date: Thu, 28 Aug 2025 09:18:24 +0800
Subject: [PATCH 4/5] feat(ui): unify android ripple effect logic for Pressable
 across HomeScreen, StyledButton, and VideoCard components

---
 app/index.tsx               | 2 +-
 components/StyledButton.tsx | 2 +-
 components/VideoCard.tv.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/index.tsx b/app/index.tsx
index b2cadb0..7e8193e 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -167,7 +167,7 @@ export default function HomeScreen() {
       <View style={dynamicStyles.headerContainer}>
         <View style={{ flexDirection: "row", alignItems: "center" }}>
           <ThemedText style={dynamicStyles.headerTitle}>首页</ThemedText>
-          <Pressable android_ripple={Platform.isTV ? {color:'transparent'} : ( deviceType==='tv' ? {color: Colors.dark.link}: {color:'transparent'})} style={{ marginLeft: 20 }} onPress={() => router.push("/live")}>
+          <Pressable android_ripple={Platform.isTV || deviceType !== 'tv'? { color: 'transparent' } : { color: Colors.dark.link }} style={{ marginLeft: 20 }} onPress={() => router.push("/live")}>
             {({ focused }) => (
               <ThemedText style={[dynamicStyles.headerTitle, { color: focused ? "white" : "grey" }]}>直播</ThemedText>
             )}
diff --git a/components/StyledButton.tsx b/components/StyledButton.tsx
index e90beca..0bdb442 100644
--- a/components/StyledButton.tsx
+++ b/components/StyledButton.tsx
@@ -110,7 +110,7 @@ export const StyledButton = forwardRef<View, StyledButtonProps>(
     return (
       <Animated.View style={[animationStyle, style]}>
         <Pressable
-          android_ripple={Platform.isTV ? { color: 'transparent' } : (deviceType === 'tv' ? { color: Colors.dark.link } : { color: 'transparent' })}
+          android_ripple={Platform.isTV || deviceType !== 'tv'? { color: 'transparent' } : { color: Colors.dark.link }}
           ref={ref}
           onFocus={() => setIsFocused(true)}
           onBlur={() => setIsFocused(false)}
diff --git a/components/VideoCard.tv.tsx b/components/VideoCard.tv.tsx
index cd32fcc..4ceb53f 100644
--- a/components/VideoCard.tv.tsx
+++ b/components/VideoCard.tv.tsx
@@ -151,7 +151,7 @@ const VideoCard = forwardRef<View, VideoCardProps>(
     return (
       <Animated.View style={[styles.wrapper, animatedStyle, { opacity: fadeAnim }]}>
         <Pressable
-          android_ripple={Platform.isTV ? { color: 'transparent' } : (deviceType === 'tv' ? { color: Colors.dark.link } : { color: 'transparent' })}
+          android_ripple={Platform.isTV || deviceType !== 'tv'? { color: 'transparent' } : { color: Colors.dark.link }}
           onPress={handlePress}
           onLongPress={handleLongPress}
           onFocus={handleFocus}

From 23647f73295b43b38c7a895a5b7324490838cff8 Mon Sep 17 00:00:00 2001
From: James Chen <litecn@gmail.com>
Date: Thu, 28 Aug 2025 17:38:02 +0800
Subject: [PATCH 5/5] feat(ui): replace Pressable with TouchableOpacity for
 non-TV devices in VideoCard component

---
 components/VideoCard.tv.tsx | 151 +++++++++++++++++++++++++-----------
 1 file changed, 105 insertions(+), 46 deletions(-)

diff --git a/components/VideoCard.tv.tsx b/components/VideoCard.tv.tsx
index 4ceb53f..423b097 100644
--- a/components/VideoCard.tv.tsx
+++ b/components/VideoCard.tv.tsx
@@ -150,18 +150,17 @@ const VideoCard = forwardRef<View, VideoCardProps>(
 
     return (
       <Animated.View style={[styles.wrapper, animatedStyle, { opacity: fadeAnim }]}>
-        <Pressable
-          android_ripple={Platform.isTV || deviceType !== 'tv'? { color: 'transparent' } : { color: Colors.dark.link }}
-          onPress={handlePress}
-          onLongPress={handleLongPress}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          style={styles.pressable}
-          // activeOpacity={1}
-          delayLongPress={1000}
-        >
-          <View style={styles.card}>
-
+        {Platform.isTV || deviceType !== 'tv' ? (
+          <TouchableOpacity
+            onPress={handlePress}
+            onLongPress={handleLongPress}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            style={styles.pressable}
+            activeOpacity={1}
+            delayLongPress={1000}
+          >
+            <View style={styles.card}>
               <Image source={{ uri: api.getImageProxyUrl(poster) }} style={styles.poster} />
               {isFocused && (
                 <View style={styles.overlay}>
@@ -174,42 +173,102 @@ const VideoCard = forwardRef<View, VideoCardProps>(
                 </View>
               )}
 
-            {/* 进度条 */}
-            {isContinueWatching && (
-              <View style={styles.progressContainer}>
-                <View style={[styles.progressBar, { width: `${(progress || 0) * 100}%` }]} />
-              </View>
-            )}
+              {/* 进度条 */}
+              {isContinueWatching && (
+                <View style={styles.progressContainer}>
+                  <View style={[styles.progressBar, { width: `${(progress || 0) * 100}%` }]} />
+                </View>
+              )}
 
-            {rate && (
-              <View style={styles.ratingContainer}>
-                <Star size={12} color="#FFD700" fill="#FFD700" />
-                <ThemedText style={styles.ratingText}>{rate}</ThemedText>
-              </View>
-            )}
-            {year && (
-              <View style={styles.yearBadge}>
-                <Text style={styles.badgeText}>{year}</Text>
-              </View>
-            )}
-            {sourceName && (
-              <View style={styles.sourceNameBadge}>
-                <Text style={styles.badgeText}>{sourceName}</Text>
-              </View>
-            )}
+              {rate && (
+                <View style={styles.ratingContainer}>
+                  <Star size={12} color="#FFD700" fill="#FFD700" />
+                  <ThemedText style={styles.ratingText}>{rate}</ThemedText>
+                </View>
+              )}
+              {year && (
+                <View style={styles.yearBadge}>
+                  <Text style={styles.badgeText}>{year}</Text>
+                </View>
+              )}
+              {sourceName && (
+                <View style={styles.sourceNameBadge}>
+                  <Text style={styles.badgeText}>{sourceName}</Text>
+                </View>
+              )}
+            </View>
+            <View style={styles.infoContainer}>
+              <ThemedText numberOfLines={1}>{title}</ThemedText>
+              {isContinueWatching && (
+                <View style={styles.infoRow}>
+                  <ThemedText style={styles.continueLabel}>
+                    第{episodeIndex}集 已观看 {Math.round((progress || 0) * 100)}%
+                  </ThemedText>
+                </View>
+              )}
+            </View>
+          </TouchableOpacity>
+        ) : (
+          <Pressable
+            android_ripple={{ color: Colors.dark.link }}
+            onPress={handlePress}
+            onLongPress={handleLongPress}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            style={styles.pressable}
+            // activeOpacity={1}
+            delayLongPress={1000}
+          >
+            <View style={styles.card}>
+              <Image source={{ uri: api.getImageProxyUrl(poster) }} style={styles.poster} />
+              {isFocused && (
+                <View style={styles.overlay}>
+                  {isContinueWatching && (
+                    <View style={styles.continueWatchingBadge}>
+                      <Play size={16} color="#ffffff" fill="#ffffff" />
+                      <ThemedText style={styles.continueWatchingText}>继续观看</ThemedText>
+                    </View>
+                  )}
+                </View>
+              )}
 
-          </View>
-          <View style={styles.infoContainer}>
-            <ThemedText numberOfLines={1}>{title}</ThemedText>
-            {isContinueWatching && (
-              <View style={styles.infoRow}>
-                <ThemedText style={styles.continueLabel}>
-                  第{episodeIndex}集 已观看 {Math.round((progress || 0) * 100)}%
-                </ThemedText>
-              </View>
-            )}
-          </View>
-        </Pressable>
+              {/* 进度条 */}
+              {isContinueWatching && (
+                <View style={styles.progressContainer}>
+                  <View style={[styles.progressBar, { width: `${(progress || 0) * 100}%` }]} />
+                </View>
+              )}
+
+              {rate && (
+                <View style={styles.ratingContainer}>
+                  <Star size={12} color="#FFD700" fill="#FFD700" />
+                  <ThemedText style={styles.ratingText}>{rate}</ThemedText>
+                </View>
+              )}
+              {year && (
+                <View style={styles.yearBadge}>
+                  <Text style={styles.badgeText}>{year}</Text>
+                </View>
+              )}
+              {sourceName && (
+                <View style={styles.sourceNameBadge}>
+                  <Text style={styles.badgeText}>{sourceName}</Text>
+                </View>
+              )}
+            </View>
+            <View style={styles.infoContainer}>
+              <ThemedText numberOfLines={1}>{title}</ThemedText>
+              {isContinueWatching && (
+                <View style={styles.infoRow}>
+                  <ThemedText style={styles.continueLabel}>
+                    第{episodeIndex}集 已观看 {Math.round((progress || 0) * 100)}%
+                  </ThemedText>
+                </View>
+              )}
+            </View>
+          </Pressable>
+
+        )}
 
       </Animated.View>
     );