Initial commit: expo-popcore-app
This commit is contained in:
imeepos
377
app/generateVideo.tsx
Normal file
377
app/generateVideo.tsx
Normal file
@@ -0,0 +1,377 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
Dimensions,
|
||||
Pressable,
|
||||
TextInput,
|
||||
StatusBar as RNStatusBar,
|
||||
Platform,
|
||||
KeyboardAvoidingView,
|
||||
} from 'react-native'
|
||||
import { StatusBar } from 'expo-status-bar'
|
||||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||||
import { Image } from 'expo-image'
|
||||
import { useRouter, useLocalSearchParams } from 'expo-router'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { LinearGradient } from 'expo-linear-gradient'
|
||||
|
||||
import { LeftArrowIcon, UploadIcon, WhitePointsIcon } from '@/components/icon'
|
||||
import UploadReferenceImageDrawer from '@/components/drawer/UploadReferenceImageDrawer'
|
||||
import { StartGeneratingNotification } from '@/components/ui'
|
||||
|
||||
const { height: screenHeight } = Dimensions.get('window')
|
||||
|
||||
interface TemplateData {
|
||||
id: number
|
||||
videoUrl: any
|
||||
thumbnailUrl: any
|
||||
title: string
|
||||
duration: string
|
||||
}
|
||||
|
||||
export default function GenerateVideoScreen() {
|
||||
const { t } = useTranslation()
|
||||
const router = useRouter()
|
||||
const params = useLocalSearchParams()
|
||||
const [description, setDescription] = useState('')
|
||||
const [uploadedImage, setUploadedImage] = useState<any>(null)
|
||||
const [templateData, setTemplateData] = useState<TemplateData | null>(null)
|
||||
const [drawerVisible, setDrawerVisible] = useState(false)
|
||||
const [showNotification, setShowNotification] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (params.template && typeof params.template === 'string') {
|
||||
try {
|
||||
const parsed = JSON.parse(params.template) as TemplateData
|
||||
setTemplateData(parsed)
|
||||
// 使用缩略图作为上传的图片
|
||||
if (parsed.thumbnailUrl) {
|
||||
setUploadedImage(parsed.thumbnailUrl)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to parse template data:', error)
|
||||
}
|
||||
}
|
||||
}, [params.template])
|
||||
|
||||
return (
|
||||
<SafeAreaView
|
||||
style={styles.container}
|
||||
edges={Platform.OS === 'ios' ? ['top'] : ['top', 'bottom']}
|
||||
>
|
||||
<StatusBar style="light" />
|
||||
{Platform.OS === 'android' && (
|
||||
<RNStatusBar
|
||||
barStyle="light-content"
|
||||
backgroundColor="transparent"
|
||||
translucent
|
||||
/>
|
||||
)}
|
||||
<KeyboardAvoidingView
|
||||
style={styles.keyboardAvoidingView}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
||||
keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 0}
|
||||
>
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
showsVerticalScrollIndicator={false}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
>
|
||||
{/* 顶部导航栏 */}
|
||||
<View style={styles.header}>
|
||||
<Pressable
|
||||
style={styles.backButton}
|
||||
onPress={() => router.back()}
|
||||
>
|
||||
<LeftArrowIcon />
|
||||
</Pressable>
|
||||
</View>
|
||||
<View style={styles.content}>
|
||||
{/* 标题区域 */}
|
||||
<View style={styles.titleSection}>
|
||||
<Text style={styles.title}> {templateData?.title}</Text>
|
||||
<Text style={styles.subtitle}>
|
||||
{templateData?.title }
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.uploadContainer}>
|
||||
{uploadedImage ? (
|
||||
<Image
|
||||
source={uploadedImage}
|
||||
style={styles.uploadedImage}
|
||||
contentFit="cover"
|
||||
/>
|
||||
) : (
|
||||
<View style={styles.avatarPlaceholder}>
|
||||
<View style={styles.avatarCircle} />
|
||||
</View>
|
||||
)}
|
||||
<View style={styles.thumbnailContainer}>
|
||||
<Image
|
||||
source={templateData?.thumbnailUrl}
|
||||
style={styles.thumbnail}
|
||||
contentFit="cover"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
{/* 上传区域 */}
|
||||
<Pressable
|
||||
style={styles.uploadReferenceButton}
|
||||
onPress={() => {
|
||||
setDrawerVisible(true)
|
||||
}}
|
||||
>
|
||||
<UploadIcon />
|
||||
<Text style={styles.uploadReferenceText}>{t('generateVideo.uploadReference')}</Text>
|
||||
</Pressable>
|
||||
{/* 描述输入区域 */}
|
||||
<TextInput
|
||||
style={styles.descriptionInput}
|
||||
value={description}
|
||||
onChangeText={setDescription}
|
||||
placeholder={t('generateVideo.descriptionPlaceholder')}
|
||||
placeholderTextColor="#8A8A8A"
|
||||
multiline
|
||||
numberOfLines={4}
|
||||
textAlignVertical="top"
|
||||
/>
|
||||
{/* 底部生成按钮 */}
|
||||
<View style={styles.generateButtonContainer}>
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
setShowNotification(true)
|
||||
// 3秒后自动隐藏通知
|
||||
setTimeout(() => {
|
||||
setShowNotification(false)
|
||||
}, 3000)
|
||||
}}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={['#9966FF', '#FF6699', '#FF9966']}
|
||||
locations={[0.0015, 0.4985, 0.9956]}
|
||||
start={{ x: 1, y: 0 }}
|
||||
end={{ x: 0, y: 0 }}
|
||||
style={styles.generateButton}
|
||||
>
|
||||
<Text style={styles.generateButtonText}>{t('generateVideo.generate')}</Text>
|
||||
<View style={styles.pointsBadge}>
|
||||
<WhitePointsIcon />
|
||||
<Text style={styles.pointsText}>10</Text>
|
||||
</View>
|
||||
</LinearGradient>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
<UploadReferenceImageDrawer
|
||||
visible={drawerVisible}
|
||||
onClose={() => setDrawerVisible(false)}
|
||||
onSelectImage={(imageUri) => {
|
||||
setUploadedImage(imageUri)
|
||||
}}
|
||||
/>
|
||||
{/* 通知组件 */}
|
||||
{showNotification && (
|
||||
<View style={styles.notificationContainer}>
|
||||
<StartGeneratingNotification
|
||||
count={1}
|
||||
visible={showNotification}
|
||||
title={t('generateVideo.startGenerating')}
|
||||
message={t('generateVideo.generatingMessage')}
|
||||
onPress={() => setShowNotification(false)}
|
||||
style={styles.notification}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#090A0B',
|
||||
},
|
||||
keyboardAvoidingView: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
backgroundColor: '#090A0B',
|
||||
},
|
||||
scrollContent: {
|
||||
flexGrow: 1,
|
||||
backgroundColor: '#090A0B',
|
||||
},
|
||||
generateButtonContainer: {
|
||||
marginTop: 'auto',
|
||||
paddingTop: 12,
|
||||
paddingBottom: Platform.select({
|
||||
ios: 10,
|
||||
android: 10,
|
||||
default: 10,
|
||||
}),
|
||||
},
|
||||
content: {
|
||||
paddingHorizontal: 12,
|
||||
paddingTop: 16,
|
||||
backgroundColor: '#1C1E20',
|
||||
borderTopLeftRadius: 20,
|
||||
borderTopRightRadius: 20,
|
||||
gap: 8,
|
||||
minHeight: Platform.select({
|
||||
ios: screenHeight - 100,
|
||||
android: screenHeight - 100,
|
||||
default: screenHeight - 60,
|
||||
}),
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingTop: Platform.select({
|
||||
ios: 17,
|
||||
android: 12,
|
||||
default: 17,
|
||||
}),
|
||||
paddingHorizontal: 12,
|
||||
paddingBottom: 20,
|
||||
},
|
||||
backButton: {
|
||||
width: 22,
|
||||
height: 22,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
titleSection: {
|
||||
paddingHorizontal:4,
|
||||
marginBottom: 11,
|
||||
},
|
||||
title: {
|
||||
color: '#F5F5F5',
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
marginBottom: 5,
|
||||
marginLeft: -4,
|
||||
},
|
||||
subtitle: {
|
||||
color: '#CCCCCC',
|
||||
fontSize: 12,
|
||||
},
|
||||
|
||||
uploadContainer: {
|
||||
height: 140,
|
||||
borderRadius: 12,
|
||||
backgroundColor: '#262A31',
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
thumbnailContainer: {
|
||||
position: 'absolute',
|
||||
left: 8,
|
||||
bottom: 5,
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 8,
|
||||
overflow: 'hidden',
|
||||
borderWidth: 2,
|
||||
borderColor: '#FFFFFF',
|
||||
backgroundColor: '#090A0B',
|
||||
},
|
||||
thumbnail: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
avatarPlaceholder: {
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 28,
|
||||
backgroundColor: '#2F3134',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
avatarCircle: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: '#4A4C4F',
|
||||
},
|
||||
uploadedImage: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
uploadReferenceButton: {
|
||||
height: 110,
|
||||
backgroundColor: '#262A31',
|
||||
borderRadius: 12,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 6,
|
||||
},
|
||||
uploadReferenceText: {
|
||||
color: '#F5F5F5',
|
||||
fontSize: 12,
|
||||
fontWeight: '500',
|
||||
},
|
||||
descriptionInput: {
|
||||
minHeight: 150,
|
||||
backgroundColor: '#262A31',
|
||||
borderRadius: 12,
|
||||
padding: 12,
|
||||
color: '#F5F5F5',
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
...Platform.select({
|
||||
android: {
|
||||
textAlignVertical: 'top',
|
||||
},
|
||||
}),
|
||||
},
|
||||
generateButton: {
|
||||
width: '100%',
|
||||
height: 48,
|
||||
backgroundColor: 'red',
|
||||
borderRadius: 12,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
generateButtonText: {
|
||||
color: '#F5F5F5',
|
||||
fontSize: 16,
|
||||
fontWeight: '500',
|
||||
},
|
||||
pointsBadge: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
pointsText: {
|
||||
color: '#f5f5f5',
|
||||
fontSize: 14,
|
||||
fontWeight: '500',
|
||||
},
|
||||
notificationContainer: {
|
||||
position: 'absolute',
|
||||
top: Platform.select({
|
||||
ios: 60,
|
||||
android: 50,
|
||||
default: 60,
|
||||
}),
|
||||
left: 0,
|
||||
right: 0,
|
||||
paddingHorizontal: 8,
|
||||
zIndex: 1000,
|
||||
},
|
||||
notification: {
|
||||
width: '100%',
|
||||
},
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user