452 lines
15 KiB
TypeScript
452 lines
15 KiB
TypeScript
import { FontAwesome, Fontisto, Ionicons } from '@expo/vector-icons'
|
|
import { FlashList } from '@shopify/flash-list'
|
|
import { useRouter } from 'expo-router'
|
|
import React, { memo, useCallback, useEffect, useMemo, useState } from 'react'
|
|
import { ActivityIndicator, Platform, RefreshControl } from 'react-native'
|
|
import { useAnimatedStyle } from 'react-native-reanimated'
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
|
|
|
import { imgPicker } from '@/@share/apis/imgPicker'
|
|
import { Block, Img, Input, Text } from '@/@share/components'
|
|
import BannerSection from '@/components/BannerSection'
|
|
import { useFileUpload } from '@/hooks/actions'
|
|
import { useTemplates } from '@/hooks/data/use-templates'
|
|
import { screenHeight, screenWidth } from '@/utils'
|
|
|
|
const CATEGORY_ID = process.env.EXPO_PUBLIC_GENERATE_GROUP_ID
|
|
|
|
/** =========================
|
|
* Entry page
|
|
* ========================= */
|
|
|
|
export default function Generate() {
|
|
const router = useRouter()
|
|
const env = process.env.EXPO_PUBLIC_ENV
|
|
|
|
const [prompt, setPrompt] = useState(`${env} update`)
|
|
const [selectedTemplateId, setSelectedTemplateId] = useState('')
|
|
const [meImg, setMeImg] = useState('')
|
|
const [friendImg, setFriendImg] = useState('')
|
|
|
|
const templates = useTemplates()
|
|
|
|
const { uploadFile, loading: uploadLoading } = useFileUpload()
|
|
|
|
useEffect(() => {
|
|
templates.execute({ categoryId: CATEGORY_ID, page: 1, limit: 12, sortBy: 'createdAt', sortOrder: 'desc' })
|
|
}, [])
|
|
|
|
const displayTemplates = useMemo(() => {
|
|
const regular = templates.data?.templates || []
|
|
const all = regular
|
|
return all.map(
|
|
(t: any): Template => ({
|
|
id: t.id,
|
|
name: t.title,
|
|
image: t.coverImageUrl,
|
|
type: 'video' as const,
|
|
price: t.price,
|
|
data: t,
|
|
}),
|
|
)
|
|
}, [templates.data])
|
|
|
|
const selectedTemplate = useMemo(() => {
|
|
return displayTemplates.find((t) => t.id === selectedTemplateId)
|
|
}, [displayTemplates, selectedTemplateId])
|
|
|
|
useEffect(() => {
|
|
if (displayTemplates.length > 0 && !selectedTemplateId) {
|
|
setSelectedTemplateId(displayTemplates[0].id)
|
|
}
|
|
}, [displayTemplates, selectedTemplateId])
|
|
|
|
const handleSearch = useCallback(() => {
|
|
router.push('/searchTemplate')
|
|
}, [router])
|
|
|
|
const handleGenerate = useCallback(() => {
|
|
if (!selectedTemplate) return
|
|
setTimeout(() => {}, 2000)
|
|
}, [selectedTemplate])
|
|
|
|
const pickImage = useCallback(async (target: 'me' | 'friend') => {
|
|
const assetList = (await imgPicker({ maxImages: 1, resultType: 'asset' })) as string[]
|
|
|
|
const result = assetList[0] as any
|
|
if (!result) return
|
|
|
|
const uri = result?.uri
|
|
if (target === 'me') setMeImg(uri)
|
|
else setFriendImg(uri)
|
|
|
|
const file = {
|
|
name: result.fileName || `image_${Date.now()}.jpg`,
|
|
type: result.mimeType || 'image/jpeg',
|
|
uri: Platform.OS === 'android' ? result.uri : result.uri.replace('file://', ''),
|
|
}
|
|
const formData = new FormData()
|
|
formData.append('file', file as any)
|
|
|
|
const { url, error } = await uploadFile(file as any)
|
|
// console.log('pickImage---------url:', url, 'error:', error)
|
|
|
|
if (error || !url) {
|
|
return
|
|
}
|
|
if (target === 'me') setMeImg(url)
|
|
else setFriendImg(url)
|
|
}, [])
|
|
|
|
const handleRandom = useCallback(() => {
|
|
if (displayTemplates.length === 0) return
|
|
const random = displayTemplates[Math.floor(Math.random() * displayTemplates.length)]
|
|
setSelectedTemplateId(random.id)
|
|
}, [displayTemplates])
|
|
|
|
const handleSelectTemplate = useCallback((t: Template) => {
|
|
setSelectedTemplateId(t.id)
|
|
}, [])
|
|
|
|
const onPickMe = useCallback(() => pickImage('me'), [pickImage])
|
|
const onPickFriend = useCallback(() => pickImage('friend'), [pickImage])
|
|
|
|
const isLoading = templates.loading
|
|
const isLoadingMore = templates.loadingMore
|
|
const hasError = templates.error
|
|
|
|
const handleRetry = useCallback(() => {
|
|
templates.refetch({ categoryId: CATEGORY_ID, page: 1, limit: 20, sortBy: 'createdAt', sortOrder: 'desc' })
|
|
}, [templates])
|
|
|
|
const [refreshing, setRefreshing] = useState(false)
|
|
const onRefresh = useCallback(async () => {
|
|
setRefreshing(true)
|
|
try {
|
|
await templates.refetch({ categoryId: CATEGORY_ID, page: 1, limit: 20, sortBy: 'createdAt', sortOrder: 'desc' })
|
|
} finally {
|
|
setRefreshing(false)
|
|
}
|
|
}, [templates])
|
|
|
|
const onLoadMore = useCallback(() => {
|
|
templates.loadMore({ categoryId: CATEGORY_ID, limit: 20, sortBy: 'createdAt', sortOrder: 'desc' })
|
|
}, [templates])
|
|
|
|
const itemWidth = useMemo(() => {
|
|
return Math.floor((screenWidth - 24 - 12 * 2) / 3)
|
|
}, [])
|
|
|
|
const renderItem = useCallback(
|
|
({ item }: { item: Template }) => {
|
|
const isSelected = selectedTemplateId === item.id
|
|
return (
|
|
<TemplateItem
|
|
isSelected={isSelected}
|
|
item={item}
|
|
itemWidth={itemWidth}
|
|
onSelect={() => handleSelectTemplate(item)}
|
|
/>
|
|
)
|
|
},
|
|
[selectedTemplateId, itemWidth, handleSelectTemplate],
|
|
)
|
|
|
|
const ListHeader = useMemo(
|
|
() => (
|
|
<Block className="">
|
|
<Header onSearch={handleSearch} />
|
|
<Block className="px-12px relative z-10 flex-1">
|
|
<UploadSection friendImg={friendImg} meImg={meImg} onPickFriend={onPickFriend} onPickMe={onPickMe} />
|
|
<PromptSection prompt={prompt} onChangePrompt={setPrompt} />
|
|
<TemplateSectionHeader onRandom={handleRandom} />
|
|
</Block>
|
|
</Block>
|
|
),
|
|
[handleSearch, friendImg, meImg, onPickFriend, onPickMe, prompt, handleRandom],
|
|
)
|
|
|
|
const ListFooter = useMemo(() => {
|
|
if (isLoadingMore) {
|
|
return (
|
|
<Block className="items-center justify-center py-[20px]">
|
|
<ActivityIndicator color="#FFE500" size="small" />
|
|
</Block>
|
|
)
|
|
}
|
|
return <Block className="h-[200px] w-full" />
|
|
}, [isLoadingMore])
|
|
|
|
const ListEmpty = useMemo(() => {
|
|
if (hasError) {
|
|
return (
|
|
<Block className="items-center justify-center py-[40px]">
|
|
<Text className="mb-[8px] text-[14px] text-white/60">加载失败</Text>
|
|
<Block className="-skew-x-6 border-2 border-white bg-white px-[16px] py-[6px]" onClick={handleRetry}>
|
|
<Text className="text-[12px] font-[900] text-black">重试</Text>
|
|
</Block>
|
|
</Block>
|
|
)
|
|
}
|
|
return (
|
|
<Block className="items-center justify-center py-[40px]">
|
|
<Text className="text-[14px] text-white/60">暂无模板</Text>
|
|
</Block>
|
|
)
|
|
}, [isLoading, hasError, handleRetry])
|
|
|
|
return (
|
|
<Block className="relative flex-1 overflow-visible bg-black">
|
|
<BannerSection />
|
|
|
|
<FlashList
|
|
contentContainerStyle={{ paddingHorizontal: 12, paddingBottom: 200 }}
|
|
data={displayTemplates}
|
|
drawDistance={screenHeight}
|
|
// @ts-ignore
|
|
estimatedItemSize={itemWidth}
|
|
extraData={selectedTemplateId}
|
|
keyExtractor={(item) => item.id}
|
|
ListEmptyComponent={ListEmpty}
|
|
ListFooterComponent={ListFooter}
|
|
ListHeaderComponent={ListHeader}
|
|
numColumns={3}
|
|
renderItem={renderItem}
|
|
showsVerticalScrollIndicator={false}
|
|
refreshControl={
|
|
<RefreshControl colors={['#FFE500']} refreshing={refreshing} tintColor="#fff" onRefresh={onRefresh} />
|
|
}
|
|
onEndReached={onLoadMore}
|
|
onEndReachedThreshold={0.3}
|
|
/>
|
|
|
|
<GenerateSection selectedTemplate={selectedTemplate} onGenerate={handleGenerate} />
|
|
</Block>
|
|
)
|
|
}
|
|
|
|
/** =========================
|
|
* Small memo components
|
|
* ========================= */
|
|
|
|
type HeaderProps = { onSearch: () => void }
|
|
const Header = memo<HeaderProps>(function Header({ onSearch }) {
|
|
return (
|
|
<Block className="z-20 flex-row items-center justify-between py-[12px]">
|
|
<Block className="-skew-x-12 flex-row items-center gap-[8px] border border-white/20 bg-black px-[12px] py-[4px]">
|
|
<Block className="size-[8px] bg-accent" />
|
|
<Text className="font-700 skew-x-12 text-[12px] tracking-wider text-white">创造终端</Text>
|
|
</Block>
|
|
|
|
<Block className="items-center">
|
|
<Text className="font-700 text-[24px] tracking-tighter text-white">GEN_STUDIO</Text>
|
|
</Block>
|
|
|
|
<Block className="-skew-x-12 flex-row items-center gap-[8px] border border-white/20 bg-black px-[12px] py-[4px] opacity-0">
|
|
<Block className="size-[8px] bg-accent" />
|
|
<Text className="font-700 skew-x-12 text-[12px] tracking-wider text-white">创造终端</Text>
|
|
</Block>
|
|
</Block>
|
|
)
|
|
})
|
|
|
|
type UploadCardProps = {
|
|
variant: 'me' | 'friend'
|
|
img: string
|
|
onPick: () => void
|
|
}
|
|
const UploadCard = memo<UploadCardProps>(function UploadCard({ variant, img, onPick }) {
|
|
const isMe = variant === 'me'
|
|
|
|
return (
|
|
<Block className="flex-1 overflow-hidden border-[3px] border-black bg-white" onClick={onPick}>
|
|
{isMe ? (
|
|
<Block className="absolute left-0 top-0 z-10 border-b-2 border-r-2 border-black bg-accent px-[8px] py-[2px]">
|
|
<Text className="text-[10px] font-[900] text-black">我</Text>
|
|
</Block>
|
|
) : (
|
|
<Block className="absolute right-0 top-0 z-10 border-b-2 border-l-2 border-white bg-black px-[8px] py-[2px]">
|
|
<Text className="text-[10px] font-[900] text-white">朋友</Text>
|
|
</Block>
|
|
)}
|
|
|
|
<Block className="size-full items-center justify-center bg-[#F3F4F6]">
|
|
{img ? (
|
|
<Img className="size-full" contentFit="cover" src={img} />
|
|
) : (
|
|
<Block className="items-center">
|
|
{isMe ? (
|
|
<Block className="mb-[4px] size-[40px] items-center justify-center rounded-[20px] border-2 border-black bg-white">
|
|
<Text className="font-700 text-[16px] text-black">+</Text>
|
|
</Block>
|
|
) : (
|
|
<Block className="mb-[4px] size-[40px] items-center justify-center rounded-[20px] bg-black">
|
|
<Text className="font-700 text-[16px] text-white">+</Text>
|
|
</Block>
|
|
)}
|
|
|
|
<Text className="font-700 text-[9px] text-black/50">点击上传</Text>
|
|
</Block>
|
|
)}
|
|
</Block>
|
|
</Block>
|
|
)
|
|
})
|
|
|
|
type UploadSectionProps = {
|
|
meImg: string
|
|
friendImg: string
|
|
onPickMe: () => void
|
|
onPickFriend: () => void
|
|
}
|
|
const UploadSection = memo<UploadSectionProps>(function UploadSection({ meImg, friendImg, onPickMe, onPickFriend }) {
|
|
return (
|
|
<Block className="z-10 flex h-[160px] w-full flex-row gap-x-[12px]">
|
|
<UploadCard img={meImg} variant="me" onPick={onPickMe} />
|
|
<UploadCard img={friendImg} variant="friend" onPick={onPickFriend} />
|
|
</Block>
|
|
)
|
|
})
|
|
|
|
type PromptSectionProps = {
|
|
prompt: string
|
|
onChangePrompt: (v: string) => void
|
|
}
|
|
const PromptSection = memo<PromptSectionProps>(function PromptSection({ prompt, onChangePrompt }) {
|
|
return (
|
|
<Block className="mt-[24px] -skew-x-6">
|
|
<Block className="mb-[4px] flex-row items-center px-[4px]">
|
|
<Block className="border border-white/20 bg-black px-[8px] py-[2px]">
|
|
<Text className="text-[12px] font-[900] text-accent">提示词</Text>
|
|
</Block>
|
|
</Block>
|
|
|
|
<Block className="border-[3px] border-black bg-white p-[4px]">
|
|
<Input
|
|
multiline
|
|
className="font-700 min-h-[50px] w-full bg-transparent p-[8px] text-[14px] leading-[18px] text-black"
|
|
numberOfLines={2}
|
|
placeholder="描述画面细节..."
|
|
value={prompt}
|
|
onChangeText={onChangePrompt}
|
|
/>
|
|
</Block>
|
|
</Block>
|
|
)
|
|
})
|
|
|
|
type Template = {
|
|
id: string
|
|
name: string
|
|
image: string
|
|
type: 'video'
|
|
price?: number
|
|
data?: any
|
|
}
|
|
|
|
type TemplateItemProps = {
|
|
item: Template
|
|
itemWidth: number
|
|
isSelected: boolean
|
|
onSelect: () => void
|
|
}
|
|
const TemplateItem = memo<TemplateItemProps>(function TemplateItem({ item, itemWidth, isSelected, onSelect }) {
|
|
return (
|
|
<Block
|
|
className={`relative overflow-hidden border-2 ${isSelected ? 'border-accent' : 'border-black'}`}
|
|
style={{
|
|
transform: [{ skewX: '-6deg' }],
|
|
height: itemWidth,
|
|
width: itemWidth,
|
|
borderWidth: 2,
|
|
marginBottom: 12,
|
|
borderColor: isSelected ? '#FFE500' : '#000000',
|
|
}}
|
|
onClick={onSelect}
|
|
>
|
|
<Img className="size-full" contentFit="cover" src={item.image} />
|
|
|
|
{isSelected && <Block className="absolute inset-0 bg-black/60" />}
|
|
{isSelected && <Block className="absolute inset-[-5px] border-[3px] border-accent" />}
|
|
|
|
<Block className="absolute inset-x-0 bottom-0 items-center bg-black/90 p-[4px]">
|
|
<Text className={`text-[8px] font-[700] ${isSelected ? 'text-accent' : 'text-white'}`}>{item.name}</Text>
|
|
</Block>
|
|
|
|
{item.type === 'video' && (
|
|
<Block className="rounded-4px absolute right-[4px] top-[4px] rounded-[4px] border border-white/50 bg-black p-[4px]">
|
|
<Fontisto color="white" name="youtube-play" size={8} />
|
|
</Block>
|
|
)}
|
|
</Block>
|
|
)
|
|
})
|
|
|
|
type TemplateSectionHeaderProps = {
|
|
onRandom: () => void
|
|
}
|
|
const TemplateSectionHeader = memo<TemplateSectionHeaderProps>(function TemplateSectionHeader({ onRandom }) {
|
|
const style = useAnimatedStyle(() => ({
|
|
transform: [{ skewX: '-6deg' }],
|
|
backgroundColor: '#FFE500',
|
|
}))
|
|
|
|
return (
|
|
<Block className="my-[16px]">
|
|
<Block className="flex-row items-center justify-between">
|
|
<Block
|
|
animated
|
|
className="flex-row items-center gap-[8px] border-2 border-black bg-accent px-[12px] py-[4px]"
|
|
style={style}
|
|
>
|
|
<FontAwesome color="black" name="film" size={16} />
|
|
<Text className="text-[10px] font-[900] text-black">视频模版</Text>
|
|
</Block>
|
|
|
|
<Block
|
|
className="-skew-x-6 items-center justify-center border-2 border-black bg-white px-[8px] py-[4px]"
|
|
onClick={onRandom}
|
|
>
|
|
<Text className="text-[10px] font-[900] text-black">换一波</Text>
|
|
</Block>
|
|
</Block>
|
|
</Block>
|
|
)
|
|
})
|
|
|
|
type GenerateSectionProps = {
|
|
selectedTemplate: Template | undefined
|
|
onGenerate: () => void
|
|
}
|
|
const GenerateSection = memo<GenerateSectionProps>(function GenerateSection({ selectedTemplate, onGenerate }) {
|
|
const insets = useSafeAreaInsets()
|
|
|
|
if (!selectedTemplate) return null
|
|
|
|
const price = selectedTemplate.price || selectedTemplate.data?.price || 0
|
|
|
|
return (
|
|
<Block className="absolute inset-x-[16px] bottom-[96px] z-40" style={{ paddingBottom: insets.bottom }}>
|
|
<Block style={{ transform: [{ skewX: '-6deg' }] }}>
|
|
<Block
|
|
className={`relative flex-row items-center justify-between border-[3px] border-black bg-accent py-[8px]`}
|
|
style={{ paddingHorizontal: 24 }}
|
|
onClick={onGenerate}
|
|
>
|
|
{/* 左侧文字 */}
|
|
<Block className="z-10 flex-col">
|
|
<Text className={`text-[24px] text-black`}>立即生成</Text>
|
|
<Text className={`text-[10px] font-bold text-black`}>开始创作</Text>
|
|
</Block>
|
|
|
|
{/* 右侧 Goo 标签 */}
|
|
<Block className="z-10 flex-row items-center gap-[8px] border-2 border-black bg-black px-[12px] py-[4px]">
|
|
<Ionicons color="#FFE500" name="flash" size={14} />
|
|
<Text className="text-[14px] font-black text-accent">{price} Goo</Text>
|
|
</Block>
|
|
</Block>
|
|
</Block>
|
|
</Block>
|
|
)
|
|
})
|