fix video thumb cleanup (#6431)

src/view/com/composer/Composer.tsx

@@ -130,6 +130,7 @@ import {
   ThreadDraft,
 } from './state/composer'
 import {NO_VIDEO, NoVideoState, processVideo, VideoState} from './state/video'
+import {clearThumbnailCache} from './videos/VideoTranscodeBackdrop'
 
 type CancelRef = {
   onPressCancel: () => void
@@ -249,7 +250,8 @@ export const ComposePost = ({
 
   const onClose = useCallback(() => {
     closeComposer()
-  }, [closeComposer])
+    clearThumbnailCache(queryClient)
+  }, [closeComposer, queryClient])
 
   const insets = useSafeAreaInsets()
   const viewStyles = useMemo(

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

@@ -1,25 +1,26 @@
-import React, {useEffect} from 'react'
+import React from 'react'
 import {clearCache, createVideoThumbnail} from 'react-native-compressor'
 import Animated, {FadeIn} from 'react-native-reanimated'
 import {Image} from 'expo-image'
-import {useQuery} from '@tanstack/react-query'
+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: ['thumbnail', uri],
+    queryKey: [RQKEY, uri],
     queryFn: async () => {
       return await createVideoThumbnail(uri)
     },
   })
 
-  useEffect(() => {
-    return () => {
-      clearCache()
-    }
-  }, [])
-
   return (
     thumbnail && (
       <Animated.View style={a.flex_1} entering={FadeIn}>

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

@@ -1,3 +1,7 @@
+export function clearThumbnailCache() {
+  // no-op
+}
+
 export function VideoTranscodeBackdrop() {
   return null
 }