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

src/view/com/composer/Composer.tsx

@@ -1115,7 +1115,7 @@ export const ComposePost = ({
             onLayout={onScrollViewLayout}>
             {replyTo ? <ComposerReplyTo replyTo={replyTo} /> : undefined}
             {thread.posts.map((post, index) => (
-              <React.Fragment key={post.id}>
+              <React.Fragment key={post.id + (composerState.draftId ?? '')}>
                 <ComposerPost
                   post={post}
                   dispatch={composerDispatch}
@@ -1320,7 +1320,7 @@ let ComposerPost = React.memo(function ComposerPost({
           style={[a.pt_xs]}
           richtext={richtext}
           placeholder={selectTextInputPlaceholder}
-          autoFocus
+          autoFocus={isLastPost}
           webForceMinHeight={forceMinHeight}
           // To avoid overlap with the close button:
           hasRightPadding={isPartOfThread}

src/view/com/composer/drafts/DraftItem.tsx

@@ -95,12 +95,14 @@ export function DraftItem({
                 paddingTop: 20 + a.pt_md.paddingTop,
               },
             ]}>
-            <RichText
-              style={[a.text_md, a.leading_snug, a.pointer_events_none]}
-              value={post.text}
-              enableTags
-              disableMentionFacetValidation
-            />
+            {!!post.text.trim().length && (
+              <RichText
+                style={[a.text_md, a.leading_snug, a.pointer_events_none]}
+                value={post.text}
+                enableTags
+                disableMentionFacetValidation
+              />
+            )}
 
             {!mediaExistsOnOtherDevice && <DraftMediaPreview post={post} />}
 

src/view/com/composer/drafts/state/queries.ts

@@ -184,7 +184,7 @@ export function useSaveDraftMutation() {
         }
       }
 
-      queryClient.invalidateQueries({queryKey: DRAFTS_QUERY_KEY})
+      await queryClient.invalidateQueries({queryKey: DRAFTS_QUERY_KEY})
     },
     onError: error => {
       // Check for draft limit error

src/view/com/composer/text-input/TextInput.tsx

@@ -224,9 +224,9 @@ export function TextInput({
         onPaste={onPaste}
         onSelectionChange={onSelectionChange}
         placeholder={placeholder}
-        placeholderTextColor={t.atoms.text_contrast_medium.color}
+        placeholderTextColor={t.atoms.text_contrast_low.color}
         keyboardAppearance={theme.colorScheme}
-        autoFocus={true}
+        autoFocus={props.autoFocus !== undefined ? props.autoFocus : true}
         allowFontScaling
         multiline
         scrollEnabled={false}

src/view/com/composer/text-input/TextInput.web.tsx

@@ -52,6 +52,7 @@ export function TextInput({
   onPressPublish,
   onNewLink,
   onFocus,
+  autoFocus,
 }: TextInputProps) {
   const {theme: t, fonts} = useAlf()
   const autocomplete = useActorAutocompleteFn()
@@ -244,20 +245,10 @@ export function TextInput({
       content: generateJSON(richTextToHTML(richtext), extensions, {
         preserveWhitespace: 'full',
       }),
-      autofocus: 'end',
+      autofocus: autoFocus ? 'end' : null,
       editable: true,
       injectCSS: true,
       shouldRerenderOnTransaction: false,
-      onCreate({editor: editorProp}) {
-        // HACK
-        // the 'enter' animation sometimes causes autofocus to fail
-        // (see Composer.web.tsx in shell)
-        // so we wait 200ms (the anim is 150ms) and then focus manually
-        // -prf
-        setTimeout(() => {
-          editorProp.chain().focus('end').run()
-        }, 200)
-      },
       onUpdate({editor: editorProp}) {
         const json = editorProp.getJSON()
         const newText = editorJsonToText(json)