Paul Coroneos
ff5ad38253
* update eslint config with jsx runtime * leverage jsx transform to remove unnecessary react imports and update eslint config * run yarn lint --fix to remove eslint disables related to react/prop-types that is now disabled
38 lines
979 B
TypeScript
38 lines
979 B
TypeScript
import {clearCache, createVideoThumbnail} from 'react-native-compressor'
|
|
import Animated, {FadeIn} from 'react-native-reanimated'
|
|
import {Image} from 'expo-image'
|
|
import {QueryClient, useQuery} from '@tanstack/react-query'
|
|
|
|
import {atoms as a} from '#/alf'
|
|
|
|
export const RQKEY = 'video-thumbnail'
|
|
|
|
export function clearThumbnailCache(queryClient: QueryClient) {
|
|
clearCache()
|
|
queryClient.resetQueries({queryKey: [RQKEY]})
|
|
}
|
|
|
|
export function VideoTranscodeBackdrop({uri}: {uri: string}) {
|
|
const {data: thumbnail} = useQuery({
|
|
queryKey: [RQKEY, uri],
|
|
queryFn: async () => {
|
|
return await createVideoThumbnail(uri)
|
|
},
|
|
})
|
|
|
|
return (
|
|
thumbnail && (
|
|
<Animated.View style={a.flex_1} entering={FadeIn}>
|
|
<Image
|
|
style={a.flex_1}
|
|
source={thumbnail.path}
|
|
cachePolicy="none"
|
|
accessibilityIgnoresInvertColors
|
|
blurRadius={15}
|
|
contentFit="cover"
|
|
/>
|
|
</Animated.View>
|
|
)
|
|
)
|
|
}
|