418 lines
13 KiB
TypeScript
418 lines
13 KiB
TypeScript
import React, { useState, useRef, useEffect, useCallback, memo } from 'react'
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
Dimensions,
|
|
FlatList,
|
|
Pressable,
|
|
StatusBar as RNStatusBar,
|
|
Platform,
|
|
Animated,
|
|
} from 'react-native'
|
|
import { StatusBar } from 'expo-status-bar'
|
|
import { SafeAreaView } from 'react-native-safe-area-context'
|
|
import { Image, ImageLoadEventData } from 'expo-image'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { Ionicons } from '@expo/vector-icons'
|
|
|
|
import { SameStyleIcon, WhiteStarIcon } from '@/components/icon'
|
|
import { useRouter } from 'expo-router'
|
|
import { useTemplates, type TemplateDetail } from '@/hooks'
|
|
import { VideoSocialButton } from '@/components/blocks/ui/VideoSocialButton'
|
|
import { useTemplateLike } from '@/hooks/use-template-like'
|
|
import { useTemplateFavorite } from '@/hooks/use-template-favorite'
|
|
import {
|
|
useTemplateSocialStore,
|
|
useTemplateLiked,
|
|
useTemplateFavorited,
|
|
useTemplateLikeCount,
|
|
useTemplateFavoriteCount,
|
|
} from '@/stores/templateSocialStore'
|
|
import LoadingState from '@/components/LoadingState'
|
|
import ErrorState from '@/components/ErrorState'
|
|
import PaginationLoader from '@/components/PaginationLoader'
|
|
|
|
const { width: screenWidth, height: screenHeight } = Dimensions.get('window')
|
|
const TAB_BAR_HEIGHT = 83
|
|
|
|
// 检查 URL 是否为视频格式
|
|
const isVideoUrl = (url: string): boolean => {
|
|
const videoExtensions = ['.mp4', '.webm', '.mov', '.avi', '.mkv', '.m3u8']
|
|
return videoExtensions.some(ext => url.toLowerCase().endsWith(ext))
|
|
}
|
|
|
|
// 统一的布局组件
|
|
const Layout = ({ children }: { children: React.ReactNode }) => (
|
|
<SafeAreaView style={styles.container} edges={[]}>
|
|
<StatusBar style="light" />
|
|
<RNStatusBar barStyle="light-content" />
|
|
{children}
|
|
</SafeAreaView>
|
|
)
|
|
|
|
const EmptyState = () => (
|
|
<Layout>
|
|
<View style={styles.centerContainer}>
|
|
<Text style={styles.messageText}>暂无视频模板</Text>
|
|
</View>
|
|
</Layout>
|
|
)
|
|
|
|
// 计算图片显示尺寸
|
|
const calculateImageSize = (
|
|
imageSize: { width: number; height: number } | null,
|
|
videoHeight: number
|
|
) => {
|
|
if (!imageSize) return { width: screenWidth, height: videoHeight }
|
|
|
|
const imageAspectRatio = imageSize.width / imageSize.height
|
|
const screenAspectRatio = screenWidth / videoHeight
|
|
|
|
return imageAspectRatio > screenAspectRatio
|
|
? { width: screenWidth, height: screenWidth / imageAspectRatio }
|
|
: { width: videoHeight * imageAspectRatio, height: videoHeight }
|
|
}
|
|
|
|
export const VideoItem = memo(({ item, videoHeight }: { item: TemplateDetail; videoHeight: number }) => {
|
|
const { t } = useTranslation()
|
|
const router = useRouter()
|
|
const [imageSize, setImageSize] = useState<{ width: number; height: number } | null>(null)
|
|
|
|
// 双击点赞状态
|
|
const [showHeartAnimation, setShowHeartAnimation] = useState(false)
|
|
const heartScale = useRef(new Animated.Value(0)).current
|
|
const heartOpacity = useRef(new Animated.Value(0)).current
|
|
const lastTap = useRef(0)
|
|
|
|
// 从 store 获取状态
|
|
const liked = useTemplateLiked(item.id) ?? false
|
|
const favorited = useTemplateFavorited(item.id) ?? false
|
|
const likeCount = useTemplateLikeCount(item.id) ?? item.likeCount
|
|
const favoriteCount = useTemplateFavoriteCount(item.id) ?? item.favoriteCount
|
|
|
|
// 使用 hooks 获取操作函数
|
|
const { like: onLike, unlike: onUnlike, loading: likeLoading } = useTemplateLike(item.id, item.likeCount)
|
|
const { favorite: onFavorite, unfavorite: onUnfavorite, loading: favoriteLoading } = useTemplateFavorite(item.id, false, item.favoriteCount)
|
|
|
|
const handleImageLoad = useCallback((event: ImageLoadEventData) => {
|
|
const { source } = event
|
|
if (source?.width && source?.height) {
|
|
setImageSize({ width: source.width, height: source.height })
|
|
}
|
|
}, [])
|
|
|
|
// 双击处理
|
|
const handleDoubleTap = useCallback(() => {
|
|
const now = Date.now()
|
|
if (now - lastTap.current < 300) {
|
|
// 双击检测成功
|
|
lastTap.current = 0
|
|
|
|
// 显示心形动画
|
|
setShowHeartAnimation(true)
|
|
heartScale.setValue(0)
|
|
heartOpacity.setValue(1)
|
|
|
|
Animated.parallel([
|
|
Animated.timing(heartScale, {
|
|
toValue: 1,
|
|
duration: 200,
|
|
useNativeDriver: true,
|
|
}),
|
|
Animated.timing(heartOpacity, {
|
|
toValue: 0,
|
|
duration: 800,
|
|
delay: 200,
|
|
useNativeDriver: true,
|
|
}),
|
|
]).start(() => {
|
|
setShowHeartAnimation(false)
|
|
})
|
|
|
|
// 触发点赞/取消点赞
|
|
if (liked) {
|
|
onUnlike()
|
|
} else {
|
|
onLike()
|
|
}
|
|
} else {
|
|
lastTap.current = now
|
|
}
|
|
}, [liked, onLike, onUnlike, heartScale, heartOpacity])
|
|
|
|
const handlePress = useCallback(() => {
|
|
router.push({
|
|
pathname: '/generateVideo' as any,
|
|
params: { templateId: item.id },
|
|
})
|
|
}, [router, item.id])
|
|
|
|
const imageStyle = calculateImageSize(imageSize, videoHeight)
|
|
|
|
// 优先使用 WebP 格式（支持动画），回退到普通预览图
|
|
const displayUrl = item.webpHighPreviewUrl || item.webpPreviewUrl || item.previewUrl
|
|
|
|
return (
|
|
<View style={[styles.videoContainer, { height: videoHeight }]}>
|
|
<View style={styles.videoWrapper} testID="video-wrapper">
|
|
<Pressable onPress={handleDoubleTap} style={styles.videoPressable}>
|
|
{displayUrl && (
|
|
<Image
|
|
source={{ uri: displayUrl }}
|
|
style={imageStyle}
|
|
contentFit="contain"
|
|
onLoad={handleImageLoad}
|
|
/>
|
|
)}
|
|
<View style={styles.thumbnailContainer}>
|
|
<Image source={{ uri: item.coverImageUrl }} style={styles.thumbnail} contentFit="cover" />
|
|
</View>
|
|
</Pressable>
|
|
|
|
{/* 双击心形动画 */}
|
|
{showHeartAnimation && (
|
|
<Animated.View
|
|
testID="double-tap-heart"
|
|
style={[
|
|
styles.heartAnimation,
|
|
{
|
|
transform: [{ scale: heartScale }],
|
|
opacity: heartOpacity,
|
|
},
|
|
]}
|
|
>
|
|
<Ionicons name="heart" size={80} color="#FF3B30" />
|
|
</Animated.View>
|
|
)}
|
|
</View>
|
|
<Pressable style={styles.actionButtonLeft}>
|
|
<WhiteStarIcon />
|
|
<Text style={styles.actionButtonTextTitle}>{item.title}</Text>
|
|
</Pressable>
|
|
<Pressable style={styles.actionButtonRight} onPress={handlePress}>
|
|
<SameStyleIcon />
|
|
<Text style={styles.actionButtonText}>{t('video.makeSame')}</Text>
|
|
</Pressable>
|
|
{/* 社交按钮 */}
|
|
<VideoSocialButton
|
|
templateId={item.id}
|
|
liked={liked}
|
|
favorited={favorited}
|
|
likeCount={likeCount}
|
|
favoriteCount={favoriteCount}
|
|
loading={likeLoading || favoriteLoading}
|
|
onLike={onLike}
|
|
onUnlike={onUnlike}
|
|
onFavorite={onFavorite}
|
|
onUnfavorite={onUnfavorite}
|
|
testID="video-social-button"
|
|
/>
|
|
</View>
|
|
)
|
|
})
|
|
|
|
export default function VideoScreen() {
|
|
const flatListRef = useRef<FlatList>(null)
|
|
const videoHeight = screenHeight - TAB_BAR_HEIGHT
|
|
const PAGE_SIZE = 10 // 每页10个数据
|
|
const { templates, loading, error, execute, refetch, loadMore, hasMore } = useTemplates({
|
|
sortBy: 'likeCount',
|
|
sortOrder: 'desc',
|
|
page: 1,
|
|
limit: PAGE_SIZE,
|
|
})
|
|
|
|
useEffect(() => {
|
|
execute()
|
|
}, [execute])
|
|
|
|
const handleRefresh = useCallback(async () => {
|
|
await refetch()
|
|
}, [refetch])
|
|
|
|
const handleLoadMore = useCallback(() => {
|
|
console.log('onEndReached triggered', { hasMore, loading, templatesLength: templates.length })
|
|
if (!hasMore || loading) {
|
|
console.log('LoadMore blocked', { hasMore, loading })
|
|
return
|
|
}
|
|
console.log('Loading more...')
|
|
loadMore()
|
|
}, [hasMore, loading, loadMore, templates.length])
|
|
|
|
const renderItem = useCallback(({ item }: { item: TemplateDetail }) => (
|
|
<VideoItem item={item} videoHeight={videoHeight} />
|
|
), [videoHeight])
|
|
|
|
const keyExtractor = useCallback((item: TemplateDetail) => item.id, [])
|
|
|
|
const getItemLayout = useCallback((_: any, index: number) => ({
|
|
length: videoHeight,
|
|
offset: videoHeight * index,
|
|
index,
|
|
}), [videoHeight])
|
|
|
|
// 过滤掉没有可用预览的 item
|
|
const filteredTemplates = templates.filter((item: TemplateDetail) => {
|
|
// 优先使用 WebP 格式（支持动画），回退到普通预览图
|
|
const displayUrl = item.webpHighPreviewUrl || item.webpPreviewUrl || item.previewUrl
|
|
|
|
// 只检查最终要显示的 URL 是否为视频格式
|
|
const isDisplayVideo = displayUrl && isVideoUrl(displayUrl)
|
|
|
|
// 有显示URL且不是视频格式才保留
|
|
const shouldKeep = !!displayUrl && !isDisplayVideo
|
|
|
|
console.log(`[VIDEO PAGE] Filtering ${item.title}:`, {
|
|
webpHighPreviewUrl: item.webpHighPreviewUrl,
|
|
webpPreviewUrl: item.webpPreviewUrl,
|
|
previewUrl: item.previewUrl,
|
|
displayUrl,
|
|
isDisplayVideo,
|
|
shouldKeep,
|
|
})
|
|
|
|
return shouldKeep
|
|
})
|
|
|
|
console.log('Video page state:', {
|
|
templatesLength: templates.length,
|
|
filteredTemplatesLength: filteredTemplates.length,
|
|
loading,
|
|
error,
|
|
hasMore,
|
|
})
|
|
|
|
if (loading && templates.length === 0) {
|
|
return (
|
|
<Layout>
|
|
<LoadingState color="#FFE500" message="加载中..." />
|
|
</Layout>
|
|
)
|
|
}
|
|
|
|
if (error && templates.length === 0) {
|
|
return (
|
|
<Layout>
|
|
<ErrorState message="加载失败，请下拉刷新重试" onRetry={handleRefresh} />
|
|
</Layout>
|
|
)
|
|
}
|
|
|
|
if (!loading && filteredTemplates.length === 0) return <EmptyState />
|
|
|
|
return (
|
|
<Layout>
|
|
<FlatList
|
|
ref={flatListRef}
|
|
data={filteredTemplates}
|
|
renderItem={renderItem}
|
|
keyExtractor={keyExtractor}
|
|
getItemLayout={getItemLayout}
|
|
pagingEnabled
|
|
showsVerticalScrollIndicator={false}
|
|
snapToInterval={videoHeight}
|
|
snapToAlignment="start"
|
|
decelerationRate="fast"
|
|
onEndReached={handleLoadMore}
|
|
onEndReachedThreshold={0.1}
|
|
ListFooterComponent={loading ? <PaginationLoader color="#FFE500" /> : null}
|
|
maxToRenderPerBatch={5}
|
|
windowSize={7}
|
|
initialNumToRender={3}
|
|
/>
|
|
</Layout>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#090A0B',
|
|
},
|
|
centerContainer: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: 12,
|
|
},
|
|
messageText: {
|
|
color: '#FFFFFF',
|
|
fontSize: 14,
|
|
textAlign: 'center',
|
|
},
|
|
videoContainer: {
|
|
width: screenWidth,
|
|
position: 'relative',
|
|
},
|
|
videoWrapper: {
|
|
flex: 1,
|
|
position: 'relative',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
videoPressable: {
|
|
flex: 1,
|
|
width: '100%',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
heartAnimation: {
|
|
position: 'absolute',
|
|
top: '50%',
|
|
left: '50%',
|
|
marginTop: -40,
|
|
marginLeft: -40,
|
|
width: 80,
|
|
height: 80,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
thumbnailContainer: {
|
|
position: 'absolute',
|
|
left: 12,
|
|
bottom: 80,
|
|
width: 56,
|
|
height: 56,
|
|
borderRadius: 8,
|
|
overflow: 'hidden',
|
|
borderWidth: 2,
|
|
borderColor: '#FFFFFF',
|
|
},
|
|
thumbnail: {
|
|
width: '100%',
|
|
height: '100%',
|
|
},
|
|
actionButtonLeft: {
|
|
position: 'absolute',
|
|
left: 12,
|
|
bottom: 16,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 4,
|
|
paddingHorizontal: 6,
|
|
paddingVertical: 8,
|
|
backgroundColor: '#191B1F',
|
|
borderRadius: 8,
|
|
borderWidth: 1,
|
|
borderColor: '#2F3134',
|
|
},
|
|
actionButtonRight: {
|
|
position: 'absolute',
|
|
right: 13,
|
|
bottom: 13,
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
},
|
|
actionButtonTextTitle: {
|
|
color: '#F5F5F5',
|
|
fontSize: 11,
|
|
},
|
|
actionButtonText: {
|
|
color: '#CCCCCC',
|
|
fontSize: 10,
|
|
fontWeight: '500',
|
|
},
|
|
})
|