respect autoplay settings in gif dialog

src/features/gifPicker/components/GifPickerItem.tsx

@@ -1,9 +1,12 @@
+import {useState} from 'react'
 import {Image} from 'expo-image'
 import {useLingui} from '@lingui/react/macro'
 
+import {useAutoplayDisabled} from '#/state/preferences'
 import {atoms as a, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
 import {useAnalytics} from '#/analytics'
+import {IS_WEB} from '#/env'
 import {type Gif} from '#/features/gifPicker/types'
 import {gifPreviewUrl} from '#/features/gifPicker/utils'
 
@@ -17,6 +20,8 @@ export function GifPickerItem({
   const ax = useAnalytics()
   const {t: l} = useLingui()
   const t = useTheme()
+  const autoplayDisabled = useAutoplayDisabled()
+  const [isPreviewing, setIsPreviewing] = useState(false)
 
   const [width, height] = gif.media_formats.tinygif.dims
   const aspectRatio = width > 0 && height > 0 ? width / height : 1
@@ -26,6 +31,13 @@ export function GifPickerItem({
     onSelectGif(gif)
   }
 
+  const shouldAnimate = !autoplayDisabled || isPreviewing
+  const sourceUri = gifPreviewUrl(
+    shouldAnimate
+      ? gif.media_formats.tinygif.url
+      : gif.media_formats.preview.url,
+  )
+
   return (
     <Button
       label={l({
@@ -34,6 +46,10 @@ export function GifPickerItem({
           'Accessibility label for an individual GIF tile in the picker grid. The placeholder is the GIF’s title from the provider.',
       })}
       onPress={onPress}
+      onHoverIn={() => setIsPreviewing(true)}
+      onHoverOut={() => setIsPreviewing(false)}
+      onLongPress={() => setIsPreviewing(true)}
+      onPressOut={IS_WEB ? undefined : () => setIsPreviewing(false)}
       style={a.w_full}>
       {({pressed}) => (
         <Image
@@ -47,7 +63,7 @@ export function GifPickerItem({
               transform: [{scale: pressed ? 0.97 : 1}],
             },
           ]}
-          source={{uri: gifPreviewUrl(gif.media_formats.tinygif.url)}}
+          source={{uri: sourceUri}}
           contentFit="cover"
           accessibilityLabel={gif.title}
           accessibilityHint=""