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] 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,