mess around with adding a thumbnail

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

@@ -0,0 +1,39 @@
+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>
+  )
+}

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

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export function VideoTranscodeBackdrop({uri}: {uri: string}) {
+  return <video src={uri} style={{flex: 1}} muted />
+}

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

@@ -7,6 +7,7 @@ import {ImagePickerAsset} from 'expo-image-picker'
 import {atoms as a, useTheme} from '#/alf'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
+import {VideoTranscodeBackdrop} from './VideoTranscodeBackdrop'
 
 export function VideoTranscodeProgress({
   input,
@@ -18,16 +19,24 @@ export function VideoTranscodeProgress({
   const t = useTheme()
 
   return (
-    <View style={a.mt_md}>
+    <View
+      style={[
+        a.w_full,
+        a.mt_md,
+        t.atoms.bg_contrast_50,
+        a.rounded_md,
+        a.overflow_hidden,
+        {aspectRatio: Math.max(input.width / input.height, 16 / 9)},
+      ]}>
+      <VideoTranscodeBackdrop uri={input.uri} />
       <View
         style={[
           a.flex_1,
-          t.atoms.bg_contrast_50,
-          a.rounded_md,
           a.align_center,
           a.justify_center,
           a.gap_lg,
-          {aspectRatio: Math.max(input.width / input.height, 16 / 9)},
+          a.absolute,
+          a.inset_0,
         ]}>
         {input.duration ? (
           <ProgressPie
@@ -40,7 +49,7 @@ export function VideoTranscodeProgress({
         ) : (
           <Loader size="xl" />
         )}
-        <Text>Transcoding...</Text>
+        <Text>Compressing...</Text>
       </View>
     </View>
   )