Samuel Newman
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import React from 'react'
|
|
import Animated, {FadeIn} from 'react-native-reanimated'
|
|
import * as FileSystem from 'expo-file-system'
|
|
import {Image} from 'expo-image'
|
|
import {useQuery} from '@tanstack/react-query'
|
|
import {FFmpegKit} from 'ffmpeg-kit-react-native'
|
|
|
|
import {atoms as a} from '#/alf'
|
|
|
|
export function VideoTranscodeBackdrop({uri}: {uri: string}) {
|
|
const {data: thumbnail} = useQuery({
|
|
queryKey: ['thumbnail', uri],
|
|
queryFn: async () => {
|
|
const thumbnailJpg = `${FileSystem.cacheDirectory}/thumbnail.jpg`
|
|
if ((await FileSystem.getInfoAsync(thumbnailJpg)).exists) {
|
|
await FileSystem.deleteAsync(thumbnailJpg)
|
|
}
|
|
await FFmpegKit.execute(
|
|
`-ss 00:00:01.000 -i ${uri} -vf 'scale=320:320:force_original_aspect_ratio=decrease' -frames:v 1 ${thumbnailJpg}`,
|
|
)
|
|
return thumbnailJpg
|
|
},
|
|
})
|
|
|
|
return (
|
|
<Animated.View style={a.flex_1} entering={FadeIn}>
|
|
{thumbnail && (
|
|
<Image
|
|
style={a.flex_1}
|
|
source={thumbnail}
|
|
cachePolicy="none"
|
|
accessibilityIgnoresInvertColors
|
|
blurRadius={15}
|
|
contentFit="cover"
|
|
/>
|
|
)}
|
|
</Animated.View>
|
|
)
|
|
}
|