Fix #611

src/components/Timeline/Shared/Attachment/Video.tsx

@@ -8,6 +8,8 @@ import AttachmentAltText from './AltText'
 import { Platform } from 'expo-modules-core'
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { aspectRatio } from './dimensions'
+import { useSelector } from 'react-redux'
+import { getSettingsAutoplayGifv } from '@utils/slices/settingsSlice'
 
 export interface Props {
   total: number
@@ -25,6 +27,7 @@ const AttachmentVideo: React.FC<Props> = ({
   gifv = false
 }) => {
   const { reduceMotionEnabled } = useAccessibility()
+  const autoplayGifv = useSelector(getSettingsAutoplayGifv)
 
   const videoPlayer = useRef<Video>(null)
   const [videoLoading, setVideoLoading] = useState(false)
@@ -60,7 +63,7 @@ const AttachmentVideo: React.FC<Props> = ({
         resizeMode={videoResizeMode}
         {...(gifv
           ? {
-              shouldPlay: reduceMotionEnabled ? false : true,
+              shouldPlay: reduceMotionEnabled || !autoplayGifv ? false : true,
               isMuted: true,
               isLooping: true,
               source: { uri: video.url }
@@ -73,7 +76,7 @@ const AttachmentVideo: React.FC<Props> = ({
         onFullscreenUpdate={event => {
           if (event.fullscreenUpdate === VideoFullscreenUpdate.PLAYER_DID_DISMISS) {
             Platform.OS === 'android' && setVideoResizeMode(ResizeMode.COVER)
-            if (gifv && !reduceMotionEnabled) {
+            if (gifv && !reduceMotionEnabled && autoplayGifv) {
               videoPlayer.current?.playAsync()
             } else {
               videoPlayer.current?.pauseAsync()
@@ -106,7 +109,7 @@ const AttachmentVideo: React.FC<Props> = ({
           video.blurhash ? (
             <Blurhash blurhash={video.blurhash} style={{ width: '100%', height: '100%' }} />
           ) : null
-        ) : !gifv || (gifv && reduceMotionEnabled) ? (
+        ) : !gifv || (gifv && (reduceMotionEnabled || !autoplayGifv)) ? (
           <Button
             round
             overlay
@@ -119,6 +122,21 @@ const AttachmentVideo: React.FC<Props> = ({
         ) : null}
         <AttachmentAltText sensitiveShown={sensitiveShown} text={video.description} />
       </Pressable>
+      {gifv && !autoplayGifv ? (
+        <Button
+          style={{
+            position: 'absolute',
+            left: StyleConstants.Spacing.S,
+            bottom: StyleConstants.Spacing.S
+          }}
+          overlay
+          size='S'
+          type='text'
+          content='GIF'
+          fontBold
+          onPress={() => {}}
+        />
+      ) : null}
     </View>
   )
 }