diff --git a/src/features/gifPicker/components/GifPickerItem.tsx b/src/features/gifPicker/components/GifPickerItem.tsx index e307e064a3..66a758bd0d 100644 --- a/src/features/gifPicker/components/GifPickerItem.tsx +++ b/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 (