tweaks to gif presentation

src/components/Post/Embed/VideoEmbed/GifPresentationControls.tsx

@@ -1,11 +1,16 @@
-import {Pressable, StyleSheet, TouchableOpacity, View} from 'react-native'
+import {
+  ActivityIndicator,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {HITSLOP_20} from '#/lib/constants'
 import {atoms as a, useTheme} from '#/alf'
+import {Button} from '#/components/Button'
 import {Fill} from '#/components/Fill'
-import {Loader} from '#/components/Loader'
 import * as Prompt from '#/components/Prompt'
 import {Text} from '#/components/Typography'
 import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
@@ -26,28 +31,27 @@ export function GifPresentationControls({
 
   return (
     <>
-      <Pressable
-        accessibilityRole="button"
+      <Button
+        label={isPlaying ? _(msg`Pause GIF`) : _(msg`Play GIF`)}
         accessibilityHint={_(msg`Plays or pauses the GIF`)}
-        accessibilityLabel={isPlaying ? _(msg`Pause`) : _(msg`Play`)}
         style={[
           a.absolute,
           a.align_center,
           a.justify_center,
           a.inset_0,
-          a.w_full,
-          a.h_full,
           {zIndex: 2},
         ]}
         onPress={onPress}>
         {isLoading ? (
           <View style={[a.align_center, a.justify_center]}>
-            <Loader size="xl" />
+            <ActivityIndicator size="large" color="white" />
           </View>
         ) : !isPlaying ? (
           <PlayButtonIcon />
-        ) : undefined}
-      </Pressable>
+        ) : (
+          <></>
+        )}
+      </Button>
       {!isPlaying && (
         <Fill
           style={[

src/components/Post/Embed/VideoEmbed/index.tsx

@@ -6,11 +6,12 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
-import {atoms as a} from '#/alf'
+import {atoms as a, platform} from '#/alf'
 import {Button} from '#/components/Button'
 import {useThrottledValue} from '#/components/hooks/useThrottledValue'
 import {ConstrainedImage} from '#/components/images/AutoSizedImage'
 import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
+import {GifPresentationControls} from './GifPresentationControls'
 import {VideoEmbedInnerNative} from './VideoEmbedInner/VideoEmbedInnerNative'
 import * as VideoFallback from './VideoEmbedInner/VideoFallback'
 
@@ -101,33 +102,40 @@ function InnerWrapper({embed}: Props) {
           {
             backgroundColor: 'transparent', // If you don't add `backgroundColor` to the styles here,
             // the play button won't show up on the first render on android 🥴😮‍💨
-            display: showOverlay ? 'flex' : 'none',
           },
+          platform({
+            android: {display: showOverlay ? 'flex' : 'none'},
+            ios: {zIndex: showOverlay ? 1 : -1},
+          }),
         ]}
         cachePolicy="memory-disk" // Preferring memory cache helps to avoid flicker when re-displaying on android
       >
-        {showOverlay && (
-          <Button
-            style={[a.flex_1, a.align_center, a.justify_center]}
-            onPress={() => {
-              ref.current?.togglePlayback()
-            }}
-            label={_(msg`Play video`)}>
-            {showSpinner ? (
-              <View
-                style={[
-                  a.rounded_full,
-                  a.p_xs,
-                  a.align_center,
-                  a.justify_center,
-                ]}>
-                <ActivityIndicator size="large" color="white" />
-              </View>
-            ) : (
-              <PlayButtonIcon />
-            )}
-          </Button>
-        )}
+        {showOverlay &&
+          (embed.presentation === 'gif' ? (
+            <GifPresentationControls
+              isPlaying={false}
+              isLoading={showSpinner}
+              onPress={() => {
+                ref.current?.togglePlayback()
+              }}
+              altText={embed.alt}
+            />
+          ) : (
+            <Button
+              style={[a.flex_1, a.align_center, a.justify_center]}
+              onPress={() => {
+                ref.current?.togglePlayback()
+              }}
+              label={_(msg`Play video`)}>
+              {showSpinner ? (
+                <View style={[a.align_center, a.justify_center]}>
+                  <ActivityIndicator size="large" color="white" />
+                </View>
+              ) : (
+                <PlayButtonIcon />
+              )}
+            </Button>
+          ))}
       </ImageBackground>
     </>
   )