[Drafts] Some bugs (#9833)

* Fix text input not updating

* Fix autofocus

* make placeholder text fainter

* Await invalidation

* Image only drafts

* tweaks to gif presentation

---------

Co-authored-by: Eric Bailey <git@esb.lol>

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>
     </>
   )