src/view/com/composer/videos/VideoTranscodeBackdrop.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

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>
    )
  )
}