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] 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>
     );